一、HTML語義化
（一）對語義化的理解（優點）
1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
2，有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
3，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
(二)具體怎麼使用（舉例說明）
1.標題語義化：
hn：h1~h6分級標題，用於創建頁面信息的層級關係。
2.圖片語義化：
img標籤的兩個重要屬性：alt title
- alt：用於圖片描述，這個描述是給搜索引擎看的。並且當圖片無法顯示時，頁面會顯示alt中的文字
- title：用於圖片描述，這個描述是給用戶看得，當鼠標移動到圖片上時，會顯示title中的內容
對於img標籤，一定要添加alt屬性，以便搜索引擎識別圖片的內容
請一定要注意：alt標籤是img標籤的必須屬性，一定要添加，title是img標籤的可選屬性，可以添加也可以不添加
對於img標籤，要在alt屬性中添加必要的描述信息；
3.其他語義化：
- header：頁眉通常包括網站標誌、主導航、全站鏈接以及搜索框。
- nav：標記導航，僅對文檔中重要的鏈接羣使用。
- article：包含像報紙一樣的內容= =||是這麼理解的，表示文檔、頁面、應用或一個獨立的容器。
- footer：頁腳，只有當父級是body時，纔是整個頁面的頁腳。
二、!DOCTYPE
(一)作用：
（1）、!DOCTYPE 聲明位於文檔中的最前面，處於 html標籤之前。告知瀏覽器以何種模式來渲染文檔。
（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
(二)、文檔類型
該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
- HTML 4.01 規定了三種文檔類型：Strict（嚴格）、Transitional(過渡) 以及 Frameset（框架）。
- XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。
三、XHTML和HTML的區別(共八條)
1.所有的標記都必須要有一個相應的結束標記
以前在HTML中，你可以打開許多標籤，例如和li而不一定寫對應的
和/li來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標籤必須關閉。
2.所有標籤的元素和屬性的名字都必須使用小寫
與HTML不一樣，XHTML對大小寫是敏感的，title和TITLE是不同的標籤。XHTML要求所有的標籤和屬性的名字都必須使用小寫。例如：BODY必須寫成body 。大小寫夾雜也是不被認可的，通常dreamweaver自動生成的屬性名字”onMouseOver”也必須修改成”onmouseover”。
3.所有的XML標記都必須合理嵌套
同樣因爲XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序， 就是說，一層一層的嵌套必須是嚴格對稱。
4.所有的屬性必須用引號""括起來
在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加引號。
5.把所有<和&特殊符號用編碼表示
任何小於號（<），不是標籤的一部分，都必須被編碼爲& l t ;
任何大於號（>），不是標籤的一部分，都必須被編碼爲& g t ;
任何與號（&），不是實體的一部分的，都必須被編碼爲& a m p;
注：以上字符之間無空格。
6.給所有屬性賦一個值
XHTML規定所有屬性都必須有一個值，沒有值的就重複本身。例如：
<input type="checkbox" name="shirt" value="medium" checked>
必須修改爲：
<input type="checkbox" name="shirt" value="medium" checked="checked">
7.不要在註釋內容中使“--”
“–”只能發生在XHTML註釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:
<!--這裏是註釋-----------這裏是註釋-->
用等號或者空格替換內部的虛線。
<!--這裏是註釋============這裏是註釋-->
以上這些規範有的看上去比較奇怪，但這一切都是爲了使我們的代碼有一個統一、唯一的標準，便於以後的數據再利用。
8.圖片必須有說明文字
每個圖片標籤都必須有ALT說明文字。
<img src="ball.jpg" alt="large red ball" />
四、文本框禁止用戶輸入的方法
1.設置readonly屬性爲true。
<input type="text" value="readonly" readonly> 2.設置disabled屬性爲true。
<input type="text" value="disabled" disabled> 3.在對象focus時立刻讓它blur，使它無法獲得焦點。
<input type="text" value="οnfοcus=this.blur()" οnfοcus="this.blur()"> 幾個特殊事件的應用
onfocus當對象獲得焦點時觸發。
focus使對象得到焦點。
onblur在對象失去輸入焦點時觸發。
blur模糊對象的內容以便使其看起來失去焦點。
disabled和readonly屬性的區別
- 如果一個輸入項的disabled設爲true，則該表單輸入項不能獲取焦點，用戶的所有操作（鼠標點擊和鍵盤輸入等）對該輸入項都無效，最重要的一點是當提交表單時，這個表單輸入項將不會被提交。
- 而readonly只是針對文本輸入框這類可以輸入文本的輸入項，如果設爲true，用戶只是不能編輯對應的文本，但是仍然可以聚焦焦點，並且在提交表單的時候，該輸入項會作爲form的一項提交。
五、塊狀元素、內聯元素和空元素
（一）塊狀元素
1.特點：
- 獨佔一行
- 默認情況下，其寬度自動填滿其父元素寬度
- display屬性爲block
- 換行符不解析
2.具體元素
div – 常用塊級容易，也是CSS layout的主要標籤
dl – 定義列表
form – 交互表單
hn– 標題
hr – 水平分隔線
ol – 有序表單
p – 段落
table – 表格
ul – 無序列表
(二)內聯（行內）元素
1.特點：
- 可以在一行顯示
- 換行符會被解析
- 寬/高/內外邊距不可設置，默認就是文字或者圖片的高度和寬度
2.具體元素
a – 錨點
b – 粗體(不推薦)
br – 換行
em – 強調
i – 斜體
img – 圖片
input – 輸入框
span – 常用內聯容器，定義文本內區塊
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
(三)空元素
1.特點：沒有內容的 HTML 內容被稱爲空元素。空元素是在開始標籤中關閉的。
2.具體元素
br、meta、hr、link、input、img
（四）行內元素與塊級元素有什麼不同？
區別一：
塊級：塊級元素會獨佔一行，默認情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素可以設置寬高
行內：行內元素不可以設置寬高
區別三：
塊級：塊級元素可以設置margin，padding
行內：行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區別四：
塊級：display:block;
行內：display:inline;
可以通過修改display屬性來切換塊級元素和行內元素
(五)display常見屬性
display:none;不顯示該元素，也不會保留該元素原先佔有的文檔流位置。
display:block;轉換爲塊級元素。
display:inline;轉換爲行內元素。
display:inline-block;轉換爲行內塊級元素。
六、Cookie和session localstorage sessionstorage的區別
Cookie和session的區別
1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
5、所以個人建議：
將登陸信息等重要信息存放爲SESSION
其他信息如果需要保留，可以放在COOKIE中
6、session保存在服務器，客戶端不知道其中的信息；cookie保存在客戶端，服務器能夠知道其中的信息。
7、session中保存的是對象，cookie中保存的是字符串。
8、session不能區分路徑，同一個用戶在訪問一個網站期間，所有的session在任何一個地方都可以訪問到。而cookie中如果設置了路徑參數，那麼同一個網站中不同路徑下的cookie互相是訪問不到的。
cookies，sessionStorage 和 localStorage 的區別
相同點：都存儲在客戶端
不同點：
1.存儲大小
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
2.有效時間
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
3. 數據與服務器之間的交互方式
cookie在瀏覽器和服務器之間來回傳遞
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
4.sessionStorage和localStorage有更豐富易用的接口
5..sessionStorage和localStorage有各自獨立的存儲空間
6.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
八、H5爲何只寫<!DOCTYPE HTML>
1.HTML5不基於SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲，而HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所用的文檔類型。
2.文檔類型定義是一套爲了進行程序間的數據交換而建立的關於標記符的語法規則。
