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. Spring Boot 升级框架版本 Spring 5.2 Invalid argument syntax org.springframework.core.env.Simple CommandLineArgs

    Invalid argument syntax org.springframework.core.env.Simple CommandLineArgs Parser.parse 具体问题应该是启动的c ...

  2. FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮

    一.Flutter FloatingActionButton 介绍 FloatingActionButton 简称 FAB,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航   child ...

  3. Codeforces Round #624 (Div. 3) F

    题意: 给出n的质点,带着初位置和速度: 如果中途两点可以相遇dis(i,j)=0: 如果不可以相遇,mindis(i,j): 求n个点的两两质点最小dis(i,j)之和 思路: 因为当初位置x和速度 ...

  4. 使用docker容器时遇到的2个问题

    最近项目在centOS7服务器上用docker部署了几个服务,在运行的时候发现,总是过一段时间,容器内的根目录就变为只读而无法写入了. 经过调查都是因为docker/devicemapper/devi ...

  5. 问题:宿主机访问不到虚拟机内的docker容器

    问题描述:初学Docker,主机Windows 10,虚拟机Cent OS7 运行了一个docker容器(Tomcat7),宿主机无法访问容器运行的服务. 问题原因:宿主机无法访问docker容器ip ...

  6. Python学习之列表篇

    浮点数类型:round(x,d)可对浮点数进行四舍五入,科学计数法:aeb表示a*10^bpython大小写敏感整数类型:无范围限制,pow(x,y)表示x^y,想算多大算多大,四种表示形式:十进制, ...

  7. CentOS6.5_x64卸载系统原有MySQL

    1.查看系统是否存在MySQL的版本 rpm -qa | grep mysql 2.删除老版本的开头文件和库(rpm -e --nodeps XXX) rpm -e --nodeps mysql-5. ...

  8. 结构体数组排序:1004 成绩排名 【pta】

    结构体模板 struct STU { string name; //用string可以代替char string num; int s; }; sort是用快速排序实现的,属于不稳定排序,stable ...

  9. 简单桶排序(Bucket Sort)

    1.基本思想 桶排序是将待排序集合中处于同一个值域的元素存放在同一个桶中1. 2.算法设计2 假设有一个班级有5个人,这次期末他们分别考了5分,2分,4分,5分,8分(满分为10分).需要将这些分数从 ...

  10. EditPlus 注册码在线生成

    虽然editplus现在不常用,但是它轻便,我还是很喜欢的,推荐一个注册码生成器,真是好好用 http://www.jb51.net/tools/editplus/ 点击链接输入自己想要的用户名,就能 ...