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

2024-04-27 15:13:23

字體：大中小

來源：轉載

供稿：網友

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

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 屬性時）有多種執行外部腳本的方法：