前端面试题 ----- HTML语义化 link和@import的区别

说说你对HTML语义化的理解?

---

什么是 HTML 语义化？

<基本上都是围绕着几个主要的标签，像标题（ H1~H6 ）、列表（ li ）、强调（ strong em ）等等 >

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 能够使用户更好的理解；
用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

语义化标签

<header> </header>
<nav> </nav>
<section> </section>
<article> </article>
<aslde> </aside>
<figure> </figure>
<datalist> </datalist>
<details> </details>
<footer> </footer>
...

---

link和@import的区别?

---

Link XML/HTML代码

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />

@import XML/HTML代码

<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>

两者都是外部引用CSS的方式，但是存在一定的区别：

1. ： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS
   范畴，只能加载 CSS 。
2. ： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
3. ： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
4. ： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。