HTML5笔记1——HTML5的发展史及标签的改变
??? 記得第一次接觸HTML5還是在《聯(lián)信永益》實(shí)習(xí)那會(huì)兒（2011），當(dāng)時(shí)一個(gè)項(xiàng)目技術(shù)選型的時(shí)候面臨兩種選擇，分別是Silverlight和HTML5，那是用的最新的IE瀏覽器版本還是IE9，而IE9才剛剛開始支持HTML5。后來考慮到當(dāng)時(shí)各個(gè)版本的瀏覽器對HTML5的支持都不怎么好，最終公司還是選擇了Silverlight，想不到多年以后Silverlight沒落了，HTML5卻隨著移動(dòng)互聯(lián)網(wǎng)的興起而煥發(fā)出強(qiáng)大的活力。
??? 在慶幸自己當(dāng)年沒有選擇進(jìn)Silverlight小組的同時(shí)，也不由得擔(dān)憂，微軟的腳步太快了，跟著它走一不小心就容易扯著蛋。每次微軟新弄出來一項(xiàng)什么技術(shù)，總是大肆宣傳和推廣，可往往幾年不到，就采用一種新的技術(shù)，可以完全替代過去的技術(shù)，然后還要安慰廣大開發(fā)者說新的YY不會(huì)替代舊的XX，而實(shí)際情況可能就是微軟其實(shí)已經(jīng)在默默準(zhǔn)備甚至已經(jīng)開始停止更新XX技術(shù)了。
??? 微軟就像一盒巧克力，你永遠(yuǎn)不知道他下一步要新弄出來什么技術(shù)，也永遠(yuǎn)不知道，他的哪一項(xiàng)技術(shù)什么時(shí)候被遺棄。
HTML5的發(fā)展路程
一路走來，我們回顧一下HTML的發(fā)展之路
- HTML1.0 – 在1993年6月發(fā)為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標(biāo)準(zhǔn))
- HTML 2.0 –1995年11月作為RFC 1866發(fā)布,在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)
- HTML 3.2 –1996年1月14日,W3C推薦標(biāo)準(zhǔn)
- HTML 4.0 –1997年12月18日,W3C推薦標(biāo)準(zhǔn)
- HTML 4.01(微小改進(jìn)) – 1999年12月24日,W3C推薦標(biāo)準(zhǔn)
- ISO/IEC 15445:2000("ISO HTML")—2000年5月15日發(fā)布,基于嚴(yán)格的HTML 4.01語法,是國際標(biāo)準(zhǔn)化組織和國際電工委員會(huì)的標(biāo)準(zhǔn)
- XHTML 1.0 – 發(fā)布于2000年1月26日,是W3C推薦標(biāo)準(zhǔn),后來經(jīng)過修訂于2002年8月1日重新發(fā)布
- XHTML 1.1 – 于2001年5月31日發(fā)布
- XHTML 2.0
HTML的BOSS們
W3C： World Wide Web Consortium???? 萬維網(wǎng)聯(lián)盟
???????? 從HTML1.0到HTML4.01
???????? 從XHTML1.0-XHTML2.1
WHATWG: Web Hypertext Application Technology Working Group ???? （Web 超文本應(yīng)用技術(shù)工作組 - WHATWG）
HTML 5是什么
HTML 5 ≈ HTML+CSS 3+Javascript+API
標(biāo)準(zhǔn)的改變
標(biāo)準(zhǔn)的改變--不是SGML和XML
1、HTML5 并不是定義為SGML或者XML的應(yīng)用程序。
2、在HTML5中并不存在有效性檢查，取而代之的是用規(guī)范來檢測規(guī)范的一致性
3、HTML5的DTD聲明中不需要使用DTD文件
4、擁有十分松散的編寫手法，但不是沒有底線
標(biāo)準(zhǔn)的改變—松散的語法
p? 不允許寫的結(jié)束符的標(biāo)簽：
area、base、br、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
p? 可以Q省略結(jié)束符的標(biāo)簽：
li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th
p? 可以完全省略的標(biāo)簽：
html、head、body、colgroup、tbody
標(biāo)準(zhǔn)的改變—HTML5的未來
對于HTML5來說，既是一種進(jìn)步，也是一種妥協(xié)。
HTML5誕生之初的目的就是為了向下兼容。所以我們大可不必為了HTML5來臨而恐慌，因?yàn)?#xff1a;
HTML5支持松散的語法。
???????? 這種語法極大地兼容了編程人員的不規(guī)范代碼，同時(shí)保證渲染的效果不會(huì)改變。
???????? HTML4.01版本及語法依然有效。
HTML5也沒有認(rèn)為XHTML是錯(cuò)誤的。(XHTML5)
???????? 這種語法既支持XML的簡潔標(biāo)記，也認(rèn)為XML的編寫方式是正確的
???????? XHTML版本及嚴(yán)格的XML編寫都是有效的。????????
支持HTML5的瀏覽器
目前支持HTML5的瀏覽器有:
HTML5的推廣網(wǎng)站
http://www.html5cn.org/
http://www.html5china.com/
http://www.runoob.com/html/html5-intro.html/
HTML標(biāo)簽的改變
HTML標(biāo)簽的改變
1、 新的文檔類型聲明(DTD)
文檔類型聲明
HTML 5的DTD聲明為:
??? <!doctype html>
??? <!DOCTYPE html >等也是正確的，因?yàn)镠TML語法是不區(qū)分大小寫的。
在編寫HTML5文檔時(shí)，要求指定文檔類型，以確保瀏覽器能在HTML5的標(biāo)準(zhǔn)模式下進(jìn)行渲染。在我們用VS新建html頁面時(shí)，VS都會(huì)再HTML界面中自動(dòng)添加<!DOCTYPE html>標(biāo)簽。
2、新增的HTML5標(biāo)簽
新增的HTML5標(biāo)簽-結(jié)構(gòu)標(biāo)簽
結(jié)構(gòu)標(biāo)簽：(塊狀元素) 有意義的div
???????? <article>? 標(biāo)記定義一篇文章
???????? <header> 標(biāo)記定義一個(gè)頁面或一個(gè)區(qū)域的頭部
???????? <nav> ????????????? 標(biāo)記定義導(dǎo)航鏈接
???????? <section>????????? 標(biāo)記定義一個(gè)區(qū)域
???????? <aside> ? 標(biāo)記定義頁面內(nèi)容部分的側(cè)邊欄
???????? <hgroup> 標(biāo)記定義文件中一個(gè)區(qū)塊的相關(guān)信息
???????? <figure> 標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題????
???????? <figcaption>???? 標(biāo)簽定義 figure 元素的標(biāo)題。
???????? <footer> ???????? 標(biāo)記定義一個(gè)頁面或一個(gè)區(qū)域的底部
???????? <dialog>?? 標(biāo)記定義一個(gè)對話框(會(huì)話框)類似微信
新的結(jié)構(gòu)標(biāo)簽帶來的是網(wǎng)頁布局的改變及提升對搜索引擎的友好
新增的HTML5標(biāo)簽-多媒體標(biāo)簽
多媒體交互標(biāo)簽
???????? <video> 標(biāo)記定義一個(gè)視頻
???????? <audio> 標(biāo)記定義音頻內(nèi)容
?????? ? <source> 標(biāo)記定義媒體資源
???????? <canvas> 標(biāo)記定義圖片
???????? <embed> 標(biāo)記定義外部的可交互的內(nèi)容或插件 比如flash
HTML5的多媒體標(biāo)簽的出現(xiàn)意味著富媒體的發(fā)展以及支持不使用插件的情況下即可操作媒體文件，極大地提升了用戶體驗(yàn)
新增的HTML5標(biāo)簽-Web應(yīng)用標(biāo)簽
<menu>命令列表
<menuitem>menu命令列表標(biāo)簽 FF（嵌入系統(tǒng)）
<command> menu標(biāo)記定義一個(gè)命令按鈕
<meter>狀態(tài)標(biāo)簽(實(shí)時(shí)狀態(tài)顯示:氣壓、氣溫)C、O
<progress>狀態(tài)標(biāo)簽 (任務(wù)過程:安裝、加載) C、F、O
<datalist> 為input標(biāo)記定義一個(gè)下拉列表,配合option F、O
<details> 標(biāo)記定義一個(gè)元素的詳細(xì)內(nèi)容 ，配合dt、dd?? C
新增的HTML5標(biāo)簽-其他標(biāo)簽
注釋標(biāo)簽
<ruby> 標(biāo)記定義 注釋或音標(biāo)
<rp> 告訴那些不支持 Ruby元素的瀏覽器如何去顯示
<rt> 標(biāo)記定義對ruby的注釋內(nèi)容文本
其他標(biāo)簽
<keygen> 標(biāo)記定義表單里一個(gè)生成的鍵值(加密信息傳送)O、F
<mark> 標(biāo)記定義有標(biāo)記的文本 (黃色選中狀態(tài))
<output> 標(biāo)記定義一些輸出類型,計(jì)算表單結(jié)果配合oninput事件
<time> 標(biāo)記定義一個(gè)日期/時(shí)間 目前所有主流瀏覽器都不支持
3、刪除的HTML標(biāo)簽
純表現(xiàn)的元素：
basefont，big，center，font, s，strike，tt，u；
對可用性產(chǎn)生負(fù)面影響的元素：
frame，frameset，noframes；
產(chǎn)生混淆的元素：
acronym ，applet，isindex，dir。
4、重新定義的HTML標(biāo)簽
| HTML元素 | HTML5中的意義 |
| <b> | 代表內(nèi)聯(lián)文本，通常是粗體，沒有傳遞表示重要的意思 |
| <i> | 代表內(nèi)聯(lián)文本，通常是斜體，沒有傳遞表示重要的意思 |
| <dd> | 可以同details與figure一同使用，定義包含文本，dialog也可用 |
| <dt> | 可以同details與figure一同使用，匯總細(xì)節(jié)，dialog也可用 |
| <hr> | 表示主題結(jié)束，而不是水平線，雖然顯示相同 |
| <menu> | 重新定義用戶界面的菜單，配合commond或者menuitem使用 |
| <small> | 表示小字體，例如打印注釋或者法律條款 |
| <strong> | 表示重要性而不是強(qiáng)調(diào)符號 |
5、嶄新新的頁面布局
傳統(tǒng)div+CSS頁面布局方式
?
HTML5布局方式
?
Demo代碼如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">header {height: 50px;background-color: lightblue;}border {width: 1px;color: blue;}nav {width: 100%;height: 30px;background-color: lightblue;line-height: 30px;}nav ul li {width: 120px;float: left;}section {float: left;width: 70%;height: 500px;}aside {float: left;width: 28%;height: 500px;}footer {width: 100%;height: 30px;line-height: 30px;clear: both;background-color: black;color: white;text-align: center;}</style> </head> <body><header>這里是頭部</header><nav><ul><li>首頁</li><li>文章</li><li>日記</li><li>相冊</li></ul></nav><div><section><article><h2>李白：春思</h2><small>作者：李白</small>燕草如碧絲，秦桑低綠枝。當(dāng)君懷歸日，是妾斷腸時(shí)。春風(fēng)不相識，何事入羅幃？</article><details><summary>杜甫：望岳</summary><mark>作者：杜甫</mark><dd>岱宗夫如何，齊魯青未了。</dd><dd>造化鐘神秀，陰陽割昏曉。</dd><dd>蕩胸生層云，決眥入歸鳥。</dd><dd>會(huì)當(dāng)凌絕頂，一覽眾山小。</dd></details><span contextmenu="candan">右鍵單擊進(jìn)入百度</span><menu type="context" id="candan"><menuitem label="百度" οnclick="alert('這是百度官網(wǎng)')" icon="http://www.baidu.com/img/baidu_sylogo1.gif"></menuitem></menu><meter min="0" max="10" value="5" low="3" high="7"></meter><progress max="100" value="0" id="pro"></progress><hr /><ruby>鄒<rp>(</rp><rt>zou</rt><rp>)</rp></ruby></section><aside><article><h2>陳子昂：登幽州臺歌</h2>《登幽州臺歌》 作者：陳子昂前不見古人，后不見來者。念天地之悠悠，獨(dú)愴然而淚下。【注解】： １、幽州：古十二州之一，現(xiàn)今北京市。 ２、悠悠：渺遠(yuǎn)的樣子。 ３、愴然：悲傷凄涼。 ４、淚：眼淚。【韻譯】：先代的圣君，我見也沒見到， 后代的明主，要等到什么時(shí)候？想到宇宙無限渺遠(yuǎn)，我深感人生短暫， 獨(dú)自憑吊，我涕淚縱橫凄惻悲愁！</article><hr /><dialog><dt>唐僧：悟空，你又調(diào)皮了，觀音姐姐的月光寶盒怎么能亂扔呢？</dt><dd>悟空：...(看著)</dd></dialog><p>熱門</p><hgroup><h3>2016年最流行粵語歌曲</h3><h3>2016年最熱門的事件</h3></hgroup></aside></div><footer>版權(quán)所有 @2016</footer><script>var pro = document.getElementById('pro');setInterval(function () {pro.value += 1;}, 100);</script> </body> </html>Demo運(yùn)行結(jié)果如下：
注意：代碼沒有完全按照圖上面來，因?yàn)橐话愣?#xff0c;在整個(gè)界面header和footer標(biāo)簽最好只放一個(gè)，還有h1標(biāo)簽也是，這樣做的目的是方便搜索引擎進(jìn)行識別。
Div和新結(jié)構(gòu)標(biāo)簽的區(qū)別和意義
所有的HTML5結(jié)構(gòu)標(biāo)簽本質(zhì)上來說就是一個(gè)div標(biāo)簽，只不過給它們賦予了特殊的意義，讓人一眼就能看明白，這個(gè)標(biāo)簽表示什么意思，僅此而已。
個(gè)人學(xué)習(xí)經(jīng)驗(yàn)：學(xué)HTML5和學(xué)HTML以及CSS、JS一樣，在于多寫多練，熟能生巧。很少有其它行業(yè)像IT行業(yè)一樣技術(shù)更新那么快，我們應(yīng)該有選擇有目的的學(xué)習(xí)，區(qū)分哪些是要牢記的，哪些只需了解的，哪些可以直接不學(xué)的。學(xué)習(xí)任何一門技術(shù)，都幾乎不可能把其所有的東西都學(xué)會(huì)，且不說它本身就是在不斷變化和完善的，當(dāng)然，除非你天賦異稟。其實(shí)許多東西，都不需要記住，因?yàn)槲覀兛梢圆槲臋n就可以了，但是一些出現(xiàn)頻率很高的，還是要記住，總不能每次要用的時(shí)候都去查文檔吧，那樣太影響工作效率。我認(rèn)為學(xué)習(xí)也是一種投資，既然如此，那肯定得學(xué)有價(jià)值的東西。在我看來，如果說學(xué)的東西一生都用不上，我覺得那就是就是學(xué)無所用，浪費(fèi)光陰。
轉(zhuǎn)載于:https://www.cnblogs.com/jiekzou/p/6227213.html
總結(jié)
以上是生活随笔為你收集整理的HTML5笔记1——HTML5的发展史及标签的改变的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webpack之font-awesome
- 下一篇： 前端通信：ajax设计方案（五）---