华为云前端一阶段HTML入门（常用标签表格标签表单）

HTML入门

1.1结构标签

div是块标签，包裹一定区域中的元素，会独自占一行，可以嵌套使用形成父子级关系以及兄弟级关系；

span是会在一行中不断加入（内联标签），但当数量过多时也会换行；

<body><div>华为产品<div>华为手机</div><div>华为电脑</div></div><div>div2</div><div>div3</div><span>华为产品<span>华为笔记本</span><span>华为手表</span></span>
</body>

1.2标题标签

h标签（标题标签）只有h1到h6，当输入h7时与div等大小。
h1为标题中权重最大的，一个文档应该只有一个，不加任何样式的话就会占满一行。

1.3段落标签

p标签（段落标签）使用时将需要显示的文字夹在起始标签和终止标签之间即可；
在代码中输入多恨空格时浏览器只会渲染出一个，需要连续使用多个时要用&nsbp；代表一个空格；
同时当字数增多时，它会自动填充满一行后折行（也就是换到下一行开头继续）并且随着浏览器宽度而不断自适应的改变。

<body><div>华为手机发布会</div><h1>我是大娃</h1><h2>我是二娃</h2><h3>我是三娃</h3><p>华为手机&nbsp&nbsp&nbsp&nbsp真不戳;</p><p> 华为电脑</p><p>华为笔记本</p>
</body>

1.4链接标签

a标签（链接标签）href和target两个属性非常重要
href属性后面接连接到的网址；
没写target属性的话默认值为_self即自己本身这个页面跳转到点击链接的那个页面，如果设置属性为target="_blank"的话原界面保留新开一个界面跳转到点击链接的网址；
当有多个链接标签需要新建页面跳转时可以在head中设置base属性在其中将target设置为“_blank”这样全局默认就是_blank属性了，如果需要再单独设置某个标签直接在那个标签后面写上target=_self即可；

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><base target="_blank">
</head>
<body><a href="http://www.baidu.com" >百度官网链接</a><a href="http://www.huawei.com" >华为官网链接</a><a href="http://www.qq.com" >qq官网链接</a><a href="javascript:void(0)">空连接</a><a href="javascript:；">空连接二号</a>
</body>

1.5图片标签

有相对路径绝对路径的表示方法和链接标签中基本相同；图片标签使用时必须要规范的加上alt属性防止图片打不开时可以显示提示的相关文字；

<body><img src="kk.jpg" alt="这是一张coder的照片" width="200" height="300" title="一个小男孩"/><!-- 相对路径         如果图片无法显示则显示文字      设置宽度高度        鼠标停留时显示-->
</body>

1.6列表标签

ul表示无须列表 ol为有列表 dl为自定义列表

<body><!-- ul为无序列表  type控制内容前 circle square null--><ul type="square"><li>皇室战争</li><li>部落冲突</li><li>海岛奇兵</li></ul><!-- ol为有序列表 type 代表前面的序号可以1.2.3.也可以a.b.c.--><ol type="a"><li>暗黑破坏神1</li><li>暗黑破坏神2</li><li>暗黑破坏神3</li></ol><!-- dl为自定义列表   dt控制标题  dd控制标题下内容--><dl><dt>辽宁省</dt><dd>沈阳市</dd><dd>大连市</dd><dd>鞍山市</dd><dt>河北省</dt><dd>石家庄市</dd><dd>保定市</dd></dl>
</body>

1.7表格标签

table为表格标签它有border属性为多少像素的边框
其中caption是表格的标题
th为表头标签经常放在thead部分中功能为第一行加粗居中等格式设计当内容放在thead时不会因为整体高度改变而变动。
tr为表格新建一行经常放在tbody中 td为这新建一行中第一二三四…列的文本
col控制一列其中 col bgcolor控制一列的背景颜色

<body><table border="5" width="500" height="500"><colgroup><!-- 控制一列的颜色 --><col bgcolor="red"><col bgcolor="blue"><col bgcolor="yellow"></colgroup><thead> <!-- 表头部分 th设置表头格式 在thead中不受高度影响 thead只能有一个--><tr><th>型号</th><th>颜色</th><th>价格</th></tr></thead>    <tbody> <!-- tbody可以有好几个 td表示列 rowspan属性表示跨列 colspan表示跨行 --><tr><td>p40</td><td>白</td><td>5000</td></tr><tr><td>nova</td><td>黑</td><td>3000</td></tr></tbody></table>
</body>

<body><table border="1" cellspacing="0" cellpadding="10"><tr><td colspan="2">1.1</td><td>1.3</td><td>1.4</td><td>1.5</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr><tr>    <!-- colspan合并列 align使合并内容居中center左对齐left还是右对齐left --><td colspan="4" align="center">3.1</td><td>3.5</td></tr><tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><!-- rowspan合并行 valign使合并内容居中上对齐top还是下对齐bottom --><td rowspan="2" valign="bottom">4.5</td></tr><tr><td>5.1</td><td>5.2</td><td>5.3</td><td>5.4</td></tr></table>
</body>

1.8表单标签

form表单

<body><!-- 初识form表单  action属性后面是接受填写信息的地址 method表明通过什么方式发送请求--><form action="https://www.baidu.com" method="get"><div>你最喜欢的华为手机型号是？</div><div><input type="text" value=""/></div><!-- 用div块结构实现将按钮放在下一行  按钮中有不一样的属性 text为可以填写一行内容的文本框  submit为提交按钮 reset为重置按钮单选按钮 radio 多选按钮checkbox  文件上传file--><div><input type="submit" value="提交"/><input type="reset" value="重置"/></div></form>
</body>

<body><form action="https://www.baidu.com" method="get"><div>购买手机</div><!-- key value传递 name设定的就是key 用户输入的就是value --><div>用户名<input type="text" name="user"></div><div>密码:<input type="password" name="pwd"></div><div>手机：<input type="radio"name="photo" id="p" value="P40"/><labal for="p">P40手机</labal> <input type="radio" name="photo" value="M30">Mate30手机</div><div>配件: <input type="checkbox" name="part" value="1">无线耳机 <input type="checkbox" name="part" value="2">充电宝</div><div> <input type="submit" value="提交"></div>   </form>

select下拉选择框

<body><!-- SELECTED表示被选中 下拉列表中默认显示那个multiple 进行多选--><div>请选择手机型号</div><select name="phone" id="s1" size="2" multiple><option value="001">P40手机</option><option value="002" selected>P40 PRO</option><option value="003">P40 PRO+</option></select>
</body>

文本框标签

<body><textarea name="text" id="t1" cols="30" rows="10"> </textarea>
</body>