一、Html的基本結(jié)構(gòu)：
創(chuàng)新互聯(lián)于2013年成立，先為富寧等服務(wù)建站，富寧等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為富寧企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
!DOCTYPE html
html
head
meta ?charset=utf-8"
title/title
/head
body
網(wǎng)頁(yè)的文本、圖片等信息；
/body
/html
二、Head部分：用于表示網(wǎng)頁(yè)的元數(shù)據(jù)即描述網(wǎng)頁(yè)的基本信息
其常用標(biāo)簽及屬性有：
1、title標(biāo)簽：瀏覽器標(biāo)簽頁(yè)顯示的標(biāo)題
2、meta標(biāo)簽：其常用屬性
①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼：meta charset="UTF-8"
常見(jiàn)的字符集編碼格式：
a.GB-2312:國(guó)標(biāo)碼，簡(jiǎn)體中文
b.GBK：擴(kuò)展的國(guó)標(biāo)碼
c.UTF-8：萬(wàn)國(guó)碼 Unicode 常用
②http-equiv屬性:將我們的信息寫(xiě)給瀏覽器看，讓瀏覽器按照這里面的要求執(zhí)行，可選屬性值：Content-Type(文檔類(lèi)型)?refresh(網(wǎng)頁(yè)定時(shí)刷新)?set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設(shè)置哪一部分，具體的設(shè)置內(nèi)容，放到content屬性中）
③name屬性：使用方法同“http-equiv”。將我們的信息寫(xiě)給搜索引擎看
常用且需要掌握的屬性值：author（作者）?keywords（網(wǎng)頁(yè)關(guān)鍵字）?description（網(wǎng)頁(yè)描述） 這兩個(gè)屬性設(shè)置，網(wǎng)頁(yè)必不可少。
3、link標(biāo)簽：鏈接網(wǎng)頁(yè)圖標(biāo)（title前的小logo），其常用屬性有：
①rel屬性：聲明鏈接文件的類(lèi)型，此處選icon
②type屬性：可以省略
③href屬性：表示圖片的路徑地址
三、body部分：網(wǎng)頁(yè)的文本、圖片等信息
標(biāo)簽的分類(lèi)：
塊級(jí)標(biāo)簽：顯示為塊，前后隔一行（自動(dòng)換行）
行級(jí)標(biāo)簽：按行從左往右逐一顯示。
1、 常見(jiàn)的塊級(jí)標(biāo)簽：
①h1/h1......h6h6：標(biāo)題標(biāo)簽，自動(dòng)加粗，h1最大，h6最小。
②hr/：水平線(xiàn)標(biāo)簽，添加一條水平線(xiàn)。
③p/p:段落標(biāo)簽，
④br/:換行標(biāo)簽，
⑤blockquote//blockquote:引用標(biāo)簽，cite屬性，表明引用的來(lái)源，一般引用網(wǎng)址
瀏覽器默認(rèn)首行縮進(jìn)。
⑥pre/pre:預(yù)格式標(biāo)簽，用于重載代碼。瀏覽器默認(rèn)顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補(bǔ)充】html 文件中空格的表示：nbsp;
2、 基于布局的塊級(jí)標(biāo)簽
列表：無(wú)序列表、有序列表、定義列表
①有序列表：ol/ol 列表項(xiàng)：li/li
②無(wú)序列表：ul/ul 列表項(xiàng)：li/li
③定義列表（實(shí)現(xiàn)圖文混排）:dl/dl
列表標(biāo)題：dt一般只有一項(xiàng)/dt
列表描述項(xiàng)：dd可以有很多項(xiàng)/dd
3、組合標(biāo)簽：figure/figure用于顯示圖片及圖片標(biāo)題
他有兩個(gè)子標(biāo)簽：img /圖片
figcaption/figcaption圖片的標(biāo)題
例如：figure
img src="img/EZ.jpg" height="20%" width="20%" alt="探險(xiǎn)家"/
figcaption探險(xiǎn)家 伊澤瑞爾/figcaption
/figure
4、分區(qū)標(biāo)簽：div/div
5、常見(jiàn)的行級(jí)標(biāo)簽
1span（文本）:無(wú)實(shí)際意義，用于包裹某部分文字，修改特定樣式，例如：
這是span style="color: red;font-size: 36px;"span/span中的文字
img（圖片）：其常用屬性：①src:表示引用圖片的地址。
路徑地址的寫(xiě)法：相對(duì)路徑：以當(dāng)前文件為最準(zhǔn)，去尋找圖片地址
a、與文件處于同一層的圖片，直接寫(xiě)圖片名
b、圖片在當(dāng)前文件下一層：文件名/圖片名
c、圖片在當(dāng)前文件上一層：../圖片名
絕對(duì)路徑:盤(pán)符：/文件夾/圖片名，但 是嚴(yán)禁使用
圖片網(wǎng)址：網(wǎng)絡(luò)上的圖片鏈接，但是一般不用
②height和width：圖片的高度和寬度?？梢杂肅SS樣式代替
③title：圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字
④alt:當(dāng)圖片無(wú)法顯示的時(shí)候，顯示的文字
2em（傾斜強(qiáng)調(diào)）
3strong（加粗強(qiáng)調(diào)）
4b（加粗）
5i（傾斜）
Strong、em、b、i的區(qū)別
1、Strong、em都表示強(qiáng)調(diào)，Strong為粗體，em為斜體，而Strong的強(qiáng)調(diào) 程度逗比em高
2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強(qiáng)調(diào)的語(yǔ)義 。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語(yǔ)義化。
6q（短引用）
7small/big（縮小/放大字體）：small和big分別是縮小和擴(kuò)大字體，都可以多層嵌套直至上限或下限
8a（超鏈接）
1、href:超鏈接的路徑，可以是網(wǎng)絡(luò)鏈接，也可以是本地文件。
2、target:跳轉(zhuǎn)頁(yè)面打開(kāi)的位置。_self自身頁(yè)面，_blank新頁(yè)面。
3、title:鼠標(biāo)指在超鏈接上顯示的名稱(chēng)。
4、Rel（被鏈接是當(dāng)前的前/后一篇）:指定被鏈接文檔與當(dāng)前文檔的關(guān)系,搜索引擎 會(huì)利用該屬性 獲取更多的有關(guān)鏈接的信息：
rel="prev"被鏈接文檔是當(dāng)前文檔的前一篇文 檔，
rel="next"被鏈接文檔是當(dāng)前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當(dāng)前文檔的圖標(biāo)
rel="stylesheet"被鏈接文檔是當(dāng)前文檔的樣式表
5、Rev（當(dāng)前是被鏈接的前/后一篇）
錨鏈接：
①本頁(yè)面錨鏈接:a、設(shè)置錨點(diǎn)：a name="top"/a
b、跳轉(zhuǎn)錨點(diǎn)：#name名
①頁(yè)面間錨鏈接:a、在即將跳轉(zhuǎn)頁(yè)面的指定位置設(shè)置錨點(diǎn)
b、跳轉(zhuǎn)錨點(diǎn)：頁(yè)面地址.html#name名
a href="02_常見(jiàn)的塊級(jí)標(biāo)簽.html#Hbuilder"頁(yè)面間錨鏈接/abr/
功能性鏈接： mailto用于給指定郵箱發(fā)送郵件
file：///e:/aaa.png打開(kāi)本地文件
tencent://message/?uin=1315618220 給指定QQ發(fā)送息
9s標(biāo)簽，有誤文本：刪除線(xiàn)
s這是S標(biāo)簽中的文字/sbr /
10cite標(biāo)簽：瀏覽器顯示為傾斜，常用于書(shū)、畫(huà)作、作品的引用
cite這是cite中的文本/citebr /
11code:計(jì)算機(jī)代碼，不保留代碼格式
pre
code/code
/pre
12bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左
bdo dir="rtl"1234567/bdobr /
kbd:表示需要用戶(hù)用鍵盤(pán)輸入的內(nèi)容，瀏覽器顯示為等寬字體
請(qǐng)輸入“kbdEsc/kbd”推遲系統(tǒng)br /
13sup:上標(biāo)文本，sub:下標(biāo)文本
xsub6/subbr /
? copy; 空格 nbsp;
? copy; 空格 nbsp;br /
14u:下劃線(xiàn)
u這是下劃線(xiàn)/ubr /
mark:高亮或標(biāo)記文本，瀏覽器顯示為黃色背景
markmark/markbr /
為大家推薦12款經(jīng)常會(huì)用到的html5開(kāi)發(fā)工具。
1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界頂級(jí)軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁(yè)設(shè)計(jì)軟件。由于Dreamweaver支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫(xiě)和修改網(wǎng)頁(yè)，對(duì)于初級(jí)人員，你可以無(wú)需編寫(xiě)任何代碼就能快速創(chuàng)建Web頁(yè)面。其成熟的代碼編輯工具更適用于Web開(kāi)發(fā)高級(jí)人員的創(chuàng)作！
2、Adobe Edge
Adobe Edge是一個(gè)用HTML5、CSS、Java開(kāi)發(fā)動(dòng)態(tài)互動(dòng)內(nèi)容的設(shè)計(jì)工具。它的一個(gè)重要功能是web工具包界面，用于方便確保在不同瀏覽器中架構(gòu)的一致性，此外，Adobe Edge還將整合TypeKit這樣的字體服務(wù)。通過(guò)Edge設(shè)計(jì)的內(nèi)容可以兼容iOS和Android設(shè)備，也可以運(yùn)行在火狐、Chrome、Safari和IE9等主流瀏覽器上。
3、DevExtreme
DevExtreme Complete Subion是性能最優(yōu)的HTML5,CSS和Java移動(dòng)開(kāi)發(fā)框架，可以直接在Visual Studio集成開(kāi)發(fā)環(huán)境，構(gòu)建iOS，Android，Tizen和Windows Phone 8應(yīng)用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個(gè)原生UI組件，并且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開(kāi)發(fā)環(huán)境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動(dòng)平臺(tái)，是Visual Studio開(kāi)發(fā)人員開(kāi)發(fā)跨平臺(tái)移動(dòng)產(chǎn)品的首選工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS開(kāi)發(fā)工具。被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaS IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。
5、Sencha Architect
在開(kāi)發(fā)移動(dòng)和桌面應(yīng)用的工具中，Sencha的定位是HTML5可視化應(yīng)用開(kāi)發(fā)。開(kāi)發(fā)團(tuán)隊(duì)可以在一個(gè)單一集成的環(huán)境中完成應(yīng)用的設(shè)計(jì)、開(kāi)發(fā)和部署。開(kāi)發(fā)者還可以開(kāi)發(fā)Sencha Touch2和Ext JS4 Java應(yīng)用，并實(shí)時(shí)預(yù)覽。
6、Initializr
Initializr 是制作 HTML5 網(wǎng)站最好的入門(mén)輔助開(kāi)發(fā)工具，你可以使用提供的特色模板快速生成網(wǎng)站，也可以自定義，Initializr 會(huì)為你生成代碼簡(jiǎn)潔的可定制的網(wǎng)頁(yè)模板。
7、HTML5demos
想知道你的瀏覽器是否支持 HTML5 Canvas 嗎？想知道 Safari 是否可以運(yùn)行簡(jiǎn)單的 HTML5 聊天客戶(hù)端嗎？HTML5demos 會(huì)告訴你每一個(gè)HTML5特性在哪些瀏覽器中支持。
8、HTML5 Tracker
想了解 HTML5的最新動(dòng)向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂信息。
9、HTML5 visual cheat sheet
想要快速超找一個(gè)標(biāo)簽或者屬性嗎？看看這個(gè)非?？岬乃俨槭謨?cè)吧，每個(gè)Web開(kāi)發(fā)人員的必備。
10、Switch To HTML5
Switch To HTML5 是一個(gè)基礎(chǔ)而實(shí)用的模板生成工具。如果你開(kāi)始一個(gè)新項(xiàng)目，可以到這里獲取免費(fèi)的 HTML5 網(wǎng)站模板。
11、HTML5 Test
你瀏覽器準(zhǔn)備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個(gè)網(wǎng)站會(huì)為你當(dāng)前使用的瀏覽器生成一份對(duì)video、audio、canvas等等特性的支持情況的完整報(bào)告。
12、Lime JS
LimeJS 是一個(gè) HTML5 游戲開(kāi)發(fā)框架，用于快速構(gòu)建運(yùn)行于觸屏設(shè)備和桌面瀏覽器的游戲。非常棒的HTML5開(kāi)發(fā)工具，一定要用用試試。
html5是門(mén)語(yǔ)言，應(yīng)該是沒(méi)什么快捷鍵的吧，你說(shuō)的快捷鍵應(yīng)該對(duì)標(biāo)的是某個(gè)編輯html代碼的IDE,常用的有vscode(完全免費(fèi)),webstorm(非免費(fèi)，需要購(gòu)買(mǎi)或pojie)...
親愛(ài)的提問(wèn)朋友，html5中常用的兩種繪圖元素是：Canvas和SVG。
他們都是html5中支持在畫(huà)布上繪制圖形和放入圖片的。
Canvas 是H5新出來(lái)的標(biāo)簽canvas/canvas
Canvas畫(huà)布，利用JavaScript在網(wǎng)頁(yè)繪制圖像
在標(biāo)簽中給上寬高：canvas width="800" height="800"/canvas?
SVG 可縮放矢量圖形（Scalable Vector Graphics），基于可擴(kuò)展標(biāo)記語(yǔ)言XML? 出來(lái)的時(shí)間比較老
SVG 用來(lái)定義用于網(wǎng)格的基于矢量的圖形。
HTML5 新增常用元素
HTML5的聲明為：!DOCTYPE html
它不用再像之前的版本一樣在聲明中引用DTD。DTD(document type definition)定義合法的XML文檔構(gòu)建模塊，它使用一系列合法的元素來(lái)定義文檔的結(jié)構(gòu)。在HTML中，DTD規(guī)定了標(biāo)記語(yǔ)言的規(guī)則，使瀏覽器能正確地呈現(xiàn)內(nèi)容。而HTML5不基于SGML，所以不需要引用DTD。
文檔結(jié)構(gòu)元素
article: 定義可以獨(dú)立于內(nèi)容其余部分的完整獨(dú)立內(nèi)容塊。
header: 頁(yè)面頂部。
nav: 導(dǎo)航欄(邊導(dǎo)航,頁(yè)面導(dǎo),底部導(dǎo))標(biāo)簽。
hgroup: 定義多個(gè)標(biāo)題時(shí)。
section: 內(nèi)容分塊.可設(shè)置cite屬性。
aside: 側(cè)邊欄，定義和頁(yè)面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
figure: 代表一個(gè)和文檔有關(guān)的圖例。
figcaption: 代表一個(gè)圖例的說(shuō)明（標(biāo)題）。
footer: 頁(yè)面底部。
dialog:定義對(duì)話(huà)框。
嵌入元素
video 代表一段視頻 及其視頻文件和字幕，并提供了播放視頻的用戶(hù)界面。屬性有：
src
autoplay（控制自動(dòng)播放）
loop（播放完后是否重新播放）
controls（顯示用戶(hù)界面）
width
height
audio 代表一段聲音 ，或音頻流。 標(biāo)簽內(nèi)的文字會(huì)在標(biāo)簽不被支持時(shí)呈現(xiàn)。屬性有：
src
autoplay
loop（播放次數(shù)，為-1時(shí)循環(huán)播放）
controls
volume(音量)
source 為 video 或 audio 這類(lèi)媒體元素指定媒體源。屬性有src\type（指定資源的MIME類(lèi)型）。
track為 video 或 audio 這類(lèi)媒體元素指定文本軌道（字幕） 。屬性有：
kind（數(shù)據(jù)類(lèi)型）
src
srclang（track文本數(shù)據(jù)的語(yǔ)言）
label 當(dāng)列出可用的text tracks時(shí)，給瀏覽器使用的text track的標(biāo)題，這種標(biāo)題是用戶(hù)可讀的。
注意：一個(gè)media 元素的任意兩個(gè) track 子元素不能有相同的 kind, srclang, 和 label屬性。
canvas 代表位圖區(qū)域，可以通過(guò)腳本在它上面實(shí)時(shí)呈現(xiàn)圖形，如圖表、游戲繪圖等。
embed 代表一個(gè)嵌入的外部資源，如應(yīng)用程序或交互內(nèi)容。屬性有：
width
height
src
type 用于選擇插件實(shí)例化的 MIME 類(lèi)型。
表單元素
meter代表滑動(dòng)條。顯示實(shí)時(shí)狀態(tài)。屬性有:
value 當(dāng)前數(shù)值，如果給定的值不在最小值和最大值之間，它的值就等于它最接近的一端的值。
min 值域的最小邊界值，默認(rèn)為0
max 值域的最大邊界值，默認(rèn)為1
low 定義了低值區(qū)間的上限值，當(dāng)數(shù)值處于low-min或high-max時(shí)就會(huì)呈現(xiàn)不同的樣式。
high 定義了高值區(qū)間的下限值。
optimum 最優(yōu)值
output代表計(jì)算值 。
for 其它影響計(jì)算結(jié)果的標(biāo)簽的ID，可以多個(gè)。
form 與當(dāng)前標(biāo)簽有關(guān)聯(lián)的form（從屬的表單）。該屬性的值必須是當(dāng)前文檔內(nèi)的表單元素的ID。如果未指明該屬性，output標(biāo)簽必須是一個(gè)form的后代標(biāo)簽。該屬性的用處在于可以讓output標(biāo)簽脫離form標(biāo)簽，存在于一個(gè)網(wǎng)頁(yè)文檔的任意位置。
name
form oninput="result.value=parseInt(a.value)+parseInt(b.value)"
input type="range" name="b" value="50" / +
input type="number" name="a" value="10" / =
output name="result"/output
/form
1
2
3
4
5
progress代表進(jìn)度條，表示任務(wù)過(guò)程，屬性有max（任務(wù)總量）\value。
datalist為Input標(biāo)記定義一個(gè)下拉列表，配合option標(biāo)簽。
其他
details創(chuàng)建一個(gè)掛件，僅在被切換成展開(kāi)狀態(tài)時(shí)，它才會(huì)顯示內(nèi)含的信息。
summary 是details 元素的子元素，表示其綜述或標(biāo)題 。
mark代表一段需要被高亮的引用文字。
ruby表示需要被ruby 注釋 標(biāo)記的文本，如中文漢字和它的拼音。
rt 表示ruby 注釋 ，如中文拼音。
rp 在ruby 注釋兩邊的額外插入文本 ，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。
ruby夼rp(/rprtkuang/rtrp)/rp/ruby
1
順便一提，html5刪除了的元素：
純表現(xiàn)的：basefont\big\center\font\s\strike\tt\u
對(duì)可用性有負(fù)面影響的：frame\frameset\noframes
產(chǎn)生混淆的：acronym\applet\isindex\dir
同時(shí)HTML5也對(duì)某些元素進(jìn)行了重定義，改變了它們的語(yǔ)言?xún)?nèi)容但表現(xiàn)不變。如b標(biāo)簽、i標(biāo)簽，仍然表示為粗體、斜體，但代表了一段需要被關(guān)注的文字、一段不同性質(zhì)的文字，如技術(shù)術(shù)語(yǔ)、外文短語(yǔ)等。
HTML5屬性變化
新增類(lèi)型
email \ url \ tel \ number
Datepickers:date \ month \ week（iphone不兼容） \ time \ datetime(UTC格式，安卓、i6+、PC端不兼容) \ datetime-local
針對(duì)PC端：range(水平桿，兩邊為min和max) \ search（有內(nèi)容時(shí)右邊出現(xiàn)×）\ color（顏色選擇框）
表單屬性
autocomplete屬性：自動(dòng)完成功能，適用于標(biāo)簽，以及以下類(lèi)型的input標(biāo)簽：text \ search \ url \ tel \ email \ password \ datepickers \ range \ color
form autocomplete="on" //on為打開(kāi)，Off為關(guān)閉
/form
1
2
autofocus屬性：域自動(dòng)地獲得焦點(diǎn)，適用于所有的標(biāo)簽的類(lèi)型
input autofocus="autofocus"/
1
multiple屬性：規(guī)定輸入域中可選擇多個(gè)值，適用于email \ file類(lèi)型的標(biāo)簽
input type="file" multiple="multiple" /
1
placeholder屬性：提供一種提示，描述輸入域所期待的值，適用于text \ search \ url \ tel \ email \ password 類(lèi)型的標(biāo)簽
input type="text" placeholder="please input your name!"/
1
required屬性：規(guī)定必須在提交之前填寫(xiě)輸入域，且必須按照相應(yīng)域的格式，如，email域必須要有@、郵件域。適用于text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file 類(lèi)型的標(biāo)簽
input type="email" requried="required" /
1
鏈接屬性
sizes
link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"
//網(wǎng)頁(yè)頭部標(biāo)題的logo，可根據(jù)不同分辨率引用不同的sizes
//type為該圖標(biāo)的類(lèi)型，說(shuō)明該圖標(biāo)格式為gif
1
2
3
target
base href="......" target="_blank"
1
base標(biāo)簽寫(xiě)在head標(biāo)簽內(nèi)。target屬性控制整個(gè)頁(yè)面所有超鏈接的默認(rèn)打開(kāi)方式（本來(lái)是_self），href指定頁(yè)面中所有相對(duì)鏈接的基準(zhǔn) URL；
超鏈接的屬性
media=“handheld”（表示對(duì)設(shè)備進(jìn)行優(yōu)化，handheld對(duì)“手持”設(shè)備進(jìn)行支持，tv對(duì)”電視“設(shè)備進(jìn)行支持）；
hreflang=“zh”（設(shè)置語(yǔ)言，zh表示是簡(jiǎn)體中文）
rel=“external”（設(shè)置超鏈接的引用，external表示其為外部鏈接）
其他屬性
script的屬性
defer：加載完腳本后并不執(zhí)行（延遲執(zhí)行），而是等整個(gè)頁(yè)面加載完之后再執(zhí)行，只有ie兼容
async：對(duì)腳本進(jìn)行異步加載，加載完腳本后立刻執(zhí)行，而不用等整個(gè)頁(yè)面都加載完才能執(zhí)行。
如果 async=“async”：腳本相對(duì)于頁(yè)面的其余部分異步地執(zhí)行（當(dāng)頁(yè)面繼續(xù)進(jìn)行解析時(shí)，腳本將被執(zhí)行）
如果不使用 async 且 defer=“defer”：腳本將在頁(yè)面完成解析時(shí)執(zhí)行
如果既不使用 async 也不使用defer：在瀏覽器繼續(xù)解析頁(yè)面之前，立即讀取并執(zhí)行腳本
ol的屬性
start：設(shè)置序號(hào)的起始值
reversed：倒敘排列 reversed=“reversed”
html的屬性：manifest
!DOCTYPE HTML
html manifest="demo.appcache"
...
/html
1
2
3
4
通過(guò)在頁(yè)面中設(shè)置manifest屬性或在manifest文件中加入頁(yè)面，可以將此頁(yè)面緩存，這樣我們就可以離線(xiàn)訪(fǎng)問(wèn)，且獲得更快的速度，因?yàn)橐丫彺尜Y源加載得更快。還可以減少服務(wù)器負(fù)載。
一旦文件被緩存，則瀏覽器會(huì)繼續(xù)展示已緩存的版本，即使修改了服務(wù)器上的文件。為了確保瀏覽器更新緩存，需要更新 manifest 文件。
style的屬性scoped：內(nèi)嵌CSS,可以寫(xiě)在任何位置，而不止是head。不過(guò)這樣會(huì)違反我們低耦合的原則。
style scoped
...
style
一、文本標(biāo)簽
1.1 標(biāo)題標(biāo)記：hn align=”對(duì)齊方式”標(biāo)題文本/hn
注意：
1.標(biāo)題準(zhǔn)備了h1----h6的標(biāo)題，按照字號(hào)依次遞減(塊級(jí)元素)
2.align表示對(duì)齊方式，其值為left,center,right
1.2 字體標(biāo)記：font face=”字體名稱(chēng)” size=”字號(hào)” color=”字體顏色” 文字/font
注意：中文網(wǎng)頁(yè)以黑體，宋體，3號(hào)字的效果顯示
1.3 段落標(biāo)記：p align=”對(duì)齊方式” 段落內(nèi)容/p
注意：p可以作為單標(biāo)記或雙標(biāo)記：
單標(biāo)記：段落與上文產(chǎn)生一個(gè)空行的間距。
雙標(biāo)記：段落與上下文之間產(chǎn)生一個(gè)空行的間距
1.4 換行標(biāo)記：
注意：br /表示換行，多次換行多次使用br /
1.5 預(yù)格式化標(biāo)記：pre...../pre
注意：預(yù)格式化標(biāo)記可將空格、制表符、回車(chē)符等忽略
1.6 轉(zhuǎn)義字符：轉(zhuǎn)義字符讓特殊字符顯示出來(lái)。
語(yǔ)法：實(shí)體名稱(chēng);
二、列表標(biāo)記
2.1 無(wú)序列表
ul type=”列表項(xiàng)的標(biāo)簽符”
li項(xiàng)目一/li
li項(xiàng)目二/li
li項(xiàng)目三/li
......
/ul
注意： type表示了項(xiàng)目符號(hào)：
disc(默認(rèn)) 實(shí)心圓
circle：空心圓
square：實(shí)心方塊
2.2 有序列表：
ol type=”列表項(xiàng)的標(biāo)記符” start=”起始值”
li項(xiàng)目一/li
li項(xiàng)目二/li
li項(xiàng)目三/li
......
/ol
注意：1. 1:1,2,3,.......
a:a,b,c,d,e.......
A:A,B,C,D,E.......
i:i,ii,iii,iv......
I:I,II,III,IV......
2.start表示起始值,從第幾個(gè)數(shù)開(kāi)始計(jì)算
2.3 嵌套排列
ol type="1"
lih/li
lit/li
ul type="disc"
lim/li
lil/li
/ul
li5/li
/ol
2.4 分割線(xiàn)標(biāo)記：hr align=”對(duì)齊方式” size=”水平線(xiàn)高度” width=”水平線(xiàn)寬度”
color=”水平線(xiàn)顏色”
三、超鏈接標(biāo)記
3.1 文本鏈接：a href=”目標(biāo)URL” target=”目標(biāo)窗口”指針文本/a
注意： 1.href表示文本鏈接的目標(biāo)資源的URL
絕對(duì)地址和相對(duì)地址
絕對(duì)地址：在任何情況下都可以找到的地址（例如：網(wǎng)址）
相對(duì)地址：必須知道當(dāng)前所在，才能找到（../表示上一級(jí)目錄，/表示下級(jí)目錄）例子：../img/baidu.jpg 表示在當(dāng)前位置的上一層目錄下的img文件夾中的baidu.jpg 文件。
3.2 圖片標(biāo)記：img src=”圖片文件路徑” alt=”提示文本” height=”圖片高度” width=”圖片寬度”/
3.3 多媒體標(biāo)記
3.3.1 滾動(dòng)字幕標(biāo)記：marquee可以實(shí)現(xiàn)文字或圖片的跑馬燈效果
marquee..../marquee
marquee的屬性：
behavior 指定了跑馬燈的效果：scroll(滾動(dòng))、slide(滑動(dòng))、alternate(交替)
bgcolor:跑馬燈的背景顏色
direction:跑馬燈的移動(dòng)方向，left（左）、right(右)、up(上)、down(下)
scrolldelay:每次移動(dòng)的延遲時(shí)間，單位毫秒
loop:跑馬燈運(yùn)行次數(shù)，-1表示無(wú)限循環(huán)
height、width
hspace:左右空白寬度
vspace:上下空白寬度
3.3.2 嵌入音樂(lè)文件
audio src=”文件地址” 提示文字/audio
3.3.3 嵌入視頻文件
video src=”視頻文件地址” controls=”controls”提示文字/video
四、表格
4.1 表格基本語(yǔ)法：
table
tr
......
td單元格內(nèi)容/td
......
/tr
/table
注意：
table:聲明一個(gè)表格對(duì)象
tr:聲明一行
td:聲明一個(gè)單元格
4.2 表格的基本屬性
1.align 對(duì)齊方式：left、center、right
2.border:表格邊框
3.bordercolor:邊框顏色
4.bgcolor:表格背景顏色
5.background:背景圖片
6.height、width
4.3 單元格合并
1.rowspan:所跨的行數(shù)
2.colspan:所跨的列數(shù)
五、表單
5.1 表單標(biāo)簽：form action=”URL” method=”get|post” target=”...”/form
注意：form：該標(biāo)記中包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件中
action:指定服務(wù)器端處理提交表單信息的程序是什么。URL地址或電子郵件地址
method:get/post:數(shù)據(jù)傳輸?shù)椒?wù)器的傳遞方法
target:服務(wù)器返回文檔結(jié)果的顯示位置：_blank:在新的瀏覽器窗口中打開(kāi)
_self:在當(dāng)前瀏覽器中顯示
5.2 表單標(biāo)記
5.2.1 input標(biāo)簽：input type=”類(lèi)型” name=”服務(wù)器 獲取用戶(hù)輸入信息的名字” value=”初始值”
注意：1.type類(lèi)型（輸入類(lèi)型）:
1. text:單行文本框
2. password:密碼輸入框
3. radio:單選按鈕 checked表示默認(rèn)
4. checkbox:復(fù)選框 checked表示默認(rèn)
5. submit:提交按鈕
6. reset:重置按鈕
7. button:普通按鈕
2.maxlength：輸入的最大長(zhǎng)度
5.2.2 select標(biāo)簽
select name=”” size=”” multiple
option value=”選項(xiàng)1” 選項(xiàng)1
.......
option value=”選項(xiàng)n” 選項(xiàng)n
/select
注意：name:服務(wù)器 獲取用戶(hù)輸入信息的名字
value ：初始值
option：下拉框的內(nèi)容
multiple:多選，若沒(méi)有multiple則是單選
selected:表示默認(rèn)選項(xiàng)
size:表示長(zhǎng)度
5.2.3 textarea 標(biāo)簽：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”
/textarea
注意: name：多行文本框的名稱(chēng)
cols：一行可容納的字符數(shù)
rows：表示可顯示額的行數(shù)
wrap:virtual和phycal控制自動(dòng)換行
重慶分公司
重慶分公司
