HTML5 速覽

• 2020 年 12 月 6 日
• 筆記
• html5

HTML5 速覽

一. HTML5 元素分類

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

元素選用原則

1. 少亦可為多

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

2. 別誤用元素

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

3. 具體為佳

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

4. 對用戶不要想當然

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

元素速覽( *** )

文檔和元數據元素

用途: 創建HTML文檔的上層建築, 向瀏覽器說明文檔的情況, 定義腳本程式和css樣式, 提供瀏覽器禁用腳本時要顯示的內容

文本元素

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

對內容分組

用途: 將相關內容分組

劃分內容

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

製表

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

創建表單

用途: 創建html表單, 以便獲取用戶的輸入數據

嵌入內容

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

二. 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

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