1、內元素和塊級元素的區別?
(2)塊級元素有:div p ul ol li dl dt dd h1-h6
(3)常見的空元素:br-換行,hr-水平分割線
2、Doctype作用?標準模式與混雜模式如何區分?
<!DOCTYPE>告訴瀏覽器使用哪個版本的html規范來渲染文檔。DOCTYPE不存在或形式不正確會導致html文檔以混雜模式呈現。
標準模式(Standards mode)以瀏覽器支持的最高標準運行;混雜模式(Quirks mode)中頁面是一種比較寬松的向后兼容的方式顯示。
3、引入樣式時,link和@import的區別?
鏈接樣式時,link只能在HTML頁面中引入外部樣式
導入樣式表時,@import 既可以在HTML頁面中導入外部樣式,也可以在css樣式文件中導入外部css樣式。
4、html5有哪些新特性?
HTML5 現在已經不是 SGML 的子集,主要是關于圖像,位置,存儲,多任務等功能的增加。
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉后自動刪除;
(5)語意化更好的內容元素,比如 article、footer、header、nav、section;
(6)表單控件,calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
IE8/IE7/IE6支持通過document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽后,還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim
移除的元素:
純表現的元素:basefont big center font s strike tt u
性能較差元素:frame frameset noframes
區分:
DOCTYPE聲明的方式是區分重要因素
根據新增加的結構、功能來區分
5、介紹一下你對瀏覽器內核的理解?
主要分成兩部分:渲染引擎(Layout Engine或Rendering Engine)和js引擎。
渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。
js引擎:解析和執行JavaScript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確,后來JS引擎越來越獨立,內核就傾向于只指渲染引擎。
6、常見的瀏覽器內核有哪些?
Trident( MSHTML ):IE MaxThon TT The World 360 搜狗瀏覽器
Geckos:Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto:Opera7及以上(Opera內核原為:Presto,現為:Blink)
Webkit:Safari Chrome
7、簡述一下你對HTML語義化的理解?
去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構。
有利于seo和搜索引擎建立良好溝通,有助于爬蟲抓取更多的信息,爬蟲依賴于標簽來確定上下文和各個關鍵字的權重。
方便其它設備解析。
便于團隊開發和維護,語義化根據可讀性。
8、label標簽的作用是什么? 是怎么用的?
去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構。
label標簽用來定義表單控件間的關系,當用戶選擇該標簽時,瀏覽器會自動將焦點轉到和標簽相關的表單控件上。label 中有兩個屬性是非常有用的, FOR和ACCESSKEY。
FOR屬性功能:表示label標簽要綁定的HTML元素,你點擊這個標簽的時候,所綁定的元素將獲取焦點。例如
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
9、HTML5的form如何關閉自動完成功能?
TML的輸入框可以擁有自動完成的功能,當你往輸入框輸入內容的時候,瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內容并列在輸入框下面,這樣就不用全部輸入進去了,直接選擇列表中的項目就可以了。
但有時候我們希望關閉輸入框的自動完成功能,例如當用戶輸入內容的時候,我們希望使用AJAX技術從數據庫搜索并列舉而不是在用戶的歷史記錄中搜索。
方法:
在IE的internet選項菜單中里的自動完成里面設置
設置form輸入框的autocomplete為on或者off來來開啟輸入框的自動完成功能
11、title與h1的區別、b與strong的區別、i與em的區別?
title屬性沒有明確意義,只表示標題;h1表示層次明確的標題,對頁面信息的抓取也有很大的影響
strong標明重點內容,語氣加強含義;b是無意義的視覺表示
em表示強調文本;i是斜體,是無意義的視覺表示
視覺樣式標簽:b i u s
語義樣式標簽:strong em ins del code
12、元素的alt和title有什么異同?
在alt和title同時設置的時候,alt作為圖片的替代文字出現,title是圖片的解釋文字.
13、瀏覽器頁面有哪三層構成,分別是什么,作用是什么?
瀏覽器頁面構成:結構層、表示層、行為層
分別是:HTML、CSS、JavaScript
作用:HTML實現頁面結構,CSS完成頁面的表現與風格,JavaScript實現一些客戶端的功能與業務。
14、div+css的布局有什么優點?
(1)改版的時候更方便 只要改css文件。
(2)頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
(3)易于優化(seo)搜索引擎更友好,排名更容易靠前。
15、網頁制作會用到的圖片格式有哪些?
Webp:WebP格式,谷歌(google)開發的一種旨在加快圖片加載速度的圖片格式。
并能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試并使用WebP格式。
Apng:是PNG的位圖動畫擴展,可以實現png格式的動態圖片效果,有望代替GIF成為下一代動態圖標準。
16、簡述一下src與href的區別
src用于替換當前元素,href用于在當前文檔和引用資源之間確立聯系
17、從瀏覽器地址欄輸入url到顯示頁面的步驟
瀏覽器根據請求的URL交給DNS域名解析,找到真實IP,向服務器發起請求;
服務器交給后臺處理完成后返回數據,瀏覽器接收文件(HTML、JS、CSS、圖象等);
瀏覽器對加載到的資源(HTML、JS、CSS等)進行語法解析,建立相應的內部數據結構(如HTML的DOM);
載入解析到的資源文件,渲染頁面,完成。
18、HTML全局屬性(global attribute)有哪些
class:為元素設置類標識
data-*: 為元素增加自定義屬性
draggable: 設置元素是否可拖拽
id: 元素id,文檔內唯一
lang: 元素內容的的語言
style: 行內css樣式
title: 元素相關的建議信息
19、Canvas是什么?怎樣寫Canvas?
Canvas是HTML5的一個元素,它使用JavaScript在網頁上繪制圖形。Canvas是一個矩形區域。它的每一個像素都可以由HTML5語言來控制。使用Canvas繪制路徑、框、圓、字符和添加圖像有幾種方法。
如果要在我們的HTML文檔中添加Canvas標簽,我們需要ID、寬度和高度。下面是如何將基本Canvas標簽寫入HTML文檔的示例。
<canvas id="myFirstCanvas" width="100" height="100"> </canvas>
20、你能列出HTML5中新的輸入類型屬性嗎?
search:用于搜索域,比如站點搜索或 Google 搜索,域顯示為常規的文本域。
url :用于應該包含 URL 地址的輸入域在提交表單時,會自動驗證 url 域的值。
email:用于應該包含 e-mail 地址的輸入域,在提交表單時,會自動驗證 email 域的值。
datetime:選取時間、日、月、年(UTC 時間)
date:選取日、月、年
month:選取月、年
week:選取周和年
time:選取時間(小時和分鐘)