接着：HTML5学习笔记（一）
三 HTML标签（下）
1 表格标签
1.1表格的主要作用
显示、展示数据，不是用来布局的。
1.2 表格的基本语法
1<table> </table>是用于定义表格的标签
2 <tr> </tr>标签用于表格中的行，必须嵌套在<table> </table>标签中
3 <td> </td>标签用于一行中的单元格，必须嵌套在<tr></tr>标签中。
4 td的含义是table data，即数据单元格的内容。
5 单元格里面可以放任何元素，文字，链接，图片等都可以，放在td里即可。
<table>
<tr> <td>姓名 </td> <td>性别</td> <td>年龄</td> </tr>
<tr> <td>刘德华 </td> <td>男</td> <td>56</td> </tr>
</table>
效果：（当然实际上是无边框的）
| 姓名 | 性别 | 年龄 |
| 刘德华 | 男 | 56 |
1.3 表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里的内容会加粗和居中显示。
表头单元格标签<th> </th>
如
<table>
<tr> <th>姓名 </th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>刘德华 </td> <td>男</td> <td>56</td> </tr>
</table>
效果就是姓名、性别、年龄这一行作为表头，会加粗和居中显示。
1.4 表格属性
表格属性我们实际开发不常用，后面通过css来设置。
这些属性要写在table标签里面去
如<table align="center"> </table>表格会显示在页面中间。
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式。 |
| border | 1或" " | 规定表格单元是否拥有边框，默认为"",表示没有边框。 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白距离，默认为1像素。（单元格内部文字与边框之间的距离） |
| cellspacing | 像素值 | 规定单元格之间的距离，默认为2像素。（单元格与单元格之间的距离） |
| width | 像素值或百分比 | 规定表格的宽度 |
| height | 像素值或百分比 | 规定表格的高度 |
1.5 表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用<thead>标签表示表格的头部区域、<tbody>标签表示表格的主体区域。这样表格的结构更清晰。
<thead>与<th>不一样，<thead>是表格头部区域，比如表头一整行都是，<th>只是表头单元格，一行中的一个单元格。
<thead>中必须包含<th>
1.6 合并单元格
1 合并单元格方式
（1）跨行合并： rowspan="合并单元格的个数"
（2）跨列合并： colspan="合并单元格的个数"
2 目标单元格
（1）跨行合并： 最上行单元格为目标单元格，合并代码写在这个单元格中
（2）跨列合并： 最左列单元格为目标单元格，合并代码写在这个单元格中
3 合并单元格的步骤
（1）确定合并单元格方式
（2）找到目标单元格，写上合并方式=合并的单元格数量。如<td colspan="2"> </td>
（3）删除多余的单元格。
如
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
合并第二列和第三列：
<table>
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
</table>
2 列表标签
表格是用来显示数据的，列表是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
列表分为三类：有序列表，无序列表和自定义列表。
2.1 无序列表
<ul>标签表示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项用<li>标签定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
....
</ul>
注意:1 无序列表中各个列表项无顺序级别之分，是并列的
2 <ul></ul>里只能嵌套<li>标签，其他任何标签或者文字都是不允许放入<ul></ul>标签中的。
3 <li></li>中放什么都可以，相当于一个容器，任何元素都可以放入。
4 无序列表有自己的样式属性（列表项前有个小点），但在实际使用中，我们可以用CSS设置。
2.2 有序列表
有序列表即有排列顺序的列表
<ol>标签表示HTML页面中项目的有序列表，列表项用<li>标签定义,会自动在列表项前面加数字，1，2，3，4.....顺序排列。
<ol>
<li>列表项1</li>
<li>列表项2</li>
....
</ol>
注意:1 有序列表中各个列表项有顺序级别之分，
2 <ol></ol>只能嵌套<li>标签，其他任何标签或者文字都是不允许放入<ol></ol>标签中的。
3 <li></li>中放什么都可以，相当于一个容器，任何元素都可以放入。
4 有序列表有自己的样式属性（列表项前有顺序数字标号），但在实际使用中，我们可以用CSS设置。
2.3 自定义列表
自定义列表的使用场景：
自定义列表常用于对术语或名词进行解释和描述，自定义列表项前没有任何项目符号。
如：
基本语法：
<dl>用于描述自定义列表，该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字一起使用)
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dl>
如上面的小米示例就是写成这样：
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dl>
注意：1 <dl></dl>里面只能包含<dt>和<dd>,<dt>和<dd>里可以放任何标签
2 <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
3 <dt>和<dd>是兄弟关系。
3 表单标签
3.1表单的作用
使用表单目的就是收集用户信息。
在我们的网页中，需要与用户进行交互，收集用户资料，此时就需要表单。
3.2 表单的组成
在HTML中，一个完成的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
3.3 表单域
表单域是一个包含表单元素的区域。
在HTML标签中,<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素提交给服务器。
<form action="url地址" method=“提交方式" name=" 表单域名称">
各种表单元素控件
</form>
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，get或者post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域。 |
get提交：会把数据使用键值对的方式，显示在地址栏
post提交：不会显示在地址栏。在HTTP请求体里。
3.4 表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
3.4.1<input />表单元素
用input定义表单项。
表单提交多个表单项，键值对会以&符连接。
1 type 属性
单标签<input />,用于收集用户信息，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）
<input type="属性值" />
type属性的属性值及其描述如下：
| 属性值 | 描述 |
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像样式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中你输入的所有数据，还原到表单初始默认状态。 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。 |
例：
<form>
用户名:<input type="text" /> <!--文本框-->
密码：<input type="password" />
性别：男<input type="radio" name="sex"/> 女<input type="radio" name="sex"/> <!--radio单选按钮，可以实现多选一,要有相同的name才能实现多选一，不然就相当于不同的表单元素，不能多选一，还是每个都能选中-->
爱好：吃饭<input type="checkbox" /> 睡觉<input type="checkbox" /> 打豆豆<input type="checkbox" /> <!--复选框，多选-->
</form>
按钮组：
<input type="submit"> 不写value的话，默认按钮上就是"提交"两个字，可以通过设置value值修改。点击了提交按钮，可以把表单域form里面的表单元素里的值提交给服务器。
<input type="reset">默认按钮的字是"重置“,可以通过value修改。重置按钮还原表单元素的初始默认状态。
<input type="button" value="获取短信验证码"> 普通按钮。
<input type="file"> 使用场景：上传文件。
2 其他属性
| 属性 | 属性值 | 描述 |
| name | 由用户自定义 | 定义input元素的名称（可以区别不同的表单元素） |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
（1） name 和value是每个表单元素都有的属性值，主要给后台人员使用。文本框的value可以看到，其他的看不到，主要给后台人员使用。如用户名:<input type="text" name="name" value="请输入用户名"/> 这时文本框就有默认值显示：请输入用户名。
（2）name是表单元素的名字，要求同一组单选按钮和复选框有相同的name。
（3）单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮。
如：性别：男<input type="radio" name="sex"/> 女<input type="radio" name="sex" checked="checked"/>
这样打开页面时候，单选按钮默认女是选中的。
3.4.2<label>标签
<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法：
<label for="nan">男</label>
<input type="radio" id="nan" name="sex" />
这样点击“男”也可以选中单选按钮，不用点那个小小的圆形单选按钮。
核心：label标签的for属性要和相关input元素的id属性值要对应一样。
3.4.3 <select>下拉表单元素
使用场景，在页面中，如果有多个选项让用户选择，并且想要节约页面控件时，我们可以用<select>双标签控件定义下拉列表。
语法
<select>
<option>选项1</option>
<option>选项2</option>
......
</select>
注意：1 select里至少包含一对<option>
2 在<option>中定义selected="selected",可以默认选中一个选项。<option selected="selected">选中</option>
3.4.3 <textarea>文本域表单元素
使用场景，当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签
语法:
<textarea>
文本域里显示的默认值
</textarea>
cols=“每行中的字符数" rows="行数" 可以用来设置文本域大小，但实际开发都是用CSS来做的。
如：
<form>
今日反馈:
<textarea cols="50" rows="5">这个反馈留言是textarea来做的 </textarea>
</form>
4 内联框架 iframe
iframe相当于在页面上又开了一个小浏览器窗口
属性：src="资源地址", 这个资源会在这个小浏览器窗口显示
width
height
<iframe src="img.jpg "> </iframe>
