⑴ HTML5新特性大概包括哪些
H5新特性主要包括：
語義化標簽：header,footer,nav etc.
canvas 畫布
audio, video
drag 拖拽
本地存儲 localStorage, sessionStorage
webSocket 長連接
定位
增強型表單 input number, datalist, keygen, output, progress
svg 矢量繪圖
webWorker 實現js多進程。
⑵ HTML5前端開發原來有這么多優勢，你知道嗎
一.跨平台
在多屏年代，開發者的痛苦指數非常高，人人都期盼HTML5能扮演救星。多套代碼、不同技術工種、業務邏輯同步，這是折磨人的過程。跨平台技術在早期大多因為性能問題夭折，但中後期硬體能力增強後又會占據主流，因為跨平台確實是剛需。
二.快速迭代
移動互聯網是一個快魚吃慢魚的時代，誰對用戶的需求滿足的更快，誰的試錯成本更低，誰就擁有巨大的優勢。互聯網產品大多免費、且有網路效應，後入者搶奪用戶的難度非常大。使用原生開發，從招聘、開發、上線各個環節的效率都慢一倍以上，而且參與的人越多，溝通效率往往拖慢不止一倍。
三.減低成本
創業者融資並不容易，如何花錢更高效非常重要。如果你使用原生開發的App和競爭對手使用HTML5開發的App沒什麼區別，但你的開發成本高出一倍，我相信沒有投資人會喜歡給你投錢。
四.導流入口多
HTML5應用導流非常容易。超級App(如微信朋友圈)、搜索引擎、應用市場、瀏覽器，到處都是HTML5的流量入口。而原生App的流量入口只有應用市場。聰明的HTML5開發者當然會玩轉各種流量入口從而取得更強的優勢。
五.分發效率高
假如微信允許游戲在桌面創建快捷方式、假如游戲後續升級解決持續娛樂問題，未來不可想像。除了入口多、流量大，導流效率高也不可忽視，誰都知道：頁游和端游打同樣的廣告，廣告變用戶的轉化率，頁游遠遠高於端游。
六.HTML5對用戶的好處是：和流量入口多、分發效率高相對應的。
大幅降低使用門檻。用戶眼睛看到一個興趣點，點擊後，就應該立即開始滿足用戶需求。比如流媒體可以立即看，頁游可以立即玩。
而目前的原生應用市場，用戶需要這樣操作：選一個應用、等待下載、確認許可權、等待安裝，然後點擊打開。這樣糟糕的體驗遲早要被顛覆。不管是App、游戲還是音視頻，未來都將即點即用。誰先滿足用戶這個需求，誰就制勝。
以上就是青藤小編關於HTML5前端開發優勢的相關分享，希望對小夥伴們有所幫助，想要了解更多相關內容，歡迎大家及時在本平台查看!
⑶ html5的新特性有哪些
特性
A. 語義特性（Class：Semantic）
HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。
B. 本地存儲特性（Class: OFFLINE & STORAGE）
基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一） 和API說明文檔。
⑷ 跟HTML相比，HTML5新增了哪些新特性
HTML5跟HTML相比新增了很多內容，其中有一些特性是作為開發人員必須要了解的。
在網上有一個叫「秒秒學」的教學網站上有專門針對HTML5的課程，推薦可以觀看；
新增的具體內容如下：
1、新的文檔類型 (New Doctype)；
2、腳本和鏈接無需type；
3、更加語義化的元素；
4、佔位符(Placeholder)；
5、Audio 和Video 支持；
6、離線 & 存儲；
7、HTML5 canvas；
8、設備訪問。
⑸ HTML5真正的新特性是什麼
1. 新的Doctype
盡管使用<!DOCTYPE html>，即使瀏覽器不懂這句話也會按照標准模式去渲染
2. Figure元素
用<figure>和<figcaption>來語義化地表示帶標題的圖片
<figure>
<img src=」path/to/image」 alt=」About image」 />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. 重新定義的<small>
<small>已經被重新定義了，現在被用來表示小的排版，如網站底部的版權聲明
4. 去掉link和script標簽裡面的type屬性
5. 加/不加 括弧
HTML5沒有嚴格的要求屬性必須加引號，閉合不閉合，但是建議加上引號和閉合標簽
6. 讓你的內容可編輯，只需要加一個contenteditable屬性
7. Email Inputs
如果我們給Input的type設置為email，瀏覽器就會驗證這個輸入是否是email類型，當然不能只依賴前端的校驗，後端也得有相應的校驗
8. Placeholders
這個input屬性的意義就是不必通過javascript來做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存儲大的數據片段在客戶端（除非主動刪除），目前大部分瀏覽器已經支持，在使用之前可以檢測一下window.localStorage是否存在
10. 語義化的header和footer
11. 更多的HTML5表單特性
12. IE和HTML5
默認的，HTML5新元素被以inline的方式渲染，不過可以通過下面這種方式讓
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE會忽略這些樣式，可以像下面這樣fix:
document.createElement(」article」);
document.createElement(」footer」);
document.createElement(」header」);
document.createElement(」hgroup」);
document.createElement(」nav」);
document.createElement(」menu」);
13. hgroup
一般在header裡面用來將一組標題組合在一起，如
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
14. Required屬性
required屬性定義了一個input是否是必須的，你可以像下面這樣聲明
<input type=」text」 name=」someInput」 required>
或者
<input type=」text」 name=」someInput」 required=」required」>
15. Autofocus屬性
正如它的詞義，就是聚焦到輸入框裡面
<input type=」text」 name=」someInput」 placeholder=」Douglas Quaid」 required autofocus>
16. Audio支持
HTML5提供了<audio>標簽，你不需要再按照第三方插件來渲染音頻，大多數現代瀏覽器提供了對於HTML5 Audio的支持，不過目前仍舊需要提供一些兼容處理，如
<audio autoplay=」autoplay」 controls=」controls」>
<source src=」file.ogg」 /><!–FF–>
<source src=」file.mp3″ /><!–Webkit–>
<a href=」file.mp3″>Download this file.</a>
</audio>
17. Video支持
和Audio很像，<video>標簽提供了對於video的支持，由於HTML5文檔並沒有給video指定一個特定的編碼，所以瀏 覽器去決定要支持哪些編碼，導致了很多不一致。Safari和IE支持H.264編碼的格式，Firefox和Opera支持Theora和Vorbis 編碼的格式，當使用HTML5 video的時候，你必須都提供：
<video controls preload>
<source src=」cohagenPhoneCall.ogv」 type=」video/ogg; codecs=』vorbis, theora』」 />
<source src=」cohagenPhoneCall.mp4″ type=」video/mp4; 』codecs=』avc1.42E01E, mp4a.40.2′」 />
<p> Your browser is old. <a href=」cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>
18. 預載入視頻
preload屬性就像它的字面意思那麼簡單，你需要決定是否需要在頁面載入的時候去預載入視頻
<video preload>
19. 顯示視頻控制
<video preload controls>
20. 正則表達式
由於pattern屬性，我們可以在你的markup裡面直接使用正則表達式了
<form action=」" method=」post」>
<label for=」username」>Create a Username: </label>
<input type=」text」 name=」username」 id=」username」 placeholder=」4 <> 10″ pattern=」[A-Za-z]{4,10}」 autofocus required>
<button type=」submit」>Go </button>
</form>
21. 檢測屬性支持
除了Modernizr之外我們還可以通過javascript簡單地檢測一些屬性是否支持，如：
<script>
if (!』pattern』 in document.createElement(』input』) ) {
// do client/server side validation
}
</script>
22. Mark元素
把<mark>元素看做是高亮的作用，當我選擇一段文字的時候，javascript對於HTML的markup效果應該是這樣的：
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>」Open your Mind」</mark>. </p>
23. 什麼時候用<div>
HTML5已經引入了這么多元素，那麼div我們還要用嗎？div你可以在沒有更好的元素的時候去用。
24. 想立即使用HTML5?
不要等2022了，現在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data屬性
<div id=」myDiv」 data-custom-attr=」My Value」> Bla Bla </div>
CSS中使用：
<style>
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
<h1 data-hover-response=」I Said Don』t Touch Me!」> Don』t Touch Me </h1>
27. Output元素
<output>元素用來顯示計算結果，也有一個和label一樣的for屬性
28. 用Range Input來創建滑塊
HTML5引用的range類型可以創建滑塊，它接受min, max, step和value屬性
可以使用css的:before和:after來顯示min和max的值
<input type=」range」 name=」range」 min=」0″ max=」10″ step=」1″ value=」">
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
⑹ html5的新特性有哪些 figure
跟HMTL相比，HTML5新增了很多內容，其中有一些特性是作為開發人員必須要了解的。一個叫秒秒學的教學網站上有專門針對HTML5的課程，講解得還蠻細致，推薦你去看看。
1.新的文檔類型 (New Doctype)
HTML5簡化了文檔類型的聲明方式。HTML5的聲明方式為：<!DOCTYPE html>。
而之前的文檔類型的聲明方式是非常復雜，並且難以記憶的，比如XHTML 1.0的文檔類型是：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
2.腳本和鏈接無需type
在HTML4或XHTML中，你需要用下面的幾行代碼來給你的網頁添加CSS和JavaScript文件。
< link rel="stylesheet" href="stylesheet.css" type="text/css" />
< script type="text/javascript" src="script.js"></script>
而在HTML5中，你不再需要指定type屬性。因此，代碼可以簡化如下：
< link rel="stylesheet" href="stylesheet.css" />
< script src="script.js"></script>
3.更加語義化的元素
HTML5 新增的一些更具有語義化的新標簽來替代<div> 標簽，但它們並不提供額外的功能。這些新增的標簽是：<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>等。
4.佔位符 (Placeholder)
在HTML4或XHTML中，一般需要用JavaScript來給文本框添加佔位符。比如：通過腳本設置，當用戶開始輸入時，文本框中的文字就消失。而在HTML5中，新增的逗placeholder地功能可以很簡單的解決這個問題。
5.Audio 和Video 支持
在HTML5之前，網頁通常需要依靠第三方插件來渲染音頻。而在HTML5中，<audio>元素被引進來後，我們可以使用audio元素來渲染音頻。
在HTML5中，不僅新增渲染音頻的元素，同時也新增了支持視頻的元素video。
6.離線 & 存儲
IndexedDB 是一個為了能夠在客戶端存儲可觀數量的結構化數據，並且在這些數據上使用索引進行高性能檢索的 API。雖然 DOM 存儲 對於存儲少量數據是非常有用的，但是它對大量結構化數據的存儲就顯得力不從心了。IndexedDB 則提供了這樣的一個解決方案。
7.HTML5 canvas
<canvas> 是 HTML5 新增的元素，可使用JavaScript腳本來繪制圖形。例如：畫圖，合成照片，創建動畫甚至實時視頻處理與渲染。
8.設備訪問
HTML5新增的特性中，允許通過頁面元素訪問硬體設備，比如：[ ]攝像頭、地理位置服務、檢測方向、觸控事件等。
⑺ 前端H5的特點有哪些呢
HTML5有本地存儲的特徵，基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。
利用HTML5非常方便的在網頁上添加視頻和音頻，不需要很復雜的代碼，就能打造一款功能齊全的HTML5播放器。
CSS3的使用可以提供更多的CSS屬性，可以製作更加豐富的渲染效果。
⑻ HTML5都有哪些新特性呢
1、離線緩存。可以在關閉瀏覽器後再次打開時恢復數據，以減少網路流量。
2、音頻視頻自由嵌入，多媒體形式更為靈活。
3、地理定位。地理位置定位，讓定位和導航不再專屬導航軟體，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
4、Canvas繪圖，提升移動平台的繪圖能力。使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料，支持圖片的移動、旋轉、縮放等常規編輯。
5、豐富的交互方式。提升互動能力：拖拽、撤銷歷史操作、文本選擇等。
6、開發及維護成本低，這個相對於原生APP開發來說。更低的開發及維護成本;?使頁面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低。
7、CSS3 視覺設計師的輔助利器的支持。CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。
8、html5調用手機攝像頭和手機相冊、通訊錄等功能。
⑼ HTML5新特性有哪些，你都知道嗎
用於繪畫的canvas 元素
用於媒介回放的 video和 audio元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制項，比如 calendar、date、time、email、url、search
css3:
1. CSS3實現圓角（border-radius），陰影（box-shadow），
2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4. 增加了更多的CSS選擇器 多背景 rgba
5. 在CSS3中唯一引入的偽元素是 ::selection.
6. 媒體查詢，多欄布局
7. border-image