亚洲精品人妻一区二区,桂林av在线

HTML篇

HTML5新增的標(biāo)簽有那些

答案解析：

內(nèi)容元素:header、footer、section、aside、nav、section
表單控件：datalist、color、date、time、email、search
多媒體元素：audio、video、embed
控件元素：websoket、webworker

怎么理解語義化標(biāo)簽，有什么好處

答案解析：

語義化的html就是讓正確的標(biāo)簽做正確的事情，能夠便于開發(fā)者閱讀和寫出更加有效的代碼，以及有利于SEO優(yōu)化，讓網(wǎng)絡(luò)爬蟲更好的解析。

在沒有css的時(shí)候也能夠清晰的看出網(wǎng)頁的結(jié)構(gòu)，增強(qiáng)可讀性
有利于SEO,有利于搜索引擎爬蟲更好理解我們頁面，從而獲取到更多有效信息，提示網(wǎng)頁的權(quán)重
便以團(tuán)隊(duì)之間的開發(fā)維護(hù)，語義化的html更加易于閱讀

html文件在不同的瀏覽器的差異

答案解析：

相同的代碼在不同的瀏覽器可能表現(xiàn)出來的樣式有差異的原因就是：瀏覽器的渲染引擎，（瀏覽器內(nèi)核包括兩個(gè)部分：渲染引擎和JS引擎），去負(fù)責(zé)解析網(wǎng)頁語法、渲染繪制頁面。常見的差異有：

不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin、padding不同
有些瀏覽器圖片的默認(rèn)有間距
在有些瀏覽器中塊級(jí)屬性標(biāo)簽float后，又有橫向margin情況下，ie6的margin更大
設(shè)置最小高度min-height(小于10px),在ie6、ie7、遨游高度會(huì)超出設(shè)置的高度

web worker是什么？適用在什么場(chǎng)景

答案解析：

當(dāng)我們使用 web worker 去new出的一個(gè)對(duì)象相當(dāng)于是在頁面上的一個(gè)子線程，它可以用來去執(zhí)行一些容易阻塞進(jìn)程、消耗時(shí)間的復(fù)雜運(yùn)算的代碼。其產(chǎn)生的原因是因?yàn)?我們都知道瀏覽器js的執(zhí)行是單線程，頁面上的js的執(zhí)行會(huì)阻塞到瀏覽器的響應(yīng)，非常影響到用戶的體驗(yàn)，由此我們就提出js的事件循環(huán)機(jī)制，異步請(qǐng)求數(shù)據(jù)等解決方案，但是在實(shí)質(zhì)上也沒有改變單線程執(zhí)行本質(zhì)，而web woker的出現(xiàn)就解決了這個(gè)·問題，但是也不是等同于后臺(tái)意義的多線程，本質(zhì)是讓我們將數(shù)據(jù)刷新和頁面渲染兩個(gè)動(dòng)作拆開執(zhí)行。

使用場(chǎng)景

需要大量數(shù)據(jù)計(jì)算時(shí)，可以解決js在處理數(shù)據(jù)導(dǎo)致UI渲染阻塞的問題

 onmessage() 屬性 //來綁定開始工作需要執(zhí)行的函數(shù)
 postMessage() //來停止工作

canvas和svg的區(qū)別

答案解析

兩者都是用于瀏覽器繪制圖形的，但是兩者的本質(zhì)不同。

canvas

由js所繪制的2D圖形，是逐像素進(jìn)行渲染的，所以也十分依賴分辨率
一旦位置發(fā)生變化、則引發(fā)重繪
不支持事件處理器
能夠以.png 或者.jpg的格式保存圖像

svg

由xml所繪制而成的2D圖形，svm的dom中的每個(gè)元素都是可以附加js事件處理器
每個(gè)svm圖形都是可以看做是對(duì)象，某些屬性發(fā)生變化也能重現(xiàn)圖形
不支持分辨率

什么是<!DOCTYPE>

答案解析：

DOCTYPE是HTML網(wǎng)頁的一個(gè)標(biāo)準(zhǔn)，必須處在HTML文檔的第一行，告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析；

怪異模式：瀏覽器按照自己的模式進(jìn)行解析渲染頁面
標(biāo)準(zhǔn)模式：瀏覽器按照w3c的標(biāo)準(zhǔn)進(jìn)行解析渲染

meta標(biāo)簽

答案解析：

提供頁面一些元信息（名稱/值對(duì)），添加一些核心關(guān)鍵詞，有利于seo搜索引擎優(yōu)化。提供的屬性有name、content、http-equiv、scheme.其中name可以取的值有：autor、description、keywords，對(duì)應(yīng)內(nèi)容在content填充；http-equiv可以取到的值有：set-cookie、content-type、expirse、refresh

src和href的區(qū)別

答案解析：

src:是指外部資源的位置，指向的內(nèi)容會(huì)嵌入到文檔標(biāo)簽所在的位置，請(qǐng)求src指向的資源會(huì)將其下載并應(yīng)用到文檔內(nèi)，例如js文件、img等，瀏覽器在加載的過程中也會(huì)暫停執(zhí)行其他資源的下載和處理。直到將該資源加載、編譯、執(zhí)行完成。
href:是指向網(wǎng)絡(luò)資源所在位置，一般用于錨點(diǎn)和鏈接之間的連接，一般使用在超鏈接

defer和async的區(qū)別

答案解析：

defer：表示后續(xù)文檔的加載和渲染與js腳本的加載是并行進(jìn)行的（異步），js的腳本執(zhí)行是需要等到文檔所有元素解析完成之后，DOMContentLoaded之前。（加載異步，執(zhí)行同步）
async: 表示后續(xù)文檔的加載和渲染與js腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行。（加載與執(zhí)行都異步）

window.load 和DOMContentLoaded的區(qū)別

DOM完整的解析過程

1、 解析HTML結(jié)構(gòu)
2、 加載外部腳本和樣式表文件
3、 解析并且執(zhí)行腳本代碼 //js文件
4、 DOM樹構(gòu)建完成  //DOMContentLoaded
5、 加載圖片等外部文件
6、 頁面加載完畢 //load

觸發(fā)情況：

當(dāng)onload 事件觸發(fā)，頁面上的dom、樣式表、腳本、圖片都以及加載完
當(dāng)DOWContentLoaded 事件觸發(fā)時(shí)，僅當(dāng)dom加載完成。

對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)?

web標(biāo)準(zhǔn)簡(jiǎn)單來說可以分為結(jié)構(gòu)、表現(xiàn)、行為。其中結(jié)構(gòu)由HTML標(biāo)簽組成；表現(xiàn)則是由css樣式表組成；行為則是指頁面和用戶具有一定的交互，同時(shí)使得頁面結(jié)構(gòu)或者b表現(xiàn)發(fā)生變化，即為js組成。

web標(biāo)準(zhǔn)將三部分獨(dú)立分開，使其模塊化。但是有結(jié)構(gòu)或者表現(xiàn)變化則使得三者界限不清晰，所以這個(gè)時(shí)候就提出了W3C，對(duì)web標(biāo)準(zhǔn)提出了規(guī)范化的要求：

標(biāo)簽閉合、標(biāo)簽字母小寫、不亂嵌套，提高搜索機(jī)器人搜索機(jī)率。
使用外鏈css和js腳本。是結(jié)構(gòu)、表現(xiàn)、行為分為三塊，符合規(guī)范，同時(shí)也能提高頁面渲染速度，提升用戶體驗(yàn)。
樣式也要盡量少用行間樣式，使得結(jié)構(gòu)與表現(xiàn)分離，標(biāo)簽id和class的命名盡量見文知義，使得代碼維護(hù)更加簡(jiǎn)單。

用過到的瀏覽器內(nèi)核講一下

瀏覽器內(nèi)核分為兩部分：渲染引擎和JS引擎

渲染引擎：負(fù)責(zé)獲取網(wǎng)頁內(nèi)容，以及計(jì)算網(wǎng)頁顯示方式，瀏覽器內(nèi)核不同對(duì)于網(wǎng)頁的語法解釋也是不同，所以渲染結(jié)果會(huì)有差異。
JS引擎：解析和執(zhí)行js來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。

瀏覽器對(duì)應(yīng)的內(nèi)核

IE: trident內(nèi)核
Firefox : gecko內(nèi)核
Safari ： webkit內(nèi)核
Chrome : Blink（基于webkit）

iframe的優(yōu)缺點(diǎn)以及應(yīng)用場(chǎng)景

iframe標(biāo)簽是框架的一種形式，創(chuàng)建包含另一個(gè)文檔的內(nèi)聯(lián)框架，用來包含別的頁面的。

優(yōu)點(diǎn)：

iframe可以把嵌入網(wǎng)頁原樣展現(xiàn)出來
實(shí)現(xiàn)模塊分離，便于更改，并且提高代碼的可重用性
重載頁面時(shí)不會(huì)重載整個(gè)頁面

缺點(diǎn)：

樣本和腳本需要額外鏈入，增加頁面額外請(qǐng)求次數(shù)
代碼復(fù)雜，會(huì)不利于搜索引擎解讀，影響到搜索引擎優(yōu)化，不利于網(wǎng)站排名
多數(shù)小型移動(dòng)設(shè)備無法完全顯示框架，設(shè)備兼容性較差
iframe阻塞頁面加載，影響網(wǎng)頁加載速度

應(yīng)用：

跨域通信：document.domain + iframe 的設(shè)置
使用HTML5的postMessage，然后在目標(biāo)窗口接收數(shù)據(jù)

  targetWindow.postMessage(data, targetOrigin) //data為需要傳遞的數(shù)據(jù)
  window.addEventListener('message',function(evt.data){
      // doing 
  }, false) //evt.data 為傳遞過來的數(shù)據(jù)

了解過websocket嗎

答案解析：

websocket協(xié)議為web應(yīng)用客戶端和服務(wù)端之間提供全雙工通信持久化協(xié)議，和http都協(xié)議同屬于應(yīng)用層

特點(diǎn)如下：

服務(wù)端可以主動(dòng)向客戶端推送信息，客戶端也可以向服務(wù)端發(fā)送信息，實(shí)現(xiàn)真正的平等對(duì)話，屬于服務(wù)器推送的一種
沒有同源限制
數(shù)據(jù)格式比較小，性能開銷小，通信十分高效
與http協(xié)議有著很好兼容性，在握手階段也是采用http協(xié)議，默認(rèn)端口也是80和443
協(xié)議標(biāo)識(shí)符是ws

說下判斷鏈表是否有環(huán)的思路

可使用哈希表存儲(chǔ)每一個(gè)遍歷過的鏈表的結(jié)點(diǎn)，每次遍歷判斷是否已經(jīng)存過該的結(jié)點(diǎn)（hash存是因?yàn)椴樵兯俣缺容^快）
使用快慢指針，使用快指針走兩步，慢指針走一步，如果存在環(huán)則一定會(huì)相遇

2、圣杯布局和雙飛翼布局是什么？怎么實(shí)現(xiàn)的？

都是用來解決兩邊頂寬，中間自適應(yīng)的三欄布局，中間欄放在文檔流中并且優(yōu)先渲染。

圣杯布局： 中間div設(shè)置padding,左右兩邊div使用浮動(dòng)float:left 結(jié)合相對(duì)定位

<!DOCTYPE html>
<html>
<head>
    <style>
        .middle {
            float: left;
            height: 300px;
            width: 100%;
            padding: 0px 200px;
        }
        .left {
            float: left;
            height: 300px;
            width: 300px;
            position: relative;
            margin-left: -100%;
            left: -300px;
        }
        .right {
            float: left;
            height: 300px;
            width: 300px;
            position: relative;
            margin-right: -300px;
            right: -300px;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div class='middle'>我是中間部分</div>
        <div class='left'>我是左側(cè)部分</div>
        <div class='right'>我是右側(cè)部分</div>
    </div>
</body>
</html>

雙飛翼布局： 中間div設(shè)置margin，并且創(chuàng)建子div用于放置內(nèi)容

<!DOCTYPE html>
<html>

<head>
    <style>
        .center {
            float: left;
            width: 100%;
            height: 300px;
        }
        .middle{
            margin:0px 300px;
            height: 300px;
        }

        .left {
            float: left;
            height: 300px;
            width: 300px;
            margin-left: -100%;
        }

        .right {
            float: left;
            height: 300px;
            width: 300px;
            margin-right: -300px;
        }
    </style>
</head>

<body>
    <div class='box'>
        <div class='center'>
            <div class='middle'>我是中間部分</div>
        </div>
        <div class='left'>我是左側(cè)部分</div>
        <div class='right'>我是右側(cè)部分</div>
    </div>
</body>

</html>

參考鏈接

form表單詳解

form表單屬性

屬性	值	描述
accept	MIME_type	規(guī)定通過文件上傳來提交的文件類型
target	_blank/_parent/_self/_top	打開url的方式
enctype		表單發(fā)送到服務(wù)器前的編碼方式
method	get/post	表單發(fā)送請(qǐng)求的方式
action	url	表單發(fā)送的url

enctype的三個(gè)選項(xiàng)

multipart/form-data 默認(rèn)不對(duì)字符編碼，以二進(jìn)制的方式發(fā)送數(shù)據(jù)，可用于文件上傳
application/x-www-form-urlencoded 在發(fā)送前編碼所有字符
text/plain 空格轉(zhuǎn)換為'+',不對(duì)特殊字符編碼

form表單常用控件
input的type類型

button、checkout、file、submit、hidden、reset、image

其中hidden是隱藏作用域，在用戶頁面是沒有展示的，在表單中插入隱藏域目的是在于收集或者發(fā)送信息，在用戶點(diǎn)擊提交表單時(shí)，隱藏域的信息也被一起發(fā)送到服務(wù)器。

innerHTML 和 outerHTM區(qū)別

innerHTML會(huì)獲取從對(duì)象的初始位置到終止位置的全部?jī)?nèi)容，不包括html標(biāo)簽。
outerHTML除了包括innerHTML之外的全部?jī)?nèi)容，還會(huì)包括對(duì)象標(biāo)簽本身

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端面試必備基本知識(shí)點(diǎn)--HTML5篇

前端面試必備基本知識(shí)點(diǎn)--HTML5篇

HTML篇

HTML5新增的標(biāo)簽有那些

怎么理解語義化標(biāo)簽，有什么好處

html文件在不同的瀏覽器的差異

web worker是什么？適用在什么場(chǎng)景

canvas和svg的區(qū)別

什么是<!DOCTYPE>

meta標(biāo)簽

src和href的區(qū)別

defer和async的區(qū)別

window.load 和DOMContentLoaded的區(qū)別

對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)?

用過到的瀏覽器內(nèi)核講一下

iframe的優(yōu)缺點(diǎn)以及應(yīng)用場(chǎng)景

了解過websocket嗎

說下判斷鏈表是否有環(huán)的思路

2、圣杯布局和雙飛翼布局是什么？怎么實(shí)現(xiàn)的？

form表單詳解

innerHTML 和 outerHTM區(qū)別

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端面試必備基本知識(shí)點(diǎn)--HTML5篇

HTML篇

HTML5新增的標(biāo)簽有那些

怎么理解語義化標(biāo)簽，有什么好處

html文件在不同的瀏覽器的差異

web worker是什么？適用在什么場(chǎng)景

canvas和svg的區(qū)別

什么是<!DOCTYPE>

meta標(biāo)簽

src和href的區(qū)別

defer和async的區(qū)別

window.load 和DOMContentLoaded的區(qū)別

對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)?

用過到的瀏覽器內(nèi)核講一下

iframe的優(yōu)缺點(diǎn)以及應(yīng)用場(chǎng)景

了解過websocket嗎

說下判斷鏈表是否有環(huán)的思路

2、圣杯布局和雙飛翼布局是什么？怎么實(shí)現(xiàn)的？

form表單詳解

innerHTML 和 outerHTM區(qū)別

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

怎么理解語義化標(biāo)簽，有什么好處

web worker是什么？適用在什么場(chǎng)景

2、圣杯布局和雙飛翼布局是什么？怎么實(shí)現(xiàn)的？