當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5概要与新增标签

發(fā)布時(shí)間：2023/12/13 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5概要与新增标签小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、HTML5概要

1.1、為什么需要HTML5

HTML4陳舊不能滿足日益發(fā)展的互聯(lián)網(wǎng)需要，特別是移動(dòng)互聯(lián)網(wǎng)。為了增強(qiáng)瀏覽器功能Flash被廣泛使用，但安全與穩(wěn)定堪憂，不適合在移動(dòng)端使用（耗電、觸摸、不開放）。

HTML5增強(qiáng)了瀏覽器的原生功能，符合HTML5規(guī)范的瀏覽器功能將更加強(qiáng)大，減少了Web應(yīng)用對(duì)插件的依賴，讓用戶體驗(yàn)更好，讓開發(fā)更加方便，另外W3C從推出HTML4.0到5.0之間共經(jīng)歷了17年，HTML的變化很小，這并不符合一個(gè)好產(chǎn)品的演進(jìn)規(guī)則。

1.2、什么是HTML5

HTML5指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。HTML5是HTML最新版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。目標(biāo)是替換1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到匹配當(dāng)代的網(wǎng)絡(luò)需求。

1.3、HTML5現(xiàn)狀及瀏覽器支持

大部分主流瀏覽器已經(jīng)支持HTML5，但是各個(gè)瀏覽器支持的方式以及語法有所差異性。支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9
及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等現(xiàn)代瀏覽器。

支持得分：

如果想了解更多請(qǐng)看本文的兼容性那一節(jié)的內(nèi)容。

1.4、HTML5優(yōu)點(diǎn)與缺點(diǎn)

1.4.1、優(yōu)點(diǎn)

1、網(wǎng)絡(luò)標(biāo)準(zhǔn)統(tǒng)一、HTML5本身是由W3C推薦出來的。
2、多設(shè)備、跨平臺(tái)
3、即時(shí)更新。
4、提高可用性和改進(jìn)用戶的友好體驗(yàn)；
5、有幾個(gè)新的標(biāo)簽，這將有助于開發(fā)人員定義重要的內(nèi)容；
6、可以給站點(diǎn)帶來更多的多媒體元素(視頻和音頻)；
7、可以很好的替代Flash和Silverlight；
8、涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO很友好；
9、被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲。

1.5.2、缺點(diǎn)

a)、安全：像之前Firefox4的web socket和透明代理的實(shí)現(xiàn)存在嚴(yán)重的安全問題，同時(shí)web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b)、完善性：許多特性各瀏覽器的支持程度也不一樣。
c)、技術(shù)門檻：HTML5簡化開發(fā)者工作的同時(shí)代表了有許多新的屬性和API需要開發(fā)者學(xué)習(xí)，像web worker、web socket、web storage 等新特性，后臺(tái)甚至瀏覽器原理的知識(shí)，機(jī)遇的同時(shí)也是巨大的挑戰(zhàn)
d)、性能：某些平臺(tái)上的引擎問題導(dǎo)致HTML5性能低下。
e)、瀏覽器兼容性：最大缺點(diǎn)，IE9以下瀏覽器幾乎全軍覆沒。

二、新增的結(jié)構(gòu)標(biāo)簽

2.1、新增的結(jié)構(gòu)標(biāo)簽

在HTML4.01中div被廣泛用于各種布局環(huán)境在，沒有明確的定義，HTML5為了SEO將div語義化了，新增加結(jié)構(gòu)標(biāo)簽如下：

a)、section元素?
表示頁面中的一個(gè)內(nèi)容區(qū)塊,比如章節(jié)、頁眉、頁腳或頁面的其他部分。可以和h1、 h2……等元素結(jié)合起來使用，表示文檔結(jié)構(gòu)。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。

b)、article元素?
表示頁面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容。比如一篇文章。

c)、aside元素?
表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。

d)、header元素?
表示頁面中一個(gè)內(nèi)容區(qū)塊或真?zhèn)€頁面的標(biāo)題。

e)、hgroup元素?
表示對(duì)真?zhèn)€頁面或頁面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。

f)、footer元素?
表示整個(gè)頁面或頁面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來說，他會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。

g)、nav元素?
表示頁面中導(dǎo)航鏈接的部分。

h)、figure元素?
表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。例如：?
<figure>?
<figcaption>PRC</figcaption>?
<p>The People's Republic of China was born in 1949</p>?
</figure>?
HTML4中常寫作?
<dl>?
<h1>prc</h1>?
<p>The People's Republic of China was born in 1949</p>?
</dl>

HTML 結(jié)構(gòu)

CSS 表現(xiàn)

JavaScript 行為

示例：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>京東創(chuàng)始人劉強(qiáng)東一元年薪背后的O2O棋局</title><style type="text/css">* {margin: 0; /*所有元素的外邊距為零*/padding: 0;font-family: "microsoft yahei";}ul li {list-style: none;}#container {width: 900px;margin: 0 auto;}header {height: 80px;line-height: 80px;background: dodgerblue;color: #fff;padding: 0 20px;}header h1 {font-size: 30px;font-weight: normal;}#main {font-size: 14px;}#main article {float: left;width: 70%;margin-right: 3%;}#main article hgroup{height: 70px;}#main article p{line-height: 22px;margin-bottom: 5px;text-indent: 26px;}#main aside {float: left;width: 27%;}#main aside li{height: 26px;line-height: 26px;overflow: hidden;}#main aside li a{text-decoration: none;border-bottom: 1px dashed #ccc;}#main aside li a:hover{background:orangered;color:white;}footer{clear: both;height:70px ;line-height: 70px;background: #FF4500;color: #fff;text-align: center;}footer nav li{display: inline-block;margin-right: 8px;}</style></head><body><div id="container"><header><h1>中國電子商務(wù)研究中心</h1></header><section id="main"><article><hgroup><h2>京東創(chuàng)始人劉強(qiáng)東一元年薪背后的O2O棋局</h2><h3>2015年10月06日14:50 中國電子商務(wù)研究中心</h3></hgroup><section><p>京東董事會(huì)今年5月份批準(zhǔn)了針對(duì)公司董事長兼CEO劉強(qiáng)東的一項(xiàng)為期10年的薪酬計(jì)劃。計(jì)劃規(guī)定，10年內(nèi)，劉強(qiáng)東每年只能領(lǐng)到1元現(xiàn)金形式底薪和零元現(xiàn)金形式獎(jiǎng)金。難道劉強(qiáng)東就因此連杯奶茶也買不起了嗎?這么想就太天真了。根據(jù)京東的股權(quán)激勵(lì)計(jì)劃，劉強(qiáng)東被授予涉及2600萬股京東A級(jí)普通股的購買權(quán)，涉及股票規(guī)模約占京東總股本的0.9%，只有當(dāng)每股ADS達(dá)到或超過33.4美元(相當(dāng)于京東股價(jià)不低于16.7美元)時(shí)，劉強(qiáng)東才能將這部分股權(quán)進(jìn)行套現(xiàn)。</p><p>按每股16.7美元計(jì)算，劉強(qiáng)東獲得的這部分股權(quán)將價(jià)值4.34億美元，相當(dāng)于27.8億人民幣。在這10年內(nèi)，公司不得再向劉強(qiáng)東授予額外股權(quán)。其實(shí)“一元年薪”不僅并非劉強(qiáng)東首創(chuàng)，甚至已經(jīng)成為企業(yè)面臨危機(jī)時(shí)的一種常見路數(shù)。諸多企業(yè)都采取過“一元年薪”，比如三一重工。2008年經(jīng)濟(jì)危機(jī)時(shí)，三一重工[微博]全體董事降薪90%，并接受高管自愿降薪申請(qǐng)，三一重工[微博]董事長梁穩(wěn)根甚至主動(dòng)申請(qǐng)將自己的年薪降至一元。</p><p>對(duì)于目前并沒有表現(xiàn)得很困難的京東來說，中國電子商務(wù)協(xié)會(huì)研究中心專家委員唐興通認(rèn)為，“一元年薪”只是對(duì)于團(tuán)隊(duì)管理上的一種姿態(tài)而，并沒有什么特別實(shí)際的用處。而上述股權(quán)激勵(lì)計(jì)劃更多的是為了穩(wěn)定投資者的信心穩(wěn)定投資者信心或許是為了緩解其在最新一期財(cái)務(wù)報(bào)告中持續(xù)虧損所帶來的負(fù)面影響8月7日，京東發(fā)布了2015年第二季度財(cái)報(bào)。據(jù)財(cái)報(bào)顯示，雖然京東第二季度交易總額為1145億元，同比增長82%，凈收入則達(dá)到459億元，同比增長61%。</p><p>盡管京東業(yè)績?cè)鲩L強(qiáng)勁，但其似乎還沒有找到有效的盈利模式。在去年第二季度凈虧損5.825億元的京東，今年該季度依然凈虧損5.104億元，凈利潤率為-1.1%。該公司在2015年第二季度非美國通用會(huì)計(jì)準(zhǔn)則下凈虧損為1570萬元人民幣(約250萬美元)，凈利潤率為-0.03%。但事情卻未向著京東期望的方向發(fā)展。據(jù)資料顯示，以8月5日京東收盤價(jià)34.32美元計(jì)，至8月12日，短短5個(gè)交易日，其最低價(jià)格下探至25.64美元，最大跌幅高達(dá)25.29%;按其總股本27.35億股計(jì)，5個(gè)交易日，京東蒸發(fā)市值237億美元，蒸發(fā)比例高達(dá)39%。</p></section></article><aside><ul><li><a href="zt/2015zhifu/">讓紅包再多飛一會(huì)——新春土豪玩轉(zhuǎn)紅包霸主地位花落誰家</a></li><li><a href="zt/2015taobao/">淘寶PK國家監(jiān)管部門“假貨“爭議引發(fā)“史上最大危機(jī)”？</a></li><li><a href="zt/2015expectation/">2015電子商務(wù)展望</a></li><li><a href="zt/2014pandian/">2014年度中國電子商務(wù)產(chǎn)業(yè)鏈系列盤點(diǎn)專題 </a></li><li><a href="zt/20141111/">六年歷程、上市首秀：電商鏖戰(zhàn)“雙11”全程直播大型專題報(bào)道 </a></li><li><a href="zt/2014shcb/">2014上半年電商上市公司財(cái)報(bào)解讀</a></li><li><a href="zt/wganq/">全國百家電商牽手質(zhì)檢機(jī)構(gòu) 保障網(wǎng)購產(chǎn)品質(zhì)量與安全行動(dòng)計(jì)劃</a></li><li><a href="zt/sn818/">蘇寧打響“百日會(huì)戰(zhàn)” 電商再掀促銷“風(fēng)暴”</a></li><li><a href="zt/dssj/">從電商平臺(tái)第三方賣家奢侈品售假揭電商假貨之觴引行業(yè)地震</a></li><li><a href="zt/2014World_Cup/">足球盛宴電商角逐“世界杯經(jīng)濟(jì)”</a></li><li><a href="zt/jdipo/">京東啟動(dòng)赴美IPO 優(yōu)勢與挑戰(zhàn)并存</a></li><li><a href="zt/anl_al2014/">阿里巴巴集團(tuán)提交IPO招股書招股書背后的機(jī)遇與挑戰(zhàn)</a></li><li><a href="zt/jmipo/">聚美優(yōu)品向美提交上市申請(qǐng) 招股書背后機(jī)遇與挑戰(zhàn)并存</a></li><li><a href="zt/7twlytui/">電商VS消費(fèi)者電商7天無理由退貨大閱兵</a></li><li><a href="zt/jdtx/">騰訊戰(zhàn)略投資京東國內(nèi)B2C電商市場格局將迎 "寡頭時(shí)代"</a></li><li><a href="zt/jdo2o/">京東零售業(yè)O2O戰(zhàn)略萬家便利店ERP供應(yīng)商簽約儀式</a></li><li><a href="zt/yhty/">聚焦"7天無理由退貨" 專家解讀《網(wǎng)絡(luò)交易管理辦法》、《新消法》</a></li><li><a href="zt/2014lh/">聚焦2014兩會(huì)——鼓勵(lì)電子商務(wù)創(chuàng)新發(fā)展互聯(lián)網(wǎng)金融掀新一輪顛覆潮</a></li><li><a href="zt/2014315/">倡導(dǎo)陽光誠信安全網(wǎng)購迎接電商立法元年</a></li><li><a href="zt/anl_wxqb/">微信紅包引發(fā)移動(dòng)端支付爭奪戰(zhàn) 占據(jù)高地為時(shí)尚早</a></li></ul></aside></section><footer><nav><ul><li>關(guān)于我們</li><li>聯(lián)系我們</li><li>投稿撤稿</li><li>友情鏈接</li><li>免責(zé)聲明</li><li>人才招聘</li><li>獨(dú)家專題</li><li>中心微信</li></ul></nav></footer></div></body></html> View Code

運(yùn)行結(jié)果：

2.2、新增加其它元素

2.2.1、meter

表示特定范圍內(nèi)的數(shù)值，可用于工資、數(shù)量、百分比等 max表示最大值，min表示最小值，value代表當(dāng)前值。

可以試試用js控制讓它從0變化到100。

2.2.2、time

time。表示時(shí)間值，屬性datetime強(qiáng)調(diào)時(shí)間
大會(huì)時(shí)間：<time>2015-10-6</time>

<time>2015-10-6</time> 我們?cè)诿刻煸缟?<time>8:30</time> 開始上課。我在<time datetime="2017-02-14">情人節(jié)</time>有個(gè)約會(huì)。

運(yùn)行效果：

?因?yàn)樵摌?biāo)簽是一個(gè)語義標(biāo)簽，在瀏覽器上查看時(shí)沒有特別的效果，基本與沒有設(shè)置標(biāo)簽的效果相同。

2.2.3、progress

用來表示進(jìn)度條

<h3>progress</h3><progress value="75" max="100"></progress>

max：最大值，完成時(shí)的值

value：當(dāng)前值

firefox運(yùn)行結(jié)果:

2.2.4、datalist

該標(biāo)簽定義可選數(shù)據(jù)的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。

當(dāng)與input組合時(shí)既可以完成選擇有可以輸入。

運(yùn)行結(jié)果：

3.3.1、video視頻標(biāo)簽

用于在播放視頻，電影

標(biāo)簽基本格式如下：

<video width="800" height="600" controls="controls" poster="content/1.jpg"><source src="content/iceage4.mp4" type="video/mp4"></source><source src="content/iceage4.webm" type="video/webm"></source><object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&file=myvideo.swf" /></object>當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻： <a href="content/iceage4.webm">下載視頻</a></video>

運(yùn)行效果：

source是視頻源，可以有多種，當(dāng)一種失敗時(shí)將選擇下一種，主要有如下3種：

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

格式支持情況：

?標(biāo)簽屬性：

?source子標(biāo)簽屬性：

video API方法

video API屬性

video API事件

注意：

<video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg">您的瀏覽器太老了，請(qǐng)升級(jí)，視頻下載<a href="#">地址</a></video>

多數(shù)的HTML5標(biāo)簽的innerHTML內(nèi)容是瀏覽器不支持該標(biāo)簽時(shí)顯示的內(nèi)容。

事件綁定與監(jiān)聽的區(qū)別：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>事件綁定與監(jiān)聽的區(qū)別</title></head><body><button id="btnA">按鈕A</button><button id="btnB">按鈕B</button><script type="text/javascript">var btnA = document.getElementById("btnA");var btnB = document.getElementById("btnB");btnA.onclick = function() {alert("你點(diǎn)了一下");}btnA.onclick = function() {alert("你又點(diǎn)了一下");}btnB.addEventListener("click",function(event){alert("你點(diǎn)了一下");},false);btnB.addEventListener("click",function(event){alert("你又點(diǎn)了一下");},false);</script></body></html> View Code

運(yùn)行結(jié)果：

使用on事件名的形式綁定事件后綁定會(huì)覆蓋前面綁定的事件，也就是最后一個(gè)綁定的事件會(huì)生效；

使用addEventListener綁定事件則不會(huì)覆蓋，可同時(shí)在一個(gè)元素上綁定多個(gè)相同的事件。

video API的屬性與事件示例：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Video 標(biāo)簽</title></head><body><video id="videoIce" width="800" height="600" controls="controls" poster="content/1.jpg"><source src="content/iceage4.mp4" type="video/mp4"></source><source src="content/iceage4.webm" type="video/webm"></source><object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&file=myvideo.swf" /></object> 當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻：<a href="content/iceage4.webm">下載視頻</a></video><h2><button onclick="play()">播放</button><button onclick="pause()">暫停</button><span id="msg"></span></h2><script type="text/javascript">var videoIce=document.getElementById("videoIce");function play() {videoIce.play();}function pause() {videoIce.pause();}videoIce.ontimeupdate = function() {document.getElementById("msg").innerHTML=videoIce.currentTime;}</script></body></html> View Code

運(yùn)行結(jié)果：

3.3.2、audio音頻標(biāo)簽

?audio可以實(shí)現(xiàn)播放聲音，音樂功能。

<audio src=http://baidu/demo/test.mp3 controls >
您的瀏覽器不支持audio元素
</autio>

audio標(biāo)簽的屬性，很多屬性都是與video相同的：

autoplay：true|false，如果是 true，則音頻在就緒后馬上播放。?
controls：true|false 如果是true，則向用戶顯示控件，比如播放按鈕。?
end：numeric value 定義播放器在音頻流中的何處停止播放。默認(rèn)地，聲音會(huì)播放到結(jié)尾。?
loopend：numeric value 定義在音頻流中循環(huán)播放停止的位置，默認(rèn)是 end 屬性的值。?
loopstart： numeric value 定義在音頻流中循環(huán)播放的開始位置。默認(rèn)是 start 屬性的值。?
playcount： numeric value 定義音頻片斷播放多少次。默認(rèn)是 1。?
src： url 所播放音頻的 url。?
start : numeric value 定義播放器在音頻流中開始播放的位置。默認(rèn)地，聲音在開頭進(jìn)行播放。

source子標(biāo)簽

使用source元素作為多媒體元素的子標(biāo)簽
例:
<audio>
<source src='test.mp3’ type='audio/mpeg'/>
<source src='test.ogg’ type='audio/ogg'/>
<source src='test.spx’ type='audio/ogg'/>
</audio>
使用source元素，瀏覽器在列表順序查找，直到找到一個(gè)它能播放的文件格式，找到后，就播放該文件并忽略隨后的其它元素。

audio的API與video基本一樣，下面是一個(gè)自定義調(diào)整音量的示例：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>audio標(biāo)簽</title></head><body><h2>audio標(biāo)簽</h2><audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3"><marquee><h2>換個(gè)瀏覽器吧，太老了</h2></marquee></audio><input type="range" min="0" max="100" onchange="setVolume(this)" /> <script type="text/javascript">function setVolume(obj){document.getElementById("mp3").volume=obj.value*0.01;}</script></body> </html>

運(yùn)行結(jié)果：

轉(zhuǎn)載于:https://www.cnblogs.com/huafang/p/10669597.html

總結(jié)

以上是生活随笔為你收集整理的HTML5概要与新增标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：兴业银行信用卡怎么查卡号？盘点四种快速查
下一篇： 2017年html5行业报告,云适配发布