HTML标签简要概述

HTML标签（下）

一、表格标签

1.使用情况

表格是一种用于展示数据的结构，在数据纷繁复杂的情况下，使用表格将数据进行陈列能够使得人们直观的感受数据，并对数据进行分析。

2.基本语法

<table>
	<tr>
		<td>一个单元格</td>
		...
	</tr>
	...
</table>

（1）<table></table>是用于定义表格的标签。
（2）<tr></tr>是用于定义表格中行的标签。
（3）<td></td>是用于定义表格中单元格的标签。

3.表头单元格标签

一般表头单元格位于表格的第一行或第一列，将其中的数据居中加粗显示。

标签用于表示HTML中的表头。

<table>
	<tr>
		<th>表头</th>
		<th>表头</th>
		<th>表头</th>
	</tr>
	...
</table>

4.表格属性

注意：表格的属性大多用CSS内容进行显示，这里只是做一了解。

属性名	属性值	描述
align	left,center,right	规定表格相对周围属性的位置
border	1或“”	规定表格是否有边框，“” 为默认值，表示没有边框
cellpadding	像素值	规定表格边沿与内容之间的距离，默认值为1像素
cellspacing	像素值	规定单元格与单元格之间的距离，默认值为2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

5.表格结构标签

为了在定义表格时，使冗长的代码结构更加清晰，可以将表格的结构分为表格头部和表格主体两大部分。

在标签中：
（1）<thead></thead>标签来定义表格的头部，<thead>标签中必须有<tr>标签。
（2）<tbody></tbody>标签来定义表格的主体，存放主体数据。

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			...
		</tr>
		...
	</tbody>
</table>

6.合并单元格

（1）合并单元格方式

<1>跨行合并：rowspan=“合并单元格个数”
<2>跨列合并：colspan=“合并单元格个数”

（2）目标单元格

<1>跨行合并：目标单元格为最上侧单元格
<2>跨列合并：目标单元格为最左侧单元格

（3）合并单元格步骤
<1>确定合并方式
<2>找到目标单元格，完成合并
<3>删除多余单元格

<!--跨行合并-->
<table width="500" height="250" border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		 <td rowspan="2"></td>
		 <td></td>
		 <td></td>
	</tr>
	<tr>
 		<!--删除的单元格-->
 		<td></td>
  		<td></td>	
	</tr>
</table>

<!--跨列合并>
<table width="500" height="250" border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td></td>
		<td colspan="2"></td>
		<!--删除的单元格-->
	</tr>
	<tr>
  		<td></td>
  		<td></td>
  		<td></td>
	</tr>
	<tr>
   		<td></td>
    		<td></td>
    		<td></td>
	</tr>
</table>

二、列表标签

1.使用情况

如果说表格是用来展示数据的，那么列表就是用来布局规划的。根据使用的场景不同，列表可以分为三大类：
（1）有序列表
（2）无序列表
（3）自定义列

2.无序列表

<ul></ul>标签表示HTML页面中项目的无序列表，列表像由<li></li>标签定义。

<ul>
	<li>乔丹</li>
	<li>科比</li>
	<li>詹姆斯</li>
	...
</ul>

（1）无序列表的各个列表项之间没有级别之分，相互并列。
（2）<ul></ul>标签之中只能嵌套<li></li>标签，直接在<ul></ul>标签中输入其他标签或文字都是不被允许的。
（3）<li></li>之间相当于一个容器，其中可以存放所有元素。
（4）无序列表会有自己的属性，在实际开发中，我们会用CSS设置。

3.有序列表

<ol></ol>标签在HTML页面中定义项目的有序列表，其中<li></li>标签定义列表项。

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

（1）<ol></ol>标签之中只能嵌套<li></li>标签，直接在<ul></ul>标签中输入其他标签或文字都是不被允许的。
（2）<li></li>之间相当于一个容器，其中可以存放所有元素。
（3）无序列表会有自己的属性，在实际开发中，我们会用CSS设置。

4.自定义列表

使用场景：
自定义列表常用于对属于或名词进行解释或描述，列表项前没有任何符号。

在HTML中，<dl></dl>标签用于定义自定义标签，该标签会与<dt></dt>(定义项目名字)和<dd></dd>(描述项目名字)一起使用。

<dl>
	<dt>名字</dt>
	<dd>名字解释1</dd>
	<dd>名字解释2</dd>
	...
</dl>

（1）<dl></dl>里面只能包含<dt></dt>和<dd></dd>
（2）<dt></dt>与<dd></dd>是并列关系，并不是包含关系。

三、表单标签

1.使用表单的原因

使用表单的作用在于收集用户信息，网页制作工程中，如果需要有与用户交互的功能，就需要由表单来完成。

2.表单的组成

在HTML中，一个完整的表单通常由表单域，表单元素和提示信息三部分组成。

3.表单域

表单域是包含了表单元素和信息提示的区域。
<form></form>标签定义表单域，用于收集用户的信息和数据，并且会把表单域中的信息提交给服务器。

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

属性	属性值	作用
action	url地址	用于指定接受并处理表单信息的服务器url地址
method	get/post	用于设置表单数据的提交方式，选择get/post
name	名字	用于指定表单的名称，来区分一个页面中的多个表单

4.表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或选择的内容控件。

（1）<input />表单元元素

表单元素中的<input />标签用于收集用户信息。
在<input />标签中，有一个type属性，根据不同的type属性值，输入字段有多种表现形式（文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）。

<input type="属性值" />

<1> <input />标签为单标签。
<2> type属性设置不同的属性值用来指定不同的控件类型。

（2）type的属性值及其描述：

性值	描述
bottom	定义可点击按钮（大多情况下，通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览“按钮，但文件上传
hidden	定义隐藏的输入字段
image	定义图形样式的提交按钮
password	定义密码字段，该字段中的文本隐藏显示
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清楚表单中的所有元素
submit	定义提交按钮，提交按钮会把表单中的数据提交到服务器
text	定义单行的输入字段，用户可以在其中输入文本

（3）除type元素之外，标签还有其他元素。

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

<1> name和value是每个表单元素都有的属性值,它们大多是给后台人员使用。
<2>name为表单元素的名字(区别表单元素)，要求单选按钮和复选框要有相同的name值。
<3>每个标签拥有一个value值，并且只能在文本框中能看到效果。（h5新规则结尾的反斜杠可以省略）
<4>checked属性主要针对于单选按钮和复选框，在元素首次加载时被选中。

<form>
	<!--radio,单选按钮，可以实现多选一>
	<!--name时表单元素名字，这里type必须要有相同的name值才能完成多选一操作-->
	性别：男<input type="radio" name="sex" value="男">  女<input type="radio" name="sex" value="女"> <br>
	
	<!--checkbox,复选框，可以实现多选,其中的name值同样必须相同>
	爱好：篮球<input type="checkbox" name="hobby" value="篮球" checked="checked" > 足球 <input type="checkbox" name="hobby" value="足球"> 乒乓球<input type="checkbox" name="hobby" value="乒乓球"> <br>
	
	<!--点击提交按钮，可以把表单元素里的值提交给后台服务器-->
	<input type="submit" value="注册"> <br>
	
	<!--点击重置按钮,删除全部元素的值,重新填写-->
	<input type="reset" value="重新填写"> <br>
	
	<!--普通按钮bottom,可以完成获取验证码之类的功能,需要结合JS使用>
	<input type="bottom" value="获取验证码">

	<!--文本域按钮file,可以上传文件>
	<input type="file" value="上传文件">
</form>

（4）<label>标签
标签为input元素定义标注标签。
用于绑定一个表单元素，当点击内的文本时，浏览器就会自动选择对应的表单元素。

<form>
	<label for="username">用户名：<label>
	<input type="text" id="username">
	<label for="nan">性别：<label>
	<input type="radio" name="sex" id="nan">
	<label for="nv">用户名：<label>
	<input type="radio" name="sex" id="nv">
</form>

（5）<select>标签
在页面中，如果有多个选项让用户选择，但是又想节约空间，就可以使用<select>标签来定义下拉列表。

<form>
	所在地：
	<select>
		<option>选项1</option>
		<option>选项2</option>
		<option>选项3</option>
	</select>
</form>

<1> <select>标签中至少包含一对<option>选项。
<2>在中定义selected=“selected”，表示当前选项默认选中。

（6）textarea标签
当用户输入的内容较多时，就不能使用文本框显示了，这是可以使用标签（用于多行文本输入的控件）。

<form>
	今日总结
	<textarea cols="50" rows="5">在此输入总结</textarea>
</form>

注意：在实际开发中，不会使用cols与rows，用CSS来设定文本框大小。