摘要：站點(diǎn)前端開發(fā)文檔原文元素原文語義化標(biāo)簽元素元素分類塊級(jí)元素自身屬性為的元素，通常使用塊級(jí)元素進(jìn)行布局結(jié)構(gòu)的搭建。可以和，，等其他標(biāo)簽結(jié)合使用，表示文檔結(jié)構(gòu)。表示標(biāo)簽內(nèi)容之外的，與標(biāo)簽內(nèi)容相關(guān)的輔助信息，元素被用于無關(guān)內(nèi)容。

站點(diǎn)：前端開發(fā)文檔
原文：HTML元素
原文：語義化標(biāo)簽

塊級(jí)元素： div、h1-h6、hr、menu、ol、ul、li、dl、dt、dd、table、p、form

自身屬性為display: block;的元素，通常使用塊級(jí)元素進(jìn)行布局（結(jié)構(gòu)）的搭建。

塊級(jí)元素的特點(diǎn)

獨(dú)占一行

從上到下依次排列

直接控制寬度、高度以及盒子模型的相關(guān)CSS屬性

不設(shè)置寬度，塊級(jí)元素的寬度是它的父元素內(nèi)容的寬度，高度是自身內(nèi)容的高度

可以嵌套行內(nèi)元素

ul/ol下面只能是li，dl下面只能是dt dd；p不能包含其他塊級(jí)元素包括自身

內(nèi)聯(lián)元素：span、a、strong、i、em，s、u，textarea、input、select，label、img、sup，sub

自身屬性為display: inline;的元素，通常使用行內(nèi)元素進(jìn)行文字、小圖標(biāo)（小結(jié)構(gòu)）的搭建。

內(nèi)聯(lián)元素的特點(diǎn)

不獨(dú)占一行，和其他內(nèi)聯(lián)元素從左到右在一行顯示

不能直接控制寬度、高度以及盒子模型的相關(guān)CSS屬性，可以直接設(shè)置內(nèi)外邊距的左右值

寬高由自身內(nèi)容的大小決定（文字、圖片等）

只能容納文本或其他內(nèi)聯(lián)元素（不能在內(nèi)聯(lián)元素中嵌套塊級(jí)元素）

CSS外鏈引入方式

link是html標(biāo)簽，@import是css提供的方式，寫在css文件或style標(biāo)簽中。

加載順序有區(qū)別，當(dāng)一個(gè)頁面被加載時(shí)，link引用的css文件會(huì)被同時(shí)加載，而@import引入的css文件會(huì)等頁面全部下載完成后再加載。

使用js控制DOM改變CSS樣式，只能使用link標(biāo)簽，因?yàn)?b>import不能被DOM控制。

CSS命名規(guī)范

頭部：header

內(nèi)容：content/container

尾部：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

登陸條：loginbar

標(biāo)志：logo

廣告：banner

頁面主體：main

熱點(diǎn)：hot

新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權(quán)：copyright

投票：vote

合作伙伴：partner

滾動(dòng)：scroll

內(nèi)容：content

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title

加入：joinus

指南：guild

服務(wù)：service

注冊：register

狀態(tài)：status

盡量減少使用無意義標(biāo)簽，如span和div

盡量不使用標(biāo)簽本身的CSS屬性，如b、font、s

需要強(qiáng)調(diào)的部分，使用strong、em

表格搭建時(shí)，使用表格頭部、表格主體、表格尾部

列表搭建時(shí)，使用

無序列表

有序列表

定義列表

section：劃分網(wǎng)頁，表示頁面中的一個(gè)內(nèi)容區(qū)塊，比如章節(jié)、頁眉、頁腳或頁面其它部分?？梢院?b>h1，h2，h3...等其他標(biāo)簽結(jié)合使用，表示文檔結(jié)構(gòu)。

hgroup：對(duì)整個(gè)頁面/頁面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。

header：一個(gè)內(nèi)容區(qū)塊或整個(gè)頁面的頭部部分。

footer：整個(gè)頁面或頁面區(qū)塊的尾部。

nav：頁面中導(dǎo)航連接的部分。

article：獨(dú)立于內(nèi)容其余部分的完整獨(dú)立內(nèi)容塊。article元素專門為摘要設(shè)計(jì)。

aside：表示article標(biāo)簽內(nèi)容之外的，與article標(biāo)簽內(nèi)容相關(guān)的輔助信息，aside元素被用于無關(guān)內(nèi)容。

應(yīng)該與主內(nèi)容分開的內(nèi)容

aside元素中的內(nèi)容可以被獨(dú)立開來而不會(huì)影響文檔或section中主內(nèi)容的含義

可以用在主要內(nèi)容相關(guān)的引用，如側(cè)邊欄、廣告、nav元素組等

aside的內(nèi)容如果被刪除，剩下的內(nèi)容仍然很合理

figure：表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元（figure元素經(jīng)常用于圖片）

figcaption：

一個(gè)圖例的說明

figure元素的一個(gè)標(biāo)題或相關(guān)解釋

使用figcaption時(shí)，最好是figure塊的第一個(gè)或最后一個(gè)元素

新增標(biāo)簽的兼容問題

HTML5語義化標(biāo)簽在IE6-8下，默認(rèn)當(dāng)成行內(nèi)元素展示。

通過引入js解決IE9以下新增標(biāo)簽的兼容問題

Forms

新增input元素的種類：

search：搜索輸入框

tel：電話號(hào)碼輸入框

url：輸入U(xiǎn)RL地址

email：郵件輸入框

number：數(shù)字輸入框

rang：特定范圍內(nèi)的數(shù)值選擇器

color：顏色選擇器 只在Opera和Blackberry瀏覽器

datetime：顯示完整日期和時(shí)間 UTC標(biāo)準(zhǔn)時(shí)間

datetime-local：顯示完整日期和時(shí)間

time：顯示時(shí)間

month：顯示月份

week：顯示周

表單新特性：

placeholder：輸入框占位符，用作輸入提示

autocomplete：是否保存用戶輸入值，默認(rèn)為on，關(guān)閉為off

autofocus：自動(dòng)聚焦

required：此項(xiàng)必填，不能為空

pattern：正則驗(yàn)證 pattern="d{1,5}"

form：加上form屬性，表單元素可以放在頁面的任意位置

formnovalidate/novalidate：

表示不需要驗(yàn)證表單，直接提交（novalidate用戶form標(biāo)簽）

formnovalidate用于submit類型的提交按鈕

表單驗(yàn)證

validity對(duì)象，通過下面的valid可以查看驗(yàn)證是否通過

oText.addEventListener("invalid"fn1,false);

valid：驗(yàn)證不通過時(shí)返回false

valueMissing：輸入值為空時(shí)

typeMismatch：控件值與預(yù)期類型不匹配

patternMismatch：輸入值不滿足pattern正則

customError：不符合自定義驗(yàn)證

setCustomValidity();自定義驗(yàn)證