由于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. 雅虎(yahoo)前端优化十四条军规

    第一条.尽可能的减少 HTTP 的请求数 (Make Fewer HTTP Requests ) http请求是要开销的,想办法减少请求数自然可以提高网页速度.常用的方法,合并css,js(将一个页面 ...

  2. Tomcat部署web应用程序

    对Tomcat部署web应用的方式总结,常见的有以下四种: 1.[替换ROOT目录] 最简单的一种方法,webapps目录下面ROOT文件夹的文件为你的文件,然后输入localhost:8080/首页 ...

  3. Emacs下的中文输入

    Emacs如此优秀的编辑器,如果输入中文不顺畅,不免遗憾.可惜现实是折腾很久也未必用得称心如意,作为一个重度(也许是中毒) Emacs使用者,根据个人经验写下此文,希望对同道中人有所帮助. 在Wind ...

  4. linux head、tail、sed、cut、grep、find

    head用法: head 参数 文件名 -cn:显示前n个字节    -n:显示前n行 例子:head -c20 1.txt 显示1.txt文件中前20个字符 ls |  head -20:显示前20 ...

  5. WINDOWS下如何安装GCC(转载http://nirvana.cublog.cn;作者:北斗星君(黄庠魁))

    第一章 在视窗操作系统下的GCC 第一节 GCC家族概览 GCC 是一个原本用于 Unix-like 系统下编程的编译器.不过,现在 GCC 也有了许多 Win32 下的移植版本.所以,也许对于许多 ...

  6. 忠告初学者学习Linux系统的8点建议

    导读 新手或者说即将要入坑的小伙伴们,常常在QQ群或者在Linux论坛问一些问题,不过,其中大多数的问题都是很基础的.例如:如何给添加的用户归属用户组,复制整个文件到另一个目录下面,磁盘合理划分,甚至 ...

  7. bzoj3504: [Cqoi2014]危桥

    题意:给出一个图,有的边可以无限走,有的只能走两次(从一头到另一头为一次),给定两个起点以及对应的终点以及对应要走几个来回,求判断是否能完成. 先来一个NAIVE的建图:直接限制边建为容量1,无限制为 ...

  8. windows内核编程 白话设备栈

    在ntddk.h中定义了该函数原型: #if (NTDDI_VERSION >= NTDDI_WINXP) NTKERNELAPI NTSTATUS IoAttachDeviceToDevice ...

  9. 简单研究Android View绘制三 布局过程

    2015-07-28 17:29:19 这一篇主要看看布局过程 一.布局过程肯定要不可避免的涉及到layout()和onLayout()方法,这两个方法都是定义在View.java中,源码如下: /* ...

  10. JavaScript 继承

    许多OO语言都支持两种继承方式,接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.由于在ECMAScript中,函数没有签名,无法实现接口继承,只支持实现继承,而且其实现继承主要 ...