HTML中的语义标签和元信息标签（整理）

Posted 2023-04-03

参考技术A

语义类标签是纯文字的补充，如标题、自然段、章节、列表等。<section>、<p>、<nav>。
现代互联网产品中，html描述"软件界面"多过"富文本"，而软件界面里的东西，几乎是没有语义的。在任何"软件界面的场景中"，可以直接使用div和span。
语义标签的优点：在很多工作场景里，正确地使用语义标签可以带来很多好处：

作为自然语言和纯文本的补充，用来表达一定的结构或消除歧义
<ruby>、<rt>、<rp>、
<em>

HTML应支持 文章的结构的区分。语义化的HTML能够支持自动生成目录结构。
一篇文档会有一个属性的目录结构，由各级标题组成，此树形结构可能与HTML元素的嵌套关系不一致。
<h1>~<h6>、<hgroup>
<section>

越来越多的浏览器退出的"阅读模式"，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。能让浏览器很好的支持"阅读视图功能"，提升搜索引擎的命中率，对视障用户的读屏软件更加友好。
<header>、<nav>、<aside>、<footer>、<address>
<article>

所谓 元信息 ，是指描述自身的信息，
元信息类标签就是HTML用以描述文档自身的一类标签。通常在head标签中，不会在页面中显示出来。
元信息类标签多数情况下是给浏览器、搜索引擎等机器阅读的，有时这些信息会在页面之外展示给用户。

必须是html标签中的第一个标签（若head前面有标签，浏览器解析的时候 ，head标签中的内容会被移到body中），
内容需包含一个title标签（文档作为iframe或有其他方式指定了文档标题时，可不包含title）（多个title时 只有一第一个生效），
最多只能包含一个base（页面中所有 相对 链接的基准URL）（多个base时 只有第一个生效）。

可以改变全局的相对链接地址。不建议使用哦。

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

有http-equiv属性的meta标签，表示执行一个命令，不需要name属性

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

没有在HTML标准中定义，却是移动端开发的事实标准

html标签整理

web语义化：方便搜索引擎和游览器可以读懂文档的内容，例如知道页面上哪些是对应图片的文本介绍，哪些是文档所有者的联系方式，哪些是引用

以前一直过多的用了div+css的方式，现在把所有的html标签都自己整理了一下，形成一个表格，方便查询。备注部分是自己的理解和一些看法。对于一些兼容性不是很好的标签，已经省去。下面的标签中还有很多存在兼容问题，特别是ie系列。若有不对之处请指正。

标签	作用	备注
a	超级链接
abbr	简称或缩写
address	文档或文章所有者的信息	位于body内表示文档所有者信息、article表示位文章所有者信息
area	图片映射
article	独立于文档的其余部分
aside	其所在内容的另外内容
audio	声音标签
b	文本标签	没有其他标签可以使用的时候、才可以用这个标签，strong：表示重要文字，
base	超级链接的默认地址
bdo	文字打印方向
big	字体变大	字体将会变大一号，最大7号，不一样的游览器将不一样
blockquote	引用、块	引用，增大外边距
body	必须
br	换行
button	按钮
canvas	画布
caption	表格标题
center	水平居中
cite	引用外部文档或外部文章	自动摘录外部的文档的目录、整理表格，并打印
code	代码
col	表格对齐方式
colgroup	表格对齐方式	group方便对齐
datalist	输入文本可能的值	与input使用
dd	对于dt的解释
del	已经被删除的内容
dfn	一个项目
dir		不推荐使用
div	块元素
dl	项目或内容的列表
dt	项目或内容的介绍	dl项目列表、dt项目介绍、dl项目更加清楚的描述或介绍
em	强调文本	strong强调文本
embed	外部插件	flash
fieldset	表格头	对表格内容打包，形成新的
figcaption	为图像带上一个标题	figure一起用
figure	文档中插入图片，并且图片需要带上标题
font	文本	不推荐
footer	文档底部描述、页脚
form	表单
frame	框架	有人不推荐使用这个、但是还是有人使用
frameset	多个框架	与frame一起使用
h1-h6
head	必须
header	文档头部
hr	水平线	不推荐
html	必须
iframe	框架
img	图片
input	输入
ins	新插入的文本
kbd	键盘文本
keygen	加密
label	关联输入radio
legend	将表单内的元素组合、关联、显示文本	与fieldset使用
li	列表
link	链接外部样式
main	文档主要内容
map	图片映射集	与area使用
mark	突出文本
meta	搜索引擎关键词、文旦描述
meter	定义数值的范围以及值
nav	导航链接
noframes	为不能处理框架的游览器进行文字显示
noscript	脚本无法执行时显示文本
object	对象：图片，音频、flash等
ol	有序列表
optgroup	对option内容进行分组	与select、option一起使用
option	选项列表
output	输出文本
p	段落
param	object对象的属性极其值	与object使用
pre	预格式化的文本
progess	进度条
q	引用	q：段的引用，blockquote：长的引用
rp	注释	与ruby、rt一起使用
s		不推荐
script	javascript脚本
section	文档中的节：页眉页脚
select	选择标签	与option一同使用
small	字体变小	如果字体已经达到最小，将不再变小
source	音频来源	游览器选择自己可以播放的音频
span		有人不推荐使用span，推荐使用strong，但是还是有人在用
style	css样式
sub	下标
sup	上标
table	表格
tbody	表格主体
td	表格列
textarea	多行输入输出文本框
tfoot	表格页脚
thead	表格主体
time	时间
title	必须
u	下划线
ul	无序列表
var	变量
vide	视屏
wbr	换行	单词过长，用于定义换行