HTML5元素和語義化標籤
站點： 前端開發文檔
原文： HTML元素
原文： 語義化標籤
HTML元素
元素分類
-
塊級元素：
div、h1-h6、hr、menu、ol、ul、li、dl、dt、dd、table、p、formcss- 自身屬性爲
display: block;的元素，一般使用塊級元素進行佈局（結構）的搭建。
- 自身屬性爲
-
塊級元素的特色html
- 獨佔一行
- 從上到下依次排列
- 直接控制寬度、高度以及盒子模型的相關CSS屬性
- 不設置寬度，塊級元素的寬度是它的父元素內容的寬度，高度是自身內容的高度
- 能夠嵌套行內元素
-
ul/ol下面只能是li，dl下面只能是dt dd；p不能包含其餘塊級元素包括自身
-
內聯元素：
span、a、strong、i、em，s、u，textarea、input、select，label、img、sup，sub前端- 自身屬性爲
display: inline;的元素，一般使用行內元素進行文字、小圖標（小結構）的搭建。
- 自身屬性爲
-
內聯元素的特色git
- 不獨佔一行，和其餘內聯元素從左到右在一行顯示
- 不能直接控制寬度、高度以及盒子模型的相關CSS屬性，能夠直接設置內外邊距的左右值
- 寬高由自身內容的大小決定（文字、圖片等）
- 只能容納文本或其餘內聯元素（不能在內聯元素中嵌套塊級元素）
CSS外鏈引入方式github
-
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元素被用於無關內容。app- 應該與主內容分開的內容
-
aside元素中的內容能夠被獨立開來而不會影響文檔或section中主內容的含義 - 能夠用在主要內容相關的引用，如側邊欄、廣告、
nav元素組等 -
aside的內容若是被刪除，剩下的內容仍然很合理
-
figure：表示一段獨立的流內容，通常表示文檔主體流內容中的一個獨立單元（figure元素常常用於圖片） -
figcaption：frontend- 一個圖例的說明
-
figure元素的一個標題或相關解釋 - 使用
figcaption時，最好是figure塊的第一個或最後一個元素
新增標籤的兼容問題ide
- 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();自定義驗證
-
-
相關文章
- 1. HTML5之語義化標籤
- 2. HTML5語義化標籤
- 3. html HTML5語義化標籤
- 4. html5 語義化標籤
- 5. HTML5 語義化標籤
- 6. html5-語義化標籤（一）
- 7. html5語義化標籤
- 8. HTML5語義元素
- 9. HTML5 語義元素
- 10. HTML5: HTML5 語義元素
- 更多相關文章...
- • Web 語義化 - 網站建設指南
- • insert、update、delete和sql標籤 - MyBatis教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML5之語義化標籤
- 2. HTML5語義化標籤
- 3. html HTML5語義化標籤
- 4. html5 語義化標籤
- 5. HTML5 語義化標籤
- 6. html5-語義化標籤（一）
- 7. html5語義化標籤
- 8. HTML5語義元素
- 9. HTML5 語義元素
- 10. HTML5: HTML5 語義元素