什么是语义化结构元素（语义化标签），语义化标签的优势，以及常见的语义化元素和无语义元素！

一、什么是语义化标签

语义化即让标签元素拥有其含义，当你使用其标签时知道这个标签代表着什么含义，适用于怎样的场景

二、语义化标签的优势

1.书写代码时有助于理清思路，使页面结构清晰，团队合作

2.维护者在网站维护时更加方便快捷

3.有利于搜索引擎优化（SEO）

三、常见的语义化标签

书写代码时，尽量使用语义化标签

1.适用于页面布局（划分区域）的语义化标签

• <header>  用于表示页面或某个区域的头部
• <nav>  用于表示导航栏 ，<header>是它的父元素
• <article>  用于表示页面主题内容或文章内容
• <section>  用于表示一个整体的一部分或文章的章节，<article>是他的父元素
• <aside>  用于表示跟周围主题相关的附加信息，可用于广告
• <footer>  用于表示页面或某个区域的脚注（页面的底部）
• <figure>  图片语义化标签，它通常包含子元素<img>和<figcaption>
• <figcaption>  用于对图片进行描述
• <main>  页面主要内容，一个页面只能使用一次
• <form>  表单，用于客户注册或填写信息
• <table>  表格  适用场景：购物车，内容管理系统（员工，学员，物质）

2.文本类语义化标签

• <title>  用于标识文档标题，该标题会显示在浏览器的标题栏或标签页上。有利于搜索引擎优化，使网站排在前面
• <hn>  h1--h6分级标题，h1重要性最大--h6重要性最小。有利于搜索引擎优化，使网站排在前面
• <p>  代表段落，p元素不能包含h（1-6）标题元素也不能包含自己
• <blockquote>  代表整段的引用 功能：会有相应的缩进 适用场景：古诗词（文字较多时）
• <q>  代表小段的引用 功能：自带前后双引号 适用场景：名人名言
• <abbr>  代表缩写词的引用  适用场景：专业术语，名词解释
• <cite>  代表参考文献的引用 功能文本以斜体展示
• <i>和<em>  强调文本内容，普通浏览器：文本以斜体展示，<i>和<em>没有区别。阅读浏览器：<em>会加重读音
• <strong>和<b> 强调文本内容，普通浏览器：文本加粗展示，<strong>和<b>没有区别。阅读浏览器：<strong>会加重读音

3.非文本类语义化标签

• <img>  代表一张图片
• <video>  代表一段视频
• <audio>  代表一段音频

4.分组类语义化标签

• <ul>  无序列表 子元素<li> 默认状态：元素内容之前会有一个实心圆  适用场景：导航，目录，相关信息，排行榜，侧边栏
• <ol>  有序列表 子元素<li> 默认状态：元素内容之前会有一个阿拉伯数字（从1递增） 适用场景：目录，相关信息，排行榜，侧边栏
• <dl> 自定义列表 子元素<dt>和<dd> 功能：我们可以根据自己的需求进行内容添加  适用场景：名词解释，专业术语

四、无语义化元素

• <div>  无语义，主要用于页面的划分区域
• <span>  无语义，仅用于给一段文本添加样式 例如：雪碧图
• <br>  无语义，空元素，用于在页面中换行 不建议使用改标签，使用会导致页面布局的改变和不利于网站维护
• <hr> 无语义，空元素，用于在页面制造一个分割线 不建议使用该标签，使用会导致页面布局的改变和不利于网站维护
• <pre>  无语义，预格式化元素，用于保留文字在源代码中的格式  适用场景：数理化方程式

 

补充：在html代码中，输入一个或多个空格（回车），最终在页面都会以一个空格进行展示。即多个合并一个空格！