溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“html5中增加的重要新特性和內容有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5中增加的重要新特性和內容有哪些”吧!
其實說白了 html5 也就是人為定義的一些規則和新的 api 的集合。下面我就介紹一些開發常用的 html5 新特性：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html><video src="視頻地址" controls="controls" autoplay="autoplay" >
your browser does not support the video tag //可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。
</video>video 標簽具有以下屬性：
1.autoplay:如果出現該屬性，則視頻在就緒之后馬上播放
2.controls:如果出現該屬性，則向用戶顯示控件，比如播放按鈕
3.height：設置視頻播放器高度
4.loop：如果出現該屬性，則會重復播放
5.preload：如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用“autoplay”，則忽略該屬性。
6.src：視頻地址
7.width：設置視頻播放器寬度
Web Storage 的概念和 cookie 相似，區別是它是為了更大容量存儲設計的。Cookie 的大小是受限的，并且每次你請求一個新的頁面的時候 Cookie 都會被發送過去，這樣無形中浪費了帶寬，另外 cookie 還需要指定作用域，不可以跨域調用。
1.localStorage: 用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
2.sessionStorage: 用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此 sessionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲。
Web Storage 擁有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端開發者自己封裝 setCookie，getCookie。
sessionStorage.setItem("name", "三十億少女的夢");
console.log(sessionStorage.getItem("name")); //三十億少女的夢在 HTML5 出來之前，我們用 div 構建頁面，但是這些 div 都沒有實際意義。我們只能通過 id 等屬性認為賦予它一些身份。為了便于開發者觀察和 seo（搜索引擎優化），html5 推出了這些語義化標簽。
header：代表“網頁”或“section”的頁眉。
footer：代表“網頁”或“section”的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。
hgroup：代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將 h2 到 h7 元素放在其內，譬如文章的主標題和副標題的組合
nav：元素代表頁面的導航鏈接區域。用于定義頁面的主要導航部分。
aside：被包含在 article 元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標簽、名次解釋等。
section：代表文檔中的“節”或“段”，“段”可以是指一篇文章里按照主題的分段；“節”可以是指一個頁面里的分組。
article：最容易跟 section 和 div 容易混淆，其實 article 代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的 widget 小工具。（特殊的section）
html5 中添加了 date(日期選擇)、time(時間選擇)、email(郵箱地址)、url（鏈接）等表單控件，我個人非常喜歡這些添加。比如 email 控件，以前我們沒有這個控件的時候要判斷用戶輸入的是不是 email 格式只能通過js正則表達式來判斷，但 h6 之后只用在 input 的 type 屬性寫上 email 就可以了，但這只是基本的判斷不能保證百分百過濾，為了安全，后臺還是要進行 email 格式判斷的。
<input type="email" />
html5 之后你的 script 和 link 不用再加 type 屬性，一樣可以工作正常，但是為了不出差錯，最好還是加上。
你的任何 dom 節點只要加上 contenteditable="true"就可以變得可編輯，也是一個很棒的屬性添加,用這個你可以模擬 textarea。
<input type="text" placeholder="請輸入姓名" />
<!--當這個輸入框為空時框內顯示：請輸入姓名 -->
<input type="text" required /> <!--輸入框為必填，否則不能提交表單 -->
<input type="text" autofocus /> <!--進入頁面，自動聚焦到這個input -->
<input type="text" name="country_code" pattern="[A-z]{3}"> <!--輸入值必須與正則匹配-->使用 mark 標簽可以使你的內容有醒目的標記，從 mark 這個單詞相信你就能猜出這個標簽大概用途
HTML5 引用的 range 類型可以創建滑塊，它接受 min, max, step 和 value 屬性，可以使用 css 的 :before 和 :after 來顯示 min 和 max 的值 ，但是顯示的不是很友善。
<style>
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
input[type=range]:after {
content: attr(max);
padding-left: 5px;}
}
</style>
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ /> 到此，相信大家對“html5中增加的重要新特性和內容有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
