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. 根據語義來使用標簽，而不是根據標簽的錶面效果