前一篇文章 初識H5（筆記一） 中簡單的總結了下  HTML 的作用、歷史、基本架構規範、幾個基本的標籤、字符集和DTD文件宣告；那麼這篇文章繼續研究探討 HTML 的知識。在之前我們編寫html檔案都是使用文字編輯器，效率低不說還很不方便，那麼在企業開發中，使用編寫網頁的工具主要有三種 : Dreamweaver（偏向於設計） / Sublime（輕量級、自帶功能不足、但外掛很強大） / WebStrom（重量級、功能強大、對JS支援很好）。一下我們主要使用 WebStrom 輔助學習網頁開發。

    首先先來看看 H系列標籤、p標籤、Hr標籤 :

        1. H系列標籤分為6個 從H1~H6 ，最多到6，超過6則無效 如 : <h1>標題</h1>；

                  + 被H標籤包裹的內容會獨佔一行

                  + 在H系列標籤中H1最大，H6最小

                  + 在企業開發中要慎用H系列標籤，特別是H1標籤，一般情況下一個介面只能出現一個H1標籤（跟SEO有關）

                  + H系列標籤只是給文字新增語義，而沒有修改文字的樣式

         2. p標籤，作用是告訴瀏覽器哪些文字是一個段落，段落標籤；

                   +  段落標籤包裹的內容獨佔一行

         3. Hr標籤， 作用是在瀏覽器中新增一行分割線

                   + <hr /> 是單標籤，而且獨佔一行

                   + <hr /> 和 <hr> 這兩種寫法在H5的版本規範中都可以，<hr />寫法是在XHTML中的規範要求，必須閉合，但是H5得規範對HTML和XHTML的規範是向下相容。

    在編寫HTML時的註釋格式

<!--這裡是註釋的內容-->   快捷方式（Mac）command + /

     圖片標籤

                 圖片標籤的基本格式 :<img src="圖片名" alt="替代圖片的文字" width=“圖片的寬” height="圖片的高" title="當滑鼠懸停在這個圖片上時，顯示這段文字">

                          注意 : 01.同時設定圖片的寬高時可能圖片會被拉伸，也可以單獨只設置寬或高，那麼圖片的高或寬會按照圖片原本款高比推算出來

                                    02.img標籤不會獨佔一行

     <br>標籤 : 同一語義段落換行使用（企業開發用到的地方較少，一般換行時，說明不是一段語義時才換行。注意點 : 新增N個<br>標籤就換N行）

    img標籤獲得圖片的相對 / 絕對路徑

+ 相對路徑 : 每次從html檔案所在的資料夾開始查詢（資源圖片與HTML檔案的關係分為三類:01.同級、02.下級、03.上級）。

                                                                + 絕對路徑 : 每次從根目錄（Mac）/ 指定的一個碟符開始查詢。

                                                                + 注意點 : 路徑中儘量不要有中文，可能會發生未知錯誤；絕對路徑不要跨碟符查詢，找不到。

     <a>標籤 : 用於控制兩個頁面相互跳轉

<!--a標籤的基本格式-->
    <a href="想要跳轉的網頁地址">顯示給使用者看的內容</a>

                a標籤必須具有href屬性，不然使用a標籤不知跳轉到何處

                a標籤中跳轉的URL地址必須包含協議頭 如 : http://  or https://

                a標籤不僅可以跳轉遠端伺服器網頁，也可以跳轉本地網頁

 <a href="想要跳轉的網頁地址">

        <img src="顯示的可點選圖片" alt="圖片顯示不出來" width="200">

 </a>

     <base>標籤 : 用來指定當前網頁中所有超連線（a標籤）需要如何開啟

                           注意點 :01. base標籤必須寫在head標籤內部

02. base標籤的target屬性和每個a標籤的target屬性設定優先順序為 : 就近原則

     html中的假連線 ：其實就是 a 標籤，只不過href屬性對應的跳轉網頁連結用 "#" or "javascript:"替代 致使點選連結跳轉不了。

作用 :01. 在專案開發前期很多頁面未完成時，很多超連結先使用假連結

                                                02. 實現點選某個文字彈回網頁頂部功能

"#" 和 "javascript:"區別 :"#"號點選會彈回網頁頂部；"javascript:"不會

     html中利用<a>標籤跳轉到本頁特定位置 和 跳轉到其他網頁特定位置

跳轉本網頁特定位置 : 與其說跳轉到本網頁特定位置，不如說跳轉到本網頁特定位置的標籤。每一個標籤都有一個id的屬性，我們就是通過這個屬性，來找到要跳轉位置的標籤。至於用什麼方法跳轉，我們還是利用<a>標籤來跳轉，只不過在 href 屬性里加入#要跳轉標籤的id。

<!--點選這個a標籤，跳轉到下面的h1標籤-->
    <a href="#flag">點我跳到本頁指定位置</a>
    
    <!--跳轉到的位置-->
    <h1 id="flag">要跳轉的位置</h1>

   <!--點選這個a標籤，跳轉到特定網頁中的h1標籤-->
    <a href="Test.html#flag">點我跳到Test.html網頁中指定位置</a>

    <!--其他網頁中要跳轉到的位置-->
    <h1 id="flag">要跳轉的位置</h1>

WebStrom快捷方式 01. command + D 快速複製添加當前游標所在行程式碼

                                 02. command + X 快速刪除當前游標所在行程式碼

                                 03. command + option + T 快速包裹一段選中文字來新增語義標籤