HTML5新標(biāo)簽學(xué)習(xí)筆記

文章相關(guān)

<article> :定義文章
<aside>:定義頁(yè)面內(nèi)容之外的內(nèi)容。(側(cè)邊欄)
<bdi>:定義文本的文本方向,使其脫離其周?chē)谋镜姆较蛟O(shè)置。
瀏覽器支持:IE不支持
<details>:指定了更多細(xì)節(jié),元素的內(nèi)容可以查看或隱藏。
<dialog>:定義了一個(gè)對(duì)話(huà)框或窗口。元素很容易創(chuàng)建網(wǎng)頁(yè)上彈出對(duì)話(huà)框和模態(tài)窗口
瀏覽器支持:IE不支持
<figcaption>:定義 figure 元素的標(biāo)題。
<figure>:定義了自包含的內(nèi)容,如插圖、圖表、照片、代碼清單等。
默認(rèn)動(dòng)作

figure { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

<footer>:定義 sectionpage 的頁(yè)腳。
<header>:定義 sectionpage 的頁(yè)眉。
<main>:標(biāo)記指定文檔的主要內(nèi)容。
元素中的內(nèi)容應(yīng)該是惟一的文檔。它不應(yīng)該包含任何內(nèi)容重復(fù)等文件欄,導(dǎo)航鏈接、版權(quán)信息、網(wǎng)站標(biāo)志,搜索表單。
不能超過(guò)一個(gè)<主要>元素在文檔中。<main>元素不能是<article>, <aside>, <footer>, <header>, or <nav>元素的后代
<mark>:定義有記號(hào)的文本。
默認(rèn)動(dòng)作

mark {
    background-color: yellow;
    color: black;
}

<menuitem>:定義一個(gè)命令/菜單項(xiàng)彈出菜單,用戶(hù)可以調(diào)用。
瀏覽器支持:僅firefox8.0支持
<meter>:定義了一個(gè)已知的范圍內(nèi)的標(biāo)量測(cè)定(量規(guī)),不應(yīng)該用來(lái)顯示進(jìn)度(如一個(gè)進(jìn)度條)。進(jìn)度條,使用<進(jìn)展>標(biāo)記。
<nav>:定義導(dǎo)航鏈接。
<progress>:定義了任務(wù)的進(jìn)展
<rp>:定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。
<rt>:定義 ruby 注釋的解釋。
默認(rèn)動(dòng)作

rt {
    line-height: normal;
}

<ruby>:定義了一個(gè)ruby注釋
<section>:定義在文檔,如章節(jié)、頁(yè)眉,頁(yè)腳,或任何其他文檔的部分。
<summary>:為 <details> 元素定義可見(jiàn)的標(biāo)題
瀏覽器支持:IE不支持
<time>:定義日期/時(shí)間。
<wbr>:為指定的文本添加一個(gè)換行符。

新的表單元素

標(biāo)簽 描述
< datalist > 定義下拉列表
< keygen > 定義生成密鑰
< output > 定義輸出的一些類(lèi)型

瀏覽器支持:IE不支持 (以上三個(gè))

新的輸入類(lèi)型

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

新輸入屬性

autocomplete //指定一個(gè)表單或輸入字段是否應(yīng)該自動(dòng)完成。
autofocus //自動(dòng)對(duì)焦(布爾屬性)
form //表單屬性指定一個(gè)或多個(gè)<input>元素屬于形式。
formaction //指定一個(gè)文件的URL,將處理表單提交時(shí)輸入控件
formenctype //指定應(yīng)該如何編碼的格式提交到服務(wù)器時(shí)(只對(duì)<form method='post'>)。
formmethod //定義以HTTP方法發(fā)送表單數(shù)據(jù)到action URL。
formnovalidate //指定<input>元素不應(yīng)提交時(shí)驗(yàn)證(布爾屬性)
formtarget //指定一個(gè)名稱(chēng)或關(guān)鍵字,顯示提交表單后,接收到的響應(yīng)。
height and width
list //< datalist >元素包含預(yù)定義的選項(xiàng)出現(xiàn)在<input>元素里。
min and max
multiple //指定用戶(hù)可以輸入多個(gè)值
pattern (regexp) //指定一個(gè)正則表達(dá)式,檢查<input>元素輸入的值
placeholder
required //表格提交前必須輸入一個(gè)字段
step //指定輸入的間隔,如數(shù)量,日期等

More HTML Input Types.
More HTML Input Attributes

HTML5-新的屬性語(yǔ)法

HTML5允許四種不同的語(yǔ)法屬性:
這個(gè)例子演示了在<input>標(biāo)簽的不同語(yǔ)法形式:

標(biāo)簽 舉例
Empty(空) < input type="text" value="John" disabled >(disabled 禁用)
Unquoted(未加引號(hào)) < input type="text" value="John" >
Double-quoted(雙引號(hào)) < input type="text" value="John Doe" >
Single-quoted(單引號(hào)) < input type="text" value='John Doe' >

在HTML5,所有四個(gè)語(yǔ)法可以使用,這取決于什么是屬性的需要

HTML5 Graphics(HTML5圖形)

標(biāo)簽 描述
< canvas > 定義使用JavaScript圖形繪制圖形。
< svg > 定義使用矢量圖繪制圖形。

閱讀更多關(guān)于HTML5 canvas
閱讀更多關(guān)于HTML5 SVG

New Media Elements(新媒體元素)

標(biāo)簽 描述
< audio > 定義聲音內(nèi)容
< embed > 定義外部交互內(nèi)容或插件。
< source > 定義媒體資源
< track > 定義用在媒體播放器中的文本軌道。
< video > 定義視頻。

閱讀更多關(guān)于HTML5 <video>

閱讀更多關(guān)于HTML5 <audio>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,796評(píng)論 1 92
  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,146評(píng)論 0 17
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,599評(píng)論 32 459
  • 《清醒思考的藝術(shù)》 Day 11@因心木灬 33.規(guī)避損失:我們無(wú)法改變:惡比善更有影響力。我們對(duì)不利東西的反應(yīng)要...
    小冷睡了閱讀 150評(píng)論 0 0
  • 我是一個(gè)對(duì)新生事物不怎么敏感的人,不好打聽(tīng),不好湊熱鬧,對(duì)不感興趣的東西懶得搭理,這讓我顯得有些孤陋寡聞。...
    慕敖閱讀 564評(píng)論 0 2