chenmeiqi777

HTML5学习笔记

简介

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

声明必须位于 HTML5 文档中的第一行,使用非常简单:

注意：对于中文网页需要使用声明编码，否则会出现乱码。

浏览器支持

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

实例

header, section, footer, aside, nav, main, article, figure { display: block; }

为HTML添加新元素




 
为 HTML 添加新元素

 

 

 
我的第一个标题
 
我的第一个段落。
 
我的第一个新元素

JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。

IE 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：

Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

html5shiv.js 引用代码必须放在元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

新元素

标签	描述
	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签	描述
	定义音频内容
	定义视频（video 或者 movie）
	定义多媒体资源
	定义嵌入的内容，比如插件。
	为诸如

新表单元素

标签	描述
	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
	规定用于表单的密钥对生成器字段。
	定义不同类型的输出，比如脚本的输出。

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
	定义页面独立的内容区域。
	定义页面的侧边栏内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义导航链接的部分。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除: