HTML5与HTML4的比较
HHTML5封裝一些標(biāo)簽和屬性，方便了開發(fā)。
1 <form> 2 <p> 3 <label>Username:<input name="search" type="text" id="search" autofocus></label> 4 </p> 5 </form> HTML5的方式獲取輸入焦點(diǎn) 1 <form> 2 <p> 3 <label>Username:<input name="search" type="text" id="search"></label> 4 </p> 5 <script type="text/javascript"> 6 document.getElementById("search").focus(); 7 </script> 8 </form> HTML4的方式獲取輸入焦點(diǎn)?
對(duì)于頁面結(jié)構(gòu)，HTML5將不同結(jié)構(gòu)使用不同的標(biāo)記進(jìn)行區(qū)分，這點(diǎn)在HTML4的時(shí)候，基本上都用div標(biāo)簽，然后使用class屬性進(jìn)行區(qū)分
?
- HTML5的出現(xiàn)是為了解決以下問題
瀏覽器之間的兼容性問題
文檔結(jié)構(gòu)不明確
Web應(yīng)用程序功能受限
?
- HTML5與HTML4在語法上的一些區(qū)別
1、DOCTYPE聲明
2、指定字符集編碼
HTML4:
<meta http-equiv="CONTENT-TYPE" content="text/html;charset=UTF-8">HTML5:
<meta charset="UTF-8">兩種方式都能用，但不能混用
?
- 可以省略標(biāo)記的元素
不允許寫結(jié)束標(biāo)記：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
可以省略結(jié)束標(biāo)記：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
可以完全省略標(biāo)記：html、head、body、colgroup、tbody
?
- 具有boolean值得屬性
這些屬性，只要寫上了就比表示true，如：
<input checked type="checkbox">還有readonly、disabled等
?
- 新增結(jié)構(gòu)元素
section：表示頁面中的一個(gè)內(nèi)容區(qū)塊，如：章節(jié)、頁眉、頁腳等，可以與h1~h6元素結(jié)合使用，標(biāo)示文檔結(jié)構(gòu)
article：標(biāo)示頁面中的一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，如博客中的一篇文章或報(bào)紙上的一篇文章
aside：標(biāo)示article元素之外，但是相關(guān)的，輔助信息
header：頁面中的一個(gè)內(nèi)容區(qū)塊或整個(gè)頁面的標(biāo)題
hgroup：對(duì)整個(gè)頁面或頁面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行整合
footer：整個(gè)頁面或頁面中內(nèi)容區(qū)塊的腳注，一般包含作者的姓名、創(chuàng)作日期以及作者的聯(lián)系方式的等
nav：頁面中的導(dǎo)航鏈接
figure：表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元，使用figcaption元素在figure元素組添加標(biāo)題
?
- 其他新增元素
video：視頻
audio：音頻
embed：插入各種多媒體格式
mark：在視覺上需要高亮的文字
progress：表示運(yùn)行中的進(jìn)程，一般用于顯示js耗時(shí)的時(shí)間函數(shù)
time：日期或時(shí)間
ruby：ruby注釋，中文注音或字符
rt：字符的解釋或發(fā)音
rp：在ruby注釋中石油
wbr：軟換行，當(dāng)父級(jí)元素寬度不夠的時(shí)候才換行
canvas：繪圖的畫布
command：命令按鈕，如單選按鈕、復(fù)選框、復(fù)選按鈕
details：表示用戶要求得到并且可以得到的細(xì)節(jié)信息。可以與summary元素配合使用
datalist：下拉列表，與input配合使用
datagrid：可選數(shù)據(jù)列表，樹形列表的形式顯示
keygen：生成密匙
output：表示不同類型的輸出
source：為媒介元素定義媒介資源
menu：菜單列表
?
- 新增的input類型，也就是input元素中，type的屬性
email、url、number、range、date、month、week、time、datetime、datetime-local
?
對(duì)于新增的元素或?qū)傩?#xff0c;在使用前最好查閱一下瀏覽器的支持情況
?
- 廢除的元素
能夠用CSS代替的一般都廢除了，如 basefont、big、center、font、s、strike、tt、u等
不再使用frame框架：frameset、frame、noframes元素。因?yàn)閒rame框架對(duì)網(wǎng)頁的可用性存在負(fù)面影響。HTML5中只支持iframe框架
?
- 新增的表單屬性
autofocus：自動(dòng)獲取焦點(diǎn)
placeholder：提示用戶輸入
form：聲明屬于哪個(gè)表單，然后可以放在頁面的任何位置，不一定非要在表單內(nèi)
required：表示是否必填
list：與datelist元素配合使用，生成下拉框
multiple：允許一次上傳多個(gè)文件
?
其他屬性詳見HTML5
?
- 全局屬性
contentEditable：是否允許編輯元素內(nèi)的內(nèi)容
1 <!DOCTYPE html>2 <html>3 <head lang="en">4 <meta charset="UTF-8">5 <title></title>6 <script type="text/javascript">7 function getInnerHTML(){8 alert(document.getElementById("price1").innerHTML+"\n"+document.getElementById("price2").innerHTML); 9 } 10 </script> 11 </head> 12 <body> 13 <table contenteditable="true"> 14 <tr contenteditable="false"> 15 <td>書籍</td> 16 <td>單價(jià)</td> 17 </tr> 18 <tr> 19 <td contenteditable="false">ajax權(quán)威指南</td> 20 <td id="price1">10元</td> 21 </tr> 22 <tr> 23 <td contenteditable="false">JavaScript權(quán)威指南</td> 24 <td id="price2">20元</td> 25 </tr> 26 <tr> 27 <td><button οnclick="getInnerHTML()">提交</button></td> 28 </tr> 29 </table> 30 </body> 31 </html> contenteditable 屬性允許直接編輯html元素的內(nèi)容，然后可以通過innerHTML獲取編輯完后的值該屬性具有繼承的特點(diǎn)，也就是說如果父元素設(shè)置了為true，那么子元素默認(rèn)也都是true，除非手動(dòng)修改為false
頁面一旦刷新后，編輯的數(shù)據(jù)就會(huì)恢復(fù)成編輯前的
如果想要對(duì)頁面的全部元素都設(shè)置為可編輯的，可以這么干 1 <body οndblclick="document.designMode='on';"> 2 ....... 3 ....... 4 ....... 5 </body>
?
designMode：指定整個(gè)頁面是否可編輯
hidden：隱藏
speelcheck：拼寫檢查
tabindex：tab獲取焦點(diǎn)
<input tabindex="1"><input tabindex="2">
<input tabindex="3">
?
轉(zhuǎn)載于:https://www.cnblogs.com/sherrykid/p/4591430.html
總結(jié)
以上是生活随笔為你收集整理的HTML5与HTML4的比较的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怀孕梦到两只老鼠是什么意思
- 下一篇： 项目回顾1-图片上传-form表单还是b