Web前端面試總結(jié)(HTML篇)

1.Html語義化的理解

1.Html語義化就是使用正確的標(biāo)簽進(jìn)行頁面開發(fā)白嘁，比如段落就用p標(biāo)簽女责，標(biāo)題就用h1標(biāo)簽澈灼，文章用article標(biāo)簽，視頻用video標(biāo)簽等棋嘲。
2.Html語義化讓頁面的內(nèi)容結(jié)構(gòu)化酒唉，易于瀏覽器和搜索引擎的解析。即使沒有引入CSS文件也是以文檔方式顯示沸移，易于閱讀痪伦。
3.搜索引擎的爬蟲也是基于Html標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重侄榴，有利于SEO。
4.開發(fā)者更加容易對網(wǎng)站進(jìn)行分塊网沾，易于維護(hù)癞蚕。

2.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式的區(qū)別辉哥？

Doctype聲明位于HTML文檔的第一行桦山，處于html標(biāo)簽之前。用于告訴瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析該文檔醋旦。Doctype不存在或者格式錯(cuò)誤會讓文檔以兼容模式呈現(xiàn)恒水。
標(biāo)準(zhǔn)模式的排版和JS的運(yùn)作模式是以該瀏覽器所支持的最高標(biāo)準(zhǔn)運(yùn)行。兼容模式是以寬松的向后兼容的方式顯示饲齐，模擬老式瀏覽器的行為以防止站點(diǎn)無法工作钉凌。

3.HTML5為什么只需要寫<!Doctype HTML>?

HTML5不是基于SGML，不需要引用DTD箩张，但是需要Doctype來規(guī)范瀏覽器的行為(讓瀏覽器以自己的方式運(yùn)行)

4.meta viewport 是做什么用的甩骏，怎么寫？

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">

meta viewport是專門為移動設(shè)備設(shè)計(jì)的先慷，在移動設(shè)備下饮笛，網(wǎng)頁不需要縮放和滾動條才能查看網(wǎng)頁所有內(nèi)容。meta標(biāo)簽就是告訴瀏覽器, 不要在移動端顯示的時(shí)候縮放论熙。
name:表示供移動設(shè)備使用
content:定義了viewport的屬性
width:表示移動設(shè)備下顯示的寬度為設(shè)備寬度(device-width)
user-scalable:表示用戶縮放能力, no表示不允許用戶縮放網(wǎng)頁
initial-scale:表示設(shè)備與視口的縮放比率
maximum-scale/minimun-scale:分別表示縮放的最大最小值,maximum必須大于或等于minimum

5.HTML5的新特性福青，移除了哪寫元素？

新特性

1.拖拽釋放(Drag and drop)Api
2.語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
3.音頻脓诡、視頻 API(audio,video)
4.畫布(Canvas) API
5.地理(Geolocation) API
6.本地離線存儲 localStorage 長期存儲數(shù)據(jù)无午，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
7.表單控件祝谚，calendar宪迟、date、time交惯、email次泽、url、search
8.新的技術(shù) webworker, websocket, Geolocation

移除元素

1.純表現(xiàn)的元素：basefont席爽，big意荤，center，font, s只锻，strike玖像，tt，u齐饮；
2.對可用性產(chǎn)生負(fù)面影響的元素：frame捐寥，frameset笤昨，noframes；

支持HTML5新標(biāo)簽

IE8/IE7/IE6 支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽上真， 可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽咬腋， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式睡互。
最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!--[if lt IE 9]>
  <script>
    src = "http://html5shim.googlecode.com/svn/trunk/html5.js";
  </script>
<![endif]-->

6.HTML和XHTML的區(qū)別陵像？更應(yīng)該用哪一個(gè)并說出理由就珠。

應(yīng)該使用XHTML，因?yàn)閄HTML是XML重寫了HTML的規(guī)范醒颖，比HTML更加嚴(yán)格妻怎。
1.XHTML中所有的標(biāo)記必須有一個(gè)相應(yīng)的結(jié)束標(biāo)簽；
2.XHTML中的所有標(biāo)簽的元素和屬性名字必須使用小寫泞歉；
3.所有XML標(biāo)記必須合理嵌套逼侦；
4.所有屬性必須使網(wǎng)頁統(tǒng)一風(fēng)格，如果頭部和版本都是一樣的腰耙，就可以寫成一個(gè)頁面榛丢，用 iframe 來嵌套，可以增加代碼的可重用挺庞。用雙引號""括起來晰赞；
5.所有<和&特殊符號用編碼表示；
6.給所有屬性附一個(gè)值选侨；
7.不要在注釋內(nèi)容中使用“--”掖鱼；
8.圖片必須使用說明文字。

7.iframe框架有哪些優(yōu)缺點(diǎn)援制？

優(yōu)點(diǎn)：
1.iframe能夠原封不動地把嵌入的頁面展現(xiàn)出來戏挡；
2.如果有多個(gè)網(wǎng)頁引用 iframe，那么你只需要修改 iframe 的內(nèi)容晨仑，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁面內(nèi)容的更改褐墅，方便快捷；
3.網(wǎng)頁如果為了統(tǒng)一風(fēng)格寻歧，頭部和版本都是一樣的掌栅，就可以寫成一個(gè)頁面，用 iframe 來嵌套码泛，可以增加代碼的可重用猾封。
4.如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問題可以由 iframe 來解決噪珊。

缺點(diǎn)：
1.框架結(jié)構(gòu)中出現(xiàn)各種滾動條晌缘；
2.iframe 會阻塞主頁面的 Onload 事件齐莲；
3.搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO磷箕；
4.iframe 和主頁面共享連接池选酗，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載岳枷。

8.HTML5的 form 如何關(guān)閉自動完成功能芒填？

將不想要自動完成的 form 或 input 設(shè)置為 autocomplete=off

9.Label 的作用是什么？是怎么用的空繁？

label 標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)殿衰，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
有兩種用法：一種是 id 綁定盛泡，一種是嵌套闷祥。

//通過id綁定
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

//嵌套
<label>Date:<input type="text" name="B"/></label>

10.title 與 h1 的區(qū)別、b 與 strong 的區(qū)別傲诵、i 與 em 的區(qū)別凯砍？

title用于網(wǎng)站信息標(biāo)題，突出網(wǎng)站標(biāo)題或關(guān)鍵字拴竹，一個(gè)網(wǎng)站可以有多個(gè)title悟衩，seo權(quán)重高于h1；h1概括的是文章主題殖熟，一個(gè)頁面最好只用一個(gè)h1局待。
b這個(gè)標(biāo)簽對應(yīng) bold，即文本加粗菱属，其目的僅僅是為了加粗顯示文本钳榨。.strong這個(gè)標(biāo)簽意思是加強(qiáng)字符的語氣，表示該文本比較重要纽门，提醒讀者／終端注意薛耻。
i為了斜體而斜體，em為了標(biāo)明重點(diǎn)而斜體赏陵，且對于搜索引擎來說strong和em比b和i要重視的多

11.請描述下 SEO 中的 TDK饼齿？

在 SEO 中，TDK 其實(shí)就是 title蝙搔、description缕溉、keywords 這三個(gè)標(biāo)簽，title 標(biāo)題標(biāo)簽吃型，description 描述標(biāo)簽证鸥，keywords 關(guān)鍵詞標(biāo)簽

12.簡述一下 src 與 href 的區(qū)別

src 用于引用資源，替換當(dāng)前元素；href 用于在當(dāng)前文檔和引用資源之間確立聯(lián)系枉层。

13.對于 WEB 標(biāo)準(zhǔn)以及 W3C 的理解

web 標(biāo)準(zhǔn)簡單來說可以分為結(jié)構(gòu)層(HTML)泉褐、表現(xiàn)層(CSS)和行為層(JS)。
W3C 對 web 標(biāo)準(zhǔn)提出了規(guī)范化的要求鸟蜡，包含如下幾點(diǎn)：
1.對于結(jié)構(gòu)要求：（標(biāo)簽規(guī)范可以提高搜索引擎對頁面的抓取效率膜赃，對 SEO 很有幫助）
1）標(biāo)簽字母要小寫
2）標(biāo)簽要閉合
3）標(biāo)簽不允許隨意嵌套
2.對于 css 和 js 來說
1）盡量使用外鏈 css 樣式表和 js 腳本。是結(jié)構(gòu)揉忘、表現(xiàn)和行為分為三塊跳座，符合規(guī)范。同時(shí)提高頁面渲染速度癌淮，提高用戶的體驗(yàn)躺坟。
2）樣式盡量少用行內(nèi)樣式表，使結(jié)構(gòu)與表現(xiàn)分離乳蓄，標(biāo)簽的 id 和 class 等屬性命名要做到見文知義，標(biāo)簽越少夕膀，加載越快虚倒，用戶體驗(yàn)提高，代碼維護(hù)簡單产舞，便于改版魂奥。
3）不需要變動頁面內(nèi)容，便可提供打印版本而不需要復(fù)制內(nèi)容易猫，提高網(wǎng)站易用性耻煤。

14.HTML5 引入什么新的表單屬性？

Datalist datetime output keygen date month week time number range emailurl

15..對 web 標(biāo)準(zhǔn)可用性准颓、可訪問性哈蝇、可維護(hù)性的理解

可用性：產(chǎn)品是否容易上手，用戶能否完成任務(wù)攘已，效率如何炮赦，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產(chǎn)品的質(zhì)量样勃》涂保可用性好意味著產(chǎn)品質(zhì)量高，是企業(yè)的核心競爭力峡眶。
可訪問性：Web 內(nèi)容對于殘障用戶的可閱讀和可理解性
可維護(hù)性：一般包含兩個(gè)層次剧防，一是當(dāng)系統(tǒng)出現(xiàn)問題時(shí)，快速定位并解決問題的成本辫樱，成本低則可維護(hù)性好峭拘。二是代碼是否容易被人理解，是否容易修改和增強(qiáng)功能。

16.DOM 和 BOM 有什么區(qū)別

DOM就是文檔對象模型棚唆。DOM 是為了操作文檔出現(xiàn)的 API暇赤，document 是其的一個(gè)對象。DOM 和文檔有關(guān)宵凌，這里的文檔指的是網(wǎng)頁鞋囊，也就是 html 文檔。DOM 和瀏覽器無關(guān)瞎惫，他關(guān)注的是網(wǎng)頁本身的內(nèi)容溜腐。
BOM就是瀏覽器對象模型。BOM 是為了操作瀏覽器出現(xiàn)的 API瓜喇，window 是其的一個(gè)對象挺益。window 對象既為 javascript 訪問瀏覽器提供 API，同時(shí)在 ECMAScript 中充當(dāng) Global 對象

17.Canvas 和 SVG 有什么區(qū)別乘寒？

Canvas通過 Javascript 來繪制 2D 圖形望众。 是逐像素進(jìn)行渲染的。 其位置發(fā)生改變伞辛，會重新進(jìn)行繪制烂翰。
SVG一種使用 XML 描述的 2D 圖形的語言。 SVG 基于 XML 意味著蚤氏，SVG DOM 中的每個(gè)元素都是可用的甘耿，可以為某個(gè)元素附加 Javascript 事件處理器。 在 SVG 中竿滨，每個(gè)被繪制的圖形均被視為對象佳恬。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形于游。

18.網(wǎng)頁驗(yàn)證碼是干嘛的毁葱，是為了解決什么安全問題？

區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動程序曙砂⊥访眨可以防止惡意破解密碼、刷票鸠澈、論壇灌水柱告。
有效防止黑客對某一個(gè)特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。

19.為什么用多個(gè)域名存儲網(wǎng)站資源更有效笑陈？

1际度、CDN 緩存更方便
2、突破瀏覽器并發(fā)限制
3涵妥、節(jié)約 cookie 帶寬
4乖菱、節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度
5、防止不必要的安全問題

20.頁面可見性（Page Visibility）API 可以有哪些用途窒所？

document.hidden返回一個(gè)布爾值鹉勒，如果是 true, 表示頁面可見，false 則表示頁面隱藏吵取。 不同頁面之間來回切換禽额，觸發(fā) visibilitychange 事件。document.visibilityState,表示頁面所處的狀態(tài)皮官。動畫脯倒，視頻，音頻都可以在頁面顯示時(shí)打開捺氢，在頁面隱藏時(shí)關(guān)閉

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    document.title = "hidden";
  } else {
    document.title = "visibile";
  }
});

21.div+css 的布局較 table 布局有什么優(yōu)點(diǎn)藻丢？

1.改版的時(shí)候更方便 只要改 css 文件。
2.頁面加載速度更快摄乒、結(jié)構(gòu)化清晰悠反、頁面顯示簡潔。
3.表現(xiàn)與結(jié)構(gòu)相分離馍佑。
4.易于優(yōu)化（seo）搜索引擎更友好问慎，排名更容易靠前。

22.對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解挤茄。

降低開發(fā)難度及開發(fā)成本，減少各種 BUG冰木、安全問題穷劈， 提高網(wǎng)站易用性。

23.什么是微格式嗎踊沸？

微格式（Microformats）是一種讓機(jī)器可讀的語義化 XHTML 詞匯的集合歇终，是結(jié)構(gòu)化數(shù)據(jù)的開放標(biāo)準(zhǔn)。是為特殊應(yīng)用而制定的特殊格式逼龟。
優(yōu)點(diǎn)：將智能數(shù)據(jù)添加到網(wǎng)頁上评凝，讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示。

24.HTML常見兼容性問題腺律？

1.雙邊距bug(float 引起的)奕短，解決辦法: 使用 display解決
2.三像素問題(float 引起的)，解決辦法: 使用 dislpay:inline -3px
3.超鏈接hover點(diǎn)擊后失效匀钧，解決辦法: 使用正確的書寫順序 link visited hover active
4.z-index 問題翎碑，解決辦法: 給父級添加 position:relative
5.png 透明 ，解決辦法: 使用 js 代碼
6.min-height 最小高度 之斯，解決辦法: !Important 解決
7.select 在 ie6 下遮蓋日杈，解決辦法: 使用 iframe 嵌套
8.為什么沒有辦法定義 1px 左右的寬度容器，解決辦法: （IE6 默認(rèn)的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）
9.IE5-8 不支持 opacity莉擒，解決辦法：

.opacity {
  opacity: 0.4;
  filter: alpha(opacity=60); /_ for IE5-7 _/
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /_ for IE 8_/
}

10.IE6 不支持png透明背景酿炸，解決辦法: IE6下使用gif圖片

25.前端需要注意哪些 SEO?

1.合理的 title、description涨冀、keywords：搜索對著三項(xiàng)的權(quán)重逐個(gè)減小填硕，title 值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過 2 次蝇裤，而且要靠前廷支，不同頁面 title 要有所不同；description 把頁面內(nèi)容高度概括栓辜，長度合適恋拍，不可過分堆砌關(guān)鍵詞，不同頁面 description 有所不同藕甩；keywords 列舉出重要關(guān)鍵詞即可
2.語義化的 HTML 代碼施敢，符合 W3C 規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁
3.重要內(nèi)容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制狭莱，保證重要內(nèi)容一定會被抓取
4.重要內(nèi)容不要用 js 輸出：爬蟲不會執(zhí)行 js 獲取內(nèi)容
5.少用 iframe：搜索引擎不會抓取 iframe 中的內(nèi)容
6.非裝飾性圖片必須加 alt
7.提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

26.HTML5 的離線儲存怎么使用僵娃，工作原理能不能解釋一下？

在用戶沒有與因特網(wǎng)連接時(shí)腋妙，可以正常訪問站點(diǎn)或應(yīng)用默怨，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件骤素。
原理：HTML5 的離線存儲是基于一個(gè)新建的.appcache 文件的緩存機(jī)制(不是存儲技術(shù))匙睹，通過這個(gè)文件上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來济竹。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)痕檬，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。
使用方法:在頭部加一個(gè) manifest 屬性

<!DOCTYPE html>
<html manifest="cache.manifest">
  ...
</html>

cache.manifest 文件的書寫方式:

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

27.瀏覽器是怎么對 HTML5 的離線儲存資源進(jìn)行管理和加載的呢?

在線的情況下送浊，瀏覽器發(fā)現(xiàn) html 頭部有 manifest 屬性梦谜，它會請求 manifest 文件，如果是第一次訪問 app袭景，那么瀏覽器就會根據(jù) manifest 文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲唁桩。如果已經(jīng)訪問過 app 并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面浴讯，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件朵夏，如果文件沒有發(fā)生改變，就不做任何操作榆纽，如果文件改變了仰猖，那么就會重新下載文件中的資源并進(jìn)行離線存儲捏肢。 離線的情況下，瀏覽器就直接使用離線存儲的資源饥侵。

28.HTML 全局屬性(global attribute)有哪些?

  • accesskey:設(shè)置快捷鍵鸵赫，提供快速訪問元素
  • class:為元素設(shè)置類標(biāo)識，多個(gè)類名用空格分開躏升，css和 javascript 可通過 class 屬性獲取元素
  • contenteditable: 指定元素內(nèi)容是否可編輯
  • contextmenu: 自定義鼠標(biāo)右鍵彈出菜單內(nèi)容
  • data-*: 為元素增加自定義屬性
  • dir: 設(shè)置元素文本方向
  • draggable: 設(shè)置元素是否可拖拽
  • dropzone: 設(shè)置元素拖放類型： copy, move, link
  • hidden: 表示一個(gè)元素是否與文檔辩棒。樣式上會導(dǎo)致元素不顯示，但是不能用這個(gè)屬性實(shí)現(xiàn)樣式效果
  • id: 元素 id膨疏，文檔內(nèi)唯一
  • lang: 元素內(nèi)容的的語言
  • spellcheck: 是否啟動拼寫和語法檢查
  • style: 行內(nèi) css 樣式
  • tabindex: 設(shè)置元素可以獲得焦點(diǎn)一睁，通過 tab 可以導(dǎo)航
  • title: 元素相關(guān)的建議信息
  • translate: 元素和子孫節(jié)點(diǎn)內(nèi)容是否需要本地化

29.HTML5 存儲類型有什么？

Media API佃却、Text Track API者吁、Application Cache API、User Interaction饲帅、Data Transfer API复凳、Command API、Constraint Validation API灶泵、History API

30.為什么把 CSS 的<link>標(biāo)簽放在<head></head>之間?把 JS 的<script>標(biāo)簽恰好放在</body>之前?

把<link>標(biāo)簽放在<head></head>之間是規(guī)范要求的內(nèi)容,可以讓頁面逐步呈現(xiàn)育八，提高了用戶體驗(yàn)。將樣式表放在文檔底部附近赦邻，會使許多瀏覽器（包括 Internet Explorer）不能逐步呈現(xiàn)頁面髓棋。一些瀏覽器會阻止渲染，以避免在頁面樣式發(fā)生變化時(shí)惶洲，重新繪制頁面中的元素仲锄。這種做法可以防止呈現(xiàn)給用戶空白的頁面或沒有樣式的內(nèi)容。

腳本在下載和執(zhí)行期間會阻止 HTML 解析湃鹊。把<script>標(biāo)簽放在底部，保證 HTML 首先完成解析镣奋，將頁面盡早呈現(xiàn)給用戶币呵。當(dāng)你的腳本里包含document.write()時(shí)。但是現(xiàn)在侨颈，document.write()不推薦使用余赢。同時(shí)，將<script>標(biāo)簽放在底部哈垢，意味著瀏覽器不能開始下載腳本妻柒，直到整個(gè)文檔（document）被解析。對此比較好的做法是耘分，<script>使用defer屬性举塔，放在<head>中绑警。

31.什么是漸進(jìn)式渲染？

漸進(jìn)式渲染是用于提高網(wǎng)頁性能（尤其是提高用戶感知的加載速度）央渣，以盡快呈現(xiàn)頁面的技術(shù)计盒。
以下方法均可實(shí)現(xiàn)漸進(jìn)式渲染：
圖片懶加載——頁面上的圖片不會一次性全部加載。當(dāng)用戶滾動頁面到圖片部分時(shí)芽丹，JavaScript 將加載并顯示圖像北启。
確定顯示內(nèi)容的優(yōu)先級（分層次渲染）——為了盡快將頁面呈現(xiàn)給用戶，頁面只包含基本的最少量的 CSS拔第、腳本和內(nèi)容咕村，然后可以使用延遲加載腳本或監(jiān)聽DOMContentLoaded/load事件加載其他資源和內(nèi)容。
異步加載 HTML 片段——當(dāng)頁面通過后臺渲染時(shí)蚊俺，把 HTML 拆分懈涛，通過異步請求，分塊發(fā)送給瀏覽器春叫。

32.DOM Tree是如何構(gòu)建的肩钠？

1.通過HTML 解釋器將網(wǎng)絡(luò)或者本地磁盤獲取的 HTML 網(wǎng)頁和資源從字節(jié)流解釋成 DOM 樹結(jié)構(gòu)。
2.在 HTML 解釋器的工作過程中暂殖，可能會有 JavaScript 代碼需要執(zhí)行价匠，它發(fā)生在將字符串解釋成詞語之后、創(chuàng)建各種節(jié)點(diǎn)的時(shí)候呛每。這也是為什么全局執(zhí)行的 JavaScript 代碼不能訪問 DOM 的原因（因?yàn)?DOM 樹還沒有被創(chuàng)建完）踩窖。

33.HTML5行內(nèi)元素有哪些,塊級元素有哪些, 空元素有哪些?

(1)行內(nèi)元素

  • a - 錨點(diǎn)
  • abbr - 縮寫
  • acronym - 首字
  • b - 粗體 ( 不推薦 )
  • bdo - bidi override
  • big - 大字體
  • br - 換行
  • cite - 引用
  • code - 計(jì)算機(jī)代碼 ( 在引用源碼的時(shí)候需要 )
  • dfn - 定義字段
  • em - 強(qiáng)調(diào)
  • font - 字體設(shè)定 ( 不推薦 )
  • i - 斜體
  • img - 圖片
  • input - 輸入框
  • kbd - 定義鍵盤文本
  • label - 表格標(biāo)簽
  • q - 短引用
  • s - 中劃線 ( 不推薦 )
  • samp - 定義范例計(jì)算機(jī)代碼
  • select - 項(xiàng)目選擇
  • small - 小字體文本
  • span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
  • strike - 中劃線
  • strong - 粗體強(qiáng)調(diào)
  • sub - 下標(biāo)
  • sup - 上標(biāo)
  • textarea - 多行文本輸入框
  • tt - 電傳文本
  • u - 下劃線
  • var - 定義變量
    (2)塊元素 (block element)
  • address - 地址
  • blockquote - 塊引用
  • center - 居中對齊塊
  • dir - 目錄列表
  • div - 常用塊級容易晨横，也是 css layout 的主要標(biāo)簽
  • dl - 定義列表
  • fieldset - form控制組
  • form - 交互表單
  • h1 - 大標(biāo)題
  • h2 - 副標(biāo)題
  • h3 - 3級標(biāo)題
  • h4 - 4級標(biāo)題
  • h5 - 5級標(biāo)題
  • h6 - 6級標(biāo)題
  • hr - 水平分隔線
  • isindex - input prompt
  • menu - 菜單列表
  • noframes - frames可選內(nèi)容洋腮，（對于不支持 frame 的瀏覽器顯示此區(qū)塊內(nèi)容
  • noscript - ）可選腳本內(nèi)容（對于不支持 script 的瀏覽器顯示此內(nèi)容）
  • ol - 排序表單
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表
    可變元素
    可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
  • applet - java applet
  • button - 按鈕
  • del - 刪除文本
  • iframe - inline frame
  • ins - 插入的文本
  • map - 圖片區(qū)塊 (map)
  • object - object對象
  • script - 客戶端腳本
    (3)空元素 ( 在 HTML[1] 元素中手形，沒有內(nèi)容的 HTML 元素被稱為空元素 )
    br //換行
    hr //分隔線
    <input> //文本框等
    <img> //圖片
    <link> <meta>

34.請你描述一下 cookies啥供，sessionStorage 和 localStorage 的區(qū)別?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 請求之間保存數(shù)據(jù)库糠。有了本地?cái)?shù)據(jù)伙狐，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。
sessionStorage瞬欧、 localStorage 、 cookie 都是在瀏覽器端存儲的數(shù)據(jù)，其中 sessionStorage 的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始終存在的數(shù)據(jù)。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉大莫，即使刷新頁面或進(jìn)入同源另一頁面舅巷，數(shù)據(jù)仍然存在。關(guān)閉窗口后， sessionStorage 即被銷毀。同時(shí)“獨(dú)立”打開的不同窗口，即使是同一頁面凌摄， sessionStorage 對象也是不同的
cookies會發(fā)送到服務(wù)器端。其余兩個(gè)不會。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制為每個(gè)域名 50 個(gè)，但 IE7 似乎也允許每個(gè)域名 50 個(gè) cookie 。 Firefox 每個(gè)域名 cookie 限制為 50 個(gè)辆雾。 Opera 每個(gè)域名 cookie 限制為 30 個(gè)惭墓。 Firefox 和 Safari 允許 cookie 多達(dá) 4097 個(gè)字節(jié)毅人，包括名（ name ）缔俄、值（ value ）和等號蟹略。 Opera 許 cookie 多達(dá) 4096 個(gè)字節(jié)，包括：名（ name ）遏佣、值（ value ）和等號挖炬。 Internet Explorer 允許 cookie 多達(dá) 4095 個(gè)字節(jié)，包括：名（ name ）状婶、值（ value ）和等號意敛。

區(qū)別：

  • Cookie
  • 每個(gè)域名存儲量比較邢谙铩（各瀏覽器不同，大致 4K ）
  • 所有域名的存儲量有限制（各瀏覽器不同草姻，大致 4K ）
  • 有個(gè)數(shù)限制（各瀏覽器不同）
  • 會隨請求發(fā)送到服務(wù)器
  • LocalStorage
  • 永久存儲
  • 單個(gè)域名存儲量比較大（推薦 5MB 钓猬，各瀏覽器不同）
  • 總體數(shù)量無限制
  • SessionStorage
  • 只在 Session 內(nèi)有效
  • 存儲量更大（推薦沒有限制，但是實(shí)際上各瀏覽器也不同）

35.說說超鏈接target屬性的取值和作用撩独？

target這個(gè)屬性指定所鏈接的頁面在瀏覽器窗口中的打開方式敞曹。
它的參數(shù)值主要有：
a、 _blank ：在新瀏覽器窗口中打開鏈接文件
b跌榔、 _parent ：將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中异雁。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件僧须，就像 _self 參數(shù)纲刀。
c、 _self ：在同一框架或窗口中打開所鏈接的文檔担平。此參數(shù)為默認(rèn)值示绊，通常不用指定。
d暂论、 _top ：在當(dāng)前的整個(gè)瀏覽器窗口中打開所鏈接的文檔面褐，因而會刪除所有框架。

  1. link和@import的區(qū)別?

兩者都是外部引用CSS的方式取胎，但是存在一定的區(qū)別：
區(qū)別1： link 是 XHTML 標(biāo)簽展哭，除了加載 CSS 外，還可以定義 RSS 等其他事務(wù)闻蛀； @import 屬于 CSS 范疇匪傍，只能加載 CSS 。
區(qū)別2： link 引用 CSS 時(shí)觉痛，在頁面載入時(shí)同時(shí)加載役衡； @import 需要頁面網(wǎng)頁完全載入以后加載。
區(qū)別3： link 是 XHTML 標(biāo)簽薪棒，無兼容問題手蝎； @import 是在 CSS2.1 提出的，低版本的瀏覽器不支持俐芯。
區(qū)別4： link 支持使用 Javascript 控制 DOM 去改變樣式棵介；而 @import 不支持。

37.data-屬性的作用是什么吧史？

data-為H5新增的為前端開發(fā)者提供自定義的屬性邮辽，這些屬性集可以通過對象的 dataset 屬性獲取，不支持該屬性的瀏覽器可以通過 getAttribute 方法獲取 :
當(dāng)沒有合適的屬性和元素時(shí)，自定義的 data 屬性是能夠存儲頁面或 App 的私有的自定義數(shù)據(jù)逆巍。

38.如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？

1.border-radius (css3)
對于圓形莽使，最直接的方法想到的就是 css3 的圓角屬性锐极，這個(gè)屬性可以將 html 元素的形狀設(shè)置為圓形，這之后你想對該圓形區(qū)域設(shè)置什么事件就設(shè)置什么事件(當(dāng)然包括點(diǎn)擊)芳肌。
2.通過事件坐標(biāo)來實(shí)現(xiàn)（js）
也就是通過 js 來進(jìn)行一個(gè)區(qū)域判斷灵再，進(jìn)而簡介地的形成可點(diǎn)區(qū)域，以下給出主要的 js 測試代碼：

// 獲取目標(biāo)元素
var box = document.getElementById("box");

// 對目標(biāo)元素target的圓形區(qū)域進(jìn)行一個(gè)點(diǎn)擊事件綁定
function bindClickOnCircleArea(target, callback) {
  target.onclick = function(e) {
    e = e || window.event;

    // target中心點(diǎn)的坐標(biāo)
    var x1 = 100;
    var y1 = 100;

    // 事件源坐標(biāo)
    var x2 = e.offsetX;
    var y2 = e.offsetY;

    // 校驗(yàn)是否在圓形點(diǎn)擊區(qū)亿笤，在的話就執(zhí)行callback回調(diào)
    // 計(jì)算事件觸發(fā)點(diǎn)與target中心的位置
    var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
    // 通過半徑進(jìn)行校驗(yàn)
    if (len <= 100) {
      callback();
    } else {
      alert("111");
    }
  };
}

// 執(zhí)行
bindClickOnCircleArea(box, function() {
  alert("222");
});

3.通過 map 加 area

<img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area
    shape="circle"
    coords="100,100,100"
    
    target="_blank"
  />
</map>

39.實(shí)現(xiàn)不使用 border 畫出1px高的線翎迁，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果？

<div style="width:100%;height:1px;background-color:black"></div>

40.HTML5標(biāo)簽的作用?

a净薛、使Web頁面的內(nèi)容更加有序和規(guī)范
b汪榔、使搜索引擎更加容易按照HTML5規(guī)則識別出有效的內(nèi)容
c、使Web頁面更接近于一種數(shù)據(jù)字段和表

41.說幾個(gè)幾個(gè)很實(shí)用的BOM屬性對象方法?

(1)location對象
location.href-- 返回或設(shè)置當(dāng)前文檔的URL
location.search -- 返回URL中的查詢字符串部分肃拜。
location.hash -- 返回URL#后面的內(nèi)容痴腌，如果沒有#，返回空
location.host -- 返回URL中的域名部分燃领。
location.pathname -- 返回URL的域名后的部分士聪。
location.port -- 返回URL中的端口部分。
location.protocol -- 返回URL中的協(xié)議部分
location.assign -- 設(shè)置當(dāng)前文檔的URL
location.replace() -- 設(shè)置當(dāng)前文檔的URL猛蔽，并且在history對象的地址列表中移除這個(gè)URL location.replace(url);
location.reload() -- 重載當(dāng)前頁面
(2)history對象
history.go() -- 前進(jìn)或后退指定的頁面數(shù) history.go(num);
history.back() -- 后退一頁
history.forward() -- 前進(jìn)一頁
(3)Navigator對象
navigator.userAgent -- 返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
navigator.cookieEnabled -- 返回瀏覽器是否支持(啟用)cookie剥悟。

42.說一下HTML5 drag api

dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時(shí)觸發(fā)曼库，区岗。
darg：事件主體是被拖放元素，在正在拖放被拖放元素時(shí)觸發(fā)凉泄。
dragenter：事件主體是目標(biāo)元素躏尉，在被拖放元素進(jìn)入某元素時(shí)觸發(fā)。
dragover：事件主體是目標(biāo)元素后众，在被拖放在某元素內(nèi)移動時(shí)觸發(fā)胀糜。
dragleave：事件主體是目標(biāo)元素，在被拖放元素移出目標(biāo)元素是觸發(fā)蒂誉。
drop：事件主體是目標(biāo)元素教藻，在目標(biāo)元素完全接受被拖放元素時(shí)觸發(fā)。
dragend：事件主體是被拖放元素，在整個(gè)拖放操作結(jié)束時(shí)觸發(fā)纺座。

43.Cookie和session的區(qū)別

  1. cookie數(shù)據(jù)存放在客戶的瀏覽器上斟或，session數(shù)據(jù)放在服務(wù)器上艳悔。
  2. cookie不是很安全悄窃，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
    考慮到安全應(yīng)當(dāng)使用session讥电。
  3. session會在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多轧抗，會比較占用你服務(wù)器的性能
    考慮到減輕服務(wù)器性能方面恩敌，應(yīng)當(dāng)使用COOKIE。
  4. 單個(gè)cookie保存的數(shù)據(jù)不能超過4K横媚，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie纠炮。

44.瀏覽器在生成頁面的時(shí)候，會生成那兩顆樹灯蝴？

構(gòu)造兩棵樹恢口，DOM樹和CSSOM規(guī)則樹
當(dāng)瀏覽器接收到服務(wù)器相應(yīng)來的HTML文檔后，會遍歷文檔節(jié)點(diǎn)穷躁，生成DOM樹耕肩，
CSSOM規(guī)則樹由瀏覽器解析CSS文件生成，

45.iframe通信折砸，同源和不同源兩種情況看疗，多少種方法?

  • 同域：即父子頁面相互調(diào)用
    一、父頁面調(diào)用子頁面
    1睦授、先得到子頁面的document
    document.getElementById('FrameId').contentWindow.document
    2两芳、得到子頁面的window
    document.getElementById('FrameId').contentWindow.window
    重載子頁面：document.getElementById('FrameId').contentWindow.window.location.reload(true);
    或者 $('#FrameId').attr('src','../list');
    3、得到子頁面的的變量
    doucment. iframe的name屬性值 . 子頁面變量名稱 （document.frameName.temp）
    二去枷、子頁面調(diào)用父頁面
    1怖辆、父頁面document ： window.parent.document
    2、獲得父頁面變量 ： parent.變量名稱
    3删顶、調(diào)用事件 ： window.parent.XXX();
  • 跨域：
    主域：由兩個(gè)或兩個(gè)以上的字母構(gòu)成竖螃，中間由點(diǎn)號隔開，整個(gè)域名只有1個(gè)點(diǎn)號
    csdn.net
    子域：是在主域名之下的域名逗余，域名內(nèi)容會有多個(gè)點(diǎn)號
  • 未跨主域特咆，跨子域
    兩個(gè)域的js文件中設(shè)置document.domain=主域名 即可
  • 跨主域
    location.hash
    (B操作A)
    1、動態(tài)改變location.hash录粱，iframe不會重載
    2腻格、無論跨域與否，iframe內(nèi)可以獲取自己的location.hash
    3啥繁、只要域名相同就能通信菜职，即使ABC三層嵌套
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市旗闽，隨后出現(xiàn)的幾起案子酬核，更是在濱河造成了極大的恐慌蜜另，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,378評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件嫡意，死亡現(xiàn)場離奇詭異举瑰，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)蔬螟，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門嘶居，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人促煮，你說我怎么就攤上這事≌” “怎么了菠齿？”我有些...
    開封第一講書人閱讀 152,702評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長坐昙。 經(jīng)常有香客問我绳匀，道長，這世上最難降的妖魔是什么炸客？ 我笑而不...
    開封第一講書人閱讀 55,259評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任疾棵，我火速辦了婚禮，結(jié)果婚禮上痹仙，老公的妹妹穿的比我還像新娘是尔。我一直安慰自己，他們只是感情好开仰，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布拟枚。 她就那樣靜靜地躺著，像睡著了一般众弓。 火紅的嫁衣襯著肌膚如雪恩溅。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,036評論 1贊 285
  • 城市分裂傳說
    那天谓娃，我揣著相機(jī)與錄音脚乡，去河邊找鬼。 笑死滨达，一個(gè)胖子當(dāng)著我的面吹牛奶稠，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播弦悉，決...
    沈念sama閱讀 38,349評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼窒典，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了稽莉？” 一聲冷哼從身側(cè)響起瀑志，我...
    開封第一講書人閱讀 36,979評論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后劈猪，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昧甘，經(jīng)...
    沈念sama閱讀 43,469評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年战得，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了充边。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,059評論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡常侦，死狀恐怖浇冰，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情聋亡，我是刑警寧澤肘习，帶...
    沈念sama閱讀 33,703評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站坡倔，受9級特大地震影響漂佩，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜罪塔，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一投蝉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧征堪，春花似錦瘩缆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0贊 19
  • 一樁弒父案咳榜，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至爽锥，卻和暖如春涌韩，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背氯夷。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工臣樱， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人腮考。 一個(gè)月前我還...
    沈念sama閱讀 45,501評論 2贊 354
  • 代替公主和親
    正文 我出身青樓雇毫，卻偏偏與公主長得像，于是被迫代替她去往敵國和親踩蔚。 傳聞我的和親對象是個(gè)殘疾皇子棚放，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評論 2贊 345