HTML5与HTML4的比较

HHTML5封装一些标签和属性，方便了开发。

1     <form>
2         <p>
3             <label>Username:<inputname="search"type="text"id="search"autofocus></label>
4         </p>
5     </form>

HTML5的方式获取输入焦点

1     <form>
2         <p>
3             <label>Username:<inputname="search"type="text"id="search"></label>
4         </p>
5         <scripttype="text/javascript">
6 document.getElementById("search").focus();7         </script>
8     </form>

HTML4的方式获取输入焦点

对于页面结构，HTML5将不同结构使用不同的标记进行区分，这点在HTML4的时候，基本上都用div标签，然后使用class属性进行区分

HTML5的出现是为了解决以下问题

浏览器之间的兼容性问题

文档结构不明确

Web应用程序功能受限

HTML5与HTML4在语法上的一些区别

1、DOCTYPE声明

2、指定字符集编码

HTML4:

<metahttp-equiv="CONTENT-TYPE"content="text/html;charset=UTF-8">

HTML5:

<metacharset="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，如：

<inputchecked 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的比较相关推荐

html4与html5效果,浅谈HTML5与HTML4的10个关键区别
HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站.如果你同时使用HTML4和HTML5的话,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多.虽然H ...
前端用html5还是html4,Web前端面试题第四道—Html5与html4的异同
HTML5新特性 HTML5 中一些有趣的新特性: ①用于绘画的 canvas 元素: ②用于媒介回放的 video 和 audio 元素: ③对本地离线存储的更好的支持: ④新的特殊内容元素,比如 ...
HTML5与HTML4的区别
HTML5与HTML4的区别 1.推出理由及目标 2.语法的改变 3.新增的元素和废除的元素 4.新增的属性和废除的属性 5.全局属性 1.推出理由及目标: HTML5 的出现,对于WEB来说意义是非 ...
HTML5需要学html4吗,html5和html4的区别是什么
HTML5与HTML4的区别 A.简化的语法更简单的doctype声明是HTML5里众多新特征之一.现在你只需要写,这就行了.HTML5的语法兼容HTML4和XHTML1,但不兼容SGML. B. ...
HTML5对比HTML4带来的新变化
HTML5入门 HTML5是HTML的最新版本,目标是更好地开发网络应用程序. HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性. 本文将对HTML5做一个大体的介绍. HTML5能做什么 ...
html5跟html4有什么区别,Html5和Html4的区别
html5解决了:web浏览器之间的兼容性很低.文档结构不明确等功能.一.Html5和Html4的区别 (1)语法的改变: 内容类型:文件名还是 .html或 .htm:文件类型还是 texttype ...
怎么区分css还是html5,一文读懂HTML5和HTML4区别！
HTML5自从2010年正式推出后,它以惊人速度发展,现在主流浏览器基本上都支持了HTML5(除了个别的特性在浏览器兼容有问题),这说明HTML5越来越受到欢迎.可以预测不久的将来HTML5会成为we ...
HTML5与HTML4的差异对比(1)
1.对比html4和html5新增比较重要的功能 canvas标签元素(可结合js驱动其成为绘画容器,支持画点.线.面.圆.过度色效果等等) 一直期待且存在较大争议的 video 和 audio 标签 ...
HTML5与HTML4的区别（译文）
2019独角兽企业重金招聘Python工程师标准>>> 本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一 ...

HTML5与HTML4的比较

HTML5与HTML4的比较相关推荐

最新文章

热门文章