web前端知识体系之基础知识 - HTML元素和语言

本文链接：https://blog.youkuaiyun.com/kaixinyitian77/article/details/102255774

本文详细介绍了HTML的基础知识，包括文档元信息如head、title、meta，语义化标签的使用及其优点，链接的实现如link、a、area标签，替换型元素如script、img、video等，以及表单和表格的元素。重点讨论了语义化标签在提升可读性和SEO中的重要性，并列举了多个常用标签的用法和场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 文档元信息

元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。

1.1 head

head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。

head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。

1.2 title

title 标签表示文档的标题。

1.3 meta

meta 标签是一组键值对，它是一种通用的元信息表示标签。

在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。

这里的 name 是一种比较自由的约定，http 标准规定了一些 name 作为大家使用的共识，也鼓励大家发明自己的 name 来使用。

除了基本用法，meta 标签还有一些变体，主要用于简化书写方式或者声明自动化行为。

具有 charset 属性的 meta

从 HTML5 开始，为了简化写法，meta 标签新增了 charset 属性。添加了 charset 属性的 meta 标签无需再有 name 和 content。

  <meta charset="UTF-8" />

具有 http-equiv 属性的 meta

具有 http-equiv 属性的 meta 标签，表示执行一个命令，这样的 meta 标签可以不需要 name 属性了。

例如，下面一段代码，相当于添加了 content-type 这个 http 头，并且指定了 http 编码方式。

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

除了 content-type，还有以下几种命令：

content-language 指定内容的语言；
default-style 指定默认样式表；
refresh 刷新；
set-cookie 模拟 http 头 set-cookie，设置 cookie；
x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性；
content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。
name 为 viewport 的 meta

实际上，meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以了。

name 为 viewport 的 meta，它没有在 HTML 标准中定义，却是移动端开发的事实标准。

这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。

例如：

  <meta name="viewport" content="width=500, initial-scale=1" />
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

这里只指定了两个属性，宽度和缩放，实际上 viewport 能控制的更多，它能表示的全部属性如下：

width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
initial-scale：初始缩放比例。
minimum-scale：最小缩放比例。
maximum-scale：最大缩放比例。
user-scalable：是否允许用户缩放。

对于已经做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的 meta 如下：

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

其它预定义的 meta

在 HTML 标准中，还定义了一批 meta 标签的 name，可以视为一种有约定的 meta。

application-name：如果页面是 Web application，用这个标签表示应用名称。
author: 页面作者。
description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
keywords: 页面关键字，对于 SEO 场景非常关键。
referrer: 跳转策略，是一种安全考量。
theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。

2. 语义相关内容

2.1 语义化标签优点

语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

2.2 常用语义化标签

aside：导航性质的工具内容，例如左侧侧边栏
article：文章主体
hgroup,h1,h2：hgroup 标签是标题组，h1 标签是一级标题，h2 标签是二级标题
abbr：缩写内容
hr：横向分割线，表示故事走向的转变或者话题的转变
p：普通段落
strong：黑体加粗，表示这个词很重要
blockquote,q,cite：blockquote 标签表示段落级引述内容，q 标签表示行内的引述内容，cite 标签表示引述的作品名
time：日期内容
figure,figcaption：figure 标签用于表示与主文章相关的图像、照片等流内容，figcaption 标签表示内容的标题
dfn：用来包裹被定义的名词
nav,ol,ul：nav 标签是导航、目录内容，ol 标签表示有序列表，ul 标签表示无序列表
pre,samp,code：pre 标签表示这部分内容是预先排版过的，不需要浏览器进行排版，smap 标签用于计算机程序的示例输出展示，code 标签用来包裹计算机程序代码。