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

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

    HTML5CSS3不僅是兩項新的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頁面執行某些操作。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章