一、什么是HTML
HTML是用來描述網頁的一種語言。
HTML是指超文本標記語言（不僅包含純文本，還包含圖片、超鏈接、音頻、視頻等）。
HTML使用一套標記標簽來描述網頁。
二、HTML標簽的作用
充當網頁骨架。
語義化，使網絡爬蟲更好的抓取網站信息。
三、HTML骨架
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- 作用：配置html文件 --> 5 </head> 6 <body> 7 <!-- 書寫標簽組成的網頁結構 --> 8 </body> 9 </html>
1、DOCTYPE是document type(文檔類型)的簡寫，在網頁中用來說明當前使用的XHTML或者HTML是什么版本
2、head是對HTML進行一些附加信息，內容不顯示在網頁中
3、body是HTML的主體部分，顯示在網頁中的內容
四、head標簽中可以放的元素
1、meta標簽
<meta charset = "UTF-8" /> 用於聲明字符編碼級
<meta name="keywords" content = "內容"> 用於提供給搜索引擎關鍵字
<meta name = "discription" content = "內容"> 用於提供給搜索引擎網頁簡單描述
2、title標簽
標識文檔標題，該標題會顯示在瀏覽器的標題欄的標簽頁上
3、style標簽
<style type= "text/css"></style> 編寫頁面內部樣式
4、link標簽
<link>:用於引入css樣式
<link rel = "stylesheet" href = "index.css">
5、script標簽
<script src=index.js"></script>引入外部js文件
五、HTML語法
1、標簽之間對空格，縮進，換行不敏感，瀏覽器只會當做一個空格處理
2、標簽名必須使用一對尖括號包裹，標簽一般都是成對出現，單標簽除外
常見單標簽：<img/> <br/> <hr/>
3、標簽屬性寫法： 鍵值對形勢（key="value"）
eg: <img src="1.png" alt="圖片" title="我是一張圖片"/>
六、HTML中標簽分類
1、塊級元素：h1-h6、p、div、ol、ul、dl、form、table等
2、行內元素 a、img、span、strong、em等
塊級元素特點：
1、獨占一行；
2、高度，行高以及外邊距和內邊距都可控制；
3、寬度缺省是父容器的寬度，除非設定一個寬度；
4、它可以容納內聯元素和其他塊元素。（注意：p標簽不可包含div）
行內元素特點：
1、設置寬高無效
2、對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間
3、不會自動進行換行
七、HTML中常用標簽
1、h系列（h1-h6）（headline的縮寫）
作用：給文本添加標題語義
注意：h系列的標簽不能相互嵌套，網頁一般只有一個h1標簽
2、p（paragragh）段落標簽
作用：給文本添加段落語義
注意：p是文本級標簽，內部只能書寫文本類的內容，比如：文本，圖片，表單元素，廢棄標簽
3、img標簽（單標簽） <img src="" alt=""/> src:路徑，插入圖片所在的位置 alt：圖片加載失敗時顯示的文本 width:設置圖片的寬度 height:設置圖片的高度 注意：寬度和高度一般只設置一個讓圖片按比例縮放 <img src="images/01.png" alt="圖片加載失敗，請刷新" width="200px"/>
4、a標簽（超鏈接） href: 屬性值書寫的是要跳轉頁面的路徑（路徑可以為相對路徑和絕對路徑） target: 屬性值設置新頁面打開方式 默認值（_self）：在當前窗口打開 _blank: 在新窗口打開 title: 懸停提示文本 <a href="#id"></a> 可以進行頁面內錨鏈接跳轉
5、列表
5.1無序列表 ul
作用：給文本添加無序列表語義
ul:unordered list 無序列表
li:list item 列表項
注意：
ul和li是第一個成對出現的標簽,出現ul一定有li，有li一定被ul包裹
ul內部只能嵌套li不能出現任何其他標簽。
5.2有序列表 ol
作用：給文本添加有序列表語義
ol:ordered list 有序列表
li:list item 列表項
每一個列表項之間有順序之分
ol,li也是一組成對出現的標簽，ol一定嵌套li。
ol內部嵌套一個或者多個li
5.3自定義列表
作用：給文本添加自定義列表語義
dl: definition list 自定義列表
dt: definition title 標題
dd: definition description 描述
dl嵌套dt和dd，dt和dd是同級關系，dt是標題，dd是對標題解釋說明（dl>dt+dd）
6、表單元素 6.1form 說明：將所有的表單元素都書寫在form標簽內部 form標簽是功能標簽不是結構標簽 提交位置：action 提交方式：method <form action="1.php" method="get"></form> 表單元素：提供給用戶進行輸入或者選擇控件 屬性：type，根據type屬性值，有不同的表單類型 6.2單行文本框 <input type="text" name="yonghuming" value="用戶名" /> 6.3密碼框 <input type="password" name="mima" /> 6.4單選框 <p> 請選擇性別： <input type="radio" name="sex" />男性 <input type="radio" name="sex" checked="checked" />女性 </p> 說明： type屬性值：radio 同一組單選框，必須設置相同的name屬性值 checked: 設置表單被選中checked 6.5復選框 請選擇愛好： <p> <input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">學習</label> <input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label> </p> 說明：type屬性值：checkbox 同一組復選框，必須設置相同的name屬性值 也具有checked屬性 可以使用label標簽
八、HTML中廢棄的標簽
b,u,i,em,strong（文本級標簽）
b: 默認加粗
u: 默認下划線
i: 默認傾斜
em:語義加強，傾斜
strong: 語義加強，加粗
廢棄原因：沒有語義
九、HTML5中新增API
1、HTML5 Geolocation：獲取地理位置
2、HTML 拖放
3、web存儲：localStorage、sessionStorage（常用）
4、應用緩存
5、 Web Worker
6、SSE 服務端推送技術（比websocket更輕，有些情況可以替代ws）