HTML5与HTML4的比较
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的比较的更多相关文章
- HTML5和HTML4的主要区别 [转]
原文:http://www.cnblogs.com/jiangyehu1110/archive/2013/07/10/3182277.html 1. HTML5标准还在制定中 这头一个不同之处显而易见 ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- HTML-HTML5+CSS3权威指南阅读（一、HTML5与HTML4之间的区别）
一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 面试中的一些小问题之html5和html4的区别？
HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...
- HTML5系列：HTML5与HTML4的区别
1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-// ...
- html5与html4的区别，如何一眼区分
还是在面试过程中遇到的这个问题,但是当时感觉回答的不是很全面,回来以后自己做的总结: 以上这个问题如果教大家看源码,可能一眼很直观的就能认出,那个是html4,那个是html5,但是面试的时候问道这个 ...
- Html5 与 Html4 的区别
HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...
- WEB前端之HTML5~HTML5与HTML4的区别
推出的理由及目标 WEB浏览器存在的问题包括以下三点 世界知名浏览器厂商对HTML5的支持 语法的改变 DOCTYPE的声明 XHTML的DOCTYPE声明方式 HTML4的DOCTYPE声明方式 H ...
- HTML5与HTML4的区别-----文档结构
HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句 HTML5仅规定了一种: <!DOCTYPE html> 2. ...
随机推荐
- Android（java）学习笔记91：Eclipse中代码提示去掉@override，不然就报错！
1. Eclipse中提示去掉@Override 把项目下载下来后有@Override的注释的方法会报错,如果把@Override去掉就不报错了.经过查阅后发现:@override注释在jdk1.5环 ...
- python_32_文件操作1
#目录里先创建一个yesterday文件 '''对文件操作流程: 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 ''' print(open('yesterday',enc ...
- JS控制台的使用
1.快捷键F12可直接进入控制台(或者单机右键->检查)用于bug调试 2.控制台如图: Elements:表示所有的js元素 Console:常用的有如下几个功能: ①console.log: ...
- [JZOJ] 5935. 小凯学数学
由Noip2018初赛的知识得,a|b + a&b = a+b 设计一个区间dp,设\(f[l][r][x]\)表示区间\([l,r]\)能否构成\(x\),数据不大,转移暴力枚举 复杂度\( ...
- split 分割压缩文件
1.普通tar压缩命令 tar -zcvf cm-11.tar.gz cm-11 //将cm-11文件夹压缩成cm-11.tar.gz 2.压缩后的文件太大,需要将cm-11.tar.gz分割成N个指 ...
- Linux IO调度方法
目录 I/O调度的4种算法 I/O调度程序的测试 ionice IO调度器的总体目标是希望让磁头能够总是往一个方向移动,移动到底了再往反方向走,这恰恰就是现实生活中的电梯模型,所以IO调度器也被叫做电 ...
- 第2章 CentOS7集群环境配置
目录 2.1 关闭防火墙 2.2 设置固定IP 2.3 修改主机名 2.4 添加用户 2.5 修改用户权限 2.6 新建目录 2.7 安装JDK 1.卸载系统自带的JDK 2.安装JDK 2.8 克隆 ...
- Leetcode 106. 从中序与后序遍历序列构造二叉树
题目链接 https://leetcode.com/problems/construct-binary-tree-from-inorder-and-postorder-traversal/descri ...
- firewall-cmd 防火墙命令详解 及 TCP Wrappers
firewall-cmd 常用参数及作用 参数 作用 --get-default-zone 查询默认的区域名称 --set-default-zone=<区域名称> 设置默认的区域,使其永久 ...
- LINQ体验(9)——LINQ to SQL语句之Insert/Update/Delete操作
我们继续讲解LINQ to SQL语句,这篇我们来讨论Insert/Update/Delete操作.这个在我们的程序中最为常用了.我们直接看例子. Insert/Update/Delete操作 插入( ...