一、HTML5简介

（二）HTML5的发展历程

HTML5 基础（1）—— HTML5标签的变化

（二）支持浏览器

目前支持的浏览器有

IE9+
Firefox
Opear
Safari
chrome
其他一些非主流浏览器

（三）WebAPP

跨平台

HTML5是唯一一个支持PC、Mac、iPhone、Android等主流平台的跨平台语言。
HTML5开发比原生APP开发成本低

APP的改变

Native APP （原生APP） ——》WebAPP（web网页APP） ——》Hybrid APP（混合模式）

HTML5新增

新增离线存储、更丰富的表单、js线程、socket、标准扩展embed、CSS3、流媒体多多媒体引擎（Audio、Video、Canvas、webgl等）

二、 <!DOCTYPE >标签的改变 <!DOCTYPE>声明是必须在HTML文档的第一行，它不是<HTML>标签，它是指示web浏览器对页面使用哪个HTML版本进行编写的指令。

常用的DOCTYPE声明：
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 4.01 Strict    （严格版）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 5  
<!DOCTYPE html>(不需要引入DTD)

三、新增标签

（一）结构标签

结构标签（块状元素）就是有意义的div

标签	说明
<article>	标记定义一篇文章
<header>	标记一个区域的头部
<nav>	标记定义导航链接
<saction>	标记定义一个区域
<aside>	标记定义页面的内容部分的侧边栏（像淘宝，京东左侧菜单）
<hgroup>	标记定义文件中一个区块的相关信息
<figure>	标记定义一组包裹多媒体内容以及它们的标题
<figcaption>	标记定义figure元素的标题
<footer>	标记一个区域的底部
<dialog>	标记定义一个对话框（会话框）类似微信

结构标签使用注意事项：

不要滥用结构标签
header/section/aside/article/footer 这些标签不要嵌套自己本身
标签使用级别：header/section/footer > aside/article/figure/hgroup/nav > div/figcaption

（二）多媒体标签

标签	说明
<video>	标记定义一个视频
<audio>	标记定义音频内容
<source>	标记定义媒体资源
<canvas>	一个画布，使用API，可画出酷炫的效果
<embed>	标记定义外部的可交互的内容或插件，比如flash

1.<audio>标签

<audio src="./audio/demo.mp3" autoplay="autoplay" loop="-1" controls="controls">
    建议跟换浏览器
</audio>

audio属性

属性	值	说明
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop/-1	无线重复播放
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

支持3种音频格式：ogg、MP3、WAV
标签中的文字会在浏览器不支持该标签的时候显示出来

source标签解决浏览器兼容音频格式的问题

<audio autoplay="autoplay" loop="loop" controls="controls">
    <source src="./audio/demo.mp3" type="audio/mpeg">
    <source src="./audio/demo.ogg" type="audio/ogg">
    <source src="./audio/demo.wav" type="audio/wav">
    建议跟换浏览器
</audio>

这样不同的浏览器可以选择自己所兼容的音频格式

2.<video>标签

<video src="./video/demo1.mp4" autoplay="autoplay" controls="controls">
    当前浏览器版本过低不支持HTML5标签
</video>

video属性

属性	说明
autoplay	设置该属性值为autoplay，页面加载后能自动播放视频
controls	设置值为controls，视频视窗的底部会出现控制栏，如果视频资源使用<source>标签引入，则控制栏会出现在视频窗外面
loop	设置值为loop 或-1，视频会无线循环播放
src	要播放视频的路径，如果引用<source>标签，则该属性不用设置
width	设置视频播放器的宽度
height	设置视频播放器的高度
支持格式	MP4 WebM Ogg

source标签解决浏览器兼容视频格式的问题

<video autoplay="autoplay" controls="controls">
    <source src="./video/demo1.mp4" type="video/mp4">
    <source src="./video/demo1.webm" type="video/webm">
    <source src="./video/demo1.ogg" type="video/ogg">
    当前浏览器版本过低不支持HTML5标签
</video>

各种各种支持的浏览器:
格式    IE     Firefox      Opera      Chrome       Safari
Ogg     No     3.5+         10.5+      5.0+       No
MPEG4  9.0+      No       No        5.0+        3.0+
WebM    No      4.0+       10.6+     6.0+          No

3.<embed>标签

<embed src="./flash/demo1.swf" width="400" height="300"></embed>

是用于在网页上插入flash的

（三）Web应用标签

1.状态标签

标签	说明
<meter>	显示状态：气压、气温
<progress>	显示任务过程：安装、加载

浏览器兼容：

<meter;> firefox、Chrome、opera、Safari6
<progress> IE10+，firefox、Chrome、opera、Safari6

（1）meter

小明的成绩是否在60~80之间
<meter value="70" min="0" max="100" low="60" high="80" optimum="75"></meter>

HTML5 基础（1）—— HTML5标签的变化

（2）progress

<progress value="80" max="100">当前浏览器不支持</progress> 只写max属性，会有加载的效果

HTML5 基础（1）—— HTML5标签的变化

2.列表标签

标签	说明
<datalist>	为input标记定义一个下拉列表，配合option使用
<details>	标记定义一个元素的详细信息，配合summary使用

（1）<datalist>标签

<input placeholder="请选择学习的语言" list="langage"/>
<datalist id="langage">
    <option value="c++">c++</option>
    <option value="c#">c#</option>
    <option value="java">java</option>
    <option value="javascript">javascript</option>
</datalist>

HTML5 基础（1）—— HTML5标签的变化
可以代替select标签，并且拥有不少select没有的效果。

（2）<details>标签

<details open="open">
    <summary>从百草园到三味书屋</summary>
    <p>我家的后面有一个很大的园，相传叫作百草园。现在是早已并屋子一起卖给朱文公的子孙了，连那最末次的相见也已经隔了七八年，其中似乎确凿只有一些野草；但那时却是我的乐园。。
    </p>
</details>

HTML5 基础（1）—— HTML5标签的变化

（四）其他标签

1.注释标签

标签	说明
<ruby>	标记定义注释或音标
<rt>	标记定义对ruby的注释内容文本
<rp>	告诉不支持ruby元素的浏览器如何显示
兼容	ie9+、其他主流浏览器

<p>
    <ruby>魑<rt>chi</rt></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
    <ruby>魅<rt>mei</rt></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
    <ruby>魍<rt>wang</rt></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
    <ruby>魉<rt>liang</rt></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<!-- 兼容不支持ruby标签的浏览器 -->
<p>
    <ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
    <ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
    <ruby>魍<rp>(</rp><rt>wang</rt><rp>)</rp></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
    <ruby>魉<rp>(</rp><rt>liang</rt><rp>)</rp></ruby>&nbsp;&nbsp;&nbsp;&nbsp;
</p>

HTML5 基础（1）—— HTML5标签的变化

2.标记文本标签

标签	说明
mark	标记定义有标记的文本（黄色选中状态）

<p>你是猴子派来的<mark>逗比</mark>吗？</p>

HTML5 基础（1）—— HTML5标签的变化

2.输出标签

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

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 

<form oninput="totalPrice.value = parseInt(price.value) * parseInt(number.value)">
    <input type="text" id="price" value="5000">*
    <input type="text" id="number" value="1"> = 
    <output name="totalPrice" for="price number"></output>
</form>

HTML5 基础（1）—— HTML5标签的变化

四、删除的标签

纯表现的元素：Basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframes（真要使用框架的话，请使用iframe）
产生混淆的元素：acronym、applet、isindex、dir

五、重新定义的标签

HTML5 基础（1）—— HTML5标签的变化

秒客网

HTML5 基础（1）—— HTML5标签的变化

一、HTML5简介

（二）HTML5的发展历程

（二）支持浏览器

（三）WebAPP

跨平台

APP的改变

HTML5新增

二、 <!DOCTYPE >标签的改变 <!DOCTYPE>声明是必须在HTML文档的第一行，它不是<HTML>标签，它是指示web浏览器对页面使用哪个HTML版本进行编写的指令。

三、新增标签

（一）结构标签

（二）多媒体标签

1.<audio>标签

audio属性

source标签解决浏览器兼容音频格式的问题

2.<video>标签

video属性

source标签解决浏览器兼容视频格式的问题

3.<embed>标签

（三）Web应用标签

1.状态标签

（1）meter

（2）progress

2.列表标签

（1）<datalist>标签

（2）<details>标签

（四）其他标签

1.注释标签

2.标记文本标签

2.输出标签

四、删除的标签

五、重新定义的标签

相关文章