HTML4进阶

摘要：本文主要介绍了HTML常见的元素及其特点。

1 文本元素

和排版元素相比，文本元素侧重词汇和短语并且一般是行内元素，排版元素侧重文章和段落并且一般是块级元素，而且文本元素通常写在排版元素中。

常用的元素：

标签名	说明	单双
em	表示需要注意的内容	双标签
strong	表示十分重要的内容，语气比`em`元素更重	双标签

不太常用的元素：

标签名	说明	单双
cite	表示作品标题	双标签
dfn	表示特殊术语或者专属名词	双标签
del	表示想要删除的文本	双标签
ins	表示想要插入的文本	双标签
sub	表示下标	双标签
sup	表示上标	双标签
code	表示代码	双标签
i	表示具有特定含义的文本，多用于呈现字体图标	双标签

省略了一些语义不强、较少使用、能被替代的元素，可以在官方网站上查看全部元素。

2 图片元素

2.1 基本结构

图片元素用于定义图片资源的位置，以及图片的一些属性，属于行内元素。

常用的元素：

标签名	说明	单双
img	表示图片	单标签

常用属性：

属性名	作用	取值
src	图片路径	路径
alt	图片描述	描述
width	图片宽度，默认使用图片本身的宽度	长度值
height	图片高度，默认使用图片本身的高度	长度值

2.2 路径

图片路径也称为图片地址，分为相对路径和绝对路径，以及网络地址：

相对路径：从当前页面文件所在的位置开始，能够访问图片资源的路径。
绝对路径：从当前页面文件所在的磁盘的根目录开始，能够访问图片资源的路径。
网络地址：相对路径和绝对路径都是本地图片，如果是网络图片则需要使用图片的网络地址进行访问。

如果是本地图片，需要注意图片被移动会导致路径失效，如果是网络图片，需要注意在开启防盗链后会导致图片不可访问。

2.3 图片格式

2.3.1 jpg

说明：扩展名为jpg和jpeg，有损压缩，丢弃了肉眼观察不到的细节。

特点：占用空间较小，不支持透明背景，不支持动态图片。

场景：对图片质量没有极高的要求，适合绝大多数场景。

2.3.2 png

说明：扩展名为png，无损压缩，支持图片高质量的保存。

特点：占用空间较大，支持透明背景，不支持动态图片。

场景：对图片质量有一定的要求，或者需要使用有透明背景的图片。

2.3.3 bmp

说明：扩展名为bmp，不进行压缩，最大程度保留了图片细节。

特点：占用空间极大，不支持透明背景，不支持动态图片。

场景：对图片细节要求极高的场景，页面中很少使用。

2.3.4 gif

说明：扩展名为gif，有损压缩，仅支持256种颜色。

特点：占用空间较小，支持颜色较少，支持透明背景，支持动态图片。

场景：页面中的动态图片。

2.3.5 webp

说明：扩展名为webp，同时支持无损压缩和有损压缩，谷歌推出的图片格式，专用于处理页面图片。

特点：占用空间较小，支持透明背景，支持动态图片，需要注意兼容性问题。

场景：页面中的图片，在和jpg在同等大小的情况下能保留更多细节。

2.3.6 base64

说明：将图片转换得到的一串特殊的文本，支持通过浏览器打开，但某些看图应用无法打开。

特点：字符串会特别长，并且会占用和图片大小相同的空间。

场景：一些较小的图片，或者需要同页面一起加载的图片。

3 超链接

3.1 基本结构

用于从当前页面进行跳转，超链接本身属于行内元素。

常用的元素：

标签名	说明	单双
a	表示超链接	双标签

常用属性：

属性名	作用	取值
href	指定要跳转到的具体目标	目标地址
target	控制跳转时如何打开页面	_self：在当前标签页打开，即替换当前页面的地址为目标地址并访问 _blank：在新建标签页打开，当前标签页保留

注意：

虽然a元素是行内元素，但是可以包裹a元素之外的其他元素，包括块级元素和行内元素。

3.2 跳转方式

3.2.1 跳转到页面

使用href属性指定页面，那么点击超链接会跳转到指定的页面。

使用target属性指定打开目标页面的方式。

3.2.2 跳转到文件

使用href属性指定文件，那么点击超链接会跳转到指定的文件。

如果浏览器能打开指定的文件就在浏览器展示，比如图片文件，如果浏览器不能打开指定的文件就引导用户下载，比如压缩文件。

3.2.3 跳转到锚点

使用href属性指定锚点，那么点击超链接会跳转到指定的锚点。

锚点是#符号和在其他元素中id属性值拼接得到的。示例：

html

1
2
3

<a href="#test">点击前往测试内容</a>
<!-- 其他内容 -->
<p id="test">测试内容</p>

也可以跳转到页面顶部。示例：

html

1	<a href="#top">点击前往页面顶部</a>

如果href属性空白，页面上不会有超链接样式，可以使用#符号占位，点击会跳转到当前页。示例：

html

1	<a href="#">占位链接</a>

如果不想在点击后触发跳转的操作，或者在开发阶段不确定要跳转到哪个页面，可以将href属性设为javascript:;实现。示例：

html

1	<a href="javascript:;">占位链接</a>

3.2.4 跳转到应用

使用href属性指定应用，那么点击超链接会跳转到指定的应用，需要应用支持，比如邮箱等。

示例：

html

1	<a href="mailto:momashanhe@163.com">点击发送邮件</a>

4 列表

4.1 有序列表

有顺序或侧重顺序的列表，属于块级元素。

常用的元素：

标签名	说明	单双
ol	表示有序列表的范围	双标签
li	表示列表的一列	双标签

示例：

html

<p>要把大象放冰箱总共分几步</p>
<ol>
  <li>把冰箱门打开</li>
  <li>把大象放进去</li>
  <li>把冰箱门关上</li>
</ol>

4.2 无序列表

无顺序或不侧重顺序的列表，属于块级元素。

常用的元素：

标签名	说明	单双
ul	表示无序列表的范围	双标签
li	表示列表的一列	双标签

示例：

html

<p>我想去的几个城市</p>
<ul>
  <li>成都</li>
  <li>上海</li>
  <li>西安</li>
  <li>武汉</li>
</ul>

4.3 嵌套列表

有序列表和无序列表支持嵌套列表。

示例：

html

<p>我想去的几个城市</p>
<ul>
  <li>成都</li>
  <li>
    <span>上海</span>
    <ul>
      <li>外滩</li>
      <li>杜莎夫人蜡像馆</li>
      <li><a href="https://www.opg.cn/">东方明珠</a></li>
      <li>迪士尼乐园</li>
    </ul>
  </li>
  <li>西安</li>
  <li>武汉</li>
</ul>

4.4 自定义列表

包含术语名称以及术语描述的列表，属于块级元素。

常用的元素：

标签名	说明	单双
dl	表示自定义列表的范围	双标签
dt	表示术语名称	双标签
dd	表示术语描述	双标签

示例：

html

<p>如何高效的学习</p>
<dl>
  <dt>做好笔记</dt>
  <dd>笔记是我们以后复习的一个抓手</dd>
  <dd>笔记可以是电子版，也可以是纸质版</dd>
  <dt>多加练习</dt>
  <dd>只有敲出来的代码，才是自己的</dd>
  <dt>别怕出错</dt>
  <dd>错很正常，改正后并记住，就是经验</dd>
</dl>

5 表格

5.1 基本结构

一个完整的表格由四部分组成：表格标题、表格头部、表格主体、表格脚注。

表格的某些部分可以省略，各个部分都属于块级元素。

表格结构如图：
001-表格结构

常用的元素：

标签名	说明	单双
table	表示表格的范围	双标签
caption	表示表格的标题行	双标签
thead	表示表格头部的范围	双标签
tbody	表示表格主体的范围	双标签
tfoot	表示表格脚注的范围	双标签
tr	表示表格一行的范围，可以用在`thead`元素、`tbody`元素、`tfoot`元素	双标签
th	表示表格头部一格的范围，可以用在`thead`元素	双标签
td	表示表格主体一格的范围，可以用在`tbody`元素、`tfoot`元素	双标签

表格详细结构如图：
002-表格头部
003-表格主体
004-表格脚注

示例：

html

<table>
  <!-- 表格标题 -->
  <caption>学生信息</caption>
  <!-- 表格头部 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>民族</th>
      <th>政治面貌</th>
    </tr>
  </thead>
  <!-- 表格主体 -->
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>18</td>
      <td>汉族</td>
      <td>团员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>20</td>
      <td>满族</td>
      <td>群众</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>20</td>
      <td>回族</td>
      <td>党员</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>女</td>
      <td>21</td>
      <td>壮族</td>
      <td>团员</td>
    </tr>
  </tbody>
  <!-- 表格脚注 -->
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>共计：4人</td>
    </tr>
  </tfoot>
</table>

5.2 常用属性

table元素常用属性：

属性名	作用	取值
width	设置表格宽度	长度值
height	设置表格最小高度，表格最终高度可能比设置的值大	长度值
border	设置表格边框宽度	长度值
cellspacing	设置单元格之间的间距	长度值

thead元素常用属性：

属性名	作用	取值
height	设置表格头部高度	长度值
align	设置单元格的水平对齐方式	left：左边对齐 right：右边对齐 center：中间对齐
valign	设置单元格的垂直对齐方式	top：顶部对齐 middle：中间对齐 bottom：底部对齐

tbody元素常用属性：
与thead元素常用的属性相同。

tfoot元素常用属性：
与thead元素常用的属性相同。

tr元素常用属性：
与thead元素常用的属性相同。

th元素常用属性：

属性名	作用	取值
width	设置单元格的宽度，同列所有单元格全都受影响	长度值
height	设置单元格的高度，同行所有单元格全都受影响	长度值
align	设置单元格的水平对齐方式	left：左边对齐 right：右边对齐 center：中间对齐
valign	设置单元格的垂直对齐方式	top：顶部对齐 middle：中间对齐 bottom：底部对齐
rowspan	指定要跨的行数	行数
colspan	指定要跨的列数	列数

td元素常用属性：
与th元素常用的属性相同。

5.3 跨行跨列

常用属性：

属性名	作用	取值
rowspan	指定要跨的行数	行数
colspan	指定要跨的列数	列数

使用属性实现跨行跨列：

示例：

html

<table>
  <tbody>
    <tr>
      <td>1-1</td>
      <td>2-1</td>
    </tr>
    <tr>
      <td>1-2</td>
      <td>2-2</td>
    </tr>
  </tbody>
</table>

示例：

html

<table>
  <tbody>
    <tr>
      <td colspan="2" align="center">1-1</td>
      <!-- <td>2-1</td> -->
    </tr>
    <tr>
      <td>1-2</td>
      <td>2-2</td>
    </tr>
  </tbody>
</table>

示例：

html

<table>
  <tbody>
    <tr>
      <td rowspan="2" valign="middle">1-1</td>
      <td>2-1</td>
    </tr>
    <tr>
      <!-- <td>1-2</td> -->
      <td>2-2</td>
    </tr>
  </tbody>
</table>

6 表单

6.1 基本元素

表单是一个包含交互的区域，用于收集用户提供的数据，整个表单属于块级元素，表单中的控件一般属于行内元素。

常用的元素：

标签名	说明	单双
form	表示表单的范围	双标签
input	表示表单中的控件，存在多种控件类型	单标签
button	表示表单中的按钮，点击可以触发处理表单数据的操作	双标签
textarea	表示文本域，可以存储多行文本	双标签
select	表示下拉框的范围，点击展示下拉框选项	双标签
option	表示下拉框的选项，用在`select`元素	双标签
label	和表单控件关联，点击元素可使表单控件获得焦点	双标签
fieldset	表示表单元素分组的范围	双标签
legend	表示表单元素分组的标题，用在`fieldset`元素	双标签

form元素常用属性：

属性名	作用	取值
action	表单提交的地址，需要和后端沟通确定	地址
target	表单提交后，页面的打开方式	_self：在当前标签页打开，即替换当前页面的地址为目标地址并访问 _blank：在新建标签页打开，当前标签页保留
method	表单提交的请求方式	get：默认值，表单数据会附加在URL中发送，一般用于不敏感信息，如分页等 post：表单数据会包含在表单体内发送，用于提交敏感数据，如用户名与密码等

input元素常用属性：

属性名	作用	取值
type	设置控件的类型	text：默认值，普通文本 input：文本输入框 password：密码输入框 radio：单选框 checkbox：多选框 hidden：隐藏域 submit：提交按钮 reset：重置按钮 button：普通按钮
name	设置控件的数据名称，需要和后端沟通确定	名称
value	设置控件的数据，不同的表单控件有不同的获取方式	数据
disabled	设置控件不可用	无

button元素常用属性：

属性名	作用	取值
disabled	设置按钮不可用	无
type	设置按钮的类型，不同的类型对表单数据的处理方式不同	submit：默认值，提交表单 reset：重置表单 button：普通按钮

textarea元素常用属性：

属性名	作用	取值
name	设置文本域的数据名称	名称
rows	设置文本域默认显示的行数，影响文本域的高度	行数
cols	设置文本域默认显示的列数，影响文本域的宽度	列数
disabled	设置文本域不可用	无

select元素常用属性：

属性名	作用	取值
name	设置下拉框的数据名称	名称
disabled	设置下拉框不可用	无

option元素常用属性：

属性名	作用	取值
value	设置下拉选项的数据，在省略的情况下，会使用下拉选项的元素内容作为数据	数据
selected	设置下拉选项在加载后默认选中	无
disabled	设置下拉选项不可用	无

label元素常用属性：

属性名	作用	取值
for	用于指定要匹配的表单控件	表单控件的`id`属性值

6.2 常用控件

6.2.1 文本输入框

最常用的表单控件，支持输入一行文本。

示例：

html

1	请输入文本：<input type="text">

常用属性：

属性名	作用	取值
name	设置输入框的数据名称	名称
value	设置输入框的默认值	默认值
maxlength	设置输入框可输入的最大长度	最大长度

6.2.2 密码输入框

和文本输入框类似，但是输入的内容会显示为*号，避免密码泄露。

示例：

html

1	请输入密码：<input type="password">

常用属性：

属性名	作用	取值
name	设置输入框的数据名称	名称
value	设置输入框的默认值，作为密码时无意义，可以省略	默认值
maxlength	设置输入框可输入的最大长度	最大长度

6.2.3 单选框

支持单选的控件。

示例：

html

1
2
3

请选择性别：
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性：

属性名	作用	取值
name	设置单选框的数据名称，同组控件要保持一致	名称
value	设置单选框提交的数据值，会提交被选中的控件的`value`属性	数据值
checked	设置单选框在加载后默认选中	无

6.2.4 多选框

多选框也称为复选框，支持多选的控件。

示例：

html

请选择爱好：
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性：

属性名	作用	取值
name	设置多选框的数据名称，同组控件要保持一致	名称
value	设置多选框提交的数据值，会提交被选中的控件的`value`属性，多个值会组成数组	数据值
checked	设置多选框在加载后默认选中	无

6.2.5 隐藏域

不会让用户看到的特殊控件，可以在检查后看到，通常用于提交特殊数据。

示例：

html

1	<input type="hidden" name="tag" value="100">

常用属性：

属性名	作用	取值
name	设置隐藏域的数据名称	名称
value	设置隐藏域提交的数据值，通常由操作自动存储，不需要用户处理	数据值

6.2.6 提交按钮

用于将表单数据提交到指定地址。

使用input元素。示例：

html

1	<input type="submit" value="提交表单">

也可以使用button元素。示例：

html

1	<button type="submit">提交表单</button>

6.2.7 重置按钮

用于将表单数据清空，恢复到页面加载后的状态。

使用input元素。示例：

html

1	<input type="reset" value="重置表单">

也可以使用button元素。示例：

html

1	<button type="reset">重置表单</button>

6.2.8 普通按钮

用于触发特定操作。

使用input元素。示例：

html

1	<input type="button" value="普通按钮">

也可以使用button元素。示例：

html

1	<button type="button">普通按钮</button>

6.2.9 文本域

用于存储多行文本。

示例：

html

1	请输入多行文本：<textarea name="msg" rows="3" cols="3">我是文本域</textarea>

使用textarea元素时不需要使用type属性，其他和input元素的文本输入框一致。

6.2.10 下拉框

用于选择下拉选项。

示例：

html

请选择省份：
<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>

使用option元素时如果没有设置value属性，会将元素内容作为数据提交。

6.2.11 标记

和表单控件关联，点击元素可使表单控件获得焦点，需要配合表单控件使用。

示例：

html

1	<label for="password">请输入密码：</label><input id="password" type="password">

6.2.12 分组

用于对表单元素进行分组，和其他控件不同，分组元素属于块级元素。

示例：

html

<fieldset>
  <legend>主要信息</legend>
  <label for="username">账户：</label>
  <input id="username" type="text" name="username" maxlength="10">
  <br>
  <label for="password">密码：</label>
  <input id="password" type="password" name="password" maxlength="6">
  <br>
  性别：
  <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
</fieldset>

7 框架

用于在当前页面加载其他内容，属于行内元素。

在HTML中，将和框架类似的元素称为可替换元素，即这种元素展示的内容是由外部的文件决定的，典型的元素有：

表示框架的iframe元素
表示视频的video元素
表示音频的audio元素
表示图片的img元素
表示外部资源的embed元素，该元素现在已经不建议使用了，可以用上面的元素代替

常用的元素：

标签名	说明	单双
iframe	框架，允许在框架里展示其他内容	双标签

常用属性：

属性名	作用	取值
name	框架名字，可以与其他元素的`target`属性配合，实现在框架中展示页面的效果	框架名字
src	框架内容，可以是网址，也可以是资源文件地址	框架内容
width	框架宽度	长度值
height	框架高度	长度值
frameborder	是否显示边框	0：默认值，否，不显示边框 1：是，显示边框

示例：

html

1	<iframe src="https://momashanhe.com">查看博客</iframe>

8 全局属性

常用属性：

属性名	含义
id	元素唯一标识，一个页面中的`id`属性值不能重复。可以配合CSS和JS使用，也可以在其他元素中使用
class	元素类名，可以配合CSS和JS使用
style	元素样式，给元素设置CSS样式
title	元素提示，一般超链接和图片用得比较多
lang	元素语言，给元素指定语言，很少使用

一般来说，在html元素中设置lang属性设置语言即可，很少会在其他元素中使用lang属性，除非想要使用其他语言显示某个元素。

虽然这些属性是全局属性，但是在一些特殊元素上使用是没有意义的，不建议使用，也没有必要使用，比如html元素，以及head元素及其内部元素，等一些其他特殊元素。

完整的全局属性可以参考文档：MDN全局属性

9 元数据

9.1 基本结构

元数据就是描述数据的数据，对于HTML而言，元数据就是描述HTML页面的数据。

常用的元素：

标签名	说明	单双
meta	表示元数据，用在`head`元素	单标签

9.2 使用示例

配置字符编码：

html

1	<meta charset="UTF-8">

配置网页自动刷新：

html

1	<meta http-equiv="refresh" content="10;url=https://momashanhe.com">

刷新说明：

数字表示秒数，非负整数有效。
url表示地址，省略或地址无效会刷新当前页面。

针对IE浏览器的兼容性配置：

html

1	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

针对移动端的兼容性配置：

html

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

配置网页关键字：

html

1	<meta name="keywords" content="英文逗号隔开的一组词语">

配置网页描述信息：

html

1	<meta name="description" content="80字以内的一段话，与网站内容相关">

针对搜索引擎爬虫配置：

html

1	<meta name="robots" content="可选值">

可选值如下：

值	描述
index	要求搜索爬虫索引此页面
noindex	要求搜索爬虫不索引此页面
follow	要求搜索爬虫跟随此页面上的链接
nofollow	要求搜索爬虫不跟随此页面上的链接
all	和设置index, follow相同
none	和设置noindex, nofollow相同
noarchive	要求搜索引擎不缓存页面内容
nocache	是noarchive的代名词

配置网页作者：

html

1	<meta name="author" content="momashanhe">

配置网页生成工具：

html

1	<meta name="generator" content="Visual Studio Code">

配置网页版权信息：

html

1	<meta name="copyright" content="2020-2050©版权所有">

完整的网页元数据可以参考文档：MDN元数据