HTML5

一、什么是HTML5

（一）HTML5簡介

1、萬維網的核心語言、標准通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改，作為新HTML語言，具有新的元素、屬性和行為。

（1）XHTML 可拓展超文本標記語言

XHTML是一種增強了的HTML，它的可拓展性和靈活性將適應未來網絡應用更多的需求。

（2）HTML5

它有更大的技術集，允許更多樣化和強大的網站和應用程序。

增加了新特征：語義特征、本地存儲特征，設備兼容特性，設備兼容特性，連接特性，網頁多媒體特性，三維，圖形及特效特性，性能與集成特性，CSS3特性。

這個集合有時稱為HTML5和朋友，通常縮寫為HTML5。

（二）廣義的HTML

1、廣義的HTML5是HTML5本身+CSS3+JavaScript

2、這個集合有時稱為HTML5和朋友，通常縮寫為HTML5

3、雖然HTML5的一些特性仍然不被某些瀏覽器支持，但是它是一種發展趨勢

二、H5新增語義化標簽

（一）標簽語義化

1、以前布局，我們基本用 div 來做，div 對於搜索引擎來說，是沒有語義的。

（二）新增語義化標簽

1、  <header> 頭部標簽

　　<nav> 導航標簽

　　<article> 內容標簽

　　<section> 塊級標簽

　　<aside> 側邊欄標簽

　　<footer> 尾部標簽

2、注意：

（1）這種語義化標准主要針對搜索引擎的；

（2）這些新標簽頁面中可以使用多次的；

（3）在IE9，需要把這些元素轉換為塊級元素；

（4）其實，我們移動端更喜歡使用這些標簽。

三、H5新增多媒體標簽

1、多媒體標簽包含兩個，具體如下：

（1）音頻：<audio>

（2）視頻：<video>

使用它們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用落后的 flash 和其他瀏覽器插件。

（一）<audio>音頻標簽

HTML5在不使用插件的情況下也可以原生的支持音頻格式文件的播放，當然支持格式是有限的。

1、音頻格式

當前，<audio>元素支持三種音頻格式：

格式	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

 

 

 

 

 

2、<audio>音頻標簽語法格式

（1）

<audio src="文件地址" controls="controls"></audio>

（2）

<audio controls="controls">

        <!-- audio里面一定不要寫src 瀏覽器音樂會播放不出來 -->

        <source src="media/snow.mp3" type="audio/mpeg">

        <source src="media/snow.ogg" type="audio/ogg">

        <!-- 您的瀏覽器不支持audio播放 -->

 </audio>

3、<audio>音頻標簽常見屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放
src	url	要播放的音頻的URL

 

 

 

 

 

 

（二）<video> 視頻標簽

1、<video>元素支持三種視頻格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

 

 

 

 

 

2、

（1）

<video src="media/video.mp4" controls="controls"></video>

（2）

<video controls="controls" width="300">

        <source src="media/video.ogg" type="video/ogg">

        <source src="media/video.mp4" type="video/mp4">

        <!-- 您的瀏覽器暫不支持video標簽 播放視頻 -->

    </video>

3、<video>視頻標簽常見屬性

屬性	值	描述
autoplay	autoplay	視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放方案）
controls	controls	向用戶顯示播放控件
width	pixels（像素）	設置播放器寬度
height	pixels（像素）	設置播放器寬度
loop	loop	播放完是否繼續播放該視頻，循環播放
preload	auto（預先加載視頻） none（不應加載視頻）	規定是否預先加載視頻（如果有了autoplay就忽略該屬性）
src	url	視頻url地址
poster	lmgurl	加載等待的畫面圖片
muted	muted	靜音播放

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

（三）總結

1、音頻標簽和視頻標簽使用基本一致

2、瀏覽器支持情況不同

3、谷歌瀏覽器把音頻和視頻自動播放禁止了

4、我們可以給視頻標簽添加 muted 屬性可以自己播放視頻，音頻不可以

5、視頻標簽是重點，我們經常設置自動播放，不使用controls控件，循環和設置大小屬性

四、H5新增input表單、表單屬性

1、

屬性值	說明
type="email"	限制用戶輸入必須為Email類型
type="url"	限制用戶輸入必須為URL類型
type="date"	限制用戶輸入必須為日期類型
type="time"	限制用戶輸入必須為時間類型
type="month"	限制用戶輸入必須為月類型
type="week"	限制用戶輸入必須為周類型
type="number"	限制用戶輸入必須為數字類型
type="tel"	手機號碼
type="search"	搜索框
type="color"	生成一個顏色選擇表單

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、

屬性	值	說明
required	required	表單擁有該屬性表示其內容不能為空，必填
placeholder	提示文本（占位符）	表單的提示信息，存在默認值將不顯示
autofocus	autofocus	自動聚焦屬性，頁面加載完成自動聚焦到指定表單
autocomplete	off/on	當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。 默認已經打開，如autocomplete="on" 關閉 autocomplete="off" ---需要放在表單內同時加上name屬性 ---同時成功提交過
multiple	multiple	可以多選文件提交