HTML5与HTML4的比较

最新推荐文章于 2021-06-24 04:07:19 发布

weixin_30445169

最新推荐文章于 2021-06-24 04:07:19 发布

阅读量90

点赞数

文章标签： ruby javascript ViewUI

原文链接：http://www.cnblogs.com/sherrykid/p/4591430.html

版权

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

weixin_30445169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5与HTML4的比较

HHTML5封装一些标签和属性，方便了开发。1 <form>2 <p>3 <label>Username:<input name="search" type="text" id="search" autofocus></label>4 </p&g...
复制链接

扫一扫