最近剛好在看前端的面試，把看到的內容總結一下，方便大家一起學習。

1、簡單說一下對HTML5+CSS3的瞭解。

     HTML5和CSS3不僅是兩項新的Web技術標準，而且代表了下一代HTML和CSS技術。其未來的發展前景已經可以預見，那就是HTML5必將被越來越多的Web開發人員所使用。各大瀏覽器廠家已經積極更新自己的產品，以更好地支援HTML5.它的優勢主要有以下幾點：

    1）更多的描述性標籤：HTML5引入非常多的描述性標籤。

    2）良好的媒體支援：對於先前以外掛的方式播放音訊、視訊帶來的麻煩，HTML5有了解決方案，audio和video標籤能夠方便地實現應變。

    3）更強大的Web應用

    4）跨文件資訊通訊：Web瀏覽器會組織不同域間的指令碼互動或影響，但是對於可信任的指令碼或者就是麻煩。HTML5引入了一套安全且易於實現的應對方案。

    5）Web Sockets：HTML5提供了對Web Sockets的支援。

    6）客戶端儲存：HTML5的Web Storage和Web SQL Database API，可以在瀏覽器中構建Web應用的客戶端持久化資料。

    7）更加精美的介面：HTML5+CSS3組合渲染出來的介面效果更加精美。

    8）更強大的表單：HTML5提供了功能更加強大的表單介面控制元件，使用方便。

    9）提升可訪問性：內容更加清晰，使使用者的操作更加簡單方便，提升使用者體驗。

    10）先進的選擇器：CSS3選擇器可以方便的識別出表格的奇偶行，複選框等，程式碼標記更少。

    11）視覺效果：具有精美的介面，有陰影、漸變、圓角、旋轉等視覺效果。

    CSS3是CSS技術的升級版本，CSS3語言開發是朝著模組化發展的。作為一個模組，以前的規範太龐大，而且比較複雜，所以把它分解為一些小的模組，使更多的模組被加進來。這些模組包括：盒子模型、列表模組、超連結方式、語言模組、背景和邊框、文字特效、多欄佈局等。

2、如果把HTML5看成一個開放平臺，那它的構建模組有哪些。

     如果把HTML5看成一個開放平臺，它構建的模組至少包括以下幾個：<nav>、<header>、<section>、<footer>。

    <nav>標籤用來將具有導航性質的連結劃分在一起，使程式碼結構在語義化方面更加準確。

    <header>標籤用來定義文件的頁首。

    <section>標籤用來描述文件的結構。

    <footer>標籤用來定義頁尾。在典型情況下，該元素會包含作者的姓名，文件的創作日期以及聯絡資訊。

3、CSS3有哪些新內容，請至少說出5個。

    1）CSS3圓角表格，對應屬性：border-radius。

    2）以往對網頁上的文字加特效只能用filter屬性，但是在CSS3中專門制定了一個加文字特效的屬性，而且不止加陰影這種效果。

對應屬性：font-effect。

    3）豐富了對連結下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點線、虛線等等，更可對下劃線的顏色和

位置進行任意改變，哈哈~~下劃線的世界從此不再單一。（還有對應頂線和中橫線的樣式，效果與下劃線類似）對應屬性：text-

underline-style，text-underline-color，text-underline-mode，text-underline-position。

    4）我們在做筆記時經常要在文字下點幾個點或打個圈什麼的，以示重點，CSS3也開始加入了這項功能，這應該在某些特定網頁

上很有用。對應屬性：font-emphasize-style和font-emphasize-position。

    5）Font-face可以用來載入字型樣式，而且它還能夠載入伺服器端的字型檔案，顯示客戶端沒有安裝的字型。

4、HTML5有哪些新內容，請至少說出5個。

    1）HTML5已經確定引入canvas標籤，通過canvas，使用者可以動態生成各種圖形影象，圖示以及動畫。canvas標籤還能夠配合

    2）在HTML5中包含Web Forms 2.0，用來描繪如何進行頁面表格操作。其中最大的特點就是“表格確認”。當前，開發者通常

使用JavaScript（客戶端）和PHP（服務端）程式碼來確認輸入的內容。

    3）HTML5為新元素和現有的元素提供更多的API，旨在改進頁面程式開發和增加HTML4所缺乏的特性。比如，一個視訊和音訊

方面的API將與<audio>和<video>元素一起使用，它將提供視訊和音訊的回放功能，而無須依賴第三方程式，比如flash。

    4）語意化更好的內容元素，比如 article、footer、header、nav、section。

    5）新的表單控制元件，比如 calendar、date、time、email、url、search。

5、HTML5新增的語義化標籤有哪些。

    HTML5新增的語義化標籤有很多，比如：

    1）<section></section>用於對網站或應用程式中頁面上的內容進行分塊。通常由內容及其標題組成。

    2）<article></article>代表文件、頁面或應用程式中獨立的、完整的、可以獨自被外部引用的內容。當我們描述一件具體的事

物的時候，通常使用article來代替section。如一個帖子，一段使用者評論等。

    3）<aside></aside>表示當前頁面或者文章的附屬資訊部分。如與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組等。

    4）<nav></nav>用作頁面導航的連結組，其中可以包括<ul><li><p>元素等。

    5）<header></header>整個頁面或者頁面內容區塊的標題，可以包含其他內容。

    6）<footer></footer>頁尾，頁面底部或者版塊的內容。

    7）<hgroup></hgroup>頁面上標題的組合，通常對h1~h6進行分組。

    8）<figure></figure>通常用於圖片，統計圖或程式碼示例，帶有可選標題。將其從網頁上移除後不會對網頁上其他內容產生影響。

    9）<figcaption></figcaption>表示figure的標題，從屬於figure元素。

   10）<time></time>表示某個時間或者某個日期。其中pubdate屬性代表了文件的釋出日期，可以用到time標籤裡。

6、HTML5新增的屬性有哪些。

    1）表單相關的屬性

      · 對input（type=text）、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓元素在畫面開啟時自動獲得焦點。

      · 對input（type=text）、textarea指定placeholder屬性，它會對使用者的輸入進行提示，提示使用者可以輸入的內容。

      · 對input、output、select、textarea、button與fieldset指定form屬性。它宣告屬於哪個表單，然後將其放置在頁面的任何位置，而不失表單之內。

     · 對input（type=text）、textarea指定required屬性。該屬性表示使用者提交時進行檢查，檢查該元素內必定要有輸入內容。

     · 為input標籤增加幾個新的屬性：autocomplete、min、max、multiple、pattern與step。還有list屬性與datalist元素配合使用；datalist元素與autocomplete屬性配合使用。multiple屬性允許上傳時一次上傳多個檔案； pattern屬性用於驗證輸入欄位的模式，其實就是正則表示式。step 屬性規定輸入欄位的合法數字間隔（假如 step="3"，則合法數字應該是 -3、0、3、6，以此類推），step 屬性可以與 max 以及 min 屬性配合使用，以建立合法值的範圍。

     · 為input、button元素增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性。使用者過載form元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加disabled屬性，可以把它的子元素設為disabled狀態。

     · 為input、button、form增加novalidate屬性，可以取消提交時進行的有關檢查，表單可以被無條件地提交。

    2）連結相關屬性

     · 為a、area增加media屬性。規定目標 URL 是為什麼型別的媒介/裝置進行優化的。該屬性用於規定目標 URL 是為特殊裝置（比如 iPhone）、語音或列印媒介設計的。該屬性可接受多個值。只能在 href 屬性存在時使用。

     · 為area增加herflang和rel屬性。hreflang 屬性規定在被連結文件中的文字的語言。只有當設定了 href 屬性時，才能使用該屬性。註釋：該屬性是純諮詢性的。rel 屬性規定當前文件與被連結文件/資源之間的關係。只有當使用 href 屬性時，才能使用 rel 屬性。

     · 為link增加size屬性。sizes 屬性規定被連結資源的尺寸。只有當被連結資源是圖示時 (rel="icon")，才能使用該屬性。該屬性可接受多個值。值由空格分隔。

     · 為base元素增加target屬性，主要是保持與a元素的一致性。

    3）其他屬性

     · 為ol增加reversed屬性，它指定列表倒序顯示。

     · 為meta增加charset屬性

     · 為menu增加type和label屬性。label為選單定義一個課件的標註，type屬性讓才當可以以上下文選單、工具條與列表cande但三種形式出現。

     · 為style增加scoped屬性。它允許我們為文件的指定部分定義樣式，而不是整個文件。如果使用 "scoped" 屬性，那麼所規定的樣式只能應用到 style 元素的父元素及其子元素。

     · 為script增減屬性，它定義指令碼是否非同步執行。async 屬性僅適用於外部指令碼（只有在使用 src 屬性時）有多種執行外部指令碼的方法：

     · 如果 async="async"：指令碼相對於頁面的其餘部分非同步地執行（當頁面繼續進行解析時，指令碼將被執行）

     · 如果不使用 async 且 defer="defer"：指令碼將在頁面完成解析時執行

     · 如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行指令碼

     · 為html元素增加manifest，開發離線web應用程式時他與API結合使用，定義一個URL，在這個URL上描述文件的快取資訊。

     · 為iframe增加撒個屬性，sandbox、seamless、srcdoc。用來提高頁面安全性，防止不信任的web頁面執行某些操作。

前端面試系列文章：