HTML相关标签的定义与使用（下）
表格标签
表格标签的作用：
表格主要用于显示，展示数据，因为它可以让数据显示的非常整齐，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。
表格的基本语法
<table>
<tr>
<tb>单元格内的文字</tr>
......
</tr>
.........
</table>
- <table></table>是用于定义表格的标签。
- <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
- <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
- 字母td指表格数据(table data)，即数据单元格的内容。
表头单元格标签
一般表头单元格位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签标识HTML表格的表头部分(table head的缩写)。
<table>
<tr>
<th>单元格内的文字</th>
......
</tr>
.........
</table>
表格的属性
| 属性名 | 属性值 | 描述 |
| align | left center right | 规定表格相对周围元素的对齐方式 |
| border | 1或”” | 规定表格单元是否拥有边框，默认为””,表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度。 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>刘德华</td>
<td>45</td>
<td>男</td>
</tr>
<tr>
<td>刘德华</td>
<td>45</td>
<td>男</td>
</tr>
<tr>
<td>刘德华</td>
<td>45</td>
<td>男</td>
</tr>
</table>
表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：<thead>标签表格的头部区域，<tbody>标签表格的主体区域，这样可以更好的分清表格结构。
- <thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。
- <tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
- 以上标签都是放在<table></table>标签中。
合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，这里只要会最简单的合并单元格即可。
- 合并单元格方式
跨行合并：rowspan=”合并单元格的个数”
跨列合并：colspan=”合并单元格的个数”
- 目标单元格
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
- 合并单元格步骤
先确定是跨行还是跨列合并。
找到目标单元格，写上合并公式=合并的单元格数量。比如：<td colspan=”2” ></td>。
删除多余的单元格
列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表，有序列表和自定义列表。
无序列表（重点）
<ul>标签表示HTML页面项目中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
无序列表的基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
.........
</ul>
- 无序列表的各个列表之间没有顺序级别之分，是并列的。
- <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li></li>之间相当于一个容器，可以容纳所有元素。
有序列表（理解）
有序列表几位有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
.........
</ol>
1.<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li></li>之间相当于一个容器，可以容纳所有元素。
自定义列表（重点）
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
其基本语法如下：
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
- <dl></dl>里面只能包含<dt>和<dd>。
- <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
表单标签
在HTML中，一个完整的表单通常由表单域，表单控件（也称为表单元素）和提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素提交给服务器。
<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域。 |
表单控件（表单元素）
<input>表单元素
在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）。
<input type=”属性值” />
<input/>标签为单标签。
Type属性设置不同的属性值用来指定不同的控件类型。
Type属性的属性值及其描述如下：
- name和value是每个表单元素都有的属性值，主要给后台人员使用。
- Name表单元素的名字，要求单选按钮和复选框要有相同的name值。
- checked属性主要针对于单选按钮和复选框，主要作用于一打开页面，就可以默认选中某个表单元素。
- maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。
<form>
<!-- txt 文本框 用户可以在里面输入任何文字 -->
用户名： <input type="text" name="username" value="请输入用户名"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码： <input type="password"> <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选一 -->
性别： 男 <input type="radio" name="sex" > 女 <input type="radio" name="sex"> <br>
</form>
<label>标签
<label>标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，来增加用户的体验。
语法：
<label for=”sex”>男</label>
<input type=”radio” name=”sex” id=”sex” />
<textarea>表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法：
<textarea rows=”3” cols=”20”>
文本内容
</textarea>
- 通过<trxtarea>标签可以轻松的创建多行文本输入框。
- Cols=”每行中的字符数”,rows=”显示行数”,我们在实际开发中不会使用，都是用CSS来改变大小。
简单注册表格案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="600" border="1" align="left" cellspacing="0">
<!-- 第一行 -->
<tr>
<td>性别：</td>
<td>
<label for="nan">男</label> <input type="radio" name="sex" id="nan">
<label for="nv">女</label> <input type="radio" name="sex" id="nv">
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<select>
<option selected="selected">2000</option>
<option>2001</option>
<option>2002</option>
</select>
年
<select>
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
</select>
月
<select>
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
日
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区:</td>
<td><input type="text" value="北京"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况:</td>
<td>
<label for="weihun">未婚</label> <input type="radio" name="jiehun" id="weihun">
<label for="yihun">已婚</label> <input type="radio" name="jiehun" id="yihun">
<label for="lihun">离婚</label> <input type="radio" name="jiehun" id="lihun">
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
</select>
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="love" id="wumen"> <label for="wumen">妩媚的</label>
<input type="checkbox" name="love" id="keai"> <label for="keai">可爱的</label>
<input type="checkbox" name="love" id="yujie"> <label for="yujie">御姐型</label>
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>
自我介绍:
</td>
<td>
<textarea name="jiesao" id="js" cols="30" rows="10">个人简介</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员,立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满十八岁,单身</li>
<li>抱着严谨的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
相关结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
