注釋?zhuān)墒荌E頁(yè)面上出現(xiàn)了這個(gè)注釋?zhuān)缦聢D'>為了IE兼容HTML5標(biāo)簽，我加了[if lt IE9]>注釋?zhuān)墒荌E頁(yè)面上出現(xiàn)了這個(gè)注釋?zhuān)缦聢D

你好，我剛在本機(jī)測(cè)試了一下，這個(gè)沒(méi)問(wèn)題了的。你仔細(xì)看一下你的這個(gè)標(biāo)簽是否寫(xiě)對(duì)了，不行的話(huà)，重新復(fù)制一下，有可能是!---這些符號(hào)有問(wèn)題?

成都創(chuàng)新互聯(lián)公司是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),廣平網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:廣平等地區(qū)。廣平做網(wǎng)站價(jià)格咨詢(xún):18982081108

!--[if?lt?IE?9]??

![endif]--

HTML5的語(yǔ)義化標(biāo)簽有哪些，作用是什么

標(biāo)簽種類(lèi)：

header：定義頁(yè)眉

nav：定義導(dǎo)航

section：定義文檔中的區(qū)段

time：定義日期和時(shí)間

article：定義文章

aside：定義文章的側(cè)邊欄

figure：定義一組媒體對(duì)象以及文字

figcaption：定義figure的標(biāo)題

footer：定義頁(yè)腳

標(biāo)簽作用：

header與footer標(biāo)簽用于表示頁(yè)面、應(yīng)用或某個(gè)模塊的頭部和尾部；

nav用于表示導(dǎo)航；

article標(biāo)簽表示文章；

aside標(biāo)簽和article標(biāo)簽用法類(lèi)似，只是表示內(nèi)容會(huì)出現(xiàn)在側(cè)邊欄；

figure標(biāo)簽表示一段自包含的內(nèi)容——獨(dú)立的流內(nèi)容（圖像、圖標(biāo)、照片、代碼等）

在開(kāi)發(fā)當(dāng)中，可以使用section和article標(biāo)簽替代過(guò)度的div標(biāo)簽，用這些標(biāo)簽來(lái)對(duì)頁(yè)面進(jìn)行內(nèi)容劃分。

想了解更多，可點(diǎn)擊《如何讓舊瀏覽器支持HTML5新標(biāo)簽》

html5 怎么制作響應(yīng)式網(wǎng)頁(yè)

步驟1 創(chuàng)建空白的HTML 5模版

首先，我們創(chuàng)建一個(gè)空白的模版，代碼很簡(jiǎn)單，如下所示：

復(fù)制代碼

步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在頁(yè)面模版中，我們需要確保每個(gè)區(qū)域都能正確地對(duì)齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示：

復(fù)制代碼

讀者可能留意到這里使用的div id=”wrapper”，這個(gè)是稍候用來(lái)做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼

1）首先往標(biāo)題中增加如下代碼：

　Simple HTML5 Template

復(fù)制代碼

2）往導(dǎo)航標(biāo)簽中添加如下代碼，這樣很方便地構(gòu)件了一個(gè)簡(jiǎn)單的頁(yè)面分類(lèi)導(dǎo)航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

復(fù)制代碼

3）使用標(biāo)簽來(lái)描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示：

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

復(fù)制代碼

4）添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類(lèi)似的有別與主要內(nèi)容的部分。

根據(jù)目前的規(guī)范，元素有兩種使用方法：

被包含在中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。

在之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(cè)邊欄(sidebar)，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。

代碼如下：

Categories Category 1 Category 2

Parent Category Child One Child Two

Grandchild One Grandchild Two Grandchild Three

Child Three Category 3

Text Lorem Ipsum is simply dummy

text of the printing and typesetting industry.

復(fù)制代碼

5）加上最后的標(biāo)簽，代碼為：

Copyright@ 2013 HTML5.com Privacy Policy - About Us

復(fù)制代碼

步驟4 增加CSS樣式

首先創(chuàng)建一個(gè)空白的樣式，如下：

[/code] 然后在中下載這個(gè)css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下： [code]body {

font-family: arial, sans-serif;

font-size: 100%; /* best for all browser using em */

padding:0;

margin:0;

}

*, html { line-height: 1.6em; }

article img { width:auto; max-width:100%; height:auto; }

.sidebar a, article a, header a, footer a { color: #C30; }

header a { text-decoration: none; }

#wrapper {

font-size: 0.8em; /* 13px from 100% global font-size */

max-width: 960px; /* standard 1024px wide */

margin: 0 auto;

}

/* css for */

header { padding: 1em 0; margin: 0px; float: left; width: 100%;

}

header hgroup { width: 100%; font-weight:normal; }

/* css for */

nav

{ display: block; margin: 0 0 2em; padding: 0px;

float: left; width: 100%; background-color: #181919;

}

nav ul ul {display: none;}

nav ul li:hover ul {display: block;}

nav

ul { padding: 0; list-style: none; position:

relative; display: inline-table; z-index: 9999;

margin: 0px; float: left; width: 100%;

}

nav ul:after {content: ""; clear: both; display: block;}

nav ul li {float: left;}

nav ul li:hover a {color: #fff;}

nav

ul li a { display: block; padding: 1em; font-size:

1.125em; color: #ccc; text-decoration: none;

margin: 0px; background-color: #000; border-right: 1px

solid #333;

}

nav ul li:last-of-type a {border-right: 1px solid transparent !important;}

nav

ul ul { background: #5f6975; border-radius: 0px;

padding: 0; position: absolute; top: 100%; width:

auto; float: none;

}

nav ul li:hover { background: #5f6975; color: #FFF;

}

nav ul ul li a:hover { background-color: #4b545f;

}

nav ul ul li {

float: none;

border-bottom: 1px solid #444240;

position: relative;

}

nav ul ul li a {

padding: 0.5em 1em;

font-size: 1em;

width:10em;

color: #fff;

}

nav ul ul ul {

position: absolute; left: 100%; top:0;

}

/* css for */

section.content { width: 70%; float:left; }

.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }

article .entry { clear:both; padding: 0 0 1em; }

h1.post-title { font-size: 1.8em; margin:0; padding:0;}

.entry.post-meta { color: #888; }

.entry.post-meta span { padding: 0 1em 0 0; }

.entry.post-content { font-size: 1.125em; margin:0; padding:0;}

/* css for */

aside.sidebar { width: 25%; float:right; }

aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;

}

aside.sidebar

ul li { width:100%; margin: 0px 0px 2em; padding:

0px; float: left; list-style: none;

}

aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;

}

aside.sidebar

ul li ul li ul li { margin: 0px; padding: 0px 0px 0px

1em; width: 90%; font-size: 0.9em;

}

aside.sidebar

ul li h3.widget-title { width:100%; margin: 0px;

padding: 0px; float: left; font-size: 1.45em;

}

/* css for */

footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;

}

footer .footer-left { width: 45%; float:left; text-align:left; }

footer .footer-right { width: 45%; float:right; text-align:right; }

復(fù)制代碼

步驟5 為移動(dòng)應(yīng)用使用@media query查詢(xún) 為了進(jìn)行響應(yīng)式設(shè)計(jì)，最佳的方案是使用@media query去進(jìn)行查詢(xún)，在上面的CSS代碼中添加如下代碼：

/* ipad 768px */

@media only screen and (min-width:470px) and (max-width:770px){

body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }

section.content, aside.sidebar { width:100%; }

}

/* iphone 468px */

@media only screen and (min-width:270px) and (max-width:470px){

body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }

section.content, aside.sidebar { width:100%; }

}

復(fù)制代碼

步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個(gè)能在多種瀏覽器中通過(guò)運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫(kù)放在標(biāo)簽前，代碼如下：

復(fù)制代碼

如何處理html5新標(biāo)簽的瀏覽器兼容問(wèn)題

目前HTML5已向開(kāi)發(fā)人員提供了很多新的標(biāo)簽，如section，nav，article，header和footer等。這些標(biāo)簽語(yǔ)義化程度高，會(huì)被經(jīng)常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識(shí)別和正常使用。

一、HTML5標(biāo)簽在瀏覽器展示存在的問(wèn)題

對(duì)于現(xiàn)階段來(lái)說(shuō)，使用HTML5標(biāo)簽可能遇到的最大問(wèn)題就是如何在不支持新標(biāo)簽的瀏覽器中做恰當(dāng)?shù)奶幚怼．?dāng)我們?cè)陧?yè)面中使用HTML5元素時(shí)，可能會(huì)得到三種不同的結(jié)果。

結(jié)果1：標(biāo)簽被當(dāng)作錯(cuò)誤處理并被忽略。那么DOM構(gòu)建的時(shí)候，就會(huì)當(dāng)作這個(gè)標(biāo)簽不存在。

結(jié)果2：標(biāo)簽會(huì)被當(dāng)作錯(cuò)誤處理，并在DOM構(gòu)建的時(shí)候依然會(huì)按照預(yù)期的代碼進(jìn)行創(chuàng)建，并且HTML標(biāo)簽會(huì)被構(gòu)造成行內(nèi)元素（也就是說(shuō)雖然不能識(shí)別，但是代碼里section標(biāo)簽依然會(huì)在dom中創(chuàng)建一個(gè)對(duì)應(yīng)section節(jié)點(diǎn)，但是屬于行內(nèi)元素）。

結(jié)果3：標(biāo)簽被識(shí)別為HTML5標(biāo)簽，然后用DOM節(jié)點(diǎn)對(duì)其進(jìn)行替換。DOM在構(gòu)建的時(shí)候和預(yù)想的一致，并且合適的樣式會(huì)應(yīng)用到標(biāo)簽上（大部分情況下是塊級(jí)元素）。

有一個(gè)具體的例子，大家思考一下下面的代碼：

div class="outer"

section

h1title/h1

ptext/p

/section

/div

很多瀏覽器（比如Firefox

3.6和Safari4）解析的時(shí)候都會(huì)將div作為最外層的元素，然后div里面是一個(gè)識(shí)別不了的元素（section），它會(huì)在DOM中創(chuàng)建，并被作為一個(gè)行內(nèi)元素存在。h1和p元素都是作為section元素的子節(jié)點(diǎn)。因?yàn)閟ection在DOM中真實(shí)存在，所以也可以修改其樣式。這種情況對(duì)應(yīng)結(jié)果2。

IE9之前的版本會(huì)認(rèn)為section標(biāo)簽是一個(gè)錯(cuò)誤，并直接將其忽略，那么h1和p標(biāo)簽會(huì)被解析，然后成為div標(biāo)簽的子節(jié)點(diǎn)。/section也會(huì)被認(rèn)為是一個(gè)錯(cuò)誤并直接跳過(guò)。在這些瀏覽器中實(shí)際有效的代碼是這樣的：

div class="outer"

h1title/h1

ptext/p

/div

那么，舊版本的IE瀏覽器除了生成的DOM結(jié)構(gòu)和其他瀏覽器不一樣，其對(duì)不可識(shí)別標(biāo)簽的容錯(cuò)能力還是很棒的。因?yàn)閟ection節(jié)點(diǎn)沒(méi)有在DOM樹(shù)中構(gòu)建，所以也就不能給其增加樣式。這種情況對(duì)應(yīng)結(jié)果1。

當(dāng)然，支持HTML5的瀏覽器比如IE9，F(xiàn)irefox4+，Safari5+會(huì)創(chuàng)建正確的DOM結(jié)構(gòu)，然后這些標(biāo)簽會(huì)默認(rèn)附帶HTML5規(guī)范中定義的默認(rèn)樣式。

那么，我們所面臨的最大問(wèn)題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結(jié)構(gòu)，并且含有不同的樣式。

二、如何解決HTML5標(biāo)簽不兼容

或許會(huì)有很多人在質(zhì)疑：為什么老式的瀏覽器不能識(shí)別這些標(biāo)簽？其實(shí)錯(cuò)不在瀏覽器，因?yàn)樵谀莻€(gè)時(shí)代根本不存在這種標(biāo)簽，所以不能正確識(shí)別出來(lái)，而這種不尋常的標(biāo)簽識(shí)別令DOM結(jié)構(gòu)變得異常。對(duì)此，人們想出了很多在現(xiàn)階段頁(yè)面中使用HTML5元素的解決方案。每一個(gè)解決方案為了做到兼容都會(huì)遇到一些特定的問(wèn)題。在此也在馬海祥博客上跟大家分享一下：

1、實(shí)現(xiàn)標(biāo)簽被識(shí)別

馬海祥曾做個(gè)一個(gè)測(cè)試（以IE8為例），是一個(gè)文章標(biāo)題和藍(lán)色字的文章內(nèi)容，其中文章內(nèi)容用了article標(biāo)簽。代碼如下：

!DOCTYPE html

html xmlns="" lang="zh-CN"

head

meta charset="UTF-8" /

title測(cè)試/title

style

article{color:#06F;}

/style

/head

body

h1文章標(biāo)題/h1

article

這是文章內(nèi)容，應(yīng)該是一段藍(lán)色的文字。在老式瀏覽器中，如果不做hack將顯示異常。

/article

/body

/html

在IE8瀏覽器中，顯示如下：

IE8不能識(shí)別article標(biāo)簽， 定義在標(biāo)簽上的CSS樣式?jīng)]有起作用。

在IE8中，article被解釋成命名為article /和/article

/兩個(gè)空的標(biāo)簽元素，與文章內(nèi)容并列為兄弟節(jié)點(diǎn)，如下圖所示：

既然因?yàn)椴荒茏R(shí)別標(biāo)簽而不能使用，那我們的解決辦法就是讓標(biāo)簽被識(shí)別出來(lái)。所幸，簡(jiǎn)單地通過(guò)document.createElement（tagName）即可以讓瀏覽器識(shí)別標(biāo)簽和CSS引擎知道該標(biāo)簽的存在。假設(shè)我們上面的例子的head區(qū)域加上如下代碼。

script

document.createElement('article');

/script

IE8瀏覽器中的DOM解釋就會(huì)變成下圖所示：

自然，文字也顯示成正常的藍(lán)色。如下圖所示：

2、JavaScript解決方案

JavaScript解決方案目的是解決在舊版本的IE中樣式應(yīng)用的問(wèn)題。老版本的IE不會(huì)識(shí)別不明元素已經(jīng)是一個(gè)耳熟能詳?shù)奶匦裕绻@些元素已經(jīng)通過(guò)document.createElement()創(chuàng)建，那么瀏覽器就可以識(shí)別這些標(biāo)簽，并可以將其在DOM樹(shù)中構(gòu)建，然后允許開(kāi)發(fā)者對(duì)其應(yīng)用樣式。

這個(gè)方法可以確保HTML5標(biāo)簽?zāi)茉谂f版本IE中對(duì)應(yīng)創(chuàng)建DOM節(jié)點(diǎn)，然后可以對(duì)其應(yīng)用樣式。這個(gè)方法將HTML5塊級(jí)元素設(shè)置成display:block，從而可以在各個(gè)瀏覽器中做到兼容。

今天測(cè)試以下把馬海祥博客的網(wǎng)頁(yè)改成了HTML5的，調(diào)試了一下，在FF和Opera中都顯示正常了，到了IE6上卻變得面目全非了。對(duì)此我還特意去找了一些使用JS代碼支持HTML5標(biāo)簽元素的方法，在此也跟大家分享一下：

（1）、使用html5shiv

查看了一下，發(fā)現(xiàn)了html5shiv能解決這個(gè)問(wèn)題，可以把HTML5的新元素轉(zhuǎn)換成IE6認(rèn)識(shí)的內(nèi)容。只需要在你的head中調(diào)用這段代碼就行：

!--if lt IE 9]

script src=""/script

![endif]--

當(dāng)然你也可以直接把這個(gè)文件下載到自己的網(wǎng)站上。但這個(gè)文件必須在head標(biāo)簽中調(diào)用，因?yàn)镮E必須在元素解析這前知道這些元素，才能啟作用！但馬海祥還要提醒你一下：還要在你的CSS文件中加上以下代碼，不然有可能會(huì)出現(xiàn)些莫名其妙的問(wèn)題。

header,nav,article,section,aside,footer{display:block;}

另外excanvas.js是Google為IE6支持canvas元素寫(xiě)的腳本，以后馬海祥會(huì)跟大家再細(xì)說(shuō)這樣的例子，感興趣的朋友可以去試試。

（2）、使用Kill IE6

除此之外你還可以使用KILL IE6一族，前提是你的瀏覽器允許執(zhí)行JS文件。方法很簡(jiǎn)單，在你的網(wǎng)站的/body之前加上以下代碼就可以了：

!--if lte IE 6]

script src=""/script

![endif]--

上面寫(xiě)的!--if lte IE 6]在正常的HTML中屬于注釋?zhuān)粫?huì)被執(zhí)行，但在IE中是一個(gè)判斷語(yǔ)句，所以這些代碼只有在IE中才會(huì)被識(shí)別并加載。

lte：就是Less than or equal to的簡(jiǎn)寫(xiě)，也就是小于或等于的意思。

lt ：就是Less than的簡(jiǎn)寫(xiě)，也就是小于的意思。

gte：就是Greater than or equal to的簡(jiǎn)寫(xiě)，也就是大于或等于的意思。

gt ：就是Greater than的簡(jiǎn)寫(xiě)，也就是大于的意思。

! ： 就是不等于的意思，跟javascript里的不等于判斷符相同

說(shuō)實(shí)話(huà)，馬海祥不喜歡這個(gè)利用JavaScript解決的方案，因?yàn)樗茐牧宋易钪饕膚eb應(yīng)用開(kāi)發(fā)原則：我們不應(yīng)該使用JavaScript來(lái)控制布局。不僅僅是因?yàn)檫@個(gè)做法給那些禁用腳本的用戶(hù)帶來(lái)了糟糕的用戶(hù)體驗(yàn)，更重要的是，如果我們希望我們的web應(yīng)用代碼是面向未來(lái)，并且維護(hù)性高的，那么必須將視圖相關(guān)部分分離出來(lái)。這個(gè)方案對(duì)在跨瀏覽器中構(gòu)建相同的DOM結(jié)構(gòu)很有幫助，也可以確保你的JavaScript和CSS在各個(gè)地方運(yùn)行結(jié)果相同，但是這個(gè)優(yōu)勢(shì)并不能改變我對(duì)這個(gè)方法的不認(rèn)同。

3、Namespace hack

永遠(yuǎn)不要缺乏使用hack解決問(wèn)題的能力，在IE中還有其他技術(shù)來(lái)讓瀏覽器識(shí)別不明的標(biāo)簽。這個(gè)來(lái)自Elco Klingen日志的方法一開(kāi)始引起了廣泛的關(guān)注。該技術(shù)包含了一個(gè)XML形式的命名空間，并使用了含有namespace前綴的元素。例如：

html xmlns="" xmlns:html5=""

body

html5:section

!-- content --

/html5:section

/body

/html

前綴html5是純粹是用于這個(gè)例子而且也不是官方支持的，你甚至可以用"foo"作為前綴，結(jié)果還是一樣。有了前綴之后，IE會(huì)識(shí)別新的元素，從而可以應(yīng)用樣式。在其他瀏覽器中一樣有效，那么最后，你就成功地在各個(gè)瀏覽器中構(gòu)建了一樣的元素和一樣的樣式。

這個(gè)方法的缺陷很明顯：你必須在HTML文檔中使用XML格式的命名空間，同樣，你也需要在css中這么做:

html5\:section {

display: block;

}

馬海祥點(diǎn)評(píng)：這并不是我期望Web開(kāi)發(fā)者編寫(xiě)代碼的方式。雖然這是一個(gè)非常杰出的解決方案，但是這讓?xiě)?yīng)用變得不自然。我不希望看到文件中充滿(mǎn)了帶命名空間的元素。

4、Bulletproof技術(shù)（防彈衣技術(shù)）

說(shuō)實(shí)話(huà)，我是第一次接觸到這個(gè)技術(shù)，建議在所有新的HTML5塊級(jí)元素中增加一個(gè)內(nèi)部的div元素，然后包含一個(gè)CSS class，用這個(gè)元素來(lái)替代HTML元素（類(lèi)似在里面穿了一件防彈衣），例如：

section

div class="section"

!-- content --

/div

/section

在應(yīng)用樣式的時(shí)候，Tantek推薦直接給div增加樣式，而不是給新元素增加樣式

推薦使用：

.section {

color: blue;

}

而不是：

section {

color: blue;

}

這個(gè)方案的原理是用簡(jiǎn)單的方式將原來(lái)的樣式應(yīng)用方式轉(zhuǎn)移到一個(gè)代表了HTML5標(biāo)簽的元素上。由于我一般情況下不會(huì)將樣式通過(guò)標(biāo)簽名的方式應(yīng)用到元素上，所以馬海祥也并完全支持這個(gè)建議。

馬海祥覺(jué)得這個(gè)方案的缺陷是不同的瀏覽器構(gòu)建了不同的DOM結(jié)構(gòu)，那么你必須在編寫(xiě)JavaScript和CSS的時(shí)候格外小心。獲取子節(jié)點(diǎn)或者父節(jié)點(diǎn)的時(shí)候，不同的瀏覽器返回的結(jié)果可能會(huì)不一樣。特別是在下面的代碼中：

div class="outer"

section

div class="section main"

!-- content --

/div/section

/div

5、反向的bulletproof技術(shù)

還有一些方法，比如嘗試使用和Tanteck方案相反的技術(shù)，也就是把HTML5元素放在div元素內(nèi)部，例如：

div class="section"

section

!-- content --

/section

div

這個(gè)方案唯一的不同是HTML5元素的位置，其他都一樣。喜歡這個(gè)技術(shù)的支持者認(rèn)為他的一致性很好（適用于所有的元素，包括hgroup）。但是DOM結(jié)構(gòu)的不同讓這個(gè)方案意義變得不大。他的主要優(yōu)勢(shì)是技術(shù)上的一致性。

6、關(guān)于X-UA-Compatible的使用

目前絕大多數(shù)網(wǎng)站都用以下代碼來(lái)作為IE8的兼容方法。

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

雖然微軟將IE向標(biāo)準(zhǔn)邁進(jìn)了一大步，而事實(shí)上IE8還存在一系列渲染的奇怪現(xiàn)象是不爭(zhēng)的事實(shí)。

在X-UA-Compatible中可用的方法有：

meta http-equiv="X-UA-Compatible" content="IE=6"

meta http-equiv="X-UA-Compatible" content="IE=7"

meta http-equiv="X-UA-Compatible" content="IE=8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

其中最后一行是永遠(yuǎn)以最新的IE版本模式來(lái)顯示網(wǎng)頁(yè)的。

另外加上

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"

而使用，Emulate模式后則更重視。

所以目前來(lái)說(shuō)還是以使用

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

為首選。

7、通過(guò)修改HTML部分來(lái)實(shí)現(xiàn)

我的主要目標(biāo)是確保我只需要修改HTML部分。這就意味著不需要修改CSS和JavaScript。為什么會(huì)有這樣的需求？需要修改的Web應(yīng)用視圖越多，你越有可能制造bug。將改變限制到一個(gè)視圖也就限制了bug的出現(xiàn)，即使出現(xiàn)了bug，也可以減少你查找錯(cuò)誤的范圍。如果一個(gè)視圖破相了，我可以知道這是因?yàn)槲以黾恿艘粋€(gè)section元素，而不是考慮是不是CSS文件修改來(lái)帶的影響。

在研究了所有這些解決方案，并進(jìn)行一些嘗試和設(shè)計(jì)之后，我回到了Tantek的方案。這是唯一一個(gè)只需要修改HTML而不用動(dòng)CSS和HTML的方案。現(xiàn)在，我在他的方案基礎(chǔ)上做了一些改進(jìn)，來(lái)達(dá)到我想要的結(jié)果。

首先，我不會(huì)給那些代表HTML5元素的class增加樣式（所以我不會(huì)使用.section這樣的選擇器）。我保留了div元素，然后再增加一個(gè)帶語(yǔ)義的class來(lái)應(yīng)用樣式，并作為進(jìn)行JavaScript操作的鉤子。例如，這樣的代碼：

div class="content"

!-- content --

/div

經(jīng)過(guò)改進(jìn)后：

section

div class="section content"

!-- content --

/div

/section

這樣的修改完成后，我依然使用.content作為樣式和腳本的入口。這也意味著我不需要修改CSS和JavaScript。

然后，為了避免hgroup標(biāo)簽這樣的情況，我選擇不使用這個(gè)標(biāo)簽。我在我已有的所有頁(yè)面中沒(méi)有找到任何一個(gè)使用了這個(gè)標(biāo)簽的。由于hgroup標(biāo)簽只能包含標(biāo)題元素，如果你確實(shí)想要使用這個(gè)標(biāo)簽，那么使用hrgoup來(lái)包含本身是非常安全的（假設(shè)它沒(méi)有包含其他的塊級(jí)元素）。

我在馬海祥博客上花了很多時(shí)間來(lái)測(cè)試比較bulletproof和反向的bulletproof哪個(gè)更好一些。我做選擇時(shí)最主要的決定因素就是反向的bulletproof需要我去增加CSS代碼。在那些為HTML5標(biāo)簽創(chuàng)建了DOM節(jié)點(diǎn)但是沒(méi)有應(yīng)用默認(rèn)樣式的元素來(lái)說(shuō)，div元素里包含了一個(gè)HTML5塊級(jí)元素在很多情況下都會(huì)攪亂我的布局，因?yàn)閯?chuàng)建的DOM節(jié)點(diǎn)是行內(nèi)元素。我不得不明確增加CSS規(guī)則來(lái)讓這個(gè)節(jié)點(diǎn)變成塊級(jí)元素從而可以正常布局，這也就違反了我不修改CSS文件的初衷。

馬海祥博客點(diǎn)評(píng)：

在我的研究中，我使用了多個(gè)頁(yè)面，然后在這些頁(yè)面上使用修改過(guò)后的bulletproof技術(shù)。我分別在簡(jiǎn)單和復(fù)雜的布局中，含有和不含有JavaScript交互進(jìn)行測(cè)試。在每一個(gè)例子中，我只需要修改HTML就可以讓頁(yè)面表現(xiàn)正確（不修改JavaScript和CSS）。那么，子節(jié)點(diǎn)和父節(jié)點(diǎn)的問(wèn)題怎么辦？有趣的事情是我在測(cè)試中并沒(méi)有遇到這樣的問(wèn)題。

理由很簡(jiǎn)單，因?yàn)槲覍?duì)代碼苛刻的態(tài)度。我認(rèn)真地做了第二遍檢查：

（1）、標(biāo)簽名和ID不會(huì)用于應(yīng)用樣式（只是用class）。

（2）、盡量選擇常用的CSS選擇器并且盡量減少選擇器的使用。

（3）、JavaScript代碼不依賴(lài)于特定的DOM結(jié)構(gòu)。

（4）、標(biāo)簽名不用于操作DOM。

我注意到另一個(gè)有趣的事情是我使用了HTML5元素作為容器。而這些新的元素僅僅是作為功能性模塊的邊界。你應(yīng)該花費(fèi)你的大部分時(shí)間為內(nèi)部的元素編寫(xiě)樣式和腳本而不是處理各個(gè)模塊間的樣式和腳本。由于馬海祥博客的JavaScript和CSS標(biāo)簽都應(yīng)用在容器的內(nèi)部，所以一切都顯得很順利。我想這才是一個(gè)真正的代碼質(zhì)量高的網(wǎng)站。

HTML5重點(diǎn)內(nèi)容總結(jié)

一、 HTML5新增的標(biāo)簽

（1）header nav main? footer? section article hgroup? figure figcaption? aside?

video? audio canvas

? ? ? ? ? ? （2）如何讓新標(biāo)簽兼容低版本瀏覽器：? html5shiv.js

二、 HTML5新增的表單控件

一、表單控件的新屬性

? ? ? ? input type="text"? placeholder=""? required? autofocus? pattern="abc"

二、新增的表單控件

（1）input type="email"

（2）input type="url"

? （3）數(shù)字控件：? type="number"

? (4)? 滑動(dòng)組件：? type="range"

? (5)? 拾色器：? ? ? type="color"

? (6)? 日期控件：? ? type="date"

三、本地存儲(chǔ)

1、 三種本地存儲(chǔ) ：? cookie webStorage(localStorage? sessionStorage)

2、localStorage的API

? (1)寫(xiě)入：? localStorage.setItem(鍵，值);? //值只能是字符串

? localStorage.user = "123" localStorage["user"] = "123"

? （2）讀取? var user = localStorage.getItem("user")

? ? ? ? ? ? ? var user = localStorage.user;

? ? (3)刪除：? localStorage.removeItem("user")? ? localStorage.clear()

? ? （4）修改：? localStorage.setItem("user","890")

3、sessionStorage的API

sessionStorage.setItem(鍵，值);

? ? sessionStorage.getItem(鍵);

? ? sessionStorage.removeItem(鍵);

sessionStorage.clear();

**********重點(diǎn)**********

? 4、cookie webStorage(localStorage? sessionStorage)三者的區(qū)別

四、離線(xiàn)存儲(chǔ)

（1） *.manifest? (*.appcache)?

? ? ? index.html? html manifest="*.manifest"

(2) 理解離線(xiàn)存儲(chǔ)的更新方式

五、移動(dòng)端的布局思路：

1、設(shè)備像素比（倍率）? 邏輯像素尺寸 （360px? 320px? 375px? 414px）

? ? ? ? window.devicePixelRatio

? ? 2、 meta name="viewport" content="width=device-width,maximum-

scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""

3、使用rem單位

六、地理定位

if (navigator.geolocation){?

? ? ? ? navigator.geolocation.getCurrentPosition(success,error,{

? ? ? ? ? ? timeout: 5000

? ? ? ? });

? ? ? ? function success(pos){

? ? ? ? ? ? 緯度:? pos.coords.latitute

? ? ? ? ? ? 經(jīng)度：? pos.coords.longtitude

? ? ? ? }

? ? }

? ? navigator.geolocation.watchPosition(success);

七、地理定位和百度地圖API的結(jié)合

八、視頻，音頻? video autoplay="autoplay" controls="controls" loop="loop" poster=""

preload="preload"? audio

九、移動(dòng)端事件：?

(1) ontouchstart? ontouchmove? ontouchend

(2) 如何判斷是否為移動(dòng)端：? if ("ontouchstart" in document){}

? ? (3) 移動(dòng)端事件的事件對(duì)象及常用屬性

? ? ? e.touches[0].clientX? e.touches[0].clientY? e.touches[0].target

? (4) 移動(dòng)端常見(jiàn)問(wèn)題及解決方案：

a、 click事件 300ms的延遲：? 1zepto的tap事件? （2） fastclick.js

b、 zepto的tap事件有點(diǎn)透問(wèn)題 ：? （1） fastclick.js

? ? (5) zepto的touch模塊：? tap? singleTap? doubleTap? longTap?

? ? ? ? ? ? swipeLeft? swipeRight? swipeUp? swipeDown

十、swiper.js的使用? （參考官網(wǎng)）

十一、 canvas

(1)? canvas width="600" id="can"/canvas? ? 300*150

? (2)? var can = document.getElementById("can");

? var cxt = can.getContext("2d");

cxt.beginPath();

cxt.moveTo(100,200);

cxt.lineTo(200,400);

? ? ? ? ? cxt.strokeStyle = '#f00';

cxt.stroke();

? ? ? ? ? ? ? cxt.clearRect(0,0,200,300);

? ? ? ? ? ? ? context.globalCompositeOperation="destination-out";? (了解)

HTML5類(lèi)標(biāo)簽

class類(lèi)標(biāo)簽

定義和用法

class 屬性規(guī)定元素的類(lèi)名（classname）。

class 屬性大多數(shù)時(shí)候用于指向樣式表中的類(lèi)（class）。不過(guò)，也可以利用它通過(guò) JavaScript 來(lái)改變帶有指定 class 的 HTML 元素。

提示和注釋

注釋?zhuān)篶lass 屬性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。

提示：可以給 HTML 元素賦予多個(gè) class，例如：span class="left_menu important"。這么做可以把若干個(gè) CSS 類(lèi)合并到一個(gè) HTML 元素。

提示：類(lèi)名不能以數(shù)字開(kāi)頭！只有 Internet Explorer 支持這種做法。

實(shí)例