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