重学前端第四课关于语义化标签

什么是语义化标签？
一些和传统标签视觉表现差不多，但是表示不同的语义，比如section nav p这些

语义化还有必要吗？
现在互联网产品，大多数情况不需要，只用div,span即可。
但是网页还有其必要性：
1.对开发者更友好
2.利用SEO，利用给引擎爬虫获取有效信息，提升网页的搜索量
3.支持读屏软件

3个运用场景：
1.自然语言表达能力的补充
举例em和strong 贴一段w3s的介绍：
如果常识告诉我们应该较少使用 标签的话，那么 标签出现的次数应该更少。如果说用 标签修饰的文本好像是在大声呼喊，那么用 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金，与此相同，限制 的使用可以令应该更加引人注意，而且更加有效。
举一个例子，经常访问 W3school 的用户可以注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，我们对这一句摘要使用了 标签。使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的。
个人理解对于平时可以多留意一下，是否能够使用em和strong这样的语义化标签

2.作为标题摘要的语义化标签
h1-h6是最基本的标题，一篇文档会有一个树形的目录结构，它由各个级别的标题组成。这个树形结构可能不会跟HTML元素的嵌套关系一致。因此正确运用标题标签还是重要的。
注意2点：
① 要产生副标题的时候用<hgroup></hgroup>包围

<hgrounp>
<h1>JavaScript对象</h1>
<h2>我们需要模拟类吗？</h2>
<p>balah balah</p>
</hgrounp>

会生成以下标题结构：
● JavaScript 对象----我们需要模拟类吗？
○ ...

② section标签包裹的标题会出现降级，比如

<section>
  <h1>HTML语义</h1>
  <p>balah balah balah balah</p>
    <section>
        <h1>弱语义</h1>
        <p>balah balah</p>
    </section>
    <section>
        <h1>结构性元素</h1>
        <p>balah balah</p>
    </section>
</section>

会出现这样的结构：
● HTML 语义
○ 弱语义
○ 结构性元素

3.作为整体结构的语义化标签
典型的body类似这样：

<body>
    <header>
        <nav>
            ...
        </nav>
    </header>
    <aside>
        <nav>
            ...
        </nav>
    </aside>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <footer>
        <address>...</address>
    </footer>
</body>

除了上面的元素之外，还有一个语义化的元素<article>，该元素可以用在多文章的时候，类似报纸这样的结构

介绍一些这些新的语义化标签：
● header，通常出现在前部，表示导航或者介绍性的内容
● footer，通常出现在尾部，包含一些作者的信息，相关连接，版权信息
上面2者一般放在atricle，或者放在body中
● aside，表示根文章主题不那么相关的部分，他可能包含导航，广告等工具性质的内容
aside很容易理解为侧边栏，实际上它也可以不是侧边栏
注意：header和footer都可能出现导航(nav 标签)，二者的区别是，header中的导航多数是到文章自己的目录，而aside中的导航多数是到关联页面或者是整站地图。
最后，footer中包含address，这是个非常容易被误用的标签。它表示的是联系方式，只关联到body和article标签。

好了，以上是对重学前端第四课的学习，希望看到的同学会有收获。

重学前端 第四课 关于语义化标签

猜你喜欢

重学前端第四课关于语义化标签