站點：前端開發文檔
原文：HTML元素
原文：語義化標籤
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不能包含其他塊級元素包括自身
-
行內元素：
span、a、strong、i、em，s、u，textarea、input、select，label、img、sup，sub- 自身屬性爲
display: inline;的元素，通常使用行內元素進行文字、小圖標（小結構）的搭建。
- 自身屬性爲
-
塊級元素的特點
- 不獨佔一行，和其他內聯元素從左到右在一行顯示
- 不能直接控制寬度、高度以及盒子模型的相關CSS屬性，可以直接設置內外邊距的左右值
- 寬高由自身內容的大小決定（文字、圖片等）
- 只能容納文本或其他內聯元素（不能在內聯元素中嵌套塊級元素）
CSS外鏈引入方式
-
link是html標籤，@import是css提供的方式，寫在css文件或style標籤中。 - 加載順序有區別，當一個頁面被加載時，
link引用的css文件會被同時加載，而@import引入的css文件會等頁面全部下載完成後再加載。 - 使用
js控制DOM改變CSS樣式，只能使用link標籤，因爲import不能被DOM控制。
CSS命名規範
- 頭部：
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 - 狀態：
status
語義化標籤
- 儘量減少使用無意義標籤，如
span和div - 儘量不使用標籤本身的CSS屬性，如
b、font、s - 需要強調的部分，使用
strong、em - 表格搭建時，使用
<thead>表格頭部</thead>、<tbody>表格主體</tbody>、<tfoot>表格尾部</tfoot> - 列表搭建時，使用
<ul>無序列表</ul>、<ol>有序列表</ol>、<dl>定義列表</dl>
-
section：劃分網頁，表示頁面中的一個內容區塊，比如章節、頁眉、頁腳或頁面其它部分。可以和h1，h2，h3...等其他標籤結合使用，表示文檔結構。 -
hgroup：對整個頁面/頁面中的一個內容區塊的標題進行組合。 -
header：一個內容區塊或整個頁面的頭部部分。 -
footer：整個頁面或頁面區塊的尾部。 -
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();自定義驗證
-
-