HTML5欢迎您！

2301_79112482

已于 2023-07-22 16:00:16 修改

阅读量70

点赞数

文章标签： html

于 2023-07-22 15:56:58 首次发布

本文链接：https://blog.csdn.net/2301_79112482/article/details/131868747

版权

七.HTML5概述

7.1HTML5含义

HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），

7.2HTML5如何起步

HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology

Working Group。

WHATWG 致力于 web 表单和应用程序（Application），而 W3C 专注于 XHTML 2.0。在 2006 年，双

方决定进行合作，来创建一个新版本的 HTML。

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

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

7.3HTML5浏览器支持(重要)

现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为行内元素自动处理。

正因为如此，你应该教会浏览器处理未知的 HTML 元素。

7.4HTML5语义化

在HTML5添加新标签的时候，提出了一个关键词 “语义”。

语义= 意义
语义元素 = 有意义的元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义元素实例：

和 - 无需考虑内容.
语义元素实例：，
，and - 清楚的定义了它的内容.

HTML5新标签的优点:

更注重于内容而不是形式：之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的
让人明白存放的是什么东西；
对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用div结合id和class使用，会出现各种各样的命名；现在定义的新标签更规范；
代码更加的简洁；

7.5HTML特性

7.5.1HTML5的改进

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

7.5.2HTML5多媒体

使用 HTML5 你可以简单的在网页中播放视频(video)与音频 (audio) 。

HTML5 video
HTML5 audio

7.5.3HTML5应用

使用 HTML5 你可以简单地开发应用

本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2

7.5.4HTML5 图形

使用 HTML5 你可以简单的绘制图形:
使用元素。
使用内联 SVG。
使用 CSS3 2D 转换、CSS3 3D 转换。
JS后讲解

7.5.5HTML5使用 CSS3

新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体

7.5.6、新语义元素

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

7.5.7HTML5表单

新表单元素, 新属性，新输入类型，自动验证。

7…5.8HTML5已移除的元素

标签	描述
acronym	定义首字母缩写,HTML5 中不支持 acronym 标签。请使用标签代替
basefont	规定页面上的默认字体颜色和字号
big	呈现大号字体效果
dir	定义目录列表,类似于ul和ol
center	对其所包括的文本进行水平居中
font	规定文本的字体、字体尺寸、字体颜色
frame	定义 frameset 中的一个特定的窗口（框架）
frameset	可定义一个框架集
noframes	可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
strike	可定义加删除线文本定义
tt	呈现类似打字机或者等宽的文本效果

八.HTML5新布局标签

header
nav
article aside
section
footer

header
nav
section
article
aside
figcaption
figure
footer

8.1HTML5 header 元素

header	元素描述了文档的头部区域。
header	元素主要用于定义内容的介绍展示区域

8.2HTML5 nav 元素

nav	标签定义导航链接的部分。
nav	元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 nav 元素中!

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

8.3HTML5 article 元素

article	标签定义独立的内容
article	元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容

<body>
    <aside>侧边框</aside>
    <article >
        <section>
            <header>
                <h1>标题：精准对接，广搭平台促就业</h1>
                <p>日期:2023-07-17 07:37</p>
            </header>
            <nav>
                <p>
                    正文:为促进高校毕业生高质量就业，今年以来，各地各部门落实落细就业优先政策，<br>
                    推动供需精准匹配。企业建立“产学研”合作机制，提前培训，帮助学生找准就业目<br>
                    标；面向高校毕业生开展系列招才引智活动，发挥本地企业集聚效应，校企合作拓宽<br>
                    招才视野；精准摸排、对接，根据学生需求开展针对性帮扶。<br>
                    今年以来，各地各部门落实落细就业优先政策，积极应对就业总量压力和结构性矛盾。<br>
                    一方面聚焦高校毕业生等青年求职意愿，针对性提供政策支持，通过培训指导帮助高<br>
                    校毕业生提升就业能力；另一方面多渠道搭建用人单位与求职者供需交流平台，结合<br>
                    企业实际，优化服务，实现高校毕业生与用人单位精准对接，帮助高校毕业生尽快实<br>
                    现就业。
                </p>
            </nav>
            <footer>
                <h1>结尾</h1>
            </footer>
            <aside>侧边框</aside>
        </section>
        <!-- 评论区 -->
        <article>
            <section>
                <header>
                    <h2>一叶知秋</h2>
                    <p>人才是经济发展的基础，留住人才，公司才能发展的越快</p>
                </header>
            </section>
        </article>
        <article>
            <section>
                <header>
                    <h2>大漠孤烟</h2>
                    <p>就业永远是供求矛盾，以后自动化越高要越严重</p>
                </header>
            </section>
        </article>
    </article>
</body>

8.4HTML5 section 元素

section	标签定义文档中的节（section、区段）。
section	比如章节、页眉、页脚或文档中的其他部分。

section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段；
一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素，
section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素；
如果article、nav、aside元素都符合某条件，那么就不要用section元素定义；
section元素中的内容可以单独存储到数据库中或输出到word文档中

8.5HTML5 aside 元素

aside	标签定义页面主区域内容之外的内容（比如侧边栏）
aside	标签的内容应与主区域的内容相关

8.6HTML5 footer 元素

footer	元素描述了文档的底部区域.元素应该包含它的包含元素
footer	一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

8.7HTML5 figure和figcaption 元素

标签规定独立的流内容（图像、图表、照片、代码等等）。
元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

figcaption	标签定义元素的标题
figcaption	元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<body>
    <figure>
        <img src="1.png" alt="The Pulpit Rock" width="100" height="20">
        <figcaption>图像</figcaption>
        </figure>
    
</body>

九.HTML5 新表单元素

9.1HTML5 新的input 类型

控件名称	type属性值	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验)，
拾色器	color	color 类型用在input字段主要用于选取颜色选择你喜欢的颜色
日期字段	date datetime ，datetime-local month， week time	定义日期字段：包含年月日定义日期字段：（UTC 时间）(仅opera支持) 定义日期字段：包含年月日时分（无时区）(仅opera支持) 定义日期字段：包含年月日时分（无时区）
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。使用min属性和max属性设置最小和最大值， step设置数字间隔如step=“3” ,那么数值间隔是3
数值滑块空间	range	用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。
电话号码框	tel	定义输入电话号码字段,但是不会进行校验
url地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

9.2HTML5 新的表单控件

9.2.1HTML5 datalist元素（重要)

datalist	元素规定输入域的选项列表。
datalist	属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用 input 元素的list属性与 datalist 元素绑定。

<body>
    <input type="text" name="list" list="mylist">
     <datalist id="mylist">
        <option value="1">一叶知秋</option> 
        <option value="2">大漠孤烟</option> 
        <option value="3">一枪穿云</option>
        
     </datalist>
    
</body>

9.3HTML5 新的表单属性

HTML5 的 form 和 <input 标签添加了几个新属性.

for 新属性：

autocomplete
novalidate

新属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

9.3.1 form/input autocompete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意 autocomplete 适用于标签，以及以下类型的标签：text, search, url, tel,email, password, datepickers, range 以及 color。
HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete )：

 <form action="" autocomplete="on" >
        名;称: <input type="text" name="111" autocomplete="off"><br>
        密;码: <input type="password" name="222"><br>
        邮;箱: <input type="email" name="333"><br>
        URL地址: <input type="url" name="444"><br>
        <input type="submit"><br>
    </form>

9.3.2 form novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
无需验证提交的表单数据：

 <form action=""  novalidate>
        名&nbsp;称: <input type="text" name="111" ><br>
        密&nbsp;码: <input type="password" name="222"><br>
        邮&nbsp;箱: <input type="email" name="333"><br>
        URL地址: <input type="url" name="444"><br>
        <input type="submit"><br>
    </form>

9.3.3 input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的标签：text, search, url, tel, email 以及password。

<form action="" autocomplete="on" novalidate>
     名称: <input type="text" name="111" placeholder="名称"   autocomplete="off"><br>
     密码: <input type="password" name="222" placeholder="密码" ><br>
     邮箱: <input type="email" name="333" placeholder="邮箱" ><br>
    URL地址: <input type="url" name="444" placeholder="url地址" ><br>
        <input type="submit"><br>
    </form>

9.3.4 input require 属性

required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的标签：text, search, url, tel, email, password, datepickers, number, checkbox, radio 以及 file。

<form action="http://www.baidu.com" autocomplete="on" id="form1">
        <!-- autofocus 属性规定在页面加载时，域自动地获得焦点。 -->
        名称: <input type="text" name="555" placeholder="张三" required autofocus><br>
        <!-- required 属性规定必须在提交之前填写输入域（不能为空）。 -->
        密码: <input type="password" name="666" placeholder="密码" required autofocus><br>
        <!-- step 属性为输入域规定合法的数字间隔。 -->
        年龄: <input type="number" name="age" step="2" min="0" max="100" required autofocus><br>

        邮箱: <input type="email" name="777" placeholder="邮箱" required autofocus><br>

        URL地址: <input type="url" name="888" placeholder="地址" required autofocus><br>

        <input type="submit" value="提交">
        <!-- formaction 属性会覆盖 <form> 元素中的action属性. -->
        <input type="submit" formaction="http://www.baidu.com" value="新提交">

    </form>

9.3.5 input step 属性

step 属性为输入域规定合法的数字间隔。
如果 step=“3”，则合法的数是 -3,0,3,6 等
提示：step 属性可以与 max 和 min 属性创建一个区域值.
**注意：**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month,time 和 week.

<form action="http://www.baidu.com" autocomplete="on" id="form1">
        年龄: <input type="number" name="age" step="2" min="0" max="100" required autofocus><br>
    </form>

9.3.6 input autofocus 属性

autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时，域自动地获得焦点。
让 “First name” input 输入域在页面载入时自动聚焦：

<form action="http://www.baidu.com" autocomplete="on" id="form1">
        <!-- autofocus 属性规定在页面加载时，域自动地获得焦点。 -->
        名称: <input type="text" name="555" placeholder="张三" required autofocus><br>
    </form>

9.3.7 input form 属性

form 属性规定输入域所属的一个或多个表单。
提示：如需引用一个以上的表单，请使用空格分隔的列表。
位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="http://www.baidu.com" autocomplete="on" id="form1">
        名称: <input type="text" name="555" placeholder="张三" required autofocus><br>
        <input type="submit" value="提交">
</form>    
        家庭地址: <input type="text" name="address" form="form1">

9.3.8 input formaction 属性

formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖元素中的action属性.
注意: formaction 属性用于 type=“submit” 和 type=“image”.
以下HTMLform表单包含了两个不同地址的提交按钮：

 <form action="http://www.baidu.com" autocomplete="on" id="form1">
        名称: <input type="text" name="555" placeholder="张三" 
        <input type="submit" value="提交">   
        <!-- formaction 属性会覆盖 <form> 元素中的action属性. -->
        <input type="submit" formaction="http://www.baidu.com" value="新提交">
</form>

9.3.9 input formenctype 属性

<form action="" method="post">
        名&nbsp;称: <input type="text" name="111"><br>
        密&nbsp;码: <input type="password" name="222"><br>

        <input type="submit" value="提交"><br>
        <!-- formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
        formenctype 属性覆盖 form 元素的 enctype 属性。
        注意: 该属性与 type="submit" 和 type="image" 配合使用。
        第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据: -->
        <input type="submit" formenctype="multipart/form-data" value="以编码格式发送表单数据">
    </form>

9.3.10 input formmethod属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了元素的 method 属性。

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

重新定义表单提交方式实例:

<form action="" method="get">
        名&nbsp;称: <input type="text" name="111"><br>
        密&nbsp;码: <input type="password" name="222"><br>

        <input type="submit" value="提交"><br>
        <!-- formmethod 属性定义了表单提交的方式。
        formmethod 属性覆盖了 <form> 元素的 method 属性。
            注意: 该属性可以与 type="submit" 和 type="image" 配合使用。 -->
        <input type="submit" formmethod="post" value="以post提交">
    </form>

9.3.11 input formnovalidate属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了元素在表单提交时无需被验证。

formnovalidate 属性会覆盖元素的novalidate属性.

注意 formnovalidate 属性与 type=“submit” 一起使用

两个提交按钮的表单(使用与不适用验证 ):

 <form action="" method="get">
        email: <input type="email" name="111"><br>

        <input type="submit" value="提交"><br>
        <!-- novalidate 属性是一个 boolean 属性.
        novalidate属性描述了 <input> 元素在表单提交时无需被验证。
        formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
            注意: formnovalidate 属性与 type="submit" 一起使用 -->
        <input type="submit" formnovalidate value="不验证提交">
    </form>

9.3.12 input heighth和width 属性

<!-- height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
    注意: height 和 width 属性只适用于 image 类型的 <input> 标签。 -->
    <form action="">
        <input type="image" src="images/股票.png" width="50" height="50"><br>
    </form>

9.3.13 input list属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

9.3.14 input multiple属性

<form action="">
        <!-- multiple 属性是一个 boolean 属性.
        multiple 属性规定 <input> 元素中可选择多个值。
        注意: multiple 属性适用于以下类型的 <input> 标签： file -->
        <input type="file" multiple>
    </form>

9.3.15 input pattern属性

<form action="">
           <!-- pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
         注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
         提示： 是用来全局 title 属性描述了模式.
         提示： 在我们的 JavaScript 教程中学习到有关正则表达式的内容 -->
        <input type="tel" placeholder="电话号码" pattern="正则表达式">
    </form>

9.3.16 input min 和max 属性 date+number

<form action="">
        <!-- min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束） -->
        <input type="date" name="day" min="2020-10-10">
        <input type="date" name="bday" max="2020-10-10">
        <input type="number" name="number" min="1" max="18">
    </form>

十.HTML5多媒体标签

10.1 HTML5 video

10.1.1 浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.

注意: Internet Explorer 8 或者更早的IE版本不支持元素。

10.1.2 HTML5 video视频 -工作？

<!-- video元素提供了 播放、暂停和音量控件来控制视频。
        同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
        <video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览的。
        <video > 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一 个可识别的格式： -->
     <video  width="200" height="300" controls >
        <source src="b视频/12f825c7aa2818a09d234541b5dcd2d3.mp4" type="video/mp4">

     </video>

10.1.3 视频格式与浏览器支持

浏览器	MP4	webm	ogg
Internet Explorer	yes	no	no
Chrome	yes	yes	yes
Firefox	yes	yes	yes
Safari	yes	no	no
Opera	yes	yes	yes

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式	mime-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

10.1.4 video标签相关属性

属性	值	描述
muted	muted	如果出现该属性，视频的音频输出为静音。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	添加播放控制及音量控制功能栏
height	pixels	指定播放器的高度，以pixel为单位。
loop	loop	如果指定，视频将重复播放。
poster	url	指定视频的预览图.
preload	auto、metadata，none	如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频
src	url	目标视频的URL.
width	pixels	指定播放器的宽度，以pixel为单位.

10.2 HTML audio音频

10.2.1 浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持元素.

注意: Internet Explorer 8 及更早IE版本不支持元素.

10.2.2 HTML5 video音频 -工作？

 <!-- control 属性供添加播放、暂停和音量控件。
    在 <audio> 与 </audio> 之间你需要插入浏览器不支持的 <audio> 元素提示文本 。
    <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件 -->
     <audio controls autoplay>
            <source src="audio/江南.mp3" type="audio/mpeg" >
     </audio>

10.2.3 音频格式和浏览器支持

浏览器	MP3	wav	ogg
Internet Explorer 9+	yes	no	no
Chrome 6+	yes	yes	yes
Firefox 3.6+	yes	yes	yes
Safari 5+	yes	yes	no
Opera 10+	yes	yes	yes

format	mime-type
MP3	audio/mpeg
ogg	audio/ogg
wav	audio/wav

10.2.4 audio 标签属性

属性	属性值	描述
autoplay	autoplay	如果指定, 音频会在准备好后立即播放
controls	controls	显示播放控制工具栏…
loop	loop	如果指定，则循环播放.
muted	muted	如果出现该属性，则音频输出为静音
preload	auto，metadata，none	如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频
src	url	目标音频的URL

10.3 source 标签

video和audio元素的子元素，可指定多个文件来源，用来解决浏览器的兼容问题

如果使用了source元素，则不可以在video和audio中设置src属性

标签为媒介元素（比如和）定义媒介资源。

十一. 其他常用HTML5新的标签

11.1 HTML文本格式化标签time+mark+ruby

<!-- <time> 标签定义日期或时间，或者两者;
    <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用mark标签。
    <ruby> 在文字上方注音，不常用，主流浏览器基本都支持,需要使用rt标签定义注音. -->
    时间: <br>
    <time> 2020年10月5日</time> <br>
    <span>2020年10月5日</span> <br>
    <mark>一叶知秋</mark><br>
    <ruby>
         饕餮 <rt>tao tie</rt>
    </ruby>

11.2 HTML5 度量条meter

属性名 + 属性作用

value 规定计量条当前默认显示值
max 规定范围的最大值,默认值为1
min 规定范围的最小值,默认值为0
low 规定被视作低的标准
high 规定被视作高标准
form 规定所属的一个或多个表单
optimum 定义度量条的最佳标准值，最佳必须在低和高之间
标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

当前内存剩余: <br>
    低:<meter max="100" min="0" value="10" low="30" high="80"></meter><br><br>
    中:<meter max="100" min="0" value="50" low="30" high="80"></meter><br><br>
    高:<meter max="100" min="0" value="90" low="30" high="80"></meter><br><br>
    最佳:<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter>

11.3 HTML5 进度条 progress

<!-- <progress> 标签定义运行中的任务进度（进程）。
    请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。
    progress元素的属性
    max属性:规定当前进度的最大值
    value属性:规定进度条当前默认显示值
    form属性:规定进度条所属的一个或多个表单
       注：max和value属性的值必须是一个类型数值,可以是小数或整数 -->
    <progress> </progress><br>
    <progress value="30" max="100"> </progress><br>

11.4 HTML5 details标签

<details>
        <!-- details" 元素用于描述有关文档或文档片段的详细信息。
        "summary" 元素应该是 "details" 元素的第一个子元素。可以为details定义         标题.标题是可见的,用户点击标题时,会显示details中的内容。

        details元素的属性:
        open属性:规定在html页面中details是可见的
        注:目前还不是所有浏览器都支持，但是之后肯定会都支持的 -->
        <summary>歌曲：稻香</summary>
        <p>
            还记得 你说家是唯一的城堡<br>
            随着稻香河流继续奔跑<br>
            微微笑 小时候的梦我知道<br>
            不要哭 让萤火虫带着你逃跑<br>
            乡间的歌谣 永远的依靠<br>
            回家吧 回到最初的美好<br>
            对这个世界如果你有太多的抱怨<br>
            跌倒了 就不敢继续往前走<br>
            为什么 人要这么的脆弱 堕落<br>
            请你打开电视看看<br>
            多少人为生命在努力勇敢的走下去<br>
            我们是不是该知足<br>
            珍惜一切就算没有拥有<br>
            还记得 你说家是唯一的城堡<br>
         </p>
    </details>