标签语义化，让你的网页更容易懂

最新推荐文章于 2022-07-10 12:55:44 发布

前端蜗牛

最新推荐文章于 2022-07-10 12:55:44 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端攻略文章标签： css html 标签语义化 seo

本文链接：https://blog.youkuaiyun.com/u011349149/article/details/24385087

前端攻略专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了标签语义化的概念及其在网页设计中的作用，包括提升用户体验、搜索引擎优化、提高开发效率等方面。同时，通过HTML标签一览表详细介绍了各个标签的用途，指导开发者规范化代码风格。

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

一、什么事标签语义化？

你设计的页面还是一对的div堆积的吗？如果你还在沉浸在div包围的设计风格中，那么你就是不合格的前端工程师。标签语义化，让你的页面在机器的世界里不再陌生。html的标签都是有各自特定的意义的，同时也是为了更好的开发和更加规范。

二、标签语义化的作用？

1、让你的手机更加完美的展示你的网页

2、让搜索引擎更好地搜索到你的作品

3、让你的开发和维护更加方便，提高你的效率

4、让盲人更好地阅读你的网页，阅读器根据标签语义自动解析，呈现更容易、更好的阅读

5、。。。

三、HTML标签语义总结

既然标签语义化如此重要，那么从现在开始，规范化你的代码风格，语义化你的标签吧！以下是对html标签的一个汇总。

HTML标记一览，后有详解

标记	译名或意义	作用
文件标记
<HTML>	文件声明	让浏览器知道这是 HTML 文件
<HEAD>	开头	提供文件整体资讯
<TITLE>	标题	定义文件标题，将显示于浏览顶端
<BODY>	本文	设计文件格式及内文所在
排版标记
<!--注解-->	说明标记	为文件加上说明，但不被显示
<P>	段落标记	为字、画、表格等之间留一空白行
<BR>	换行标记	令字、画、表格等显示于下一行
<HR>	水平线	插入一条水平线
<CENTER>	居中	令字、画、表格等显示于中间
<PRE>	预设格式	令文件按照原始码的排列方式显示
<DIV>	区隔标记	设定字、画、表格等的摆放位置
<NOBR>	不折行	令文字不因太长而绕行
<WBR>	建议折行	预设折行部位
字体标记
<STRONG>	加重语气	产生字体加粗 Bold 的效果
<B>	粗体标记	产生字体加粗的效果
<EM>	强调标记	字体出现斜体效果
<I>	斜体标记	字体出现斜体效果
<TT>	打字字体	Courier字体，字母宽度相同
<U>	加上底线	加上底线
<H1>	一级标题标记	变粗变大加宽，程度与级数反比
<H2>	二级标题标记	将字体变粗变大加宽
<H3>	三级标题标记	将字体变粗变大加宽
<H4>	四级标题标记	将字体变粗变大加宽
<H5>	五级标题标记	将字体变粗变大加宽
<H6>	六级标题标记	将字体变粗变大加宽
<FONT>	字形标记	设定字形、大小、颜色
<BASEFONT>	基准字形标记	设定所有字形、大小、颜色
<BIG>	字体加大	令字体稍为加大
<SMALL>	字体缩细	令字体稍为缩细
<STRIKE>	画线删除	为字体加一删除线
<CODE>	程式码	字体稍为加宽如<TT>
<KBD>	键盘字	字体稍为加宽，单一空白
<SAMP>	范例	字体稍为加宽如<TT>
<VAR>	变数	斜体效果
<CITE>	传记引述	斜体效果
<BLOCKQUOTE>	引述文字区块	缩排字体
<DFN>	述语定义	斜体效果
<ADDRESS>	地址标记	斜体效果
<SUB>	下标字	下标字
<SUP>	上标字	指数（平方、立方等）
清单标记
<OL>	顺序清单	清单项目将以数字、字母顺序排列
<UL>	无序清单	清单项目将以圆点排列
<LI>	清单项目	每一标记标示一项清单项目
<MENU>	选单清单	清单项目将以圆点排列，如<UL>
<DIR>	目录清单	清单项目将以圆点排列，如<UL>
<DL>	定义清单	清单分两层出现
<DT>	定义条目	标示该项定义的标题
<DD>	定义内容	标示定义内容
表格标记
<TABLE>	表格标记	设定该表格的各项参数
<CAPTION>	表格标题	做成一打通列以填入表格标题
<TR>	表格列	设定该表格的列
<TD>	表格栏	设定该表格的栏
<TH>	表格标头	相等于<TD>，但其内之字体会变粗
表单标记
<FORM>	表单标记	决定单一表单的运作模式
<TEXTAREA>	文字区块	提供文字方盒以输入较大量文字
<INPUT>	输入标记	决定输入形式
<SELECT>	选择标记	建立 pop-up 卷动清单
<OPTION>	选项	每一标记标示一个选项
图形标记
<IMG>	图形标记	用以插入图形及设定图形属性
连结标记
<A>	连结标记	加入连结
<BASE>	基准标记	可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET>	框架设定	设定框架
<FRAME>	框窗设定	设定框窗
<IFRAME>	页内框架	于网页中间插入框架
<NOFRAMES>	不支援框架	设定当浏览器不支援框架时的提示
影像地图
<MAP>	影像地图名称	设定影像地图名称
<AREA>	连结区域	设定各连结区域
多媒体
<BGSOUND>	背景声音	于背景播放声音或音乐
<EMBED>	多媒体	加入声音、音乐或影像
其他标记
<MARQUEE>	走动文字	令文字左右走动
<BLINK>	闪烁文字	闪烁文字
<ISINDEX>	页内寻找器	可输入关键字寻找于该一页
<META>	开头定义	让浏览器知道这是 HTML 文件
<LINK>	关系定义	定义该文件与其他 URL 的关系
StyleSheet
<STYLE>	样式表	控制网页版面
<span>	自订标记	独立使用或与样式表同用