• controls="controls"如果出现该属性，则向用户显示控件，比如播放按钮。 • loop="loop"播放次数，如果出现该属性，则每当音频结束时重新开始播放 • autoplay="autoplay"如果出现该属性，则音频在就绪后马上播放。 • preload="auto"如果出现该属性，则音频在页面加载时进行加载，并预备播
布局元素
➢figure元素 • figure/figcaption都是HTML5中新增的元素 • figure元素是一个媒体组合元素，也就是对其他的媒体元素进 行组合，比如：图像、图表等等
➢figcaption元素 • 用来给figure元素定义标题。
练习
阶段练习
阶段练习
footer元素（标签）
1）open:值为open，功能是定义details是否可见。 2）draggable:值为true或false，功能是设置是否为可拖动元素，默认值是false。 <details>标记的本质上允许我们在单击标签时显示和隐藏内容。
details元素与summary元素
video元素
➢video元素
➢CSS3 background-size属性支持几个关键字，例如：cover, contain等。 ➢object-fit也是类似的，但还是有些差异，具体有5个值：
• .fill { object-fit: fill; } • .contain { object-fit: contain; } • .cover { object-fit: cover; } • .none { object-fit: none; } • .scale-down { object-fit: scale-down; }
• video是html5新标签，用来定义视频，比如电影视频或其他视频流；
• controls 是否显示播放控件 autoplay 是否打开浏览器后自动播放
• width 设置播放器的宽度
height 设置播放器的高度
• loop 设置视频是否循环播放 preload 设置是否等加载完再播放
• src
time元素
➢time是HTML5新增的元素 ➢time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它
可以定义很多格式的日期和时间 ➢datetime属性中日期与时间之间要用"T"文字分隔，"T"表示时间。请注意倒
数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，表示向机 器编码另一地区时间，如果是编码本地时间，则不需要添加时差。 ➢pubdate属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出 那个日期是文章、新闻的发表日期。
• 然后和 optimum 值不在同一个 区间的 value 值，以optimum 所在的区间为中心，依次向左 右两边的区间 为 黄色、红色。
details元素与summary元素
➢details是一个全新的HTML5元素，功能是描述文档某个部分的细节 。 <details>标记常与<summary>标记配合使用。在默认情况下，不显示 <details>中的内容。当与<summary>标记配合使用时，在单击<summary> 标记后才会显示<datails>元素中设置的内容。<details>元素的常用属性如下 所示：
url
设置要播放视频的url地址
• poster imgurl 设置播放器初始默认显示图片
video元素
想要video能自动填充满父div的大 小，只要给video标签加上
style="width= 100%; height=100%; object-fit: fill"即可
object-fit:fill属性
HTML5新标签
2018/8
01
概述
HTML5新标签的优点
➢更注重于内容而不是形式 ➢对人的友好：更加的语义化，高度的描述性，更加的直观，增加了代码的可
读性。 ➢对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档的内容 ➢代码更加的简洁
02
布局标签
新增的布局标签
新增的布局标签可以概括为两类：用于控制页面主体内容的标签，可以划分 为主体结构标签；非主体结构标签，用来放置辅助主体内容的信息。对于分 类大家简单了解下就可以，主要还是能够掌握每个标签的用法。 ➢article标签：定义一个独立内容区块：一篇文章、一个视频文件等 ➢section标签：定义一个区域，如文章的章节等 ➢nav标签：定义目录导航 ➢aside标签：定义侧边栏 ➢figure/figcaption标签：定义一组媒体内容以及它们的标题 ➢header/footer标签：定义一个头部/底部 ➢hgroup标签：标题分组 ➢address标签：地址、联系信息等
放。如果使用 "autoplay"，则忽略该属性。 auto 预加载音频视频 metadata 只预加载音频视频元数据。
微格式的概念
➢HTML5中的微格式，是一种利用HTML5中的新标签对网页添加附加信息的 方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。
➢HTML5中的微格式是为了简化浏览器对数据的提取，方便搜索引擎的搜索.
header元素（标签）
➢用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等 ➢通常会放在文章的头部
article元素（标签）
➢用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子，论坛 的一段用户评论，一篇新闻消息等.
➢article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容。使 用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素 ，如果只是一段内容的话应该使用section元素。
式视频
HTML5支持的视频格式
➢Ogg
• 带有Theora视频编码+Vorbis音频编码的Ogg文件 • 支持的浏览器:F、C、O
➢MEPG4
• 带有H.264视频编码+AAC音频编码的MPEG4文件 • 支持的浏览器: S、C
➢WebM
• 带有VP8视频编码+Vorbis音频编码的WebM格式 • 支持的浏览器: I、F、C、O • 劣势：视频少、转码器几乎没有，不好转码
time元素
time元素
练习：
aside元素
➢aside元素通常用来设置侧边栏。 ➢用于定义article元素之外的内容，前提是这些内容与article元素
内的内容相关。 ➢同时也可嵌套在article元素内部使用，作为主要内容的附属信息
，比如与主内容有关的参考资料，名词解释等。
练习
section元素（标签素
• meter 标签的max、min属性定 义在最两边，low和high定义在 中间。
• 这样分割开了3个区间。
• 最佳值 optimum 和 value 的不 同决定了显示的颜色的不同。
• 规则是：
• 和 optimum 值在同一个区间的 value 值，那么显示为绿色；
独立性，注意它的语义。
练习
article元素和section元素的区别
➢语义不同 • article元素更强调内容的独立性 • section元素更强调内容的关联性 • article元素是独立完整的内容，section元素页面内容分块
➢相同点 • 本质上都是带有语义的div块元素 • 分别可以看作<div id="section">和<div id="article">
mark元素
➢mark元素 • 主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签 的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关 键词。 • HTML5: <mark></mark> • HTML4: <span></span>
mark元素
meter元素
➢meter元素 • 此标签与progress百分比标签差不多，它主要表现规定范围内的 数量值，例如磁盘的食用量，对某个候选者人数占总投票人数的 比例值等 • meter有6个属性值 • value min low high max optimum
➢none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。 ➢scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是
尺寸比较小的那个。
video元素
注意：多个source标签，浏览器会从 第一个开始识别，如果第一个不被识 别，则会继续识别第二个；如果第一 个识别成功，则会直接播放第一种格
➢用来定义文章中的章节(通常应该有标题和段落内容) ➢用来定义文档中特定内容的区块，可视为一个区域分组元素，用来给页面上
的内容分块。 ➢section元素可以定义文档的主体内容。 ➢用一句话来概括它的作用就是给内容分段，给页面分区 ➢注意他与div的区别，div强调在形式上的独立性，section强调的是内容上的
object-fit:fill属性
➢fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持 原有的比例。
➢contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在 容器里面放得下。因此，此参数可能会在容器内留下空白。
➢cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器 尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如 图片）部分区域不可见。