由于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. bizagi simulation 仿真学习

    Level 1 - Process Validation 1. maximum arrival count Define the number of token instances the proce ...

  2. for语句嵌套循坏性能的剖析

    日常工作中,处理数据难免会遇到遍历,for循环可能是我们用的比较多的了.本节就来探讨下for语句嵌套循环的性能,猜想下面两个语句的性能. 语句1 ; i < ; i++){ ; j < ; ...

  3. How to run a geoprocessing tool

    How to run a geoprocessing tool In this topic Running a geoprocessing tool Toolbox names and namespa ...

  4. PHP之PhpDocument的使用

    参考资料: 1.http://manual.phpdoc.org/HTMLSmartyConverter/HandS/ric_INSTALL.html 2.http://blog.csdn.net/s ...

  5. 支付宝WAP支付接口开发(Node/Coffee语言)

    此博客不更新很久了, 更新的文档在这, 有兴趣到这里围观: http://neutra.github.io/2013/%E6%94%AF%E4%BB%98%E5%AE%9DWAP%E6%94%AF%E ...

  6. guava学习--monitor

    转载:https://my.oschina.net/realfighter/blog/349924   https://my.oschina.net/realfighter/blog/349926 M ...

  7. laravel composer 指定版本

    composer create-project laravel/laravel=5.2.* --prefer-dist

  8. HDU 1712 分组背包

    ACboy needs your help Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  9. 20140701立项 移植WatermarkLabelSys

    开始移植WatermarkLabelSys,从一个版本中抽离出最原始的内核,不求完善,只求能运行.时间半个月. 顺利的话针对不同的后缀.进程开始添加规则细节,时间1个月. 在顺利的话,兼容性测试,完善 ...

  10. Eclipse+Maven创建webapp项目

    Eclipse+Maven创建webapp项目<一> 1.开启eclipse,右键new-->other,如下图找到maven project 2.选择maven project,显 ...