HTML5 推出的理由

想要把目前web上存在的各种问题一并解决

  • Web浏览器之间的兼容性很低
  • 文档结构不够明确
  • Web应用程序的功能受到了限制

HTML5重新定义了浏览器的统一标准

HTML5 与 HTML4 的区别

内容类型

HTML5的文件拓展名和内容类型保持不变,内容类型依然是 text/html

DOCTYPE声明

在HTML4中要明确指出是哪个版本

在HTML5中只需要:<DOCTYPE html>,大小写都可以

指定字符编码

HTML4中:

<meta http-equiv="content-type" content="text/html;charset="UTF-8">

HTML5中:

<meta charset="UTF-8">

可以省略标记的元素

在HTML5中,很多元素的标记是可以省略的

具有boolean值的属性

具有布尔类型值的属性,不指定属性值的时候,值为属性值,或者值为空字符串的时候,都表示为 true,而下图最后一个为false

省略引号

在指定属性值的时候,大部分情况下可以省略引号(不引起歧义的情况下)

HTML5中新增的全局属性

contentEditable:元素是否可编辑,为true时,可以修改元素的内容,为false或者空字符串等时,不可编辑

designMode:控制页面所有contentEditable属性,且只能在js脚本里被修改编辑,不能直接指定(值为on时,页面可编辑,值为off时,页面不可编辑)

hidden:通知浏览器不渲染该元素,为true时,元素不可见

spellcheck:对于input等,进行语法检查

tabindex:不断按Tab键,切换选中元素,这个属性设置了元素被tab选中的顺序

HTML5中新增的元素与废除的元素

新增的结构元素

section:表示页面中的一个内容块(章节、页眉、页脚、等等),可以与h1~h6等结合使用,表示文档的结构

article:表示页面中一块与上下文不相关的独立内容(例如博客或者报纸中的一篇文章)

aside:表示article元素内容之外的,与article元素内容相关的辅助信息

header:表示页面中的一个内容区域块,通常用它来表示标题

hgroup:表示对整个页面或者页面中的一个内容块的标题进行集合

footer:表示页面中的一个区域块,通常表示一个区域的底部(通常承载作者、姓名、创作日期等一些信息)

nav:表示页面中的导航链接部分

figure:表示一段独立的流的内容,一般表示文档主题流中独立的一个单元

新增的其他元素

其中比较常用的有:video(视频)、audio(音频)、canvas(画布)等几个

新增的input元素的类型

email:邮箱

url:链接地址

number:数字

range:范围

Date Pickers:时间选择

废除的元素

  • 能使用CSS代替的元素:basefont、big、center、font、s、tt、u等
  • 不再使用frame框架
  • 只有部分浏览器支持的元素
  • 其他被废除的元素

不再使用frame框架?

frame对网页可用性存在负面的影响,HTML5目前支持iframe

新增的属性

  • 表单相关的属性
  • 链接相关的属性
  • 其他属性

废除的属性

比较多。。。自己去搜索了解

HTML5中改变了哪些东西?的更多相关文章

  1. html5中关于input使用方法的改变

    測试环境:Firefox 10.0.Safari 5.1.Opera 11.61, Chrome 14.0.835.202 自己測试的时候都有写在form表单里,有提交button验证.由于对博客使用 ...

  2. Web开发中需要了解的东西

    在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需 ...

  3. Web开发中需要了解的东西【转载】

    在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需 ...

  4. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  5. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  6. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  7. HTML5中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  8. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  9. 在HTML5中怎样实现Canvas阴影效果

    该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢! 今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML ...

随机推荐

  1. 设置idea的快捷键组合 设置为默认

    ubuntu中,idea的快捷键组合 为 “Default for GNOME”,和windows中不一样了,需要修改为“Default”:

  2. linux 下部署web 程序

    linux 下部署web 程序 1. 创建ucenter用户 一般情况下,发布应用程序都不是使用root用户的,需要创建一个普通用户来发布程序: 创建ucenter用户: useradd -d /uc ...

  3. 分布式系统:CAP 理论的前世今生

    CAP 理论是分布式系统设计中的一个重要理论,虽然它为系统设计提供了非常有用的依据,但是也带来了很多误解.本文将从 CAP 诞生的背景说起,然后对理论进行解释,最后对 CAP 在当前背景下的一些新理解 ...

  4. idea项目更改git地址

    第一步:idea打开项目,菜单栏找VCS - Git - Remotes 点进去,弹出对话框,选中,点击编辑 弹出编辑框,更改地址,点击ok 弹出输入账号密码编辑框,输入自己的账号密码,点击确认 完成 ...

  5. 6_15 给任务排序(UVa10305)<拓扑排序>

    John有n件事情要做,不幸的是这些事情并不是各自独立的,而是有相依性的.换句话说可能有某件事情一定要在另一件事情做完之后才能做.Input每组测试数据可能有好几列.第一列有2个整数n,m.(1 &l ...

  6. Vim常用按键大全

    Vim完全可以用键盘进行操作.本文将常用的按键归纳总结. 第一部分:一般模式可用的按钮,如光标移动.复制粘贴.查找替换等 移动光标的方法 h, j, k, l 光标向左,下,上,右移动 Ctrl + ...

  7. BZOJ - 2038 小Z的袜子(普通莫队)

    题目链接:小Z的袜子 题意:$n$只袜子,$m$个询问,每次回答有多大概率在$[L,R]$区间内抽到两只颜色相同的袜子 思路:普通莫队,如果两个询问左端点在一个块内,则按询问右端点排序,否则按照所在块 ...

  8. php substr的一些用法

    //去掉最后一个字符$str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr; ub ...

  9. 正确的上网姿势:ubuntu18.04使用clash

    本文为本人将CFW(Clash For Windows)上的配置文件应用到ubuntu上面的操作备忘,仅供个人使用 首先下载已经打包的clash压缩包:https://github.com/Dream ...

  10. 「JSOI2013」哈利波特和死亡圣器

    「JSOI2013」哈利波特和死亡圣器 传送门 首先二分,这没什么好说的. 然后就成了一个恒成立问题,就是说我们需要满足最坏情况下的需求. 那么显然在最坏情况下伏地魔是不会走回头路的 因为这显然是白给 ...