HTML（下）

（一）表格标签

1.表格的作用

用于显示、展示数据，让数据更加规整，可读性更好，把繁琐的数据表现得很有条理，表格不是用来布局页面的，而是用来展示数据的

2.表格标签基本语法

table——table 表格

tr——table row 表格的行

td——table data 单元格的内容

<table>			<!--用于定义表格-->
    <tr>		<!--用于定义表格中的行-->
    	<td>单元格内的文字</td>	<!--用于定义表格中的单元格-->
        ...
    </tr>
    ...
</table>

3.表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗、居中显示

th——table head 表头单元格

<table>
	<tr>
    	<th>表头单元格内的文字</th><!--用于定义表头单元格-->
        ...
    </tr>
    ...
</table>

4.表格属性

属性名 属性值 描述

align left、center、right 规定表格相对周围元素的对齐方式，表格位置

border 1或"" 边框默认为""，无边框

cellpadding 像素值 规定单元边框与文字之间的空白，默认1像素

cellspacing 像素值 规定单元格与单元格之间的空白，默认2像素

width 像素值或百分比 规定表格宽度

height 像素值或百分比 规定表格高度

这些标签要写的

里面去

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="400">
    ...
</table>

5.表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

thead——table head 表格头部区域

tbody——table body 表格主体

<thead><!--表格头部区域-->
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
    </tr>
</thead>
<tbody><!--表格主体区域-->
	<tr>
        <th>1</th>
        <th>鬼吹灯</th>
        <th>上升</th>
    </tr>
    ...
</tbody>

PS:

1.

用于定义表格的头部，内部必须包含标签，一般位于第一行

2.用于定义表格的主体，主要用于放数据本体

3.这两个标签都是放到

标签里面的

6.合并单元格

合并单元格的方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

目标单元格（写合并代码）：

跨行合并：最上侧单元格为目标单元格，写合并代码

跨列合并：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

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

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

3.删除多余的单元格

（二）列表标签

表格是用来展示数据的，列表标签是用来布局页面的

列表最大特点就是整齐、整洁、有序，它作为布局会更加方便和自由

分类：无序列表、有序列表、自定义列表

1.无序列表

ul——unordered list 无序列表

li——list items 列表项

CSS去除Li前面的项目符号：list-style:none;

<ul><!--表示无序列表，一般会以项目符号呈现列表项-->
    <li>列表项1</li><!--列表项使用<li>标签定义-->
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

PS:

1.无序列表的各个列表项之间没有顺序之分，是并列的

2.在 ul 标签中只能嵌套 li 标签

3.在 li 标签中可以嵌套其他任何标签

4.无序列表会带有自己的样式属性，在实际使用时，会用CSS来设置

2.有序列表

ol——ordered list 有序列表

li——list items 列表项

<ol><!--表示有序列表，列表项会按照一定顺序排列-->
    <li>列表项1</li><!--列表项使用<li>标签定义-->
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

PS:

1.在 ol 标签中只能嵌套 li 标签

2.在 li 标签中可以嵌套其他任何标签

3.有序列表会带有自己的样式属性，在实际使用时，会用CSS来设置

3.自定义列表

常用于对术语名词进行解释和描述，定义列表的列表项没有任何项目符号

dl——define list 定义列表

<dl>	<!--定义描述列表-->
    <dt>名词1</dt>	<!--定义项目/名字-->
    <dd>名词1解释1</dd>		<!--定义项目解释-->
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
</dl>

PS:

1.在 dl 标签中只能嵌套 dt 标签和dd标签

2.dt标签和dd标签数量上没有限制

3.dt标签和dd标签是并列关系

（三）表单标签

1.表单作用

收集用户信息，在网页中，与用户进行交互，收集用户信息，此时就需要表单

2.表单的组成

一个完整的表单由表单域、表单元素和提示信息组成

3.表单域

表单域是一个包含表单元素的区域，实现用户信息的收集和传递，会把表单域内的表单元素信息提交给服务器

属性 属性值 作用

action url地址 指定接收并处理表单数据的服务器程序的url地址

method get/post 设置表单数据的提交方式

name 名称 指定表单的名称，以区分一个页面中的多个表单区域

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

4.表单元素

表单元素就是允许用户在表单中输入或者选择的内容控件

1）input表单元素

input输入的意思，在表单元素中用于收集用户信息

type属性设置不同的属性值来指定不同的控件类型

属性值 描述

button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）

checkbox 定义复选框

file 定义输入字段和“浏览”按钮，供上传文件

hidden 定义隐藏的输入字段

image 定义图像形式的提交按钮

password 定义密码字段，该字段的字符被掩码

radio 定义单选按钮

reset 定义重置按钮，重置按钮会清除表单中的所有数据

submit 定义提交按钮，提交按钮会把表单数据发送给服务器

text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

<input type="属性值" />

<form>
    <!-- text文本框 -->
    用户名：<input type="text"/><br />
    <!-- password密码框 看不见内容 -->
    密码：<input type="password" /><br />
    <!-- radio单选按钮 多选一-->
    性别：男<input type="radio"/> 女<input type="radio"/><br />
    <!-- checkbook复选按钮 多选-->
    爱好：书法<input type="checkbox"/> 吉他<input type="checkbox"/> 音乐<input type="checkbox"/><br />
    <!-- submit提交按钮 提交按钮会把表单数据发送给服务器 -->
    <input type="submit" value="免费注册"/><br />
    <!-- reset重置按钮 重置按钮会清除表单中的所有数据 -->
    <input type="reset" value="重新填写"/><br />
    <!-- button按钮 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） -->
    <input type="button" value="获取验证码"/><br /><br />
    <!-- file 定义输入字段和“浏览”按钮，供上传文件 -->
    上传文件：<input type="file" value="浏览"/><br /><br />

</form>

除了type属性外input还有其他属性

属性 属性值 描述

name 由用户定义 定义input元素的名称

value 由用户定义 规定input元素的值

checked checked 规定此input元素首次加载时应当被选中

maxlength 正整数 规定输入字段中的字符量的最大长度

<form>
    <!-- name是表单元素的名字，用来区别表单元素，性别单选按钮必须有相同的名字，才能实现多选一 -->
    性别：男<input type="radio" name="gender" value="男"/> 女<input type="radio" name="gender" value="女"/><br />
    <!--value 规定input元素的值-->
    用户名：<input type="text" name="user name" value="请输入用户名"/><br />
    <!-- 在单选按钮和复选框中可以设置checked，规定此input元素首次加载时应当被选中 -->
    性别：男<input type="radio" name="gender" value="男" checked/> 女<input type="radio" name="gender" value="女"/><br />
    <!-- maxlength规定输入字段中的字符量的最大长度 -->
    身份号：<input type="text" name="user name" maxlength="18"/><br />
</form>

PS:

1.name value 是每个单元表格元素都有的属性值，主要给后台人员使用

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

2）label标签

label——标注，label标签为input元素定义标注（标签）

作用：绑定表单元素，当点击文本时,浏览器就会自动聚焦光标或转到在表单元素上，增加用户体验

<form>
    <label for="username">用户名：</label>
    <input type="text" name="user name" id="username" value="请输入用户名"/><br />
    <label for="gender1">男</label>
    <input type="radio" name="gender" id="gender1" />
    <label for="gender2">女</label>
    <input type="radio" name="gender" id="gender2" />
</form>

PS：

1.label中的for=“ ”的值要与input中的id属性相一致

2.提示文本要在label标签对的中间

3）select下拉表单元素

select——选择，如果有许多选项让用户来选择，并且想要节约页面空间，用select标签定义下拉列表

<form action="">
    籍贯：
    <select name="籍贯" id="籍贯">
        <option value="山东">山东</option>
        <option value="北京">北京</option>
        <option value="天津">天津</option>
        <option value="贵州">贵州</option>
        <!-- option中定义selected=“selected”时，当前为默认选中项 -->
        <option value="云南" selected>云南</option>
    </select>
</form>

PS：

1.select至少包含一对option

2.option中定义select=“select”时，当前为默认选中项

4）text area文本域元素

当用户输入内容比较多的情况下，此时可以使用textarea标签，常见于留言板、评论等

在表单元素中，textarea是可以定义多行文本输入的控件

<form>
    今日反馈：
    <textarea rows="5" cols="20">请输入您的反馈</textarea>
</form>

（四）查阅文档

1.百度 http://www.baidu.com

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

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