HTML是什么？

HTML5标签变化

DOCTYPE声明

定义和用法

HTML是什么？

HTML5≈HTML+CSS+Javascript+API

HTML5标签变化

DOCTYPE声明

定义和用法

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。

不是HTML标签

指示web浏览器关于页面使用哪个html版本进行编写的指令。

HTML 4.01 Strict（严格版）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional（过渡版）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset（框架结构）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

HTML 5

<!DOCTYPE html>

DTD是什么？

DTD即文档类型定义，可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。

在HTML中，DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。

各个标签有什么功能都是规定好的，这些规定就规定在XML（扩展标记语言）中。

HTML的DTD种，使用XML定义html标签规范。

HTML5为什么不引用DTD？

HTML5不基于SGML，所以不需要引用DTD

HTML元素和文档类型

http://www.w3school.com.cn/tags/html_ref_dtd.asp

HTML5新增标签

结构标签

快速生成标签的方法：标签名+Tab键

一次插入多个标签的方法：标签名*个数+Tab

注意：

header / section / aside / article / footer 最好不要嵌套使用
header / section / footer 级别 > aside / article / figure / hgroup / nav > div / figcaption，优先级大的习惯写在外层，优先级小的习惯写在内层。

多媒体标签

<video> 标记定义一个视频

src属性：视频路径

autoplay属性：使视频文件自动播放

controls属性：生成控制器

<audio> 标记定义音频内容

src属性：音频路径

autoplay属性：使音频文件自动播放

loop属性：使音频文件循环播放，取值为-1将无限次重复

controls属性：生成控制器

<source> 标记定义媒体资源

src属性：媒体资源路径

type属性：指明媒体资源类型，如音频 audio/mpge、视频 video/mp4

<canvas> 标记定义图片

<embed> 标记定义外部的可交互的内容或插件，比如flash

src属性：内容或插件路径

多媒体标签的意义：多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。

Web应用标签

状态标签

<meter> 状态标签（实时状态显示：气压、气温）

value属性：当前值（超出最大（小）值时也只能取到最大（小）值）

min属性：最小值

max属性：最大值

low属性：最小安全值——小于它出现警告颜色

high属性：最大安全值——大于它出现警告颜色

optimum属性：标准值

注意：

如果不定义最小值最大值和最优值时，将会以百分比呈现，100%就是1
value和optimum这两个属性是必不可少的

<meter value="0.75">75%</meter>
<!-- 自动填充到3/4的位置 -->

<progress> 状态标签（任务过程：安装、加载）

value属性：当前值（如果没有给定value，只给定max，进度条会左右来回滑动，给人以加载中的感觉）

max属性：最大值

浏览器兼容

<meter> Firefox、Chrome、Opera 以及Safari6支持

<progress> IE 10+、Firefox、Opera、Chrome 以及Safari 6支持

列表标签

<datalist> 为input标记定义一个下拉列表，配合option，用list和id进行绑定

<body>
<input placeholder="请选择xxxxx" list="xxlist" />
<datalist id="xxlist">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</datalist>
</body>

<details> 标记定义一个元素的详细内容，配合summary

<body>
    <details open="open">    <!-- open="open"时，默认是展开的 -->
        <summary>summary</summary>
        <p>details</p>
    </details>
</body>

浏览器兼容

<datalist> Chrome、Firefox、IE 10及更高版本支持

<details> Chrome、Safari 6、Firefox 以及更高版本的浏览器支持

其他标签

注释标签

<ruby> 标记定义注释或音标

<rt> 标记定义对ruby的注释内容文本

<rp> 告诉那些不支持ruby元素的浏览器如何去显示

<body>
    <p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>
</body>

注意：<rp>不要放在<rt>标签内

<mark> 标记定义有标记的文本（黄色选中状态）

<output> 标记定义一些输出类型，计算表单结果配合oninput事件

oninput事件可以实时监听文本框的输入变化

<body>
    <form οninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
        0<input type="text" id="price" value="5000">10000
        *<input type="number" id="number" value="1">
        =<output name="totalPrice" for="price number"></output>
        <!-- 自动输出计算结果 -->
    </form>
</body>