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

     <form>

         <p>

             <label>Username:<input name="search" type="text" id="search" autofocus></label>

         </p>

     </form>

HTML5的方式获取输入焦点

     <form>

         <p>

             <label>Username:<input name="search" type="text" id="search"></label>

         </p>

         <script type="text/javascript">

             document.getElementById("search").focus();

         </script>

     </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 onclick="getInnerHTML()">提交</button></td>

28         </tr>

29     </table>

30 </body>

31 </html>
contenteditable 属性允许直接编辑html元素的内容，然后可以通过innerHTML获取编辑完后的值
该属性具有继承的特点，也就是说如果父元素设置了为true，那么子元素默认也都是true，除非手动修改为false

页面一旦刷新后，编辑的数据就会恢复成编辑前的

如果想要对页面的全部元素都设置为可编辑的，可以这么干
1 <body ondblclick="document.designMode='on';">

2 .......

3 .......

4 .......

5 </body>

designMode：指定整个页面是否可编辑

hidden：隐藏

speelcheck：拼写检查

tabindex：tab获取焦点

<input tabindex="1">
<input tabindex="2">
<input tabindex="3">

HTML5与HTML4的比较的更多相关文章

  1. HTML5和HTML4的主要区别 [转]

    原文:http://www.cnblogs.com/jiangyehu1110/archive/2013/07/10/3182277.html 1. HTML5标准还在制定中 这头一个不同之处显而易见 ...

  2. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  3. HTML-HTML5+CSS3权威指南阅读（一、HTML5与HTML4之间的区别）

    一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  4. 面试中的一些小问题之html5和html4的区别？

    HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...

  5. HTML5系列：HTML5与HTML4的区别

    1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-// ...

  6. html5与html4的区别，如何一眼区分

    还是在面试过程中遇到的这个问题,但是当时感觉回答的不是很全面,回来以后自己做的总结: 以上这个问题如果教大家看源码,可能一眼很直观的就能认出,那个是html4,那个是html5,但是面试的时候问道这个 ...

  7. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  8. WEB前端之HTML5~HTML5与HTML4的区别

    推出的理由及目标 WEB浏览器存在的问题包括以下三点 世界知名浏览器厂商对HTML5的支持 语法的改变 DOCTYPE的声明 XHTML的DOCTYPE声明方式 HTML4的DOCTYPE声明方式 H ...

  9. HTML5与HTML4的区别-----文档结构

    HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句     HTML5仅规定了一种:       <!DOCTYPE html> 2. ...

随机推荐

  1. openlayers 初步认识（转）

    OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能.OpenLayers支持的地图来源 包括了WMS,GoogleMap,KaMap,MSVi ...

  2. appium---adb通过wifi连接手机

    前几天接到领导的安排,想要测试下apk的耗电量,可以通过手机adb命令进行监控手机电量的变化:但是这样如果通过USB连接手机的话,USB就会自动给手机进行充电,无法达到我们想要的结果,于是想到了通过w ...

  3. 使用ASP.NET Web API和Web API Client Gen使Angular 2应用程序的开发更加高效

    本文介绍“ 为ASP.NET Web API生成TypeScript客户端API ”,重点介绍Angular 2+代码示例和各自的SDLC.如果您正在开发.NET Core Web API后端,则可能 ...

  4. java从键盘输入学生成绩，找出最高分，并输出学生成绩等级。

    /*从键盘输入学生成绩,找出最高分,并输出学生成绩等级:成绩 >=最高分-10 等级为A成绩 >=最高分-20 等级为B成绩 >=最高分-30 等级为C其余为 等级为D 提示:先输入 ...

  5. rem适配方案

    页面布局单位计算 一般有两大类:绝对长度单位和相对长度单位 绝对长度单位: px 像素:是显示屏上显示的每一个小点,为显示的最小单位 in 英寸,1in = 96px cm 厘米,1cm = 37.8 ...

  6. Arguments Optional-freecodecamp算法题目

    Arguments Optional 1.要求 创建一个计算两个参数之和的 function.如果只有一个参数,则返回一个 function,该 function 请求一个参数然后返回求和的结果. 如 ...

  7. Eclipse 发布 JAR

    明确要生成何种类型 jar 生成工具 jar,作为包被其他程序调用 具体步骤: 选中项目文件,点右键选择 Export ,JAR File 在弹出窗口选择,导出哪些文件,并且选择好 输出 JAR 的路 ...

  8. MySQL - RIGHT JOIN

    RIGHT JOIN 关键字 RIGHT JOIN 关键字会右表 (table_name2) 那里返回所有的行,即使在左表 (table_name1) 中没有匹配的行. RIGHT JOIN 关键字语 ...

  9. ZendFramework-2.4 源代码 - 路由（类图）

    <?php return array( // console 模式 'console'=>array( 'router' => array( //.... ), ), // http ...

  10. 常用自写函数[更新ing]

    int gcd (int x, int y)//最大公约数 { return y == 0 ? x : gcd( y , x % y ); } int lcm(int x, int y)//最小公倍数 ...