義化標簽還有<header>(頭部)、<nav>(導航)、<main>(主要區域)、<article>(主要內容)、<section>(區塊)、<aside>(側邊欄)和<footer>(底部)等。
語義化優點:
如果沒有defer或async屬性,瀏覽器會立即加載并執行相應的腳本。它不會等待后續加載的文檔元素,讀取到就會開始加載和執行,這樣就阻塞了后續文檔的加載。
下圖可以直觀的看出三者之間的區別:
其中藍色代表js腳本網絡加載時間,紅色代表js腳本執行時間,綠色代表html解析時間。
defer 和 async屬性都是去異步加載外部的JS腳本文件,它們都不會阻塞頁面的解析,其區別如下:
在網頁HTML的頂部,會發現頂部有一個<!DOCTYPE html>聲明,所有處于標簽之前,它不是html標簽。主要作用是告訴瀏覽器的解析器使用哪種HTML規范或者XHTML規范來解析頁面。
如果不寫文檔DOCTYPE聲明,瀏覽器將無法獲知HTML或XHTML文檔的類型,也會進入怪異模式,那么,在不同的瀏覽器下,顯示的樣式效果會不一致;相反,瀏覽器按照W3C標準來解析代碼,呈現頁面。
<meta> 標簽由 name 和 content 屬性定義,用來描述網頁文檔的屬性,比如文章作者、關鍵詞等。常用的meta標簽:
對于viewport中的值,有下列選項:
接:http://www.daqianduan.com/6549.html
什么是語義化?就是用合理、正確的標簽來展示內容,比如h1~h6定義標題。
1.易于用戶閱讀,樣式丟失的時候能讓頁面呈現清晰的結構。
2.有利于SEO,搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
3.方便其他設備解析,如盲人閱讀器根據語義渲染網頁
4.有利于開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關系更和諧。
主體結構標簽,如圖所示:
1、<header>
<header>定義文檔或者文檔的部分區域的頁眉,應作為介紹內容或者導航鏈接欄的容器。
在一個文檔中,您可以定義多個<header>元素,但需要注意的是<header>元素不能作為<address>、<footer> 或 <header> 元素的子元素。
2、<nav>
<nav>描述一個含有多個超鏈接的區域,該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。
在一個文檔中,可定義多個<nav>元素。
3、<main>
<main> 定義文檔的主要內容,該內容在文檔中應當是獨一無二的,不包含任何在文檔中重復的內容,比如側邊欄,導航欄鏈接,版權信息,網站logo,搜索框(除非搜索框作為文檔的主要功能)。
需要注意的是在一個文檔中不能出現多個<main>標簽。
4、<article>
<article>元素表示文檔、頁面、應用或網站中的獨立結構,是可獨立分配的、可復用的結構,如在發布中,它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件,或者其他獨立的內容項目。
當<article>元素嵌套使用時,則該元素代表與外層元素有關的文章。例如,代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中。
5、<aside>
<aside> 元素表示一個和其余頁面內容幾乎無關的部分,被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
6、<footer>
<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。
使用footer插入聯系信息時,應在 footer 元素內使用 <address> 元素。
注意不能包含<footer>或者<header>
7、<section>
<section>表示文檔中的一個區域(或節),比如,內容中的一個專題組。
如果元素內容可以分為幾個部分的話,應該使用 <article> 而不是 <section>。
不要把 <section> 元素作為一個普通的容器來使用,特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候,應使用<div>。
比較容易混淆的是<section>、<article>,所以特別說明:通俗來說就是<article>比<section>更具有獨立性、完整性。可通過該段內容脫離了所在的語境,是否完整、獨立來判斷。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。