摘要：站點前端開發(fā)文檔原文元素原文語義化標簽元素元素分類塊級元素自身屬性為的元素，通常使用塊級元素進行布局結構的搭建?？梢院?，，等其他標簽結合使用，表示文檔結構。表示標簽內容之外的，與標簽內容相關的輔助信息，元素被用于無關內容。

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

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

自身屬性為display: block;的元素，通常使用塊級元素進行布局（結構）的搭建。

塊級元素的特點

獨占一行

從上到下依次排列

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

不設置寬度，塊級元素的寬度是它的父元素內容的寬度，高度是自身內容的高度

可以嵌套行內元素

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

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

自身屬性為display: inline;的元素，通常使用行內元素進行文字、小圖標（小結構）的搭建。

內聯(lián)元素的特點

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

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

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

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

CSS外鏈引入方式

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

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

使用js控制DOM改變CSS樣式，只能使用link標簽，因為import不能被DOM控制。

CSS命名規(guī)范

頭部：header

內容：content/container

尾部：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

登陸條：loginbar

標志：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權：copyright

投票：vote

合作伙伴：partner

滾動：scroll

內容：content

標簽頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標題：title

加入：joinus

指南：guild

服務：service

注冊：register

狀態(tài)：status

盡量減少使用無意義標簽，如span和div

盡量不使用標簽本身的CSS屬性，如b、font、s

需要強調的部分，使用strong、em

表格搭建時，使用表格頭部、表格主體、表格尾部

列表搭建時，使用

無序列表

有序列表

定義列表

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

hgroup：對整個頁面/頁面中的一個內容區(qū)塊的標題進行組合。

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

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

nav：頁面中導航連接的部分。

article：獨立于內容其余部分的完整獨立內容塊。article元素專門為摘要設計。

aside：表示article標簽內容之外的，與article標簽內容相關的輔助信息，aside元素被用于無關內容。

應該與主內容分開的內容

aside元素中的內容可以被獨立開來而不會影響文檔或section中主內容的含義

可以用在主要內容相關的引用，如側邊欄、廣告、nav元素組等

aside的內容如果被刪除，剩下的內容仍然很合理

figure：表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元（figure元素經常用于圖片）

figcaption：

一個圖例的說明

figure元素的一個標題或相關解釋

使用figcaption時，最好是figure塊的第一個或最后一個元素

新增標簽的兼容問題

HTML5語義化標簽在IE6-8下，默認當成行內元素展示。

通過引入js解決IE9以下新增標簽的兼容問題

Forms

新增input元素的種類：

search：搜索輸入框

tel：電話號碼輸入框

url：輸入URL地址

email：郵件輸入框

number：數字輸入框

rang：特定范圍內的數值選擇器

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

datetime：顯示完整日期和時間 UTC標準時間

datetime-local：顯示完整日期和時間

time：顯示時間

month：顯示月份

week：顯示周

表單新特性：

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

autocomplete：是否保存用戶輸入值，默認為on，關閉為off

autofocus：自動聚焦

required：此項必填，不能為空

pattern：正則驗證 pattern="d{1,5}"

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

formnovalidate/novalidate：

表示不需要驗證表單，直接提交（novalidate用戶form標簽）

formnovalidate用于submit類型的提交按鈕

表單驗證

validity對象，通過下面的valid可以查看驗證是否通過

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

valid：驗證不通過時返回false

valueMissing：輸入值為空時

typeMismatch：控件值與預期類型不匹配

patternMismatch：輸入值不滿足pattern正則

customError：不符合自定義驗證

setCustomValidity();自定義驗證