一、HTML的開發(fā)工具和使用的瀏覽器
目前成都創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、墨玉網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(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)頁緩存文件，可以讓用戶離線的時候也可以訪問文件。
xmlns? ?設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時候可以使用這個值。
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)容。
代碼示例：
請點擊輸入圖片描述
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
請點擊輸入圖片描述
請點擊輸入圖片描述
三、寫在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)頁的實際內(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)頁的兼容性。
代碼實例：
為搜索引擎抓取機器人準(zhǔn)備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。
meta name="robots" content="noindex,nofollow"
!-- name定義的是機器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --
代碼實例：
請點擊輸入圖片描述
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)頁的實際內(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定義的是機器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html
請點擊輸入圖片描述
（二）、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)記：鏈接外部文件時使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實現(xiàn)更多的功能。
link屬性：
href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/p>
rel：引用文件，引用資源的類型定義
我們在使用link標(biāo)簽引用外部文件的時候，外部文件的類型是多種多樣的。
alternate? ?代替文檔（種子，其他語言版本，其他格式等等）
author? ?網(wǎng)頁的作者
help? 幫助文件的鏈接
icon? 網(wǎng)頁的圖標(biāo)
next? 如果是連續(xù)網(wǎng)頁的時候，指定下一個網(wǎng)頁
prefetch? ?把鏈接外部資源時提前緩存起來。
prev? ?如果是連續(xù)網(wǎng)頁
media? 鏈接文件或是資源屬于哪一種資源。
hreflang? ?鏈接文件的語言種類
type? 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）
sizes? 根據(jù)link鏈接文件的類型，來指定文件的大小
代碼示例：
鏈接網(wǎng)頁圖標(biāo)：
網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機讀取作為網(wǎng)站的圖標(biāo)存入收藏夾
1 !-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機讀取作為網(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)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機上
鏈接外部樣式單
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? 表示媒體類型為屏幕，可以是手機，但不包括打印機和投影儀
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=""
優(yōu)點：a、網(wǎng)絡(luò)標(biāo)準(zhǔn)統(tǒng)一、HTML5本身是由W3C推薦出來的。
b、多設(shè)備、跨平臺
c、即時更新，提高可用性和改進(jìn)用戶的友好體驗；
d、有幾個新的標(biāo)簽，這將有助于開發(fā)人員定義重要的內(nèi)容；
e、可以給站點帶來更多的多媒體元素(視頻和音頻)，可以很好的替代Flash和Silverlight；
f、涉及到網(wǎng)站的抓取和索引的時候，對于SEO很友好；
缺點： a、安全：像之前Firefox4的web socket和透明代理的實現(xiàn)存在嚴(yán)重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b、完善性：許多特性各瀏覽器的支持程度也不一樣。
c、技術(shù)門檻: html5簡化開發(fā)者工作的同時代表了有許多新的屬性和API需要開發(fā)者學(xué)習(xí),想web worker、web socket、web storage等新特性要求對于后臺的技術(shù)需要有一定的了解,甚至需要深入了解其后面原理和邏輯,而canvas要求視覺和圖像算法的一些知識,傳統(tǒng)的前端開發(fā)者需要掌握更多算法、視覺、 后臺甚至瀏覽器原理的知識,機遇的同時也是巨大的挑戰(zhàn)
d、性能：某些平臺上的引擎問題導(dǎo)致html5性能低下,同時在不加入GPU（圖形處理器）加速的情況下,html5處理復(fù)雜音視頻, 動畫的性能不盡如人意。
e、瀏覽器兼容性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。
學(xué)習(xí)HTML5需要掌握的知識點知識點有以下幾個：
一、HTML5基本組成：
1、HTML5=HTML+CSS+JavaScript
2、HTML指的是結(jié)構(gòu)：結(jié)構(gòu)是在整個網(wǎng)頁中有標(biāo)題、列表、圖片等。
CSS是樣式：樣式是標(biāo)題文字的字體大小、顏色、字體；圖片大小；某個塊的背景色或背景圖等。
JS是行為：行為是在網(wǎng)頁上四處飄動的廣告；圖片滾動；瀏覽圖片時鼠標(biāo)移動到圖片時，放大縮小圖片的效果。
二、容易混淆概念：
1、HTML5移動端的功能和應(yīng)用程序：
對于蘋果手機中的應(yīng)用程序，屬于iOS開發(fā)，語言是OC；對于其他安卓系統(tǒng)的手機，需要使用JAVA語言進(jìn)行開發(fā)。HTML5能夠做的是移動端的網(wǎng)頁以及微信平臺中移動端網(wǎng)頁。
2、前端后臺的區(qū)別：
無論HTML5還是iOS，在整個網(wǎng)頁開發(fā)流程中，前端（HTML5）開發(fā)工程師，主要負(fù)責(zé)的是“前臺頁面制作”，“網(wǎng)站測試”，“修改”三個部分。
3、HTML5與網(wǎng)頁設(shè)計與制作的區(qū)別：
原有的網(wǎng)頁設(shè)計與制作，主要針對PC平臺，進(jìn)行網(wǎng)頁網(wǎng)站的設(shè)計與制作，相對會涉及一部分設(shè)計工作，并將美工圖實現(xiàn)成網(wǎng)頁。通常使用的工具是網(wǎng)頁三劍客—Photoshop、Flash、Dreamweaver。
然而，行業(yè)的發(fā)展使得“網(wǎng)頁設(shè)計與制作”這一職業(yè)逐漸遭到了淘汰。其中原因之一就是網(wǎng)頁設(shè)計與制作當(dāng)中的結(jié)構(gòu)實現(xiàn)，通常采用的是table布局；而web前端開發(fā)工程師、HTML5當(dāng)中結(jié)構(gòu)的實現(xiàn)，采用的是DIV+CSS方式的布局，因此，Dreamweaver工具的使用也就沒有什么必要性了，取而代之的是內(nèi)存占用小，開發(fā)速度快的文本類編輯器。而Flash在與HTML5的大戰(zhàn)中戰(zhàn)敗，當(dāng)前已經(jīng)退出了移動端以及電視平臺的市場爭奪，在PC平臺也越來越少。轉(zhuǎn)言之，F(xiàn)lash在網(wǎng)頁制作的領(lǐng)域里已經(jīng)江郎才盡，原來的網(wǎng)頁三劍客只剩下一個ps，在前端工作要求中，需要掌握基本的切圖即可。
總結(jié)：隨著互聯(lián)網(wǎng)的快速發(fā)展，HTML5已經(jīng)慢慢的滲透到我們的生活中，因此HTML5前景十分光明，需要我們牢牢的抓住機會，通過一些專業(yè)的學(xué)習(xí)后能夠在這個行業(yè)發(fā)光發(fā)熱。
一、 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)? 滑動組件：? 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)三者的區(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事件有點透問題 ：? （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";? (了解)
重慶分公司
重慶分公司
