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

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

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

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

????2）良好的媒體支持：對于先前以插件的方式播放音頻、視頻帶來的麻煩，HTML5有了解決方案，audio和video標簽能夠方便地實現應變。

????3）更強大的Web應用：HTML5提供了令人稱奇的功能，在某些情況下，甚至可以放棄使用第三方的技術。

????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標簽還能夠配合

JavaScript利用鍵盤來控制圖形圖像。

????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頁面執行某些操作。

前端面試系列文章：

1、【前端面試】HTML5+CSS3初級面試1

2、【前端面試】HTML5+CSS3初級面試2

3、【前端面試】HTML5+CSS3初級面試3
4、【前端面試】HTML5+CSS3初級面試4
---------------------?
作者：Wendy-lxq?
來源：CSDN?
原文：https://blog.csdn.net/u010297791/article/details/54923001?
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

總結

以上是生活随笔為你收集整理的【前端面试】HTML5+CSS3初级面试1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。