看了伯樂(lè)在線里的一篇文章,自己面試的時(shí)候也被問(wèn)到了.挑了重點(diǎn)來(lái)記錄記錄.點(diǎn)擊查看
為什么HTML5里面我們不需要DTD(Document Type Definition)?
首先,我看到這個(gè)問(wèn)題第一反應(yīng)就是因?yàn)镠TML5不基于SGML了,但是一下子對(duì)SGML記憶有點(diǎn)模糊了,所以就碼了上一篇文章.
HTML5沒(méi)有使用SGML或者XHTML,因此不用考慮DTD,只需要放置<!DOCTYPE html>這個(gè)文檔類型告訴瀏覽器這是HTML5文檔
那么我不放<!DOCTYPE html>,HTML5還會(huì)正常工作嗎?
肯定不會(huì)啦,HTML5就這行文檔類型聲明,你都不放,瀏覽器不知道是HTML文檔,瀏覽器可能會(huì)開(kāi)啟怪異模式,同時(shí)HTML5的標(biāo)簽將不能工作
HTML5中哪個(gè)是輸出元素?
output
來(lái)看看W3C的demo
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="20">
=<output name="x" for="a b"></output>
</form>
HTML5的新特性真的太好玩了...
HTML5中datalist是什么?
就是有助于提供文本框自動(dòng)完成特性的
來(lái)看看W3C的demo
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
其實(shí)跟input的autocomplete的字段自動(dòng)完成功能是一樣的,有on何off值,注意!一定要有name屬性
<form>
<input type="text" name="hhh" autocomplete="on">
</form>
效果一樣的
下面要說(shuō)一下canvas了!
HTML5中重頭戲了,現(xiàn)在介紹一下簡(jiǎn)單的畫(huà)一條線.
1.首先定義HTML5標(biāo)簽
<canvas id="cv"></canvas>
2.獲取畫(huà)布區(qū)域的訪問(wèn)
var canvas=document.querySelector('#cv');
canvas.width=500;
canvas.height=500;
canvas.style.border='1px solid red';
var ctx=cv.getContext('2d');
3.接下來(lái)就是編寫(xiě)javascript代碼了,定義好開(kāi)始的x,y和終點(diǎn)的x,y,樣式,距離
var Line=function(options){
this.ctx=options.ctx;
this.startX=options.startX||0;
this.startY=options.startY||0;
this.endX=options.endX||0;
this.endY=options.endY||0;
this.style=options.style;
this.lineWidth=options.lineWidth;
};
4.因?yàn)檫@些都是不變的方法,可以把它放到prototype里面
Line.prototype={
constructor:Line,
stroke:function(){
var ctx=this.ctx;
ctx.beginPath();//先開(kāi)辟新路徑
ctx.moveTo(this.startX,this.startY);//起點(diǎn)
ctx.lineTo(this.endX,this.endY);//終點(diǎn)
if (this.style){
ctx.strokeStyle=this.style;//顏色
}else {
ctx.strokeStyle='#000';//默認(rèn)顏色
}
if (this.lineWidth){
ctx.lineWidth=this.lineWidth;//線條寬度
}else {
ctx.linewidth=1;//默認(rèn)線條寬度
}
ctx.stroke();//開(kāi)始繪制
}
};
5.最后生成實(shí)例
var len1=new Line({
ctx: ctx,
startX: 100,
startY: 100,
endX: 200,
endY: 200,
style: "red",
lineWidth: 5
});
len1.stroke();
看看效果
對(duì)就是這樣的,還有很多很有意思的玩法,以后會(huì)更新到新的文章
如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5
首先解決HTML5新標(biāo)簽瀏覽器兼容問(wèn)題的話,除了用一些框架以外,IE6/IE7/IE8支持通過(guò)document.createElement來(lái)創(chuàng)建標(biāo)簽,可以利用這個(gè)特性讓瀏覽器支持HTML5標(biāo)簽,但是要手動(dòng)添加標(biāo)簽?zāi)J(rèn)樣式
如何區(qū)分HTML5:
- DOCTYPE聲明
- 新增的結(jié)構(gòu)標(biāo)簽
- 功能元素
對(duì)HTML語(yǔ)義化的理解
我覺(jué)得這種問(wèn)題好無(wú)聊,但是總有人喜歡問(wèn)這種問(wèn)題,既然都說(shuō)了語(yǔ)義化了,顧名思義那就是語(yǔ)義化啊
比如header標(biāo)簽?zāi)憔蛯?xiě)頭部代碼啊,footer就寫(xiě)頁(yè)腳代碼啊,正確的標(biāo)簽做正確的事情,讓代碼結(jié)構(gòu)化呀,讓計(jì)算機(jī)知道你在寫(xiě)什么鬼啊,更好解析你寫(xiě)的東西呀,那這樣不就利于SEO了么,對(duì)搜索引擎爬蟲(chóng)的友好呀,隔段時(shí)間回來(lái)看這代碼還能知道這是你寫(xiě)的,也方便別人來(lái)看你寫(xiě)的代碼呀
好吧,可能有更加高深的理解我還沒(méi)有領(lǐng)悟到,我只能解釋到這了
HTML5中的應(yīng)用緩存,如何實(shí)現(xiàn)應(yīng)用緩存
什么是應(yīng)用緩存?緩存就是你在沒(méi)有網(wǎng)路的情況下也可以訪問(wèn)的東西,比如有人問(wèn)你或者面試官問(wèn)你,如何做網(wǎng)站性能優(yōu)化,你就可以說(shuō)上這一條
緩存減少了HTTP請(qǐng)求,加快了加載資源的速度,用戶可以在無(wú)網(wǎng)絡(luò)的情況下使用它,瀏覽器只用下載更新過(guò)的資源
**
原理:HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù)),通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源,這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái).之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示**
如何創(chuàng)建?
1.先創(chuàng)建一個(gè)manifest文件,建議后綴使用.appcache
2.就是通過(guò)html標(biāo)簽的manifest屬性創(chuàng)建application cache,引入你的manifest文件,每個(gè)指定了manifest的頁(yè)面,在用戶訪問(wèn)時(shí)都會(huì)被你定制的規(guī)則來(lái)緩存
<html manifest="test.appcache">
3.現(xiàn)在來(lái)看看manifest文件里面怎么寫(xiě)
CACHE MANIFEST
version:2.1.7
CACHE:
應(yīng)用緩存.html
test.css
注意,第一行CACHE MANIFEST一定不要寫(xiě)錯(cuò),它告知瀏覽器被緩存的內(nèi)容
然后寫(xiě)上CACHE:
下面寫(xiě)上你要緩存的文件
然后要更新緩存的文件,通過(guò)修給version的版本號(hào)進(jìn)行刷新
manifest文件主要分成三部分
- CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
- NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接监憎，且不會(huì)被緩存
- FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面(比如 404 頁(yè)面)
4.看看html先
<!DOCTYPE html>
<html lang="en" manifest="test.appcache">
<head>
<meta charset="UTF-8">
<title>apply cache</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>這是被緩存的樣式</p>
</body>
</html>
5.你外鏈的樣式
p{
color: red;
}
現(xiàn)在看看效果,注意!要用服務(wù)器打開(kāi),file打開(kāi)是無(wú)效的
我現(xiàn)在把字體顏色修改一下,傳說(shuō)中的騷粉色
p{
color: hotpink;
}
再看看,連上網(wǎng)之后無(wú)論怎么刷新都沒(méi)有改變
因?yàn)闆](méi)有修改版本號(hào)呀!!現(xiàn)在去修改一下
CACHE MANIFEST
version:2.1.8
CACHE:
應(yīng)用緩存.html
test.css
再看看
更新了!一般工作上就會(huì)用來(lái)緩存頁(yè)面的樣式和比如你寫(xiě)了個(gè)秒表,離線的時(shí)候也能用,注意這里說(shuō)的是一般工作上
一旦文件被緩存，則瀏覽器會(huì)繼續(xù)展示已緩存的版本俐东，即使您修改了服務(wù)器上的文件,要記得修改版本號(hào)啊!
還有就是剛剛在Firefox打開(kāi)它是這樣說(shuō)的
為什么呢?我覺(jué)得應(yīng)該是這樣的:
1.每一次更新資源,都要手動(dòng)的去更改版本號(hào)
2.在web app中比較有用,普通pc端來(lái)說(shuō)沒(méi)什么意義
3.對(duì)于hybird來(lái)說(shuō),也沒(méi)有意義,通過(guò)manifest只能更新css文件,而js文件不能更新
4.你的用戶每次打開(kāi)都是舊的頁(yè)面,需要用戶強(qiáng)行刷新一遍的話,可想而知,交互設(shè)計(jì)師和產(chǎn)品經(jīng)理真的會(huì)拿刀過(guò)來(lái)的,那如果不刷新的話,運(yùn)營(yíng)那邊上了個(gè)新的banner,然而需要用戶第二次刷新才能看到...我覺(jué)得運(yùn)營(yíng)也會(huì)真的會(huì)拿刀過(guò)來(lái)的哈哈哈
(參考自知乎)
后期更新Serviceworker
<meta http-equiv='X-UA-compatible' content='IE=edge'>
看看這道無(wú)聊的題目
<meta http-equiv='X-UA-compatible' content='IE=edge'>
http-equiv就是把content 屬性關(guān)聯(lián)到 HTTP 頭部
再看compatible,就是兼容,那么content里面的就是兼容條件了
content='IE=edge'就是edge按照最新引擎標(biāo)準(zhǔn)來(lái)渲染頁(yè)面
<meta http-equiv = "X-UA-Compatible" content = "IE=7,IE=9" >
<meta http-equiv = "X-UA-Compatible" content = "IE=7,9" >
以上代碼是告訴IE瀏覽器,IE8/9及以后的版本都會(huì)以最高版本的IE標(biāo)準(zhǔn)來(lái)渲染頁(yè)面
strong和em
strong從樣式來(lái)看是加粗
em從樣式來(lái)看是斜體
strong是強(qiáng)調(diào)的意思,那么SEO會(huì)覺(jué)得strong比b標(biāo)簽和i標(biāo)簽要重要
em和i都是斜體,但是em是邏輯元素,i是物理元素!
