html5

時間 2020-05-18

標籤 html5 html 欄目 HTML5 简体版

原文原文鏈接

**html5
新增標籤**
doctype並非html的標籤，它只是說明是html第幾個版本css

爲何HTML5不引用DTD？
DTD（文檔類型定義）：
DTD規定了標記語言的規則，這樣瀏覽器才能夠正確的呈現內容
HTML5不基於SGML因此不須要引用DTDhtml

新增長的標籤：
1.結構標籤
塊狀元素－有意義的div
－<article>標記定義一篇文章
-<header>標記定義一個頁面或一個區域的頭部
-<nav>標記定義導航連接
-<section>標記定義一個區域
-<aside>標記定義頁面內容部分的側邊欄
好比淘寶的左邊的分類就是aside右邊的擴展出來的文章就是article
-<hgroup>標記定義文件中一個區塊的相關信息
-<figure>標記定義一組多媒體內容以及它們的標題
-<figcaption>標記定義figure元素的標籤
-<footer>標記定義一個頁面或者一個區域的底部
－<diglog>標記定義一個對話框（會話框）相似微信html5

header/section/aside/article/footer不要嵌套在裏面
header/section/footer級別是最高的，才能夠寫aside/article/figuare/hgroup/nav,而後 div figcaptioncanvas

2.多媒體標籤
<video>
標記定義一個視頻
video能夠加寬度和高度，改變視頻的大小，可是audio只是音頻，不存在高度和寬度api

<audio>
標記定義音頻內容
<body>
<audio src=「../Source/passion.mp3」 autoplay=「autoplay」></audio>
</body>
loop=「-1」
controls=「controls」(就會有一個控制器去播放，暫停）
能夠在audio中間加一段文字，若是audio跑不出來就能夠顯示那個

<source>
標記定義媒體資源
<audio autoplay=「autoplay」>
    <source src=「../Source/passion.mp3」 type=「audio/mpeg」>
</audio>

<canvas>標記定義圖片瀏覽器

<embed>標記定義外部的可交互的內容或者插件
好比flash
<embed src=「../Source/HappyBirthday.swf」 width=「1024」 height=「768」></embed>
相似於flash這種帶有插件的，可使用它
多媒體的標籤的發展意味着支持不使用插件的狀況下便可操做媒體文件，極大地提升了用戶體驗ruby

3.狀態標籤：
<meter>狀態標籤（實時狀態顯示：氣壓，氣溫）
<meter value=「220」 min=「20」 max=「380」 low=「200」 high=「240」 optimum=「220」></meter>微信

<progress>狀態標籤（任務過程：安裝，加載）
<progress value=「30」 max=「100」 >
若是隻有max的話會出現一個加載條的狀況app

4.列表標籤:
<datalist>爲input標記定義一個下拉表，配合optionless

<body>
<input placeholder=「請選擇您喜歡的手機品牌「 list=「phoneList」 ／>
<datalist id=「phoneList」>
    <option value=「IPhone」>iPhone</option>
    <option value=「Samsung」>Samsung</option>
    <option value=「HuaWei」>Huawei</option>
    <option value=「HTC」>hTC</option>
    <option value=「Meizu」>Meizu</option>
</datalist>
</body>

<details>
    <summary>內容</summary>
    <p>lalalal</p>
</details>

有一個屬性是open＝「open」

5.註釋標籤：
<ruby>
標記定義註釋或者音標
<body>
<p>咱們來<ruby>奮<rt>fen</rt></ruby>一個話題</p>
讀音放在字的上面

<rt>
<body>
<p>咱們來<ruby>奮<rp>(</rp><rt>fen</rt><rp>)</rp></ruby>一個話題</p>
若是ruby不出現的或者不兼容
rp不能夠放在rt裏面

<rp>

6.其餘標籤：
<mark>
<body>
<p>媽媽叫我回家的時候順路買一盒<mark>牛奶</mark>，須要很新鮮的那種。</p>
至關於highlight

<output>
<oninput>：事件能夠實時監聽文本框的輸入變化

<body>
<form oninput=「totalPrice.value=parseInt(price.value)*parseInt(number.value)」></form>
    <input type=「text」 id=「price」 value=「5000」>
    <input type=「number」 id=「number」 value=「1」>=
    <output name=「totalPrice」 for=「price number」></output>
</body>

7.刪除的標籤：
－純表現的元素
Basefont,big,center,font,s,strike,tt,u
－對可用性產生負面影響的元素
frame,frameset,noframes
iframe
－產生混淆的元素
acronym,applet,isindex,dir

8.重定義標籤：

<b>表明內聯文本，一般是粗體，沒有傳遞表示重要的意思
<i>表明內聯文本，一般是斜體，沒有傳遞重要的意思
<dd>能夠同details和figure一同使用，定義包含文本，dialog也能夠用
<dt>能夠用details和figure一同使用，彙總細節，dialog也能夠用
<hr>不單單表達水平線，還表達主題結束，顯示效果相同
好比百度貼吧，論壇這種，一個主體完成以後一條橫線，或者小說
<menu>從新定義用戶界面的菜單，配合command或者menuitem使用
big標籤已經被刪除
<small>表示小字體，例如打印註釋或者法律條款
<strong>表示重要性而不是強調符號

屬性變化：
1.Input：

<input type= 「email」 name= 「email」 >

<input type= 「url」 name= 「url」 >
只針對iphone手機
<input type= 「tel」 name= 「tel」 > 
<input type=「number」 name=「number」 >

2.Date Pickers Input類型:
Date
<input type=「date」 name =「date」 >

Month
<input type=「month」 name=「month」>

Week
iphone6以上，week是不兼容的

Time

Datetime

Datetime-local

3.其餘Input

Range Input

<input type=「range」 name=「range」 min=「1」 max=「10」>
若是沒有輸入的話默認100

Search Input

<input type=「search」 name=「search」 >
有值的時候後面多了一個叉叉

color input

<input type=「color」 name =「color」 >
默認黑色的顏色選擇框
能夠作些在線文本編輯器調整字體

4.表單屬性

1.autocomplete

form或者input域都應該擁有自動完成功能
<form autocomplete= 「on」></form>
autocomplete適用於<form>標籤，以及如下類型的<input>標籤：
text,search,url,telephone,email,password,datapickers,range,color
<form action=「lesson2_1 autocomplete.html」 autocomplete=「on/off」></form>

<input type=「text」 name=「text」>
<input type=「submit」>

2 .autofocus屬性

<input type=「text」 name=「text」>
<input type=「email」 name=「email」 autofocus=「autofocus」／>
<input type=「submit」>

適用於全部的
規定在頁面加載時，域自動地得到焦點

3.multiple屬性

規定域中能夠選擇多個值
multiple適用於如下類型的<input>標籤：email和file
<input type =「file」 multiple= 「multiple」/>

4.placeholder屬性

提供一種暗示，描述輸入區域所期待的值
<input type=「search」 placeholder= 「Search Content」/>
適用於：
text,search,url,telephone,email,password

5.required

表單驗證用js來判斷
規定必須在提交以前填寫輸入域（不能爲空）
<input type=「text」 required=「required」 />
適用於：
text,search,url,telephone,email,password,date picker,number,checkbox,radio,file

5.其餘屬性: