• HTML5標籤語義化

1. 標籤名代表了標籤中內容的意思，讓正確的標籤幹正確的事情，如標題使用標題標籤
2. 結構化標籤
   1. HTML5新增了哪些標籤
      1. header               頭部標籤
      2. nav                     導航連結部分
      3. main                   頁面主要內容，它不應包含在文件中重複出現的內容，比如側欄、導航欄、版權資訊、站點標誌或搜尋表單。
      4. section              定義文件中的節（section、區段）
      5. article                定義頁面獨立的內容區域
      6. aside                  定義頁面的側邊欄內容
      7. footer                定義section或document的頁尾
   2. 什麼是標籤的語義（面試）
      1. 去掉css樣式也能很好體現HTML結構
      2. 使用者體驗：title屬性，alt屬性
      3. 針對特殊群體（讀屏機器，SEO等）
      4. 後期維護及更新
      5. 有利於搜尋引擎優化

• a標籤

  1. 什麼是超連結
     1. 概念：從當前頁面跳轉到另一個頁面，或當前頁面的不同區域，或另外的網站
     2. 分類
        1. 外部連結：從當前網站跳轉到其他網站
        2. 內部連結：從當前專案裡，跳轉到不同檔案
        3. 錨點連結：在當前頁面裡，不同區域之間跳轉
  2. a標籤（雙標籤）
     1. 作用：a標籤定義一個超連結
     2. 基本語法：<a 屬性=”屬性值”>標籤內容</a>
     3. 屬性
        1. href屬性：定義需要跳轉的目標地址（url），url：統一資源定位符
        2. name屬性：定義錨點的名稱
        3. target屬性：表示在哪個視窗開啟url地址
           1. _blank：新建視窗開啟
           2. _self：在當前視窗開啟（預設值）
     4. 注意：
        1. a標籤是行內元素，並且是一個雙標籤（必須寫內容才能看到a標籤）
        2. 重點掌握href屬性
  3. 絕對路徑與相對路徑
     1. 絕對路徑：絕對路徑以協議（http://、https://）或者以“/”作為字首
     2. 相對路徑
        ：以檔案本身所在的目錄為參照，進行路徑的定位
        1. 同一級檔案之間跳轉
           1. ./：                    表示當前目錄進行定位，可以不寫
           2. /目錄名：        表示進入目錄
        2. 不同目錄檔案之間的跳轉
           1. ../：                   表示返回上一層目錄，可以使用多個../來表示返回多級

                                                                                                   目錄

• img標籤

  1. 作用：網頁中嵌入影象
  2. 語法：<img src=”引入影象的地址(url)” alt=””>
  3. 屬性
     1. 必選
        1. src：        表示引入影象具體地址
        2. alt：         表示影象載入失敗時顯示的文字（1.使用者體驗，2.seo設定關鍵字）
     2. 可選
        1. width：   表示影象寬度
        2. height：  表示影象高度
        3. title：      圖片說明（滑鼠hover上影象時顯示）

注意：

寬度和高度任意設定一個值時，影象會進行等比例縮放

                   img標籤是一個行內標籤，是一個單標籤（自關閉），可置換標籤

                   img標籤可以支援多種格式圖片（jpg，bmp，png，gif）

• 擴充套件

  1. audio標籤：定義網頁中加入聲音
     1. 語法：<audio src=”音樂檔案路徑url” autoplay=”autoplay”>

您的瀏覽器不支援audio標籤

                                       </audio>

1. 1. 1. 屬性：
         1. src：                  表示聲音的地址url
         2. autoplay：       表示自動播放
         3. controls：        表示播放控制元件
         4. muted：           輸出時靜音
         5. preload：         音訊在頁面載入時載入，並預備播放
      2. 支援三種音訊格式：ogg，mp3，wav等

注意：audio標籤是html5中新標籤，可能在某些低版本瀏覽器中不支援，需要加上提示文字。

1. 1. video標籤：定義網頁中加入視訊
      1. 語法：<video src=”視訊檔案路徑url” autoplay=”autoplay”>

您的瀏覽器不支援video標籤

                                       </video>

1. 1. 1. 屬性：
         1. src：                  表示播放視訊的url
         2. controls：        表示播放控制元件
         3. autoplay：       自動播放
         4. width：             設定播放器寬度
         5. height：           設定播放器高度
         6. poster：           表示海報
      2. 支援的格式：ogg，MPEG4，WebM等
   2. source標籤：主要用於audio和video標籤支援的格式檔案進行選擇性播放
      1. 語法：<source src="資源地址url" type="資源型別">

注意：src的值為資源地址，type的值為資源的型別。可以指定多個資源，瀏覽器將自動選擇支援的資源進行播放。

常用的型別：

用於視訊：

• video/ogg
• video/mp4
• video/webm

用於音訊：

• audio/ogg
• audio/mpeg

• 列表標籤

  1. 概念：列表主要用於製作網頁中資料列表或導航
  2. 分類：

     1. 無序列表（ul）：列表項之間屬於並列關係

        1. 語法：<ul>

                                                                          <li>內容部分</li>

                                                                   </ul>

1. 1. 1. 說明：
         1. li標籤表示列表的列表項，一個列表裡面可以放多個列表項
         2. ul標籤表示定義無序列表，並沒有實際作用
         3. 注意
            1. ul>li 結構固定，必須配合使用，並且ul是一個塊級元素
            2. 如果需要巢狀標籤，都放在li裡面
            3. li前面預設有小圓點（標誌）
            4. 預設樣式後期在專案中要去掉（style=”list-style:none”）

      2. 有序列表（ol）：表示有順序或重要性的列表

         1. 語法：<ol>

                                                       <li>內容部分</li>

                                                 </ol>

1. 說明：
2. ol標籤表示定義有序列表，表示一個列表區域
3. li標籤表示列表的列表項，一個列表裡面可以放多個列表項
   1. 注意
      1. ol>li結構固定，必須配合使用（塊級標籤）
      2. li標籤裡面可以巢狀任何標籤（包括自身）
      3. 有序列表ol上的type屬性可以設定li前面的編號
      4. 常見type屬性值：
         1. A 代表列表項前面顯示的是大寫字母；
         2. a表示顯示小寫字母；
         3. I代表用大寫羅馬數字顯示；
         4. i代表用小寫羅馬數字顯示。
         5. 預設情況下顯示數字；
      5. 定義列表（dl）：定義了定義列表
         1. 語法：<dl>

                                                    <dt>名詞或概念</dt>

                                                    <dd>對名詞或概念的解釋或說明</dd>

                                                 </dl>

1. 1. 1. 1. 說明：
            1. dl標籤表示定義定義列表的區域，並沒有實際效果
            2. dt標籤表示名詞或概念
            3. dd標籤表示對名詞或概念的解釋或說明
         2. 注意：
            1. dl>dt,dd結構固定，必須配合使用
            2. dt標籤和dd標籤裡可以巢狀任何標籤
            3. dl標籤預設有樣式一般配合css進行修飾