Web前端H5之HTML标签总结（二）

1、基本的标签二;
* meta标签的用法;
<meta charset="UTF-8">:防止页面乱码
<meta name="keywords" content="女装、男装">：设置网页关键字，不是给用户用的，对搜索引擎提供帮助
<meta name="discription" content="设置网页描述信息">：设置网页描述信息，不是给用户看的，是给搜索引擎看的
<!-- 网页重定向 -->
<meta http-equiv="refresh" content="3;https://www.baidu.com/">:三秒后重新定位新的域名

* link用法：
<link rel="icon" href="favicon.ico">:设置网页图标
注意;最好将图标放到网页的跟目录下，IE浏览器不支持这种方式，若果把网页放在服务器上，IE浏览器就支持这种方式

* 列表标签
** 无序列表
<ul type="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
注意：* 无序列表中的列表项(li)可以包含任何标签
* 使用场景

** 有序列表
<ol type="I">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

** 自定义列表
<dl>
<dt>标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
注意：* 在dt列表中只能包含行内元素（span,a）
* 在dd列表中可以包含任何元素、标签
* 表格
行：<tr></tr>
列：<td></td>
表格：<table></table>
表格的作用：显示数据、网页布局
属性;
border:设置边框,默认为0,无边框
cellspacing="0"：设置td与td之间的距离，默认值为2
width="400"
cellpadding="10"：设置内容与td左侧之间的距离
align="center":移动标签的位置，默认值left，设置对齐方式,如果给table设置align属性，智能让整个标签居中，内容不会居中，如果给tr或者td设置align属性，可以使内容居中
bgcolor="red"：设置背景颜色
<table border="1" width="400" height="50" cellpadding="10" cellspacing="0" align="center">
<caption><strong>人员信息表</strong></caption>
<tr align="center" bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>体重</th>
<th>职业</th>
<th>性别</th>

</tr>
<tr align="center" bgcolor="green">
<td>赵健</td>
<td>23</td>
<td>56kg</td>
<td>bigdata</td>
<td>male</td>

</tr>
<tr align="center" bgcolor="green">
<td>李四</td>
<td>21</td>
<td>56kg</td>
<td>deeplearning</td>
<td>female</td>

</tr>
</table>
表格中的标签：
表头标签：<th></th>，用法与<td></td>相同
标题标签：<caption>标题</caption>
表格结构：
table[border="1" width="400"cellspacing="0"]>tr*4>td*4直接按tab键，产生表格
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
注意：表格一般就是这种结构，但是一般现在不采用这个了，浏览器可以自动产生<tbody></tbody>结构
合并单元格：
横向合并：<td colspan="2"></td>
纵向合并：<td rowspan="2"></td>
注意：会自动寻找下一行进行合并，所以必须要把相关的<td></td>标签删掉
细线表格的绘画：
<table align="left" cellspacing="1" cellpadding="10" width="400" bgcolor="green">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
* 表单：收集用户的信息
表单组成：
提示信息
表单控件(重点)
表单域
表单域：
<form action="" method=""></form>
action:设置后台处理数据的后台程序
method：提交数据给后台程序的方式
get提交数据:将数据显示在地址栏中，具有数据大小的限制
post提交数据:会通过后台异步提交数据，安全性好
表单控件：
文本输入框：<input type="text" name="" maxlength="6" readonly="readonly" value="">
maxlength：设置最大程度
readonly="readonly":设置控件为只读模式
disabled="disabled":禁止用户输入
value="":设置默认值
name="":控件名称，后台程序通过这个属性获取对应的数据
id="":设置ID编号，也可以通过这个获取
密码输入框：<input type="password" name="pwd">
该控件的属性和文本输入框相同
单选输入按钮：<input type="radio" name="" checked="checked">
name=""：备选值的name属性要设置一致
checked="checked":设置默认选中项
下拉列表：
<select multiple="">
<option value="hb">河北</option>
<option>河南</option>
<option>山东</option>
<option selected="selected">山西</option>
</select>
属性：
selected="selected"：设置默认选中项
multiple="":实现多选效果
其他写法：
<select>
<optgroup label="河北省">
<option>张家口</option>
<option>石家庄</option>
<option>邯郸</option>
<option>张北</option>
</optgroup>
</select>

多选控件：<input type="checkbox" checked="checked" name="">
checked="checked":默认选中项
上传资源控件：<input type="file" name="">
文本域：<textarea></textarea><br>
隐藏控件：<input type="hidden" name="" value="123">
按钮：
提交按钮：<input type="submit" name="submit">
普通按钮：<input type="button" name="" value="取消">：不能提交表单数据
重置按钮：<input type="reset" name="" value="重置">
分组控件和标题：<fieldset><legend></legend></fieldset>