html 标签（下）

表格标签的主要作用

1.表格主要用于显示、展示数据。

表格的基本语法结构

1.<table> </table> 定义表格的标签

2.<tr> </tr> 表格中的行，必须嵌套在<table> </table> 中

3.<td> </td> 表格单元格，必须嵌套在<tr> </tr>中

<table>
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

表格标签

1.表头标签 <th> </th>

<table>
 <tr>
 <th>姓名</th>
 ...
 </tr>
 ...
</table>

2.表格的属性

属性名	属性值	描述
align	left、center、right	表格对齐，靠左靠头居中
border	1或“”	表格边框
cellpadding	像素值	单元格与文字的距离
cellspacing	像素值	单元格与单元格之间的距离
width	像素值或百分比	规定表格的宽度

    可以用table>tr*>td*3快速生成三行三列表格 
    用table>(tr>th*3)+(tr*2>td*3)快速生成第一行是表头的三行三列表格

3.合并单元格

    跨行合并：

<td rowspan="合并单元格的个数">  </td>

    跨列合并：

<td colspan="合并单元格个数">  </td>

    合并单元格三部曲：

        1. 先确定是跨行还是跨列合并。

        2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：。

        3. 删除多余的单元格

列表标签

1.无序列表<ul>（重点）

    无序列表的基本格式：

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>

    1.无序列表的各个列表项之间没有顺序等级之分，关系是并列的。

    2.<ul> </ul>中只能有<li> </li>，不能有其他的标签。

    3.<li> </li>中可以放任何的标签。

    4.无序列表会带有自己的样式属性，但在实际的使用的时候，我们会使用css来设置。

2.有序列表<ol>（理解）

    有序列表的基本格式：

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

    1.<ol> </ol>中只能有<li>标签，和无序列表是一样的。

    2.<li> </li>之间相当于一个容器，可以容纳所有的标签。

    3.有序列表和无序列表一样，都带有自己的样式属性，在实际使用的时候，会用css来设置。

3.自定义列表<dl>（重点）

    自定义标签的基本格式：

<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>

    1.<dl> </dl>中只能包含<dt>和<dd>。

    2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

表单标签

1.使用表单的目的就是为了收集用户信息。

2.在html中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3个部分组成。

3.表单域（<form>标签）

   在html中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素提交给服务器。

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器的URL地址
method	get/post	用于设置表单数据的提交方式，其值取为ge或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

4.表单控件（表单元素）：input 输入表单元素

                                           select 下拉表单元素

                                           textarea 文本域元素

5.input 输入表单元素

    <input> 标签用于收集用户信息。其中包含一个type属性极为重要。格式为：

<input type="属性值">

    <input>为单标签。

    type属性：

属性	描述
button	按钮（实现后期一大堆功能，能够启动JavaScript脚本）
checkbox	复选框
file	上传文件
hidden	隐藏输入字段
image	图像形式提交按钮
radio	单元按钮
reset	重置按钮
submit	提交按钮
password	密码框
text	定义单行输入字段，用户可在其中输入文本，默认宽度为20字符

    <input>标签的其他属性：

属性	属性值	描述
name	用户自定义	定义input元素名称
value	用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时对应的被选中
maxlength	正整数	规定输入的字符最大长度

    1.name表单元素的名字，要求单元按钮和复选框有相同的name值。

    2.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。

    3.maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用。

6.<label>标签

    <label>标签为 input 元素定义标注（标签）。

    <label>标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上，用来增加用户体验。

    语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

    核心：<label>标签的for 属性应当与相关元素id属性相同。

7.<select> 表单元素（下拉菜单）

    在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< >标签控件定义下拉列表。

    语法：

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

    1.<select>中至少包含一对<option>。

    2.在中定义 selected =“ selected " 时，当前项即为默认选中项。

8.<textarea> 表单元素（留言板）

    语法：

<textarea rows="3" cols="20">
 文本内容
</textarea>

    1.通过 标签可以轻松地创建多行文本输入框。

    2.cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

查阅文档

1.W3C : http://www.w3school.com.cn/

2.MDN: https://developer.mozilla.org/zh-CN/