整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML5新特性之語義化布局標簽,擺脫傳統div布局

          曾幾何時,前端的頁面布局一直采用div,但是div本身并沒有實際的意義,它只是定義了一個區域,而且這個區域是做什么的瀏覽器并不知道,不利于頁面的SEO優化。

          因此HTML5中新增的語義化標簽就很好的解決了這個問題,當然它還有其他一些好處,接下來我們就一起來看看吧。

          HTML5

          語義化標簽的優點

          • 即使在沒有CSS的支持下,瀏覽器依然能呈現出良好的內容結構。

          • 有利于SEO,語義化的標簽更有利于爬蟲去解析更多有效信息。

          • 跨設備體驗,不同設備都支持語義化標簽,那么即使在不同設備下依然可以有無縫體驗。

          • 便于代碼開發和維護,語義化可以增加代碼的可讀性,讓團隊成員可以更好理解彼此的代碼意圖。

          HTML5新增的語義化標簽

          那么在HTML5中新增了哪些利于頁面布局的HTML5標簽呢?

          我們先通過以下這張圖來看看。

          HTML5新增語義化標簽

          header標簽

          header標簽表示頁面或一個區域(section)的頁眉部分,通常在里面包含h1-h6標簽來使用。

          我們直接通過代碼來看看在瀏覽器上的效果。

          header標簽效果

          footer標簽

          footer標簽和header標簽類似,表示頁面或一個區域(section)的頁腳部分,通常會將網站的證書,許可,版權協議等內容放在這塊。

          footer標簽

          hgroup標簽

          hgroup標簽一般用于h1-h6標簽的組合,比如主標題,副標題,三級標題的組合情況。

          我們通過以下代碼段來看看其代碼組織形式。

          hgroup標簽

          需要注意的一點是,如果需要使用hgroup標簽則保證在hgroup標簽里至少有兩個h標簽,如果只有一個h標簽,則應該去掉hgroup標簽。

          nav標簽

          nav標簽主要用于定義頁面的導航部分,例如頁面或者section中的側邊目錄欄。

          其使用方式如下代碼段所示。

          nav標簽

          aside標簽

          aside標簽一般會指定網頁的相關內容,友情鏈接等附注性的東西,類似于廣告也可以使用aside標簽。

          main標簽

          main標簽定義一個頁面的主要內容,在一個頁面中只能使用一次。

          article標簽

          article標簽表示的是一個獨立完整的內容區域,比如一張報紙的某個獨立版塊。

          在article標簽內部可以包含其他語義化標簽,其基本使用如下所示。

          article標簽

          section標簽

          section標簽表示的是文檔中內容的分節或分段,上述的article,nav或者aside其實都可以看做特殊的section標簽,如果能用article,nav,aside標簽,最好不要用section標簽。

          section標簽與與article標簽可以互相嵌套,需要視具體情況而定。

          結束語

          如果你的布局還是只有div,那么看完了今天這篇文章后完全可以嘗試下新的HTML5標簽噢。

          感興趣的同學可以加下我自己創建的Q群,大家相互學習交流,我也會盡力維護好群環境,群號如下所示。

          號碼

          程序員web前端分享常見html5語義化標簽,我們知道,創建結構清晰的頁面可以建立良好的語義化基礎,也降低了使用css的難度,下面總結了一些常用的語義化標簽,有空慢慢更新,歡迎大家補充

          語義化HTML:用最恰當的HTML元素標記的內容。

          優點:1 提升可訪問性; 2 SEO; 3 結構清晰,利于維護;

          (HTML5舊的行內元素都被歸類為短語內容)

          通用容器:div——塊級通用容器;span——短語內容無語義容器。

          如果語義不合適,也不要霸王硬上弓,=。。 =老實的用div吧。

          < title></title>:簡短、描述性、唯一(提升搜索引擎排名)。

          搜索引擎會將title作為判斷頁面主要內容的指標,有效的title應該包含幾個與頁面內容密切相關的關鍵字,建議將title核心內容放在前60個字符中。

          <hn></hn>:h1~h6分級標題,用于創建頁面信息的層級關系。

          對于搜索引擎而言,如果標題與搜索詞匹配,這些標題就會被賦予很高的權重,尤其是h1。

          <header></header>:頁眉通常包括網站標志、主導航、全站鏈接以及搜索框。

          也適合對頁面內部一組介紹性或導航性內容進行標記。

          <nav></nav>:標記導航,僅對文檔中重要的鏈接群使用。

          Html5規范不推薦對輔助性頁腳鏈接使用nav,除非頁腳再次顯示頂級全局導航、或者包含招聘信息等重要鏈接。

          <main></main>:頁面主要內容,一個頁面只能使用一次。如果是web應用,則包圍其主要功能。

          <article></article>:包含像報紙一樣的內容= =||是這么理解的,表示文檔、頁面、應用或一個獨立的容器。

          article可以嵌套article,只要里面的article與外面的是部分與整體的關系。

          <section></section>:具有相似主題的一組內容,比如網站的主頁可以分成介紹、新聞條目、聯系信息等條塊。

          如果只是為了添加樣式,請用div!

          <aside></aside>:指定附注欄,包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等。

          如果放在main內,應該與所在內容密切相關。

          <footer></footer>:頁腳,只有當父級是body時,才是整個頁面的頁腳。

          <small></small>:指定細則,輸入免責聲明、注解、署名、版權。

          只適用于短語,不要用來標記“使用條款”、“隱私政策”等長的法律聲明。

          <strong></strong>:表示內容重要性。

          <em></em>:標記內容著重點(大量用于提升段落文本語義)。

          <mark></mark>:突出顯示文本(yellow),提醒讀者。

          在HTML5中em是表示強調的唯一元素,而strong則表示重要程度。

          <b></b>:出于實用目的提醒讀者的一塊文字,不傳達任何額外的重要性

          <i></i>:不同于其他文字的文字= =|||這個翻譯真的是······

          <figure></figure>:創建圖(默認有40px左右margin)。

          <figcaption></figcaption>:figure的標題,必須是figure內嵌的第一個或者最后一個元素。

          <cite></cite>:指明引用或者參考,如圖書的標題,歌曲、電影、等的名稱,演唱會、音樂會、規范、報紙、或法律文件等。

          只用于參考源本身,而不是從中引述。

          <blockquoto></blockquoto>:引述文本,默認新的一行顯示。

          <q></q>:短的引述(跨瀏覽器問題,盡量避免使用)。

          可以對blockquoto和q元素使用cite屬性(不是cite元素!),對搜索引擎自動化工具有用。cite=“URL”引述來源地址。

          <time></time>:標記時間。datetime屬性遵循特定格式,如果忽略此屬性,文本內容必須是合法的日期或者時間格式。

          不再相關的時間用s標簽。

          <abbr></abbr>:解釋縮寫詞。使用title屬性可提供全稱,只在第一次出現時使用就ok。

          abbr[title]{ border-bottom:1px dotted #000; }

          <dfn></dfn>:定義術語元素,與定義必須緊挨著,可以在描述列表dl元素中使用。

          <address></address>:作者、相關人士或組織的聯系信息(電子郵件地址、指向聯系信息頁的鏈接)。

          如果提供整個頁面的作者聯系信息,一般放在頁面級footer里。不能包含文檔或者文檔等其他內容。

          <del></del>:移除的內容。

          <ins></ins>:添加的內容。

          少有的既可以包圍塊級,又可以包圍短語內容的元素。

          <code></code>:標記代碼。包含示例代碼或者文件名 (< < > >)

          <pre></pre>:預格式化文本。保留文本固有的換行和空格。

          <meter></meter>:表示分數的值或者已知范圍的測量結果。如投票結果。

          例如:<meter value="0.2" title=”Miles“>20%completed</meter>

          <progress></progress>:完成進度。可通過js動態更新value。

          著互聯網技術的發展,網頁內容變得越來越豐富。HTML5 作為標記語言的最新標準,不僅提供了更多的功能,還引入了一系列語義化標簽。這些標簽使得網頁內容的結構更加清晰,有助于搜索引擎優化(SEO),并提高了網站的可訪問性。

          語義化標簽的優勢

          語義化標簽通過提供更具描述性的元素名稱,使得文檔內容的結構更加明確。這樣做有幾個明顯的優勢:

          1. 提高可讀性:代碼的可讀性得到提升,其他開發者(或未來的你)可以快速理解頁面結構。
          2. SEO 優化:搜索引擎能夠更好地解析網頁內容,提高網頁在搜索結果中的排名。
          3. 支持無障礙訪問:語義化標簽有助于屏幕閱讀器正確解讀網頁內容,使網站對視障用戶更加友好。

          語義化標簽實例

          下面,我們將通過幾個例子來展示如何使用HTML5的語義化標簽來構建網頁。

          示例1:文章結構

          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
              <meta charset="UTF-8">
              <title>HTML5 語義化標簽示例</title>
          </head>
          <body>
          
          <article>
              <header>
                  <h1>HTML5 的新特性</h1>
                  <p>發布日期:2023-12-17</p>
                  <p>作者:張三</p>
              </header>
              <section>
                  <h2>引入了新的語義化標簽</h2>
                  <p>HTML5 定義了一系列新的元素,用于更好地描述文檔的不同部分...</p>
              </section>
              <section>
                  <h2>表單控件的增強</h2>
                  <p>HTML5 提供了更多的表單控件,如 date、time、email 等...</p>
              </section>
              <footer>
                  <p>版權所有 ? 2023 張三</p>
              </footer>
          </article>
          
          </body>
          </html>
          

          在這個示例中,我們使用了<article>、<header>、<section>和<footer>等標簽來構建一個文章的基本結構,使得文章的主體、標題、各個章節和尾注的語義更加明確。

          示例2:導航菜單

          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
              <meta charset="UTF-8">
              <title>導航菜單示例</title>
              <style>
                  /* 重置ul和li的默認樣式 */
                  nav ul {
                      list-style: none;
                      padding: 0;
                      margin: 0;
                      background-color: #333;
                      text-align: center;
                  }
                  
                  nav ul li {
                      display: inline-block;
                  }
                  
                  /* 設置鏈接的基本樣式 */
                  nav ul li a {
                      display: block;
                      padding: 10px 20px;
                      text-decoration: none;
                      color: white;
                      font-weight: bold;
                  }
                  
                  /* 鼠標懸停時的樣式 */
                  nav ul li a:hover {
                      background-color: #555;
                  }
              </style>
          </head>
          <body>
          
          <nav>
              <ul>
                  <li><a href="#home">首頁</a></li>
                  <li><a href="#news">新聞</a></li>
                  <li><a href="#contact">聯系我們</a></li>
                  <li><a href="#about">關于我們</a></li>
              </ul>
          </nav>
          
          </body>
          </html>
          

          使用<nav>標簽定義導航鏈接集合,這有助于搜索引擎和輔助技術確定頁面中的導航部分。

          在這個示例中,做了以下幾點樣式設置:

          1. 移除了ul和li的默認樣式(比如列表前面的小圓點),并給導航欄設置了一個深色背景。
          2. 將li元素設置為inline-block,使其水平排列。
          3. 為鏈接(a標簽)設置了基本的樣式,包括背景色、字體顏色、內邊距等,以及鼠標懸停時的背景色變化。

          示例3:側邊欄

          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
              <meta charset="UTF-8">
              <title>側邊欄示例</title>
              <style>
                  /* 設置側邊欄的基本樣式 */
                  aside {
                      width: 250px; /* 側邊欄寬度 */
                      padding: 20px; /* 內邊距 */
                      background-color: #f4f4f4; /* 背景色 */
                      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */
                      position: fixed; /* 固定位置 */
                      top: 0; /* 頂部對齊 */
                      left: 0; /* 左側對齊 */
                      height: 100%; /* 高度100% */
                  }
          
                  /* 設置標題的樣式 */
                  aside h2 {
                      color: #333; /* 字體顏色 */
                      margin-bottom: 20px; /* 與下方內容的間距 */
                  }
          
                  /* 重置列表的默認樣式,并設置列表項樣式 */
                  aside ul {
                      list-style: none; /* 移除列表項的默認樣式 */
                      padding: 0; /* 移除默認內邊距 */
                      margin: 0; /* 移除默認外邊距 */
                  }
          
                  aside ul li {
                      margin-bottom: 10px; /* 列表項之間的間距 */
                  }
          
                  /* 設置鏈接的基本樣式 */
                  aside ul li a {
                      text-decoration: none; /* 移除下劃線 */
                      color: #333; /* 字體顏色 */
                      font-weight: bold; /* 字體加粗 */
                  }
          
                  /* 鼠標懸停時的樣式 */
                  aside ul li a:hover {
                      color: #007bff; /* 鼠標懸停時的字體顏色 */
                  }
              </style>
          </head>
          <body>
          
          <aside>
              <h2>相關文章</h2>
              <ul>
                  <li><a href="#">HTML5 基礎</a></li>
                  <li><a href="#">CSS3 新特性</a></li>
                  <li><a href="#">JavaScript 高級程序設計</a></li>
              </ul>
          </aside>
          
          </body>
          </html>
          

          <aside>標簽通常用于包含頁面主內容之外的內容,如側邊欄,它可以包含相關鏈接、廣告、站點地圖等。

          示例4:頁腳信息

          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
              <meta charset="UTF-8">
              <title>頁腳信息示例</title>
          </head>
          <body>
          
          <footer>
              <p>聯系方式:example@example.com</p>
              <p>地址:中國某地某街道123號</p>
              <p>版權所有 ? 2023 HTML5前端工程師</p>
          </footer>
          
          </body>
          </html>
          

          <footer>標簽定義了文檔或節的頁腳,通常包含作者信息、版權信息、聯系信息等。

          示例5:主要內容區域

          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
              <meta charset="UTF-8">
              <title>主要內容區域示例</title>
          </head>
          <body>
          
          <main>
              <article>
                  <h1>HTML5 語義化標簽</h1>
                  <p>HTML5 提供了許多新的元素,用于更清晰地描述你的內容...</p>
              </article>
              <article>
                  <h1>HTML5 表單特性</h1>
                  <p>HTML5 為表單輸入提供了多種新的類型,如 color、date 等...</p>
              </article>
          </main>
          
          </body>
          </html>
          

          <main>標簽用于指定文檔的主要內容,它應該是文檔中最重要的內容區域,通常不包括那些在整個站點中重復出現的內容(如導航鏈接)。

          通過上述示例,我們可以看到HTML5語義化標簽如何使網頁結構更加清晰,并為搜索引擎優化和可訪問性提供了支持。隨著技術的發展,我們有責任編寫更高質量的代碼,不僅為了自己,也為了創建一個更好的網絡環境。


          主站蜘蛛池模板: 亚洲欧洲无码一区二区三区| 亚洲综合一区二区国产精品| 国产成人精品无码一区二区| 中文字幕无线码一区2020青青| 精品一区二区三区在线观看l| 亚洲视频在线一区二区| 一区二区视频在线观看| 日韩精品一区二区三区影院| 亚洲国产AV无码一区二区三区| 国产裸体歌舞一区二区| 一区三区三区不卡| 国产福利一区视频| 日韩一区二区三区在线| 成人区精品一区二区不卡亚洲| 污污内射在线观看一区二区少妇| 国产婷婷一区二区三区| 亚洲视频在线一区二区| 无码人妻一区二区三区免费视频 | 久久无码一区二区三区少妇| 麻豆va一区二区三区久久浪| 国精产品999一区二区三区有限| 2021国产精品视频一区| 无码国产精品一区二区免费式影视| 色国产精品一区在线观看| 无码精品人妻一区二区三区免费看| 精品乱人伦一区二区三区| 国产AV一区二区三区无码野战| 国产精品无码AV一区二区三区| 亚洲AV午夜福利精品一区二区| 波多野结衣AV无码久久一区| 国产成人AV一区二区三区无码 | 三上悠亚精品一区二区久久| 三上悠亚精品一区二区久久| 久久精品视频一区| 亚洲一区欧洲一区| 国产一区二区三区在线| 中文字幕一区二区三区视频在线| 日韩人妻无码一区二区三区综合部| 久久精品国产亚洲一区二区| 亚洲国产精品综合一区在线| 日本免费一区尤物|