2. HTML常用标签

2.1 文档类型与声明标签

<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。比如，下面这句就表示当前页面采用的是HTML5来显示页面。

<!DOCTYPE html>

<!DOCTYPE>声明位于文档的最前面，处于<html>标签之前
<DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

lang用来定义当前文档的显示语言。en表示定义语言为英语，zh-CN表示定义语言为中文。其实，对于显示文档来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文，这个属性对浏览器和搜索引擎比较有作用。

<html lang='en' >

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8"> /

charset常用的值有: GB2312、BIG5、GBK和UTF-8，其中，UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

2.2 标题标签 h1- h6

为了使网页更具有语义化,我们经常会在页面中使用到标题标签，HTML中提供了6个等级的网页标签，即h1~h6。h是head的缩写，表示头部、标题。比如:

<h1>我是一级标题</h1>

2.3 段落标签和换行标签

在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。比如：

<p>这是一个段落标签</p>

<br />表示换行标签，用于强制将文本换行，换行标签是一个单标签，不用成对出现。

<p>段落1.。。。。</p>
<br />
<p>段落2.。。。。。</p>

2.4 文本格式化标签

在网页中有时候需要为文字设置粗体、斜体或 $\underline{下划线}$ 等效果，这时候就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。换句话说，格式化标签是为了突出某些字体的重要性的。

语义	标签	说明
加粗	<strong></strong>或者<b></b>	推荐使用<strong>标签，语义更强烈
倾斜	<em></em>或者<i></i>	推荐使用<em>标签
删除线	<del></del>或者<s></s>	推荐使用<del>标签
下划线	<ins></ins>或者<u></u>	推荐使用<ins>标签

<p>测试<strong>加粗</strong></p>
<p>测试<b>加粗</b></p>

<p>测试<em>倾斜</em></p>
<p>测试<i>倾斜</i></p>

<p>测试<del>删除线</del></p>
<p>测试<s>删除线</s></p>

<p>测试<ins>下划线</ins></p>
<p>测试<u>下划线</u></p>

2.5 <div>和<span>标签

<div>和<span>标签是没有语义的，它们就是一个盒子，用来装内容的。<div>是devision的缩写，表示分割、分区。span意为跨度、跨距。一个<div>独占一行。

<div>div标签独占一行</div>
<div>div标签，独占一行<span>span标签，一行可以放多个</span><span>span标签，一行可以放多个</span></div>

2.6 图像标签和路径

在HTML标签中，<img>标签用于定义HTML页面中的图像。<img>是image的缩写，意为图像。src是<img>标签必须带上的属性，它用于指定图像文件的路径和文件名。

图像标签还有其它的一些属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时的替换文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<img src="test.PNG" />

对于图片的src属性，图片的表示可以使用相对路径，也可以使用绝对路径。相对路径，就是以引用文件所在的位置为参考基础，也就是图像相对于html页面所在的位置。绝对路径就是图片相对于根目录所在的路径。

2.7 超链接标签

在html标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。<a>标签有两个属性，一个是href用于指定要跳转的链接的地址，如果没有要跳转的链接可以使用#；一个是target，用于表示跳转时的方式，默认是_self，表示在本页面跳转，也可以设置成_blank，表示在新窗口中打开。

<a href="https://www.baidu.com" target="_blank">百度一下</a>

2.8 锚点链接

点我们的链接，可以快速定位到页面中的某个位置。

在链接文本的href属性中，设置属性为#名字的形式，比如，<a href="#two" >第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，比如，<h3 id="two">第二集介绍</h3>

2.9 注释和特殊字符

html标签中注释是以 结尾。

<!-- 这是一行注释 -->

html中的特殊字符是固定的，用的时候拿来用即可。

3. 表格和列表

3.1 表格标签

表格主要用于显示行列数据,在html标签中，用<table>标签来定义表格，<tr>标签用来定义表格中的行，且<tr>标签必须嵌套在<table>标签中。<td>标签用来定义表格中的单元格，<td>标签必须嵌套在<tr>标签中。

在html标签中，没有列的概念，可以把列理解为单元格，一列就是一个单元格，即<td>标签表示。如果是表头，可以用标签<th>来表示。td表示table data,即表格的数据；th表示table header，即表头单元格。需要注意的是<th>标签中的数据会被加粗且居中显示。

<!--表格的定义方法-->
<table>
<tr>
<td>单元格内文字</td>
...
</tr>
...
</table>

如果想要调整表格的样式，可以使用表格的属性，但是实际使用中更多的是用CSS来调整设置，这些属性这里仅作了解即可。

表格的属性

常用的一些属性如下:

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或则 ""	规定表格单元是否有边框，默认为"",表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

练习:

表格结构标签

在表格标签中，可以将表格标签分为表格头部和表格主体两大部分。<thead>标签表示表格的头部区域，<tbody>表示表格的主体区域。

<thead></thead>：用于定义表格头部，<thead>内部必须拥有<tr>标签，一般是位于第一行。 <tbody></tbody>：用于定义表格的主体，主要用于放数据本体。

3.2 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。合并单元格，可以跨行合并，也可以跨列合并。跨行合并，使用rowspan="合并的单元格的个数"；跨列合并，使用colspan="合并的单元格的个数"。

需要注意的是，如果是跨行，最上侧的单元格为目标单元格，写合并的代码；如果是跨列，最左侧的单元格为目标单元格，写合并代码。

3. 列表标签

表格标签用来显示行列数据，而列表标签可以用来布局。根据使用场景的不同，可以分为无序列表、有序列表和自定义列表。

无序列表

<ul>标签表示html标签中的无序列表，一般会以项目符号的形式呈现，而列表标签使用<li>标签定义。无序列表的基本语法格式如下：

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

需要注意的是，<ul>标签中只能放<li>标签，不能放入其它标签，但是<li>标签相当于一个容器，里面可以嵌套其他标签。

有序列表

在html标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。有序列表的基本语法格式如下：

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

同样的，<ol>标签中只能放<li>标签，但是<li>标签相当于一个容器，可以放其他标签。有序列表带了自己的样式属性，但实际使用中并不常用，更多的是使用CSS来设置。

自定义列表

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

在html标签中，<dl>标签用于定义描述列表，该标签会与<dt>(定义项目与名字)和<dd>(描述每一个项目/名字)一起使用。其基本语法是:

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

同样的，<dl>标签中只能放<dt>和<dd>标签，对于<dt>和<dd>个数没有限制。

4. 表单

在html中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分组成。下面就依次介绍。

4.1 表单域

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

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

4.2 表单控件

input输入表单元素

<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />

type属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮(多数情况下通过js启动脚本)
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮,需要定义相同名字,来实现多选一
reset	定义重置按钮,重置按钮会清除表单中的所有数据
submit	定义提交按钮,提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

除了type属性外，<input>标签还有其他的一些属性，常用的有比如:

属性	属性值	描述
name	由用户定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度
其中，name和value是每个表单元素都有的属性值，主要给后台人员使用。name是表单元素的名字，要求单选按钮和复选框要有相同的name值。

<form>
    用户名: <input type="text" name="username" value="请输入用户名"> <br />
    密码: <input type="password" name="passwd" maxlength=12> <br>
    性别: <input type="radio" name="gender">男 <input type="radio" name="gender" checked="checked">女 <br>
    爱好：<input type="checkbox" name="hobby" checked="checked">吃饭 <input type="checkbox" name="hobby" checked="checked">睡觉 <input type="checkbox" name="hobby">打豆豆<br>
    <input type="button" value="获取短信"><br>
    <input type="file" value="上传文件"><br>
    <input type="submit" value="免费注册">
</form>

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

需要注意的是，<label>标签的for属性应当和相关元素的id相同。

<form>
    <label for="txt">用户名</label>
    <input type="text" id="txt" ><br>
    <input type="radio" id="boy"><label for="boy">男</label><br>
    <input type="radio" id="girl"><label for="girl">女</label>
</form>

select下拉表单元素

在页面中，如果由多个选项供用户选用，想要节约页面空间，可以使用<select>标签控件来实现。语法如下:

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

<select>中至少包含一对<option>，如果想要默认选中某一个，可以使用selected="selected"。

<form>
    籍贯：
    <select>
        <option>云南</option>
        <option>贵州</option>
        <option selected="selected">四川</option>
        <option>陕西</option>
    </select>
</form>

textarea文本域元素当输入内容比较多的时候，比如，留言板、评论等，就可以使用<textarea>标签,该标签可以通过cols限定每行的字符数，可以使用rows来限定行数。实际中，更多的是使用css来控制，并不会使用cols和rows属性。比如:

<form>
    留言板：
    <textarea cols="50", rows="5">
    文本内容xxxx
    </textarea>
</form>

练习

全栈之路01 html标签