1.header：標簽定義“網(wǎng)頁”或“section”的頁眉。
成都創(chuàng)新互聯(lián)公司主營淶源網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,成都App制作,淶源h5微信小程序搭建,淶源網(wǎng)站營銷推廣歡迎淶源等地區(qū)企業(yè)咨詢
通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節(jié)的目錄部分，一個搜索框，一個nav，或者任何相關logo。
2.nav：定義導航鏈接的部分。
3.footer標簽：代表“網(wǎng)頁”或“section”的頁腳。
通常含有該節(jié)的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。
如果footer元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標簽，類別等一些其他類似信息。
4. hgroup元素：“網(wǎng)頁”或“section”的標題
當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合
5.section標簽：定義文檔中含有標題和段落的區(qū)域。（強調分段或分塊）
6.article：代表獨立、完整、可獨自被外部引用的內容（博客或報刊中的文章、一遍論壇帖子、一段用戶評論或獨立的插件、或任何獨立的內容）;（強調的是獨立性！可含有完整的標題、內容、腳注)
7. aside標簽：表示當前頁面或文章的附屬信息部分，可包含于當前頁面或主要內容相關的引用、側邊欄、廣告、導航條、以及其他類似的有別于主要內容的部分。
8. figure標簽：規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。
figcaption標簽：用于元素定義figure的標題。
1）.一個figure元素內最多只允許放置一個figcaption元素，其他元素可無限放置。
2）.figcaption 元素應該被置于 figure元素的第一個或最后一個子元素的位置。
9. time標簽：定義時間或日期
10. address標簽：代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地址等等,一般出現(xiàn)在footer。
article 定義頁面獨立的內容區(qū)域。
aside 定義頁面的側邊欄內容。
bdi 允許您設置一段文本，使其脫離其父元素的文本方向設置。
command 定義命令按鈕，比如單選按鈕、復選框或按鈕
details 用于描述文檔或文檔某個部分的細節(jié)
dialog 定義對話框，比如提示框
summary 標簽包含 details 元素的標題
figure 規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。
figcaption 定義 figure 元素的標題
footer 定義 section 或 document 的頁腳。
header 定義了文檔的頭部區(qū)域
mark 定義帶有記號的文本。
一、Html的基本結構：
!DOCTYPE html
html
head
meta ?charset=utf-8"
title/title
/head
body
網(wǎng)頁的文本、圖片等信息；
/body
/html
二、Head部分：用于表示網(wǎng)頁的元數(shù)據(jù)即描述網(wǎng)頁的基本信息
其常用標簽及屬性有：
1、title標簽：瀏覽器標簽頁顯示的標題
2、meta標簽：其常用屬性
①charset:設置文檔的字符集編碼格式。HTML5中設置字符集編碼：meta charset="UTF-8"
常見的字符集編碼格式：
a.GB-2312:國標碼，簡體中文
b.GBK：擴展的國標碼
c.UTF-8：萬國碼 Unicode 常用
②http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執(zhí)行，可選屬性值：Content-Type(文檔類型)?refresh(網(wǎng)頁定時刷新)?set-cookie(設置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設置哪一部分，具體的設置內容，放到content屬性中）
③name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值：author（作者）?keywords（網(wǎng)頁關鍵字）?description（網(wǎng)頁描述） 這兩個屬性設置，網(wǎng)頁必不可少。
3、link標簽：鏈接網(wǎng)頁圖標（title前的小logo），其常用屬性有：
①rel屬性：聲明鏈接文件的類型，此處選icon
②type屬性：可以省略
③href屬性：表示圖片的路徑地址
三、body部分：網(wǎng)頁的文本、圖片等信息
標簽的分類：
塊級標簽：顯示為塊，前后隔一行（自動換行）
行級標簽：按行從左往右逐一顯示。
1、 常見的塊級標簽：
①h1/h1......h6h6：標題標簽，自動加粗，h1最大，h6最小。
②hr/：水平線標簽，添加一條水平線。
③p/p:段落標簽，
④br/:換行標簽，
⑤blockquote//blockquote:引用標簽，cite屬性，表明引用的來源，一般引用網(wǎng)址
瀏覽器默認首行縮進。
⑥pre/pre:預格式標簽，用于重載代碼。瀏覽器默認顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補充】html 文件中空格的表示：nbsp;
2、 基于布局的塊級標簽
列表：無序列表、有序列表、定義列表
①有序列表：ol/ol 列表項：li/li
②無序列表：ul/ul 列表項：li/li
③定義列表（實現(xiàn)圖文混排）:dl/dl
列表標題：dt一般只有一項/dt
列表描述項：dd可以有很多項/dd
3、組合標簽：figure/figure用于顯示圖片及圖片標題
他有兩個子標簽：img /圖片
figcaption/figcaption圖片的標題
例如：figure
img src="img/EZ.jpg" height="20%" width="20%" alt="探險家"/
figcaption探險家 伊澤瑞爾/figcaption
/figure
4、分區(qū)標簽：div/div
5、常見的行級標簽
1span（文本）:無實際意義，用于包裹某部分文字，修改特定樣式，例如：
這是span style="color: red;font-size: 36px;"span/span中的文字
img（圖片）：其常用屬性：①src:表示引用圖片的地址。
路徑地址的寫法：相對路徑：以當前文件為最準，去尋找圖片地址
a、與文件處于同一層的圖片，直接寫圖片名
b、圖片在當前文件下一層：文件名/圖片名
c、圖片在當前文件上一層：../圖片名
絕對路徑:盤符：/文件夾/圖片名，但 是嚴禁使用
圖片網(wǎng)址：網(wǎng)絡上的圖片鏈接，但是一般不用
②height和width：圖片的高度和寬度?？梢杂肅SS樣式代替
③title：圖片標。當鼠標指上之后顯示的文字
④alt:當圖片無法顯示的時候，顯示的文字
2em（傾斜強調）
3strong（加粗強調）
4b（加粗）
5i（傾斜）
Strong、em、b、i的區(qū)別
1、Strong、em都表示強調，Strong為粗體，em為斜體，而Strong的強調 程度逗比em高
2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強調的語義 。H5要求標簽盡可能實現(xiàn)語義化。
6q（短引用）
7small/big（縮小/放大字體）：small和big分別是縮小和擴大字體，都可以多層嵌套直至上限或下限
8a（超鏈接）
1、href:超鏈接的路徑，可以是網(wǎng)絡鏈接，也可以是本地文件。
2、target:跳轉頁面打開的位置。_self自身頁面，_blank新頁面。
3、title:鼠標指在超鏈接上顯示的名稱。
4、Rel（被鏈接是當前的前/后一篇）:指定被鏈接文檔與當前文檔的關系,搜索引擎 會利用該屬性 獲取更多的有關鏈接的信息：
rel="prev"被鏈接文檔是當前文檔的前一篇文 檔，
rel="next"被鏈接文檔是當前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當前文檔的圖標
rel="stylesheet"被鏈接文檔是當前文檔的樣式表
5、Rev（當前是被鏈接的前/后一篇）
錨鏈接：
①本頁面錨鏈接:a、設置錨點：a name="top"/a
b、跳轉錨點：#name名
①頁面間錨鏈接:a、在即將跳轉頁面的指定位置設置錨點
b、跳轉錨點：頁面地址.html#name名
a href="02_常見的塊級標簽.html#Hbuilder"頁面間錨鏈接/abr/
功能性鏈接： mailto用于給指定郵箱發(fā)送郵件
file：///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發(fā)送息
9s標簽，有誤文本：刪除線
s這是S標簽中的文字/sbr /
10cite標簽：瀏覽器顯示為傾斜，常用于書、畫作、作品的引用
cite這是cite中的文本/citebr /
11code:計算機代碼，不保留代碼格式
pre
code/code
/pre
12bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左
bdo dir="rtl"1234567/bdobr /
kbd:表示需要用戶用鍵盤輸入的內容，瀏覽器顯示為等寬字體
請輸入“kbdEsc/kbd”推遲系統(tǒng)br /
13sup:上標文本，sub:下標文本
xsub6/subbr /
? copy; 空格 nbsp;
? copy; 空格 nbsp;br /
14u:下劃線
u這是下劃線/ubr /
mark:高亮或標記文本，瀏覽器顯示為黃色背景
markmark/markbr /
html5新增標簽大致如下：
canvas 新元素
canvas ? ?標簽定義圖形，比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API?
新多媒體元素
audio ? ?定義音頻內容 ?
video ? ?定義視頻（video 或者 movie） ?
source ? ?定義多媒體資源 video 和 audio ?
embed ? ?定義嵌入的內容，比如插件。 ?
track ? ?為諸如 video 和 audio 元素之類的媒介規(guī)定外部文本軌道。?
新表單元素
datalist ? ?定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。 ?
keygen ? ?規(guī)定用于表單的密鑰對生成器字段。 ?
output ? ?定義不同類型的輸出，比如腳本的輸出。?
新的語義和結構元素
HTML5提供了新的元素來創(chuàng)建更好的頁面結構：
article ? ?定義頁面獨立的內容區(qū)域。 ?
aside ? ?定義頁面的側邊欄內容。 ?
bdi ? ?允許您設置一段文本，使其脫離其父元素的文本方向設置。 ?
command ? ?定義命令按鈕，比如單選按鈕、復選框或按鈕 ?
details ? ?用于描述文檔或文檔某個部分的細節(jié) ?
dialog ? ?定義對話框，比如提示框 ?
summary ? ?標簽包含 details 元素的標題 ?
figure ? ?規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。 ?
figcaption ? ?定義 figure 元素的標題 ?
footer ? ?定義 section 或 document 的頁腳。 ?
header ? ?定義了文檔的頭部區(qū)域 ?
mark ? ?定義帶有記號的文本。 ?
meter ? ?定義度量衡。僅用于已知最大和最小值的度量。 ?
nav ? ?定義導航鏈接的部分。 ?
progress ? ?定義任何類型的任務的進度。 ?
ruby ? ?定義 ruby 注釋（中文注音或字符）。 ?
rt ? ?定義字符（中文注音或字符）的解釋或發(fā)音。 ?
rp ? ?在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。 ?
section ? ?定義文檔中的節(jié)（section、區(qū)段）。 ?
time ? ?定義日期或時間。 ?
wbr ? ?規(guī)定在文本中的何處適合添加換行符。 ?
初學者建議多訪問下菜鳥教程：網(wǎng)頁鏈接，都是比較全面的基礎知識，可以看做編程詞典，即使老司機也經(jīng)常去查一些資料。
HTML5 新增常用元素
HTML5的聲明為：!DOCTYPE html
它不用再像之前的版本一樣在聲明中引用DTD。DTD(document type definition)定義合法的XML文檔構建模塊，它使用一系列合法的元素來定義文檔的結構。在HTML中，DTD規(guī)定了標記語言的規(guī)則，使瀏覽器能正確地呈現(xiàn)內容。而HTML5不基于SGML，所以不需要引用DTD。
文檔結構元素
article: 定義可以獨立于內容其余部分的完整獨立內容塊。
header: 頁面頂部。
nav: 導航欄(邊導航,頁面導,底部導)標簽。
hgroup: 定義多個標題時。
section: 內容分塊.可設置cite屬性。
aside: 側邊欄，定義和頁面內容關聯(lián)度較低的內容——如果被刪除，剩下的內容仍然很合理。
figure: 代表一個和文檔有關的圖例。
figcaption: 代表一個圖例的說明（標題）。
footer: 頁面底部。
dialog:定義對話框。
嵌入元素
video 代表一段視頻 及其視頻文件和字幕，并提供了播放視頻的用戶界面。屬性有：
src
autoplay（控制自動播放）
loop（播放完后是否重新播放）
controls（顯示用戶界面）
width
height
audio 代表一段聲音 ，或音頻流。 標簽內的文字會在標簽不被支持時呈現(xiàn)。屬性有：
src
autoplay
loop（播放次數(shù)，為-1時循環(huán)播放）
controls
volume(音量)
source 為 video 或 audio 這類媒體元素指定媒體源。屬性有src\type（指定資源的MIME類型）。
track為 video 或 audio 這類媒體元素指定文本軌道（字幕） 。屬性有：
kind（數(shù)據(jù)類型）
src
srclang（track文本數(shù)據(jù)的語言）
label 當列出可用的text tracks時，給瀏覽器使用的text track的標題，這種標題是用戶可讀的。
注意：一個media 元素的任意兩個 track 子元素不能有相同的 kind, srclang, 和 label屬性。
canvas 代表位圖區(qū)域，可以通過腳本在它上面實時呈現(xiàn)圖形，如圖表、游戲繪圖等。
embed 代表一個嵌入的外部資源，如應用程序或交互內容。屬性有：
width
height
src
type 用于選擇插件實例化的 MIME 類型。
表單元素
meter代表滑動條。顯示實時狀態(tài)。屬性有:
value 當前數(shù)值，如果給定的值不在最小值和最大值之間，它的值就等于它最接近的一端的值。
min 值域的最小邊界值，默認為0
max 值域的最大邊界值，默認為1
low 定義了低值區(qū)間的上限值，當數(shù)值處于low-min或high-max時就會呈現(xiàn)不同的樣式。
high 定義了高值區(qū)間的下限值。
optimum 最優(yōu)值
output代表計算值 。
for 其它影響計算結果的標簽的ID，可以多個。
form 與當前標簽有關聯(lián)的form（從屬的表單）。該屬性的值必須是當前文檔內的表單元素的ID。如果未指明該屬性，output標簽必須是一個form的后代標簽。該屬性的用處在于可以讓output標簽脫離form標簽，存在于一個網(wǎng)頁文檔的任意位置。
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代表進度條，表示任務過程，屬性有max（任務總量）\value。
datalist為Input標記定義一個下拉列表，配合option標簽。
其他
details創(chuàng)建一個掛件，僅在被切換成展開狀態(tài)時，它才會顯示內含的信息。
summary 是details 元素的子元素，表示其綜述或標題 。
mark代表一段需要被高亮的引用文字。
ruby表示需要被ruby 注釋 標記的文本，如中文漢字和它的拼音。
rt 表示ruby 注釋 ，如中文拼音。
rp 在ruby 注釋兩邊的額外插入文本 ，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。
ruby夼rp(/rprtkuang/rtrp)/rp/ruby
1
順便一提，html5刪除了的元素：
純表現(xiàn)的：basefont\big\center\font\s\strike\tt\u
對可用性有負面影響的：frame\frameset\noframes
產(chǎn)生混淆的：acronym\applet\isindex\dir
同時HTML5也對某些元素進行了重定義，改變了它們的語言內容但表現(xiàn)不變。如b標簽、i標簽，仍然表示為粗體、斜體，但代表了一段需要被關注的文字、一段不同性質的文字，如技術術語、外文短語等。
HTML5屬性變化
新增類型
email \ url \ tel \ number
Datepickers:date \ month \ week（iphone不兼容） \ time \ datetime(UTC格式，安卓、i6+、PC端不兼容) \ datetime-local
針對PC端：range(水平桿，兩邊為min和max) \ search（有內容時右邊出現(xiàn)×）\ color（顏色選擇框）
表單屬性
autocomplete屬性：自動完成功能，適用于標簽，以及以下類型的input標簽：text \ search \ url \ tel \ email \ password \ datepickers \ range \ color
form autocomplete="on" //on為打開，Off為關閉
/form
1
2
autofocus屬性：域自動地獲得焦點，適用于所有的標簽的類型
input autofocus="autofocus"/
1
multiple屬性：規(guī)定輸入域中可選擇多個值，適用于email \ file類型的標簽
input type="file" multiple="multiple" /
1
placeholder屬性：提供一種提示，描述輸入域所期待的值，適用于text \ search \ url \ tel \ email \ password 類型的標簽
input type="text" placeholder="please input your name!"/
1
required屬性：規(guī)定必須在提交之前填寫輸入域，且必須按照相應域的格式，如，email域必須要有@、郵件域。適用于text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file 類型的標簽
input type="email" requried="required" /
1
鏈接屬性
sizes
link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"
//網(wǎng)頁頭部標題的logo，可根據(jù)不同分辨率引用不同的sizes
//type為該圖標的類型，說明該圖標格式為gif
1
2
3
target
base href="......" target="_blank"
1
base標簽寫在head標簽內。target屬性控制整個頁面所有超鏈接的默認打開方式（本來是_self），href指定頁面中所有相對鏈接的基準 URL；
超鏈接的屬性
media=“handheld”（表示對設備進行優(yōu)化，handheld對“手持”設備進行支持，tv對”電視“設備進行支持）；
hreflang=“zh”（設置語言，zh表示是簡體中文）
rel=“external”（設置超鏈接的引用，external表示其為外部鏈接）
其他屬性
script的屬性
defer：加載完腳本后并不執(zhí)行（延遲執(zhí)行），而是等整個頁面加載完之后再執(zhí)行，只有ie兼容
async：對腳本進行異步加載，加載完腳本后立刻執(zhí)行，而不用等整個頁面都加載完才能執(zhí)行。
如果 async=“async”：腳本相對于頁面的其余部分異步地執(zhí)行（當頁面繼續(xù)進行解析時，腳本將被執(zhí)行）
如果不使用 async 且 defer=“defer”：腳本將在頁面完成解析時執(zhí)行
如果既不使用 async 也不使用defer：在瀏覽器繼續(xù)解析頁面之前，立即讀取并執(zhí)行腳本
ol的屬性
start：設置序號的起始值
reversed：倒敘排列 reversed=“reversed”
html的屬性：manifest
!DOCTYPE HTML
html manifest="demo.appcache"
...
/html
1
2
3
4
通過在頁面中設置manifest屬性或在manifest文件中加入頁面，可以將此頁面緩存，這樣我們就可以離線訪問，且獲得更快的速度，因為已緩存資源加載得更快。還可以減少服務器負載。
一旦文件被緩存，則瀏覽器會繼續(xù)展示已緩存的版本，即使修改了服務器上的文件。為了確保瀏覽器更新緩存，需要更新 manifest 文件。
style的屬性scoped：內嵌CSS,可以寫在任何位置，而不止是head。不過這樣會違反我們低耦合的原則。
style scoped
...
style
html5新增標簽如下：
1、結構性標記結構性標記主要用來對頁面結構進行劃分，就像在設計網(wǎng)頁時將頁面分為導航、內容部分、頁腳等，確保HTML文檔的完整性。
2、多媒體標記多媒體標記主要解決了以往通過Flash等進行視頻的一些展示，新增的標記使HTML功能變得更加強大了。
3、表單標記表單標記主要用于功能性的內容表達，會有一定的內容和數(shù)據(jù)的關聯(lián)。
html5的意義及應用。
在HTML頁面中，帶有“ ”符號的元素被稱為HTML標簽，如上面提到的 HTML、head、body都是HTML標簽。所謂標簽就是放在“ ” 標簽符中表示某個功能的編碼命令，稱為HTML標簽。
該語法中“標簽名”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“/標簽名” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
重慶分公司
重慶分公司
