前端面試題 ----- HTML語義化 link和@import的區別
阿新 • • 發佈：2019-01-06
說說你對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的方式，但是存在一定的區別：
- ： link 是 XHTML 標籤，除了載入 CSS 外，還可以定義 RSS 等其他事務； @import 屬於 CSS
範疇，只能載入 CSS 。 - ： link 引用 CSS 時，在頁面載入時同時載入； @import 需要頁面網頁完全載入以後載入。
- ： link 是 XHTML 標籤，無相容問題； @import 是在 CSS2.1 提出的，低版本的瀏覽器不支援。
- ： link 支援使用 Javascript 控制 DOM 去改變樣式；而 @import 不支援。