html5標簽變化

前言

HTML中的一大主要變化是基本信念方面的:將元素的語義與元素對其內容呈現(xiàn)結構的影響分開。HTML元素負責文檔內容的結構和含義,內容的呈現(xiàn)則由應用與元素上的CSS樣式控制。HTML文檔的用戶未必都需要顯示它們,不摻合呈現(xiàn)方面的事有助于簡化HTML的處理以及從中自動提煉含義。

元素速覽

接下來讓我們一起走馬觀燈地認識一下所有的HTML5元素吧

文檔和元數(shù)據元素

創(chuàng)建HTML文檔的上層建筑,想瀏覽器說明文檔的情況,定義腳本程序和CSS樣式,提供瀏覽器禁用腳本時要顯示的內容

元素 說明 類型 有無變化
base 設置相對URL的基礎 元數(shù)據 無變化
body 表示HTML文檔的內容 有變化
DOCTYPE 表示HTML文檔的開始 有變化
head 表示文檔的元數(shù)據 無變化
html 表示文檔中HTML部分的開始 有變化
link 定義與外部資源(通常是樣式表或網站圖標)的關系 元數(shù)據 有變化
meta 提供關于文檔的信息 元數(shù)據 有變化
noscript 包含瀏覽器禁用的腳本或不支持腳本時顯示的內容 元數(shù)據、短語 無變化
script 定義腳本程序,可以是文檔內嵌的也可以是外部文件中的 元數(shù)據、短語 有變化
style 定義CSS樣式 元數(shù)據 有變化
title 設置文檔標題 元數(shù)據 無變化

文本元素

文本元素用來為內容提供基本的結構和含義

元素 說明 類型 有無變化
a 生成超鏈接 短語、流 有變化
abbr 縮略語 短語 無變化
b 不再強調或著重意味地標記一段文字 短語 有變化
br 表示換行 短語 無變化
cite 表示其他作品的標題 短語 有變化
code 表示計算機代碼片段 短語 無變化
del 表示從文檔中刪除的文字 短語、流 新增
dfn 表示術語定義 短語 無變化
em 表示著重強調的一段文字 短語 無變化
i 表示與周邊內容秉性不同的一段文字,例如來自另一種語言的詞語 短語 有變化
ins 表示加入文檔的文字 短語、流 無變化
kbd 表示用戶輸入內容 短語 無變化
mark 表示一段因為與上下文中另一詞語相關而被突出顯示的內容 短語 新增
q 表示引自他處的內容 短語 無變化
rp 與ruby元素結合使用,標記括號 短語 新增
rt 與ruby元素結合使用,標記注意符號 短語 新增
ruby 表示位于表意文字上方或右方的注音符號 短語 新增
s 表示文字已不再準確 短語 無變化
samp 表示計算機程序輸出的內容 短語 無變化
small 表示小號字體內容 短語 無變化
span 一個沒有自己語義的通用元素。可以用在希望應用一些全局屬性卻又不想引入額外語義的情況 短語 無變化
strong 表示重要內容 短語 無變化
sub 表示下標文字 短語 無變化
sup 表示上標文字 短語 無變化
time 表示時間或日期 短語 新增
u 不帶強調或著重意味地標記一段文字 短語 有變化
var 表示程序或計算機系統(tǒng)中的變量 短語 無變化
wbr 表示可安全換行的地方 短語 新增

對內容分組

用來將相關內容分組

元素 說明 類型 有無變化
blockquote 表示引用他處的大段內容 無變化
dd 用在dl元素之中,表示定義 無變化
div 一個沒有任何既定語義的通用元素,是span元素在流云素中的對應物 無變化
dl 表示包含一系列術語和定義的說明列表 無變化
dt 用在dl元素之中,表示術語 無變化
figcaption 表示figure元素的標題 新增
figure 表示圖片 新增
hr 表示段落級別的主題轉換 有變化
li 用在ul、ol和menu元素中,表示列表項 有變化
ol 表示有序列表 有變化
p 表示段落 有變化
pre 表示其格式應被保留的內容 無變化
ul 表示無序列表 有變化

劃分內容

用于劃分內容、讓每個概念、觀點或主題彼此分隔開。它們中有許多是新增的。這些元素為分離元素的含義和外觀做了大量基礎性工作

元素 說明 類型 有無變化
address 表示文檔或article的聯(lián)系信息 新增
article 表示一段獨立的內容 新增
aside 表示與周邊內容稍為有牽涉的內容 新增
details 生成一個區(qū)域,用戶將其展開可以獲得更多細節(jié)知識 新增
footer 表示尾部 新增
h1~h6 表示標題 無變化
header 表示首部 新增
hgroup 將一組標題組織在一起,以便文檔大綱只顯示其中第一個標題 新增
nav 表示有意集中在一起的導航元素 新增
section 表示一個重要的概念或主題 新增
summary 用在details元素中,表示該元素內容的標題或說明 新增

制表

用于制作顯示數(shù)據的表格。表格在HTML5中的主要變化是不能再用來控制頁面布局。

元素 說明 類型 有無變化
caption 表示表格的標題 有變化
col 表示一列 有變化
colgroup 表示一組列 有變化
table 表示表格 有變化
tbody 表示表格主體 有變化
td 表示單元格 有變化
tfoot 表示表腳 有變化
th 表示標題行單元格 有變化
thead 表示標題行 有變化
tr 表示一行單元格 有變化

創(chuàng)建表單

HTML5對這方面關注的比較多,并且新增了不少元素和特性(包括在用戶提交表單時在客戶端驗證輸入數(shù)據的功能)

元素 說明 類型 有無變化
button 表示可用來提交或重置表單的按鈕(或一般按鈕) 短語 有變化
datalist 定義一組提供給用戶的建議值 有變化
fieldset 表示一組表單元素 有變化
form 表示HTML表單 有變化
input 表示用來手機用戶輸入數(shù)據的控件 短語 有變化
keygen 生成一對公鑰和私鑰 短語 新增
label 表示表單元素的說明標簽 短語 有變化
legend 表示fieldset元素的說明性標簽 無變化
optgroup 表示一組相關的option元素 無變化
option 表示供用戶選擇的一個選項 無變化
output 表示計算結果 短語 新增
select 給用戶提供一組固定的選項 短語 有變化
textarea 用戶可以用它輸入多行文字 短語 有變化

嵌入內容

在HTML5文檔中嵌入內容

元素 說明 類型 有無變化
area 表示一個用于客戶端區(qū)分相應圖的區(qū)域 短語 有變化
audio 表示一個音頻資源 新增
canvas 生成一個動態(tài)的圖形畫布 短語、流 新增
embed 用插件在HTML文檔中嵌入內容 短語 新增
iframe 通過創(chuàng)建一個瀏覽上下文在一個文檔中嵌入另一個文檔 短語 有變化
img 嵌入圖片 短語 有變化
map 定義客戶端分區(qū)響應圖 短語、流 有變化
meter 嵌入數(shù)值在許可值范圍背景中的圖形表示 短語 新增
object 在HTML文檔中嵌入內容、也用于生成瀏覽上下文和生成客戶端分區(qū)響應 短語、流 有變化
param 表示將通過object元素傳遞給插件的參數(shù) 無變化
progress 嵌入目標進展或任務完成情況的圖形表示 短語 新增
source 表示媒體資源 新增
svg 表示結構化矢量內容 新增
track 表示媒體的附加軌道(例如屏幕) 新增
video 表示視頻資源 新增

未實現(xiàn)的元素

有兩個元素目前還沒有瀏覽器實現(xiàn),而且在HTML5規(guī)范中也僅有含糊不清的說明,這兩個元素時command和menu。它們的設計用途是讓菜單和用戶界面元素處理起來更簡單一些。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,154評論 1 92
  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,242評論 1 25
  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,215評論 0 17
  • 1. 瀏覽器頁面有哪三層構成,分別是什么,作用是什么? 構成:結構層、表示層、行為層分別是:HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,990評論 1 11
  • 一直以來都不喜歡寫游記。因為總覺得知道的人多了之后,本來美好的景點就會被商業(yè)化,喪失了其迷人的地方。但矛盾的是,當...
    JasonHuang閱讀 958評論 0 2

友情鏈接更多精彩內容