由于DIV的滥用,导致页面结构混乱,所以,与HTML4相比,HTML5主要新增了结构元素

新增的元素

1、结构元素:

section  表示页面中的一个块或者章节,比如页眉、页脚,或者页面中的其它部分,也可以与h1-h6搭配使用,表示文档的结构;

article   表示页面中的一块与上下文部相关的独立内容,比如文章正文;

aside    表示article以外的与article相关的辅助信息;

header  表示页面中的独立区域块,通常用来表示标题;

hgroup  对整个页面或者一个区域块的标题进行集合;

footer    表示页面中的一个区域块,通常用来表示页面的底部;

nav       页面中的导航链接部分;

figure    页面中的独立单元;

2、新增的其他元素

video    定义视频流;

audio    定义音频流;

canvas  定义画布-显示api或者javascript动画;除了这三个之外还新增了其它元素;

3、新增了input元素的类型

新增的属性

HTML5中提出了“全局属性”的概念,全局属性可以在所有元素中使用。新增的全局属性有:

contenteditable  文本可编辑 它的默认值是true,规定该文本可以被编辑,只能用于可以获取焦点的元素,在浏览器显示时,用户可以在其后面添加文本;

designmode 页面可编辑属性

hidden 元素不可见,默认值是true,规定浏览器不渲染该元素;

spellcheck 语法检查,对可编辑元素进行语法检查;

tabindex 规定元素是否获取焦点并可以指定元素的焦点顺序;

废除的元素

1、能够使用CSS代替的元素:big、center、font等;

2、不再使用frame和frameset;

除此之外还废除了相当多的属性

HTML5新增元素的更多相关文章

  1. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  2. HTML5 新增元素梳理

    HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...

  3. HTML5新增元素和移除的元素?

    新增元素: 图像Canvas 多媒体video.audio 本地存储localStorage.sessionStorage 语义化更好的内容元素aticle.header.footer.nav.sec ...

  4. html5 新增元素以及css3新特性

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  5. HTML5新增元素、标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

  6. HTML5新增元素,标签总结

    总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...

  7. Html5新增元素中Canvas 与内联SVG的比较!

    SVG与Canvas的区别与比较如下: svg:使用xml描述2D图形,canvas使用javascript描述2D图形. Canvas 是逐像素进行渲染的,在 canvas 中,一旦图形被绘制完成, ...

  8. html5--select与HTML5新增的datalist元素

    html5--select与HTML5新增的datalist元素 学习要点 掌握select元素与datalist元素的使用 select元素 用来建立一个下拉菜单选项列表 不仅可以在表单中使用,还可 ...

  9. HTML5部分元素

    Document HTML4文档声明 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

随机推荐

  1. 11.10 Taolu1234组信息汇总

    团队名称: Taolu1234 团队选题: <餐厅到店点餐系统>WEB版 团队博客地址: http://www.cnblogs.com/queenjuan/ 团队GITHUB地址: htt ...

  2. CentOS(RedHat)命令行永久修改IP地址、网关、DNS

    1.修改IP地址vim /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=eth0 #网卡名称BOOTPROTO=static #获取ip的方式(stat ...

  3. autoloader

    自动加载 $loader = new Zend_Application_Module_Autoloader(array(     'namespace' => 'Blog',     'base ...

  4. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'

    1.查看一下mysql的状态 systemctl status mariadb 2.启动mysql systemctl start mariadb

  5. angularJS 2.0 开发的简单dome

    与其说这是一个demo,不如说是一个与高手的讨教过程.虽然demo出来了,可其中有些问题我还是不太明白,如果有angularjs2.0的大神,请进来指导一番,~~~~~不甚感激. 说明第一点:我采用的 ...

  6. Atom使用到的插件

    atom-beautify atom-css-class-checker atom-css-comb atom-css-unit-converter atom-csscomb atom-csslint ...

  7. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  8. js面向对象的使用方法

    标准用法: function Sprite(){ //函数内容部设置属性 this.name='shimily'; } //原型上设置方法 Sprite.prototype.show=function ...

  9. innoDB 存储引擎

    innodb 是在mysql 5.5.8 及之后的版本中成为mysql的默认存储引擎.之前都使用myisam.   innodb 是事务型的存储引擎 支持ACID事务,适用于小事务.   1.表空间类 ...

  10. Yii2.0数据库操作增删改查详解

    1.简单查询: one(): 根据查询结果返回查询的第一条记录. all(): 根据查询结果返回所有记录. count(): 返回记录的数量. sum(): 返回指定列的总数. average():  ...