注釋，可是IE頁面上出現了這個注釋，如下圖'>為了IE兼容HTML5標簽，我加了[if lt IE9]>注釋，可是IE頁面上出現了這個注釋，如下圖

你好，我剛在本機測試了一下，這個沒問題了的。你仔細看一下你的這個標簽是否寫對了，不行的話，重新復制一下，有可能是!---這些符號有問題?

成都創新互聯公司是一家專注于成都網站設計、成都網站制作、外貿網站建設與策劃設計,廣平網站建設哪家好?成都創新互聯公司做網站,專注于網站建設10多年,網設計領域的專業建站公司;建站業務涵蓋:廣平等地區。廣平做網站價格咨詢:18982081108

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

![endif]--

HTML5的語義化標簽有哪些，作用是什么

標簽種類：

header：定義頁眉

nav：定義導航

section：定義文檔中的區段

time：定義日期和時間

article：定義文章

aside：定義文章的側邊欄

figure：定義一組媒體對象以及文字

figcaption：定義figure的標題

footer：定義頁腳

標簽作用：

header與footer標簽用于表示頁面、應用或某個模塊的頭部和尾部；

nav用于表示導航；

article標簽表示文章；

aside標簽和article標簽用法類似，只是表示內容會出現在側邊欄；

figure標簽表示一段自包含的內容——獨立的流內容（圖像、圖標、照片、代碼等）

在開發當中，可以使用section和article標簽替代過度的div標簽，用這些標簽來對頁面進行內容劃分。

想了解更多，可點擊《如何讓舊瀏覽器支持HTML5新標簽》

html5 怎么制作響應式網頁

步驟1 創建空白的HTML 5模版

首先，我們創建一個空白的模版，代碼很簡單，如下所示：

復制代碼

步驟2 增加HTML 5新標簽 HTML 5中新增加了不少標簽，如：

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

在頁面模版中，我們需要確保每個區域都能正確地對齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標簽。代碼如下所示：

復制代碼

讀者可能留意到這里使用的div id=”wrapper”，這個是稍候用來做meida query的時候調整全局CSS樣式調整用的 步驟3 往HTML 5標簽中增加代碼

1）首先往標題中增加如下代碼：

　Simple HTML5 Template

復制代碼

2）往導航標簽中添加如下代碼，這樣很方便地構件了一個簡單的頁面分類導航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

復制代碼

3）使用標簽來描述每一個要展示的內容實體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內容就可以使用標簽了。如下代碼所示：

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

復制代碼

4）添加標簽 HTML5提供的元素標簽用來表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。

根據目前的規范，元素有兩種使用方法：

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

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

代碼如下：

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.

復制代碼

5）加上最后的標簽，代碼為：

Copyright@ 2013 HTML5.com Privacy Policy - About Us

復制代碼

步驟4 增加CSS樣式

首先創建一個空白的樣式，如下：

[/code] 然后在中下載這個css,然后將其內容復制到該空白的文件中代碼如下： [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; }

復制代碼

步驟5 為移動應用使用@media query查詢 為了進行響應式設計，最佳的方案是使用@media query去進行查詢，在上面的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%; }

}

復制代碼

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

復制代碼

如何處理html5新標簽的瀏覽器兼容問題

目前HTML5已向開發人員提供了很多新的標簽，如section，nav，article，header和footer等。這些標簽語義化程度高，會被經常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識別和正常使用。

一、HTML5標簽在瀏覽器展示存在的問題

對于現階段來說，使用HTML5標簽可能遇到的最大問題就是如何在不支持新標簽的瀏覽器中做恰當的處理。當我們在頁面中使用HTML5元素時，可能會得到三種不同的結果。

結果1：標簽被當作錯誤處理并被忽略。那么DOM構建的時候，就會當作這個標簽不存在。

結果2：標簽會被當作錯誤處理，并在DOM構建的時候依然會按照預期的代碼進行創建，并且HTML標簽會被構造成行內元素（也就是說雖然不能識別，但是代碼里section標簽依然會在dom中創建一個對應section節點，但是屬于行內元素）。

結果3：標簽被識別為HTML5標簽，然后用DOM節點對其進行替換。DOM在構建的時候和預想的一致，并且合適的樣式會應用到標簽上（大部分情況下是塊級元素）。

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

div class="outer"

section

h1title/h1

ptext/p

/section

/div

很多瀏覽器（比如Firefox

3.6和Safari4）解析的時候都會將div作為最外層的元素，然后div里面是一個識別不了的元素（section），它會在DOM中創建，并被作為一個行內元素存在。h1和p元素都是作為section元素的子節點。因為section在DOM中真實存在，所以也可以修改其樣式。這種情況對應結果2。

IE9之前的版本會認為section標簽是一個錯誤，并直接將其忽略，那么h1和p標簽會被解析，然后成為div標簽的子節點。/section也會被認為是一個錯誤并直接跳過。在這些瀏覽器中實際有效的代碼是這樣的：

div class="outer"

h1title/h1

ptext/p

/div

那么，舊版本的IE瀏覽器除了生成的DOM結構和其他瀏覽器不一樣，其對不可識別標簽的容錯能力還是很棒的。因為section節點沒有在DOM樹中構建，所以也就不能給其增加樣式。這種情況對應結果1。

當然，支持HTML5的瀏覽器比如IE9，Firefox4+，Safari5+會創建正確的DOM結構，然后這些標簽會默認附帶HTML5規范中定義的默認樣式。

那么，我們所面臨的最大問題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結構，并且含有不同的樣式。

二、如何解決HTML5標簽不兼容

或許會有很多人在質疑：為什么老式的瀏覽器不能識別這些標簽？其實錯不在瀏覽器，因為在那個時代根本不存在這種標簽，所以不能正確識別出來，而這種不尋常的標簽識別令DOM結構變得異常。對此，人們想出了很多在現階段頁面中使用HTML5元素的解決方案。每一個解決方案為了做到兼容都會遇到一些特定的問題。在此也在馬海祥博客上跟大家分享一下：

1、實現標簽被識別

馬海祥曾做個一個測試（以IE8為例），是一個文章標題和藍色字的文章內容，其中文章內容用了article標簽。代碼如下：

!DOCTYPE html

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

head

meta charset="UTF-8" /

title測試/title

style

article{color:#06F;}

/style

/head

body

h1文章標題/h1

article

這是文章內容，應該是一段藍色的文字。在老式瀏覽器中，如果不做hack將顯示異常。

/article

/body

/html

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

IE8不能識別article標簽， 定義在標簽上的CSS樣式沒有起作用。

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

/兩個空的標簽元素，與文章內容并列為兄弟節點，如下圖所示：

既然因為不能識別標簽而不能使用，那我們的解決辦法就是讓標簽被識別出來。所幸，簡單地通過document.createElement（tagName）即可以讓瀏覽器識別標簽和CSS引擎知道該標簽的存在。假設我們上面的例子的head區域加上如下代碼。

script

document.createElement('article');

/script

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

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

2、JavaScript解決方案

JavaScript解決方案目的是解決在舊版本的IE中樣式應用的問題。老版本的IE不會識別不明元素已經是一個耳熟能詳的特性，而如果這些元素已經通過document.createElement()創建，那么瀏覽器就可以識別這些標簽，并可以將其在DOM樹中構建，然后允許開發者對其應用樣式。

這個方法可以確保HTML5標簽能在舊版本IE中對應創建DOM節點，然后可以對其應用樣式。這個方法將HTML5塊級元素設置成display:block，從而可以在各個瀏覽器中做到兼容。

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

（1）、使用html5shiv

查看了一下，發現了html5shiv能解決這個問題，可以把HTML5的新元素轉換成IE6認識的內容。只需要在你的head中調用這段代碼就行：

!--if lt IE 9]

script src=""/script

![endif]--

當然你也可以直接把這個文件下載到自己的網站上。但這個文件必須在head標簽中調用，因為IE必須在元素解析這前知道這些元素，才能啟作用！但馬海祥還要提醒你一下：還要在你的CSS文件中加上以下代碼，不然有可能會出現些莫名其妙的問題。

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

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

（2）、使用Kill IE6

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

!--if lte IE 6]

script src=""/script

![endif]--

上面寫的!--if lte IE 6]在正常的HTML中屬于注釋，不會被執行，但在IE中是一個判斷語句，所以這些代碼只有在IE中才會被識別并加載。

lte：就是Less than or equal to的簡寫，也就是小于或等于的意思。

lt ：就是Less than的簡寫，也就是小于的意思。

gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。

gt ：就是Greater than的簡寫，也就是大于的意思。

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

說實話，馬海祥不喜歡這個利用JavaScript解決的方案，因為它破壞了我最主要的web應用開發原則：我們不應該使用JavaScript來控制布局。不僅僅是因為這個做法給那些禁用腳本的用戶帶來了糟糕的用戶體驗，更重要的是，如果我們希望我們的web應用代碼是面向未來，并且維護性高的，那么必須將視圖相關部分分離出來。這個方案對在跨瀏覽器中構建相同的DOM結構很有幫助，也可以確保你的JavaScript和CSS在各個地方運行結果相同，但是這個優勢并不能改變我對這個方法的不認同。

3、Namespace hack

永遠不要缺乏使用hack解決問題的能力，在IE中還有其他技術來讓瀏覽器識別不明的標簽。這個來自Elco Klingen日志的方法一開始引起了廣泛的關注。該技術包含了一個XML形式的命名空間，并使用了含有namespace前綴的元素。例如：

html xmlns="" xmlns:html5=""

body

html5:section

!-- content --

/html5:section

/body

/html

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

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

html5\:section {

display: block;

}

馬海祥點評：這并不是我期望Web開發者編寫代碼的方式。雖然這是一個非常杰出的解決方案，但是這讓應用變得不自然。我不希望看到文件中充滿了帶命名空間的元素。

4、Bulletproof技術（防彈衣技術）

說實話，我是第一次接觸到這個技術，建議在所有新的HTML5塊級元素中增加一個內部的div元素，然后包含一個CSS class，用這個元素來替代HTML元素（類似在里面穿了一件防彈衣），例如：

section

div class="section"

!-- content --

/div

/section

在應用樣式的時候，Tantek推薦直接給div增加樣式，而不是給新元素增加樣式

推薦使用：

.section {

color: blue;

}

而不是：

section {

color: blue;

}

這個方案的原理是用簡單的方式將原來的樣式應用方式轉移到一個代表了HTML5標簽的元素上。由于我一般情況下不會將樣式通過標簽名的方式應用到元素上，所以馬海祥也并完全支持這個建議。

馬海祥覺得這個方案的缺陷是不同的瀏覽器構建了不同的DOM結構，那么你必須在編寫JavaScript和CSS的時候格外小心。獲取子節點或者父節點的時候，不同的瀏覽器返回的結果可能會不一樣。特別是在下面的代碼中：

div class="outer"

section

div class="section main"

!-- content --

/div/section

/div

5、反向的bulletproof技術

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

div class="section"

section

!-- content --

/section

div

這個方案唯一的不同是HTML5元素的位置，其他都一樣。喜歡這個技術的支持者認為他的一致性很好（適用于所有的元素，包括hgroup）。但是DOM結構的不同讓這個方案意義變得不大。他的主要優勢是技術上的一致性。

6、關于X-UA-Compatible的使用

目前絕大多數網站都用以下代碼來作為IE8的兼容方法。

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

雖然微軟將IE向標準邁進了一大步，而事實上IE8還存在一系列渲染的奇怪現象是不爭的事實。

在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"

其中最后一行是永遠以最新的IE版本模式來顯示網頁的。

另外加上

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

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

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

所以目前來說還是以使用

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

為首選。

7、通過修改HTML部分來實現

我的主要目標是確保我只需要修改HTML部分。這就意味著不需要修改CSS和JavaScript。為什么會有這樣的需求？需要修改的Web應用視圖越多，你越有可能制造bug。將改變限制到一個視圖也就限制了bug的出現，即使出現了bug，也可以減少你查找錯誤的范圍。如果一個視圖破相了，我可以知道這是因為我增加了一個section元素，而不是考慮是不是CSS文件修改來帶的影響。

在研究了所有這些解決方案，并進行一些嘗試和設計之后，我回到了Tantek的方案。這是唯一一個只需要修改HTML而不用動CSS和HTML的方案。現在，我在他的方案基礎上做了一些改進，來達到我想要的結果。

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

div class="content"

!-- content --

/div

經過改進后：

section

div class="section content"

!-- content --

/div

/section

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

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

我在馬海祥博客上花了很多時間來測試比較bulletproof和反向的bulletproof哪個更好一些。我做選擇時最主要的決定因素就是反向的bulletproof需要我去增加CSS代碼。在那些為HTML5標簽創建了DOM節點但是沒有應用默認樣式的元素來說，div元素里包含了一個HTML5塊級元素在很多情況下都會攪亂我的布局，因為創建的DOM節點是行內元素。我不得不明確增加CSS規則來讓這個節點變成塊級元素從而可以正常布局，這也就違反了我不修改CSS文件的初衷。

馬海祥博客點評：

在我的研究中，我使用了多個頁面，然后在這些頁面上使用修改過后的bulletproof技術。我分別在簡單和復雜的布局中，含有和不含有JavaScript交互進行測試。在每一個例子中，我只需要修改HTML就可以讓頁面表現正確（不修改JavaScript和CSS）。那么，子節點和父節點的問題怎么辦？有趣的事情是我在測試中并沒有遇到這樣的問題。

理由很簡單，因為我對代碼苛刻的態度。我認真地做了第二遍檢查：

（1）、標簽名和ID不會用于應用樣式（只是用class）。

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

（3）、JavaScript代碼不依賴于特定的DOM結構。

（4）、標簽名不用于操作DOM。

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

HTML5重點內容總結

一、 HTML5新增的標簽

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

video? audio canvas

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

二、 HTML5新增的表單控件

一、表單控件的新屬性

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

二、新增的表單控件

（1）input type="email"

（2）input type="url"

? （3）數字控件：? type="number"

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

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

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

三、本地存儲

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

2、localStorage的API

? (1)寫入：? 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();

**********重點**********

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

四、離線存儲

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

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

(2) 理解離線存儲的更新方式

五、移動端的布局思路：

1、設備像素比（倍率）? 邏輯像素尺寸 （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

? ? ? ? ? ? 經度：? pos.coords.longtitude

? ? ? ? }

? ? }

? ? navigator.geolocation.watchPosition(success);

七、地理定位和百度地圖API的結合

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

preload="preload"? audio

九、移動端事件：?

(1) ontouchstart? ontouchmove? ontouchend

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

? ? (3) 移動端事件的事件對象及常用屬性

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

? (4) 移動端常見問題及解決方案：

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

b、 zepto的tap事件有點透問題 ：? （1） fastclick.js

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

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

十、swiper.js的使用? （參考官網）

十一、 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類標簽

class類標簽

定義和用法

class 屬性規定元素的類名（classname）。

class 屬性大多數時候用于指向樣式表中的類（class）。不過，也可以利用它通過 JavaScript 來改變帶有指定 class 的 HTML 元素。

提示和注釋

注釋：class 屬性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。

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

提示：類名不能以數字開頭！只有 Internet Explorer 支持這種做法。

實例

分享題目：html5if標簽,HTML5ify
轉載來源：http://www.yijiale78.com/article26/dschicg.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、域名注冊、自適應網站、手機網站建設、網站設計公司、品牌網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯