html5/css3常考面試題

時間  2019-11-30
標籤 html5 html css3 css 面試 欄目 HTML5 简体版
原文   原文鏈接

1、HTML5 CSS3css

  1. CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），html

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）前端

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜html5

4. 增長了更多的CSS選擇器  多背景 rgbaweb

5. 在CSS3中惟一引入的僞元素是 ::selection.canvas

6. 媒體查詢，多欄佈局跨域

7. border-image瀏覽器

  1. html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 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新標籤：

1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

如何區分：

DOCTYPE聲明新增的結構元素、功能元素

  1. 本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什麼？

Cookies:服務器和客戶端均可以訪問；大小隻有4KB左右；有有效期，過時後將會刪除；

本地存儲：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意經過POST或者GET的通道發送到服務器；每一個域5MB；沒有過時數據，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除

  1. 如何實現瀏覽器內多個標籤頁之間的通訊?

調用 localstorge、cookies 等本地存儲方式

  1. 你如何對網站的文件和資源進行優化？

文件合併

文件最小化/文件壓縮

使用CDN託管

緩存的使用

  1. 什麼是響應式設計？

它是關於網頁製做的過程當中讓不一樣的設備有不一樣的尺寸和不一樣的功能。響應式設計是讓全部的人能在這些設備上讓網站運行正常

  1. 新的 HTML5 文檔類型和字符集是？

答：HTML5文檔類型：<!doctype html>

    HTML5使用的編碼<meta charset=」UTF-8」>

  1. HTML5 Canvas 元素有什麼用？

答：Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於能夠直接在 HTML 上進行圖形操做。

  1. HTML5 存儲類型有什麼區別？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

  1. 用H5+CSS3解決下導航欄最後一項掉下來的問題
  2. CSS3新增僞類有那些？

    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

    p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

    p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

    :enabled、:disabled 控制表單控件的禁用狀態。

:checked，單選框或複選框被選中。

  1. 請用CSS實現：一個矩形內容，有投影，有圓角，hover狀態慢慢變透明。

css屬性的熟練程度和實踐經驗

  1. 描述下CSS3裏實現元素動畫的方法

動畫相關屬性的熟悉程度

  1. html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，地理定位等功能的增長。

* 繪畫 canvas 元素

  用於媒介回放的 video 和 audio 元素

  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

  sessionStorage 的數據在瀏覽器關閉後自動刪除

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

  表單控件，calendar、date、time、email、url、search

  CSS3實現圓角，陰影，對文字加特效，增長了更多的CSS選擇器  多背景 rgba

  新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

* 是IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

  1. 你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做? 一個滿屏 品 字佈局 如何設計?

* 首先劃分紅頭部、body、腳部；。。。。。

* 實現效果圖是最基本的工做，精確到2px；

  與設計師，產品經理的溝通和項目的參與

  作好的頁面結構，頁面重構和用戶體驗

  處理hack，兼容、寫出優美的代碼格式

  針對服務器的優化、擁抱 HTML5。

  1. 你能描述一下漸進加強和優雅降級之間的不一樣嗎?

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。　

　　「優雅降級」觀點

　　「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。

　　在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

　　「漸進加強」觀點

　　「漸進加強」觀點則認爲應關注於內容自己。

　　內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

 

　　那麼問題了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

  1. 爲何利用多個域名來存儲網站資源會更有效？

CDN緩存更方便 

突破瀏覽器併發限制 

節約cookie帶寬 

節約主域名的鏈接數，優化頁面響應速度 

防止沒必要要的安全問題

  1. 請談一下你對網頁標準和標準制定機構重要性的理解。

　　（無標準答案）網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

 

  1. 請描述一下cookies，sessionStorage和localStorage的區別？　　

　　sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

  1. 知道css有個content屬性嗎？有什麼做用？有什麼應用？

知道。css的content屬性專門應用在 before/after 僞元素上，用來插入生成內容。最多見的應用是利用僞類清除浮動。

//一種常見利用僞類清除浮動的代碼

.clearfix:after {

    content:"."; //這裏利用到了content屬性

    display:block;

    height:0;

    visibility:hidden;

    clear:both; }

.clearfix {

    *zoom:1;

}

after僞元素經過 content 在元素的後面生成了內容爲一個點的塊級素，再利用clear:both清除浮動。

　　那麼問題繼續還有，知道css計數器（序列數字字符自動遞增）嗎？如何經過css content屬性實現css計數器？

答案：css計數器是經過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 僞類實現。 

  1. 如何在 HTML5 頁面中嵌入音頻?

HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP三、Wav 和 Ogg：

<audio controls> 

  <source src="jamshed.mp3" type="audio/mpeg"> 

   Your browser does'nt support audio embedding feature. 

</audio>

  1. 如何在 HTML5 頁面中嵌入視頻？

和音頻同樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP四、WebM 和 Ogg：

<video width="450" height="340" controls> 

  <source src="jamshed.mp4" type="video/mp4"> 

   Your browser does'nt support video embedding feature. 

</video> 

  1. HTML5 引入什麼新的表單屬性？

Datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl

  1. CSS3新增僞類有那些？

 p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

    p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

    p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

    :enabled、:disabled 控制表單控件的禁用狀態。

:checked，單選框或複選框被選中。

  1. (寫)描述一段語義的html代碼吧。

（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）

就是基於語義化設計原則）  

< div id="header">

< h1>標題< /h1>

< h2>專一Web前端技術< /h2>

< /div>

語義 HTML 具備如下特性：

 

文字包裹在元素中，用以反映內容。例如：

段落包含在 <p> 元素中。

順序表包含在<ol>元素中。

從其餘來源引用的大型文字塊包含在<blockquote>元素中。

HTML 元素不能用做語義用途之外的其餘目的。例如：

<h1>包含標題，但並不是用於放大文本。

<blockquote>包含大段引述，但並不是用於文本縮進。

空白段落元素 ( <p></p> ) 並不是用於跳行。

文本並不直接包含任何樣式信息。例如：

不使用 <font> 或 <center> 等格式標記。

類或 ID 中不引用顏色或位置。

  1. cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage區別

sessionStorage和localStorage的存儲空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨立的存儲空間；

  1. html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas  

  用於媒介回放的 video 和 audio 元素

  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

  sessionStorage 的數據在瀏覽器關閉後自動刪除

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

  表單控件，calendar、date、time、email、url、search  

  新的技術webworker, websockt, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

  1. 如何區分： DOCTYPE聲明\新增的結構元素\功能元素
  2. 語義化的理解？

用正確的標籤作正確的事情！

html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。

搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

  1. HTML5的離線儲存？

localStorage    長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage  數據在瀏覽器關閉後自動刪除。

  1. 寫出HTML5的文檔聲明方式

 

 <DOCYPE html>
  1. HTML5和CSS3的新標籤     

 

 

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...

CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image, 

border-color, transform...;
  1. 本身對標籤語義化的理解

    在我看來，語義化就是好比說一個段落， 那麼咱們就應該用 <p>標籤來修飾，標題就應該用 <h?>標籤等。符合文檔語義的標籤。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程