HTML學習筆記

---

HTML學習筆記

2016年12月15日整理

Chapter1

1. URL(scheme://host.domain:port/path/filename)
   1. scheme: 定義因特網服務的類型，常見的爲http
   2. host: 定義域主機（http的默認主機是www）
   3. domain: 定義因特網域名
   4. port: 定義端口號，默認是端口80
   5. path: 網頁在服務器上的路徑
   6. filename: 文件名稱
2. htm & html 文件名的區別：
   1. 以前的老版本系統只支持顯示3位的文件名後綴，因此使用htm
   2. 如今統一使用html
3. 單標籤 & 雙標籤：
   1. 單標籤： <!--註釋--> , <br /> , <hr /> , <img>
   2. 雙標籤：<p></p> , <h1><h1>-<h6><h6>...
4. 標籤關係：
   1. 並列關係
   2. 嵌套關係
5. html中，除了語義，其餘什麼都沒有
   1. HTML 超文本標記語言，從語義的角度描述頁面結構
   2. CSS 層疊式樣式表，從審美的角度負責頁面樣式

   3. JS JavaScript，從交互的角度描述頁面行爲

      標籤有什麼做用？  
       1. 給文本增長主XXX的語義
       2. 。。。

Chapter2

1. form 的 method: get/post
   1. get: 經過地址欄的方式進行明文數據提交，將用戶輸入的信息拼接在地址欄最後
   2. post: 數據經過後臺打包處理進行提交，不會將用戶信息顯示出來，安全性較高

2. form控件

   1. <input type="text" id="" name="" value="" maxlength="6" readonly="readonly" disabled="disabled">
    2. <input type="password">
    3. <input type="radio" name=""  checked="checked"> 實現單選效果必定要給控件設置相同的名稱
    4. <input type="image" src="">
    5. <input type="checkbox" checked="checked">
    6. <input type="file">
    7. <input type="reset">
    8. <input type="submit">
    9. <input type="button">
    10. <select name="" id="" multiple="multiple">
            <optgroup label="">
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
            </optgroup>
        </select>
    11. <textarea cols="30" rows="10" style="resize: none;"></textarea>
    12. <fieldset>
            <legend>...</legend>
        </fieldset>
    **HTML5新增**
    13. <input type="url">
    14. <input type="email">
    15. <input type="date">
    16. <input type="time">
    17. <input type="number">
    18. <input type="range" max="100" step="5">
    19. 什麼表單元素都有label

3. 標籤語義化
   1. 儘量少的使用無語義的標籤div和span；
   2. 在語義不明顯時，既可使用div或者p時，儘可能用有語義的標籤；
   3. 不要使用純樣式標籤，如：b、font、u等，改用css設置（作小掛件，精靈圖除外）；
   4. 須要強調的文本，能夠包含在strong或者em標籤中strong默認樣式是加粗（不要用b），em是斜體（不用i）。
4. 字庫 UTF-8 和 gb2312
   1. UTF-8是國際通用字庫，裏面涵蓋了全部地球上全部人類的語言文字，好比阿拉伯文、漢語...
   2. gb2312 是國標，是中國的字庫，裏面僅涵蓋了漢字和一些經常使用外文，好比日文片假名，和常見的符號。
   3. 字庫規模： UTF-8（字全） > gb2312（只有漢字）
   4. 保存大小： UTF-8（更臃腫、加載更慢） >gb2312（更小巧，加載更快）
   5. UTF-8裏面存儲一個漢字3個字節。而gb2312中存儲一個漢字2個字節。
5. SEO(search engine optimization) 搜索引擎優化
6. <meta name="Keywords" content=" " />
7. <meta name="Description" content=" " />
8. <h1></h1> 到 <h6></h6> 是容器級的標籤，理論上裏面能夠放置p、ul，但在語義上，不要這麼寫。
9. 容器級 & 文本級
   1. 容器級的標籤：裏面能夠放置任何東西
   2. 文本級的標籤：裏面只能放置文字、圖片、表單元素，eg. <p></p>
   3. p 是一個文本級的標籤，p 裏面只能放文字、圖片、表單元素

10. DTD：文檔類型聲明Doc Type Declaration。一共有7種DTD，3種HTML4.01的，3種XHTML1.0的，1種HTML5的
    

11. 錨點

    <a name="anchor"></a>
    <a id="anchor"></a>

12. li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。
    li是一個容器級標籤，li裏面什麼都能放

13. 根據語義來使用標籤，而不是根據標籤的表面效果