一 语义类标签是什么
语义类标签也是大家工作中经常会用到的一类标签,它们的特点是视觉表现上互相都差不多,主 要的区别在于它们表示了不同的语义,比如大家会经常见到的section、nav、p,这些都是语义
类的标签。
- p标签 块元素,标签内的n个空格、换行都会变成1个空格。即:
原来的排版可能会失效
- nav标签 定义
导航链接
的部分。 - section标签 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
二 语义类标签优缺点
2.1 优点
- 对开发者更为友好,
增强了可读性
。便于团队的开发和维护 - 适宜机器阅读,适合SEO.支持读屏软件,根据文章可以自动生成目录
油猴的简书目录插件:就是根据p标签自动生成
2.2 缺点
用错会给机器阅读造成混淆、增加嵌套,给CSS编写加重负担
三 常用场景
3.1 ruby
类似于注音或者意思的注解
在html中就支持这种情况下的语义
3.2 em
是自然语言的补充
一个短语标签,用来呈现为被强调
的文本。
所有短语标签
标签 | 描述 |
---|---|
<em> | 呈现为被强调的文本。 |
<strong> | 定义重要的文本。 |
<dfn> | 定义一个定义项目。 |
<code> | 定义计算机代码文本。 |
<samp> | 定义样本文本。 |
<kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> | 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |
3.3 小标题和副标题的区别
hgroup中的h1-h6被视为同一标题
的不同组成部
分。
当标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组
作用:主要是用来告知文档大纲哪个标题是最重要的。视觉效果是一样的。主要是语义
3.4 section标签
标签定义了文档的某个区域
。比如章节、头部、底部或者文档的其他区域。"有语义的div"
section的嵌套会使得其中的h1-h6下降一级
,因此,在HTML5以后,我们只需要 section和h1就足以形成文档的树形结构
3.5 阅读模式
语义化的HTML适合机器阅读
的特性变得越来越重要
一个典型的文档结构
<body>
<header>
<nav> …… </nav>
</header>
<aside>
<nav> …… </nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
article
除此之外,还有article,article是一种特别的结构,它表示具有一定独立性质的文章。所 以,article和body具有相似的结构,同时,一个HTML页面中,可能有多个article存在
一个典型的场景是多篇新闻展示在同一个新闻专题页面中,这种类似报纸的多文章结构适合用 article来组织
<body>
<header>……</header>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<article> …… </article>
<article> …… </article>
<footer>
<address></address>
</footer>
</body>
body里面有自己的header和footer
,然后里面是竖篇的article,每一个article里面都有自己的
header、section、footer。这是一个典型的多文章结构
3.6 语义介绍
- header,如其名,通常出现在前部,表示导航或者介绍性的内容。
- footer,通常出现在尾部,包含一些作者信息、相关链接、版权信息等
- aside表示跟文章主体
不那么相关
的部分,它可能包含导航、广告等工具性质的内容
- address并非像date一样,表示一个 给机器阅读的地址,而是表示
“文章(作者)的联系方式”
,address明确地只关联到article和 body