HTML · 前端面試題

### **1、HTML5為什么只需要寫< !DOCTYPE HTML>** - HTML5 不基于 SGML，因此不需要對 DTD 進行引用，但是需要 DOCTYPE 來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來進行） - 而 HTML4.01 基于 SGML，所以需要對 DTD 進行引用，才能告知瀏覽器文檔所使用的文檔類型。 ### **2、什么是SGML** - 標準通用標記語言（Standard Generalized Markup Language，SGML）是現時常用的超文本格式的最高層次標準，是可以定義標記語言的元語言，甚至可以定義不必采用< >的常規方式。由于它的復雜，因而難以普及。 - HTML 和 XML 同樣派生于它：XML可以被認為是它的一個子集，而 HTML 是它的一個應用。 - XML 的產生就是為了簡化它，以便用于更加通用的目的，比如語義 Web。它已經應用于大量的場合，比較著名的有XHTML、RSS、XML-RPC 和 SOAP。 ### **3、HTML5哪些操作可以SEO優化** - title 標簽、meta 標簽、header 標簽、footer 標簽 - 元標簽（meta 標簽）、導航標簽（nav 標簽）、文章標簽（article 標簽）、左或右側標簽（aside 標簽） ### **4、CSS盒模型有哪些及區別** **Q1** - IE 盒子模型 box-sizing: border-box;（怪異模式） - W3C 標準盒子模型 box-sizing: content-box;（標準模式）默認模式 **Q2** - border-box：width 和 height 屬性包括 padding 和 border，但不包含 margin。這是盒模型的文檔時，Internet Explorer 使用 Quirks 模式。 - content-box：這是默認樣式指定 CSS 標準。測量 width 和 height 屬性只包括的內容，但不包含 border, margin, 或者 padding。 - 兩者之間的區別 border-box 包含 padding，content-box 不包含 padding。 ### **5、XHTML 與 HTML 4.01的區別** 實際上，XHTML 與 HTML 4.01 標準沒有太多的不同。它們最主要的不同： 1.XHTML 元素必須被正確地嵌套。 ``` 錯誤：this is example. 正確：this is example. ``` 2.XHTML 元素必須被關閉。 ``` 錯誤：this is example. 正確：this is example. ``` 3.標簽名必須用小寫字母。 ``` 錯誤：this is example. 正確：this is example. ``` 3.1空標簽也必須被關閉 ``` 錯誤： 正確： ``` 4.XHTML 文檔必須擁有根元素。所有的 XHTML 元素必須被嵌套于 <html> 根元素中。 ### **6、CSS3有哪些新特性** 1. CSS3實現圓角（border-radius），陰影（box-shadow）， 2. 對文字加特效（text-shadow），線性漸變（gradient），旋轉（transform） 3. transform: rotate(9deg) scale(0.85, 0.90) translate(0px, -30px) skew(-9deg, 0deg);// 旋轉，縮放，定位，傾斜 4. 增加了更多的 CSS 選擇器多背景 rgba 5. 在 CSS3 中唯一引入的偽元素是 ::selection 6. 媒體查詢，多欄布局 7. border-image ### **7、多欄布局** CSS3多欄布局 | 屬性 | 描述 | |---|---| | column-count | 規定元素應該被分隔的列數 | | column-fill | 規定如何填充列 | | column-gap | 規定列之間的間隔 | | column-rule | 設置所有 column-rule-* 屬性的簡寫屬性 | | column-rule-color | 規定列之間規則的顏色 | | column-rule-style | 規定列之間規則的樣式 | | column-rule-width | 規定列之間規則的寬度 | | column-span | 規定元素應該橫跨的列數 | | column-width | 規定列的寬度 | | columns | 規定設置 column-width 和 column-count 的簡寫屬性 | ### **8、HTML5 有哪些新特性、移除了那些元素？如何處理 HTML5 新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5** **HTML5 有哪些新特性** 1. 拖拽釋放(Drag and drop) API 2. 語義化更好的內容標簽（header, nav, footer, aside,article, section） 3. 音頻、視頻API(audio, video) 4. 畫布(Canvas) API 5. 地理(Geolocation) API 6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失 7. sessionStorage 的數據在瀏覽器關閉后自動刪除 8. 表單控件，calendar、date、time、email、url、search 9. 新的技術 webworker, websocket, Geolocation **移除的元素：** 1. 純表現的元素：basefont，big，center，font, s，strike，tt，u； 2. 對可用性產生負面影響的元素：frame，frameset，noframes **支持HTML5新標簽：** IE8 / IE7 / IE6 支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架） ```  ``` **如何區分：** DOCTYPE聲明新增的結構元素、功能元素 ### **9、請描述一下 cookies，sessionStorage 和 localStorage 的區別** cookie 是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。 cookie 數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。 sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存。 **存儲大小** cookie 數據大小不能超過 4k sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大 **有期時間：** cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉 sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除 localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據

HTML