HTML5（1）介绍

一、HTML5基础

1999年发布 HTML 4.01
2000年发布 XHTML 1.0
2012年发布HTML5 版本
2013年发布 XHTML5

HTML 4.01 基于 SGML（Standard Generalized Markup Language 标准通用标记语言），规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML，因此不要求引用 DTD。

1、声明

<!DOCTYPE html> 声明为 HTML5 文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

尝试一下 »

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

2、将 HTML5 元素定义为块元素

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

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

header, section, footer, aside, nav, main, article, figure {

display: block; }

3、为 HTML 添加新元素

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>为 HTML 添加新元素</title>
<script>
    document.createElement("myHero")
</script>
<style>
myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
}
</style> 
</head>
 
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
<myHero>我的第一个新元素</myHero>
 
</body>
</html>

尝试一下 »

注意：Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式，可以使用" html5shiv" 来解决该问题:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]—>

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>
 
<body>
 
<h1>我的第一篇文章</h1>
 
<article>
菜鸟教程 —— 学的不仅是技术，更是梦想！！！
</article>
 
</body>
</html>

尝试一下 »

二、HTML5 新元素

1、新多媒体元素

<canvas>：标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
<audio>：定义音频内容
<video>：定义视频（video 或者 movie）
<source>：定义多媒体资源 <video> 和 <audio>
<embed>：定义嵌入的内容，比如插件。
<track>：为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

2、新表单元素

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

3、新的语义和结构元素

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

4、已移除的元素

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

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5（1） 介绍

一、HTML5基础

1、声明

2、将 HTML5 元素定义为块元素

3、为 HTML 添加新元素

二、HTML5 新元素

1、新多媒体元素

2、新表单元素

3、新的语义和结构元素

4、已移除的元素

HTML5（1）介绍