一、 HTML5新增的標(biāo)簽
我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、西秀ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的西秀網(wǎng)站制作公司
（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)? 滑動組件：? 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();
**********重點(diǎn)**********
? 4、cookie webStorage(localStorage? sessionStorage)三者的區(qū)別
四、離線存儲
（1） *.manifest? (*.appcache)?
? ? ? index.html? html manifest="*.manifest"
(2) 理解離線存儲的更新方式
五、移動端的布局思路：
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
九、移動端事件：?
(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事件有點(diǎ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";? (了解)
如何使用Node-Webkit開發(fā)HTML5本地桌面應(yīng)用
這非常簡單，像傳統(tǒng)的開發(fā)你的HTML5應(yīng)用一樣開發(fā)它們，完成之后用Node-Webkit打包它。打包的方法是
先下載Node-Webkit
然后創(chuàng)建一個包文件命名為package.json,
寫入下面的代碼：
{
"name":
"nw-demo",
"main":
"index.html"
}
這里的“name”是你應(yīng)用的名稱，“main”是你的應(yīng)用的啟動文件，也就是應(yīng)用啟動是第一加載的文件。
將你的HTML5應(yīng)用文件和package.json一起打包成zip
重命名zip文件，將其后綴變成
.nw
，比如app.nw
現(xiàn)在你就可以用node-webkit
runtime來運(yùn)行你的app了在Linux上的運(yùn)行命令是
./nw
app.nw
在Windows平臺上你可以直接把你的app.nw拖拽到
nw.exe
程序上就行了。
想讓你的應(yīng)用更容易傳播和發(fā)布，可以將它和node-webkit封裝到一起，也就是將你的HTML5應(yīng)用
app.nw
和
nw.exe
合成一個可執(zhí)行文件。在Linux上的做法是
cat
/usr/bin/nw
app.nw
app
chmod
+x
app
在Window上的做法是
copy
/b
nw.exe+app.nw
app.exe
一、HTML的開發(fā)工具和使用的瀏覽器
開發(fā)工具：記事本等文本編輯器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。
瀏覽器：Chrome、Firefox、IE、Safari、IPhone、Android。
二、HTML的基本要素
DOCTYPE? 描述文檔的類型
html? ? ?網(wǎng)頁的根元素，寫在網(wǎng)頁的在外面
head??? 網(wǎng)頁的頭部信息，寫在html標(biāo)記的里面
body? ? 網(wǎng)頁的內(nèi)容，寫在html標(biāo)記的里面
具體描述：
1、DOCTYPE? 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。
網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個版本的DTD版本均有不同
使用例子
HTML4的例子
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
HTML5的例子
2、html/html?網(wǎng)頁文檔中的根標(biāo)記
html 標(biāo)簽有三個特殊的屬性
manifest? ?指定網(wǎng)頁緩存文件，可以讓用戶離線的時(shí)候也可以訪問文件。
xmlns? ?設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時(shí)候可以使用這個值。
lang? ?設(shè)置網(wǎng)頁的描述語言，比如中文是zh；英文是en。
3、head/head頭部標(biāo)簽在網(wǎng)頁中只能有一個，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會在頁面中顯示出來·。
head里面的標(biāo)記
meta 標(biāo)記
title定義網(wǎng)頁的標(biāo)題
link 鏈接
script? 標(biāo)記JavaScript腳本的內(nèi)容
style? 標(biāo)記css樣式
meta? 標(biāo)記
4、body/body只能有一個，顯示網(wǎng)頁的主體內(nèi)容。
代碼示例：
請點(diǎn)擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="description" content="網(wǎng)頁內(nèi)容的簡單描述" 7 ? ? meta name="keywords" content="網(wǎng)頁關(guān)鍵詞" 8 ? ? link rel="/css/style.css" 9 ? ? script src="/js/script.js"/script10 /head11 body12 ? ? header網(wǎng)頁頭部內(nèi)容/header13 ? ? main網(wǎng)頁主要內(nèi)容/main14 ? ? nav網(wǎng)頁的導(dǎo)航內(nèi)容/nav15 ? ? footer網(wǎng)頁的頁腳內(nèi)容/footer16 /body17 /html
請點(diǎn)擊輸入圖片描述
請點(diǎn)擊輸入圖片描述
三、寫在head中的標(biāo)簽
（一）、meta標(biāo)簽
meta元素的屬性：
name?描述信息的名稱，來標(biāo)記這是一個什么樣的信息
http-equiv? 描述行為
content? 描述的內(nèi)容
charset? ?指定網(wǎng)頁的編碼
1、name 屬性
1 meta name="author" content="nyw"2 ? ? !--作者， 定義網(wǎng)頁的作者 --3 meta name="description" content="meta標(biāo)記學(xué)習(xí)"4 ? ? !-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 --5 meta name="keywords" content="HTML,meta"6 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --
2、http-equiv屬性
1 meta http-equiv="refresh" content="30"2 ? ? !-- 網(wǎng)頁30s后自動刷新 --3 meta http-equiv="refresh" content="5,url=dom.html"4 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --
meta http-equiv="refresh" content="5,url=dom.html"
http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。
3、content 屬性
特殊屬性
content-type???指定http頭部信息的文字編碼（最為常用）
default-style? ?指定優(yōu)先使用的樣式單（stylesheet）
refresh? ? 用于網(wǎng)頁的自動刷新或是頁面跳轉(zhuǎn)
set-cookie???設(shè)置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）
4、charset屬性
指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。
代碼實(shí)例：
為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。
meta name="robots" content="noindex,nofollow"
!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --
代碼實(shí)例：
請點(diǎn)擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="author" content="nyw" 7 ? ? !--作者， 定義網(wǎng)頁的作者 -- 8 ? ? meta name="description" content="meta標(biāo)記學(xué)習(xí)" 9 ? ? !-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 --10 ? ? meta name="keywords" content="HTML,meta"11 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --12 ? ? meta http-equiv="refresh" content="30"13 ? ? !-- 網(wǎng)頁30s后自動刷新 --14 ? ? meta http-equiv="refresh" content="5,url=dom.html"15 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --16 ? ? meta name="robots" content="noindex,nofollow"17 ? ? !-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html
請點(diǎn)擊輸入圖片描述
（二）、title、base標(biāo)記
title和base標(biāo)記都是寫在head標(biāo)簽中
title：設(shè)置網(wǎng)頁的標(biāo)題
寫法：title內(nèi)容/title。
base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。
寫法：base href=""
base屬性值：
href? 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。
base href=""??這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。
target? 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁面中跳轉(zhuǎn)。
base target="_blank"?網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。
terget屬性值：
_blank? 在新窗口中打開被鏈接的文檔
_self? ?默認(rèn)值，在相同框架中打開被鏈接的文檔
_parent? ?在父框架集中
_top? ?在整個窗口中打開被鏈接文檔·
framename? ?在指定框架中打開被鏈接文檔
（三）、link標(biāo)記
link標(biāo)記：鏈接外部文件時(shí)使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實(shí)現(xiàn)更多的功能。
link屬性：
href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/p>
rel：引用文件，引用資源的類型定義
我們在使用link標(biāo)簽引用外部文件的時(shí)候，外部文件的類型是多種多樣的。
alternate? ?代替文檔（種子，其他語言版本，其他格式等等）
author? ?網(wǎng)頁的作者
help? 幫助文件的鏈接
icon? 網(wǎng)頁的圖標(biāo)
next? 如果是連續(xù)網(wǎng)頁的時(shí)候，指定下一個網(wǎng)頁
prefetch? ?把鏈接外部資源時(shí)提前緩存起來。
prev? ?如果是連續(xù)網(wǎng)頁
media? 鏈接文件或是資源屬于哪一種資源。
hreflang? ?鏈接文件的語言種類
type? 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）
sizes? 根據(jù)link鏈接文件的類型，來指定文件的大小
代碼示例：
鏈接網(wǎng)頁圖標(biāo)：
網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾
1 !-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 --2 ? ? link rel="icon"3 ? ? !-- 示例 --4 ? ? link rel="icon" href="img/favicon.png" type="image/png"5 ? ? link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"6 ? ? link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png"
注意：后面的href和前面type標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上
鏈接外部樣式單
1 link rel="stylesheet"2 ? ? link rel="stylesheet" href="style1.css" media="screen"3 ? ? link rel="stylesheet" href="style2.css" title="主題樣式文件"4 ? ? link rel=" alternate stylesheet" href="style3.css" title="可選樣式單"
說明：
alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進(jìn)行選擇
media? 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀
title? 對這個link進(jìn)行簡單的說明
網(wǎng)站RSS種子指定
!-- 網(wǎng)站RSS種子指定 --
link rel="alternate" type="application/rss+xml"
為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL
!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL --
link rel="canonical"
link rel="canonical" href=""
html5的使用，與第四代的html有點(diǎn)出入，如：第四代的HTML布局用的是div來布局，而第五代的HTML布局已經(jīng)明確了 頭部、側(cè)邊、欄目、中間區(qū)域(主體部分)、以及底部(footer)；
如：以前定義一個欄目導(dǎo)航divulliliul/div差不多是這形式來定義的，而html5則明確規(guī)定了nav/nav標(biāo)簽來定義，頭部用header/header底部用footer/footer這里需要記住的一點(diǎn)是：主體部分，也就是中間區(qū)域main/main一個網(wǎng)頁只能有一個主體部分；
這一點(diǎn)需要你好好記住，還有如果不懂的話，你可以去網(wǎng)上查看一些視頻教程，有詳細(xì)的解說，如果還有疑問請繼續(xù)追問我；
早在 2013 年， main 元素就被正式添加到 W3C HTML 規(guī)范中，到目前為止，關(guān)于該元素的定義已經(jīng)很完善了，所以現(xiàn)在是時(shí)候深入了解什么時(shí)候適合使用 main 元素了。那么，下面就開始吧。
main 的主要目的是將 ARIA 的地標(biāo)性作用 main 映射到 HTML 中的元素。這可以幫助那些屏幕閱讀設(shè)備和輔助設(shè)備知道頁面的主要內(nèi)容是從哪里開始的。 W3C 規(guī)范將 main 描述為 ：
自從 main 元素包含在 HTML 規(guī)定里之后， body 元素就還原成了它在 HTML4 中的定義。
使用 main 元素值得注意的一點(diǎn)是，它在每個頁面中只能使用一次。為什么要規(guī)定一個頁面只能使用一次呢？雖然我對具體的細(xì)節(jié)并不感興趣，但是有些觀點(diǎn)看起來還是比較有意義的。
按照規(guī)格，如果你在一個文檔中試圖使用多個 main 標(biāo)簽，那么 W3C validator 會拋出錯誤。
main 元素的另外一個規(guī)定是，它不能作為 article , header , aside , footer , nav 的子元素節(jié)點(diǎn)。
就像其它的 HTML5 新元素一樣，并不是所有的瀏覽器都能夠識別出 main ，并且給它加上預(yù)設(shè)的樣式，你可能需要在自己的 CSS 文件中將它設(shè)置為塊級元素。
有的時(shí)候，為了支持一些較低版本的 IE 瀏覽器，你可能還需要使用 JavaScript 創(chuàng)建該元素。
當(dāng)然了，你還可以使用 html5shiv .
使用 main 元素最簡單的方式就是去替換那些 ID 或者 Class 值為 main 或者 content 之類的 div 元素。
所以，在實(shí)踐中它應(yīng)該是什么樣子呢？下面是使用 main 元素之前的文檔結(jié)構(gòu)。
下面使用 main 元素改寫文檔。
好了，這是如此的簡單，以至于一分鐘不到我們就可以將文檔改寫成新潮的 HTML5 樣式。
正如你所見的，使用 main 元素是超級簡單的，只需要花費(fèi)幾分鐘的時(shí)間，所以現(xiàn)在真的到了將 main 帶入到網(wǎng)站開發(fā)的過程中了。
重慶分公司
重慶分公司
