小白們以後不要再說自己不會html5

最近一個學網頁設計前端開發的童鞋怯怯的跟我說他不會h5令我大吃一驚那你還在這個方向混啥？他小聲的說，他只會h4令我哭笑不得h5無非就是新增了一些特性嘛！所有的99%的內容還都是之前h4的那些代碼啊，標籤啊之類好吧，那今天我就搜集一下h5的新增特性給大家

不過cs3倒是新增了很多好用的特效功能

這個不是一篇文章能全部介紹完的

大家有興趣可以在本公眾號內搜索有關css關鍵字的文章

最後面的文章來源網路

如果是我的話

就快速的一掠而過

因為實在沒什麼看頭

無非就是新的特性

以及如何優化了以前的一些不足之處

這就好比你這個人

姑且叫二狗吧

二狗剛出生的時候

二狗1.0版

二狗在社會當中學習成長了很久

不斷的翻新自己的技能

某一天

二狗成長到4.0版

這個4.0版的二狗會很多技能追女孩

有一天

追一個女孩怎麼也追不到

以前的各種技能都不好使了

於是到51rgb來學習了一些新技能

增進了一些新特性

二狗升級為二狗5.0版

這下厲害了

能解決好多疑難雜症和以前的瓶頸問題

但是二狗依然還是二狗.....

備註：雖然h5進行了多達上百項的修改包括HTML和XHTML的標籤，相關的 API、 Canvas等，同時HTML5的圖像img標籤及svg也進行了改進。但是相對於整個html標籤代碼來說所佔比例不過是滄海一粟

下面的文章來源csdn

一起來看下：

1.新的文檔類型(New Doctype)

目前許多網頁還在使用XHTML 1.0並且要在第一行像這樣聲明文檔類型：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

在HTML5中，上面那種聲明方式將失效。下面是HTML5中的聲明方式：

>

2.腳本和鏈接無需type (No More Types for Scripts and Links)

在HTML4或XHTML中，你需要用下面的幾行代碼來給你的網頁添加CSS和JavaScript文件。

linkrel="stylesheet"href="path/to/stylesheet.css"type="text/css"

/>

scripttype="text/javascript"src="path/to/script.js"

>

script

>

而在HTML5中，你不再需要指定類型屬性。因此，代碼可以簡化如下：

linkrel="stylesheet"href="path/to/stylesheet.css"

/>

scriptsrc="path/to/script.js"

>

script

>

3.語義Header和Footer (The Semantic Header and Footer)

在HTML4或XHTML中，你需要用下面的代碼來聲明"Header"和"Footer"。

divid="header"

>

...

div

>

..........

divid="footer"

>

...

div

>

在HTML5中，有兩個可以替代上述聲明的元素，這可以使代碼更簡潔。

header

>

...

header

>

footer

>

...

footer

>

4.Hgroup

在HTML5中，有許多新引入的元素，hgroup就是其中之一。假設我的網站名下面緊跟著一個子標題，我可以用和標籤來分別定義。然而，這種定義沒有說明這兩者之間的關係。而且，h2標籤的使用會帶來更多問題，比如該頁面上還有其他標題的時候。

在HTML5中，我們可以用hgroup元素來將它們分組，這樣就不會影響文件的大綱。

header

>

hgroup

>

h1

>

Recall Fan Page

h1

>

h2

>

Only for people who want the memory of a lifetime.

h2

>

hgroup

>

header

>

5.標記元素 (Mark Element)

你可以把它當做高亮標籤。被這個標籤修飾的字元串應當和用戶當前的行動相關。比如說，當我在某博客中搜索「Open your Mind」時，我可以利用一些JavaScript將出現的片語用修飾一下。

h3

>

Search Results

h3

>

p

>

They were interrupted, just after Quato said,

mark

>

"Open your Mind"

mark

>

.

p

>

6.圖形元素 (Figure Element)

在HTML4或XHTML中，下面的這些代碼被用來修飾圖片的注釋。

imgsrc="path/to/image"alt="About image"

/>

p

>

Image of Mars.

p

>

然而，上述代碼沒有將文字和圖片內在聯繫起來。因此，HTML5引入了元素。當和結合起來後，我們可以語義化地將注釋和相應的圖片聯繫起來。

figure

>

imgsrc="path/to/image"alt="About image"

/>

figcaption

>

p

>

This is an image of something interesting.

p

>

figcaption

>

figure

>

7.重新定義 (Small Element redefined)

在HTML4或XHTML中，元素已經存在。然而，卻沒有如何正確使用這一元素的完整說明。在HTML5中，被用來定義小字。試想下你網站底部的版權狀態，根據對此元素新的HTML5定義，可以正確地詮釋這些信息。

8.佔位符 (Placeholder)

在HTML4或XHTML中，你需要用JavaScript來給文本框添加佔位符。比如，你可以提前設置好一些信息，當用戶開始輸入時，文本框中的文字就消失。

而在HTML5中，新的「placeholder」就簡化了這個問題。

9.必要屬性 (Required Attribute)

HTML5中的新屬性「required」指定了某一輸入是否必需。有兩種方法聲明這一屬性。

inputtype="text"name="someInput"required

>

inputtype="text"name="someInput"required="required"

>

當文本框被指定必需時，如果空白的話表格就不能提交。下面是一個如何使用的例子。

formmethod="post"action=""

>

labelfor="someInput"

>

Your Name:

label

>

inputtype="text"id="someInput"name="someInput"placeholder="Douglas Quaid"required

>

buttontype="submit"

>

Go

button

>

form

>

在上面那個例子中，如果輸入內容空且表格被提交，輸入框將被高亮顯示。

10.Autofocus屬性 (Autofocus Attribute)

同樣，HTML5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應該是「選擇」或聚焦，默認情況下，我們現在可以利用自動聚焦屬性。

inputtype="text"name="someInput"placeholder="Douglas Quaid"required autofocus

>

11.Audio支持 (Audio Support)

目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中，元素被引進來了。

audioautoplay="autoplay"controls="controls"

>

sourcesrc="file.ogg"

/>

sourcesrc="file.mp3"

/>

ahref="file.mp3"

>

Download this file.

a

>

audio

>

當使用元素時請記得包含兩種音頻格式。FireFox想要.ogg格式的文件，而Webkit瀏覽器則需要.mp3格式的。和往常一樣，IE是不支持的，且Opera 10及以下版本只支持.wav格式。

12.Video支持 (Video Support)

HTML5中不僅有元素，而且還有。然而，和類似，HTML5中並沒有指定視頻解碼器，它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支持H.264格式的視頻，Firefox和Opera是堅持開源Theora和Vorbis格式。因此，指定HTML5的視頻時，你必須提供這兩種格式。

videocontrols preload

>

sourcesrc="cohagenPhoneCall.ogv"type="video/ogg; codecs= vorbis, theora "

/>

sourcesrc="cohagenPhoneCall.mp4"type="video/mp4; codecs= avc1.42E01E, mp4a.40.2 "

/>

p

>

Your browser is old.

ahref="cohagenPhoneCall.mp4"

>

Download this video instead.

a

>

p

>

video

>

13.視頻預載 (Preload attribute in Videos element)

當用戶訪問頁面時這一屬性使得視頻得以預載。為了實現這個功能，可以在元素中加上preload="preload"或者只是preload。

videopreload

>

14.顯示控制條 (Display Controls)

如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內指定controls屬性。

videopreload controls

>

15.正規表達式 (Regular Expressions)

在HTML4或XHTML中，你需要用一些正規表達式來驗證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標籤處直接插入一個正規表達式。

formaction=""method="post"

>

labelfor="username"

>

Create a Username:

label

>

inputtype="text"

name="username"

id="username"

placeholder="4 10"

pattern="[A-Za-z]"

autofocus

required

>

buttontype="submit"

>

Go

button

>

form

>

覺得本文對你有幫助？請分享給更多人

關注「網頁設計自學平台」快速提升技能

每天學一點·小白快速進階大神

微信ID：WEB_wysj

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！