HTML(下)

1.表格

1.1 表格标签

HTML的表格标签(<table>、<tr>、<th>、<td>)用于创建表格来组织和显示数据。
<table>是表格的容器标签，所有表格内容都包含在这个标签内，定义了整个表格的结构；
<tr>是表格行标签，定义表格中的一行，一个<table>可以包含多个 <tr> ；
<th>是表格表头单元格标签，通常用于显示表格列的标题，会居中且以粗体显示；
<td>是表格数据单元格标签，包含表格中的数据项。
使用案例代码如下所示：

    <table><!--表格的大方框--><tr><!--表格的行--><th>姓名</th><!--单元格--><th>性别</th><th>年龄</th></tr><tr><td>yzh</td><td>男</td><td>22</td></tr></table>

1.2 表格属性

align属性：设置水平对齐方式，包括center、left、right；
valign属性：设置垂直对齐方式，包括 top、middle、bottom；
border属性：规定表格是否有边框，"1"表有边框，""表无边框；
cellpadding属性：规定单元格内文字与单元格边框间的空白大小，默认为1像素；
cellspacing属性：规定单元格之间的空白大小，默认为2像素；
width、height属性：规定表格的宽和高。

1.3 表格结构标签

<thead>标签：表格的头部区域
<tbody>标签：表格的主体区域
使用如下：

<table align="center" border="1" cellpadding="0" cellspacing="0"><!--表格的大方框--><thead><tr><!--表格的行--><th>姓名</th><!--单元格--><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>yzh</td><td>男</td><td>22</td></tr></tbody>
</table>

1.4 合并单元格

①跨行合并：rowspan="合并单元格的个数"，在最上侧单元格处编写合并代码；
②跨列合并：colspan="合并单元格的个数"，在最左侧单元格处编写合并代码；
如下代码将表格的第二行的前两列合并：

<table align="center" border="1" cellpadding="0" cellspacing="0"><!--表格的大方框--><thead><tr><!--表格的行--><th>姓名</th><!--单元格--><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td colspan="2">yzh</td><!-- <td>男</td> --><td>22</td></tr></tbody>
</table>

2.列表

列表标签用于创建列表，HTML提供了三种类型的列表：无序列表、有序列表和自定义列表。

2.1 无序列表

无序列表使用<ul>标签创建，表示列表项之间没有特定的顺序或等级关系；
列表项使用<li>标签创建，每个<li>标签代表列表中的一个项目。
注意：<ul>标签下只能包含<li>标签，而<li>标签下可以包含其他标签。

<ul>                     <!--ul标签下只能包含li标签--><li>列表项</li>     <!--li标签下可以包含其他标签--><li>列表项</li><li>列表项</li>
</ul>

2.2 有序列表

有序列表使用 <ol> 标签创建，表示列表项之间存在特定的顺序或等级关系；
列表项仍然使用 <li> 标签创建，每个<li>标签代表列表中的一个项目。

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>

 2.3 自定义列表

定义列表使用<dl>标签创建，用于描述术语及其定义；
<dt>标签表示定义列表中的术语，<dd>标签表示术语的描述。
注意：<dl>标签内只能包含<dt>标签和<dd>标签。

<dl><dt>列表项1</dt><dd>描述1.1</dd><dd>描述1.2</dd><dt>列表项2</dt><dd>描述2.1</dd><dd>描述2.2</dd>
</dl>

3.表单

HTML中表单是网页中用于收集用户输入数据的关键元素，一个完整的表单通常由表单域、表单控件和提示信息三个部分组成。

3.1 表单域

表单域是一个包含表单元素的区域。
使用<form>标签定义表单域，<form>会把其范围内的表单元素提交给url路径指向的服务器。

<form action="url地址" method="提交方式" name="该表单名字"><!--表单控件-->
</form>

3.2 表单控件(表单元素)

①<input>标签：输入表单元素，单标签元素，使用方式：<input type="属性值" name="UserName" value="返回值" checked="..." maxlength="10"/>
Ⅰ常见type属性值：text、password、button、file、radio(单选)、checkbox(多选)、submit(submit按钮点击后就会将该表单域下的表单元素全部提交给后台服务器)、reset(重置按钮)。
Ⅱ name属性：表示表单名，单选按钮radio和多选按钮checkbox都要有相同的name值！单选按钮需要使用相同的name值来构成一个选择组，确保只能选择一个选项；而多选按钮使用相同的name值来表示一组相关的选项，允许用户选择零个或多个选项，当表单提交时，所有被选中的复选框的值（value 属性）都会被发送到服务器。
Ⅲ value属性：规定input元素的值，主要是为了返回给后台使用。
Ⅳ checked属性：单选按钮和多选按钮可以设置checked属性，当第一次打开该页面时默认选择某(些)项。
Ⅴ maxlength属性：规定用户可输入的最大字符数。

②<label>标签：为表单控件创建描述性标签，从而提升用户体验和表单的可访问性。
<label for="...">..</label> 其中for属性值设置为欲定位光标位置的控件的id值，使用如下：

<form>性别：<label for="nan">男</label> <input type="radio" name="sex" id="nan" value="男"><label for="nv">女</label> <input type="radio" name="sex" id="nv" value="女"><br>
</form>

③<select>标签：下拉表单元素，使用<select>和<option>定义下拉列表。

<select><option>选项1</option><option selected="selected">选项2</option>
</select>

④<textarea>标签：文本域元素

<textarea cols="20" rows="5"> </textarea>