HTML5 速覽

隨遇丿而安發表於2020-12-06
HTML

HTML5 速覽

一. HTML5 元素分類

HTML賦值文件內容的結構和含義, 內容呈現由css樣式控制

元素選用原則

  1. 少亦可為多

    標記只應該應內容對語義的需要使用. 有條經驗法則是: 問問自己打算如何發揮一個元素的語義作用, 如果不能馬上答出就不用這個元素

  2. 別誤用元素

    對內容進行標記時, 只宜將元素用於他們原定的用途, 不要創造自有的語義. 如果找不到適合自己所要含義的元素, 可以考慮使用通用元素( 如span或div ), 並且用全域性屬性class表明其含義. css樣式不是類屬性的唯一用途.

  3. 具體為佳

    用來標記內容的元素應該選擇最為具體的那個. 如果已有元素能恰當表明內容的型別, 就不要使用通用元素. html4中存在依賴div構建頁面結構的傾向, 不好維護.

  4. 對使用者不要想當然

    呈現與語義分離原則的目的完全是為了讓HTML文件更易於程式化處理, 所以隨著HTML5的採用和實現愈加廣泛, HTML內容的這種使用會日益增多. 如果不關心標記的準確性和一致性, 這樣的HTML文件處理起來更為困難, 使用者能為其找到的使用者也很有限.

元素速覽( *** )

文件和後設資料元素

用途: 建立HTML文件的上層建築, 向瀏覽器說明文件的情況, 定義指令碼程式和css樣式, 提供瀏覽器禁用指令碼時要顯示的內容

元素 說明 型別 h5新增或變化
base 設定相對URL的基礎 後設資料 無變化
body 表示HTML文件的內容 無 有變化
DOCTYPE 表示HTML文件的開始 無 有變化
head 包含文件的後設資料 無 無變化
html 表示文件中HTML部分的開始 無 有變化
link 定義與外部資源(通常是樣式表或網站圖示)的關係 後設資料 有變化
meta 提供關於文件的資訊 後設資料 有變化
noscript 包含瀏覽器禁用指令碼或不支援指令碼時顯示的內容 後設資料, 短語 無變化
script 定義指令碼語言, 可以是文件內嵌的也可以是外部檔案中的 後設資料, 短語 有變化
style 定義css樣式 後設資料 有變化
title 設定文件標題 後設資料 無變化

文字元素

用途: 為內容提供基本的結構和含義

元素 說明 型別 h5新增或變化
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 表示程式或計算機系統中的變數 短語 無變化
wbr 表示可安全換行的地方 短語 新增

對內容分組

用途: 將相關內容分組

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

劃分內容

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

元素 說明 型別 h5新增或變化
address 表示文件或article的聯絡資訊 流 新增
article 表示一段獨立的內容 流 新增
aside 表示與周邊內容稍有牽涉的內容 流 新增
details 生成一個區域, 使用者將其展開可以獲得更多細節知識 流 新增
footer 表示尾部 流 新增
h1-h6 表示標題 流 無
header 表示首部 流 新增
hgroup 將一組標題組織在一起, 以便文件大綱只顯示其中第一個標題 流 新增
nav 表示有意集中在一起的導航元素 流 新增
section 表示一個重要的概念或主題 流 新增
summary 用在details元素中, 表示該元素內容的標題或說明 無 新增

製表

用途: 製作顯示資料的表格. 表格在html5中的主要變化時不能再用來控制頁面佈局, 這項工作轉交給了css

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

建立表單

用途: 建立html表單, 以便獲取使用者的輸入資料

元素 說明 型別 h5新增或變化
button 表示可用來提交或重置表單的按鈕(或一般按鈕) 短語 有變化
datalist 定義一組提供給使用者的建議值 流 有變化
fieldset 表示一組表單元素 流 有變化
form 表示html表單 流 有變化
input 表示用來收集使用者輸入資料的控制元件 短語 有變化
keygen 生成一對公鑰和私鑰 短語 新增
label 表示表單元素的說明標籤 短語 有變化
legend 表示fieldset元素的說明性標籤 無 無變化
optgroup 表示一組相關的option元素 無 無變化
option 表示供使用者選擇的一個選項 無 無變化
output 表示計算結果 短語 新增
select 給使用者提供一組固定的選項 短語 有變化
textarea 使用者可以用它輸入多行文字 短語 有變化

嵌入內容

用途: 在html文件中嵌入內容

元素 說明 型別 h5新增或變化
area 表示一個用於客戶端分割槽響應圖的區域 短語 有變化
audio 表示一個音訊資源 無 新增
canvas 生成一個動態的圖形畫布 短語, 流 新增
embed 用外掛在html文件中嵌入內容 短語 新增
iframe 通過建立一個瀏覽上下文在一個文件中嵌入另一個文件 短語 有變化
img 嵌入影像 短語 有變化
map 定義客戶端分割槽響應圖 短語, 流 有變化
meter 嵌入數值在許可值範圍內的圖形表示 短語 新增
object 在html文件中嵌入內容. 也可用於生成瀏覽器上下文
和生成客戶端分割槽響應圖		 短語, 流 有變化
param 表示將通過object元素傳遞給外掛的引數 無 無變化
progress 嵌入目標進展或任務完成情況的圖形表示 短語 新增
source 表示媒體資源 無 新增
svg 表示結構化向量內容 無 新增
track 表示媒體的附加軌道 無 新增
video 表示視訊資源 無 新增

二. HTML5 不常見的全域性屬性

全域性屬性( global attribute ), 用來配置所有元素共有的行為

accesskey

設定選擇元素的快捷鍵

<form action="">
  Name: <input type="text" name="name" accesskey="t"><br>
  Password: <input type="password" name="password" accesskey="m"><br>
  <input type="submit" value="登入" accesskey="n">
</form>

按下 alt+t, 焦點便轉移到name輸入框上

contenteditable

這個是html5中新增的屬性, 設定後使用者能修改內容

<p contenteditable="true">今天天氣很不錯</p>

效果如下

dir

規定元素中文字的方向, 有效值有 ltr(從左到右), rtl(從右到左)

<p dir="rtl">今天天氣很不錯</p>

spellcheck屬性

spellcheck屬性用來表明瀏覽器是否應該對元素的內容進行拼寫檢查, 用於使用者編輯文字時有幫助

三. HTML5新增元素體驗

文字元素

del

屬性cite: 指定原因文件的url, datetime: 設定修改時間

<p>今天天氣很 <del>不錯</del> 糟糕</p>

mark

下面有段話是重點, <mark>這段話需要重點標註</mark>

ruby, rt和rp

rt: 用來標記注音符號, rp: 用來標記供不支援注音符號特性的瀏覽器顯示在注音符號前後的括號

<rudy>魑<rp>(</rp><rt>chī</rt><rp>)</rp></rudy>
<rudy>魅<rp>(</rp><rt>mèī</rt><rp>)</rp></rudy>
<rudy>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></rudy>
<rudy>魎<rp>(</rp><rt>liǎng</rt><rp>)</rp></rudy>

time

屬性 datetime: 以RFC3339指明日期

屬性 pudate: 如果是true, 表明time表示整個html或離該元素最近的article的釋出日期

這篇部落格釋出的日期是 <time datetime="2020-12-6">2020-12-6</time>

wbr

表示超過當前瀏覽器視窗的內容適合再此換行, 換不換行還是由瀏覽器決定

內容分組

figcaption和figure

<figure>
  <figcaption>
    說明 圖1.1
  </figcaption>
  <code>
    line1;
    line2
  </code>
</figure>

劃分內容

基本都是h5新增元素, 除了 summary 都是塊元素, 按實際用途使用標籤

建立表單

keygen

這個特性還未得到很好的支援, 暫不建議使用

output

<form action="" oninput="res.value = number1.valueAsNumber * number2.valueAsNumber">
  <fieldset>
    <legend>output乘法</legend>
    <input type="number" name="number1"> *
    <input type="number" name="number2"> =
    <output for="number1 number2" name="res"></output>
  </fieldset>
</form>

嵌入內容

audio元素

<audio controls autoplay>
  <source src="url.ogg">
  <source src="url.mp3">
  <source src="url.wav">
  該音訊不能被播放
</audio>

embed

type指定內容的mime型別

<embed src="內容地址" type="application/x-shockwave-flash" 
       width="500" height="300" allowfullscreen="true">

cavas

這個涉及的知識點較多, 就不在這演示

相關文章