html5新标签
HTML5新标签使用练习题集
HTML5新标签使用练习题集HTML5作为最新的HTML标准，引入了许多新的语义化标签，拓展了网页开发的功能和表现能力。
为了熟悉和掌握HTML5新标签的使用，以下是一组HTML5新标签的练习题。
通过完成这些练习，你将能够更好地理解和应用HTML5新标签。
练习一：使用<header>标签在一个简单的HTML页面中，使用<header>标签创建一个页面的头部。
头部应包含网页的主标题（通过<h1>标签表示）和副标题（通过<h2>标签表示）。
练习二：使用<nav>标签在上述HTML页面的<header>标签内，使用<nav>标签创建一个导航栏。
导航栏应包含至少3个链接，每个链接通过<a>标签实现。
可以将链接指向其他HTML页面，也可以使用#符号来表示内部锚点链接。
练习三：使用<section>标签在上述HTML页面的<body>标签内，使用<section>标签创建两个内容区块。
每个内容区块应当包含一个标题（通过<h2>标签表示）和一段文字描述。
练习四：使用<article>标签在上述HTML页面的<body>标签内，使用<article>标签创建一篇文章。
文章的内容可以是一篇新闻、一篇博客或者其他自选主题。
文章内容应包含标题（通过<h2>标签表示）和多个段落（通过<p>标签表示）。
练习五：使用<aside>标签在上述HTML页面的<body>标签内，使用<aside>标签创建一个侧边栏。
侧边栏应包含一些相关的链接，比如文章的相关阅读、网站的友情链接等。
练习六：使用<footer>标签在上述HTML页面的<body>标签内，使用<footer>标签创建一个页面的底部。
HTML5新增语义化标签
HTML5新增语义化标签1.HTML5新增的标签article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video2.新增标签释义article:即定义article(⽂章)aside:定义页⾯之外的内容（常⽤于侧边栏，需要注意的是：移除侧边栏（aside标签及其内容）时不能影响⽹页的主体结构和布局）audio:定义声⾳内容(⾳频)各浏览器⽀持的⾳频格式⾳频格式chrome fireFox opear safari ie9OGG⽀持⽀持⽀持不⽀持不⽀持MP3⽀持不⽀持⽀持不⽀持⽀持WAV不⽀持⽀持不⽀持⽀持不⽀持bdi:定义⽂本的⽂本⽅向，使其脱离其周围⽂本的⽅向设置。
canvas:定义图形command：定义命令按钮datalist：定义datalist,标签被⽤来在为 <input> 元素提供"⾃动完成"的特性。
⽤户能看到⼀个下拉列表，⾥边的选项是预先定义好的，将作为⽤户的输⼊数据。
请使⽤ <input> 元素的 list 属性来绑定 <datalist> 元素details:规定 details 是否可见embed:定义外部交互内容或插件figcaption:定义 figure 元素的标题figure：定义媒介内容的分组，以及它们的标题（常⽤于和figure配套实现图⽂效果）footer：定义页脚header：定义头部hgroup：⽤来对标题元素进⾏分组。
当标题有多个层级（副标题）时，<hgroup> 元素被⽤来对⼀系列 <h1>-<h6>元素进⾏分组keygen:规定⽤于表单的密钥对⽣成器字段。
HTML5新增元素，标签总结
HTML5新增元素，标签总结总是遇到h5新标签的笔试题⽬，就查阅了资料来总结⼀下：1.form相关：（1）form属性：在HTML5中表单元素可放在表单之外，通过给该元素添加form属性来指向⽬标表单（form属性值设为⽬标表单id）即可。
（2）formaction属性：HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址。
<input formaction="new.html" type="submit" value="提交到new.html">（3）formmethod属性：⽤法同formaction。
（4）placeholder属性：⽤于⽂本框处于未输⼊状态时的⼀种⽂字提⽰。
（5）autofocus属性：⾃动获得焦点，⼀个页⾯只能有⼀个控件具有该属性。
该属性⽆值，直接写就好。
<input name="username" autofocus type="text" id="username">（6）list属性：⽤于单⾏⽂本框，该属性的值为某个datalist元素的id，增加该属性后的单⾏⽂本框类似选择框()，但允许⽤户⾃定义输⼊，为了避免没有⽀持该元素的浏览器出现错误，我们通常使⽤CSS设置不显⽰。
<datalist> 标签:定义可选数据的列表。
与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。
order:<input list="list" name="order" autofocus type="text" id="order"><datalist id="list" style="display:none"><option value="1">1</option><option value="2">2</option><option value="3">3</option></datalist>（7）autocomplete属性：⾃动完成允许浏览器预测对字段的输⼊，HTML5实现了⾃定义设置该属性，避免了任何⼈都可以看到所存在的安全隐患。
任务3 运用HTML5的新标签
分组标签主要完成web页面区域的划分，确保内容的有效分隔。 主要包括figure标签、hgroup标签、figcaption标签、dialog标签等。
1 figure 标签和figcaption标签
figure标签用于定义独立的流内容，例如图像、图表、照片、
代码等，一般指一个单独的单元。 figcaption标签用于为figure标签组添加标题，一个figure 标签内最多允许使用一个figcaption标签，该标签应该放在 figure标签的第一个或者最后一个子标签的位置。
例如
<menu type="toolbar"> <li> <menu label="文件"> <button type="button" onclick="file_new()">新建</button> <button type="button" onclick="file_open()">打开</button> </li> </menu> <li>其他项</li> </men标题。
标题是可见的，当用户单击标题时，会显示或隐藏details中的
其他内容。
举例 演示
【实例3-4】对details标签和summary标签的用法进行演示。
2 menu标签与commond标签
menu
<menu> 标签定义命令的列表或菜单，<menu> 标签用于上下文菜单、工具栏以及 用于列出表单控件和命令。
结构性标签其实就是语义化的html网页框架。 结构性标签，标签本质上和div没有任何区别。
HTML5学习笔记--------》HTML5概要与新增标签！
HTML5学习笔记--------》HTML5概要与新增标签！⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要，特别是移动互联⽹。
为了增强浏览器功能Flash被⼴泛使⽤，但安全与稳定堪忧，不适合在移动端使⽤（耗电、触摸、不开放）。
HTML5增强了浏览器的原⽣功能，符合HTML5规范的浏览器功能将更加强⼤，减少了Web应⽤对插件的依赖，让⽤户体验更好，让开发更加⽅便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很⼩，这并不符合⼀个好产品的演进规则。
1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。
它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强⽹络应⽤的标准集。
HTML5是HTML最新版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。
⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联⽹应⽤迅速发展的时候，使⽹络标准达到匹配当代的⽹络需求。
1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5，但是各个浏览器⽀持的⽅式以及语法有所差异性。
⽀持Html5的浏览器包括Firefox（⽕狐浏览器），IE9 及其更⾼版本，Chrome（⾕歌浏览器），Safari，Opera等现代浏览器。
⽀持得分：如果想了解更多请看本⽂的兼容性那⼀节的内容。
PC端（总分555分）：平板（总分555分）：移动（总分555分）：1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现（CSS3）1.4.1. 语义特性（Class：Semantic）HTML5赋予⽹页更好的意义和结构。
HTML5的标签大全以及相关属性
HTML5的标签⼤全以及相关属性按字母顺序排列的标签列表4: 指⽰在 HTML 4.01 中定义了该元素5: 指⽰在 HTML 5 中定义了该元素标签描述45定义注释。
45定义⽂档类型。
45定义超链接。
45定义缩写。
45HTML 5 中不⽀持。
定义⾸字母缩写。
4定义地址元素。
45HTML 5 中不⽀持。
定义 applet。
4定义图像映射中的区域。
45定义 article。
5定义页⾯内容之外的内容。
5定义声⾳内容。
5定义粗体⽂本。
45定义页⾯中所有链接的基准 URL。
45HTML 5 中不⽀持。
请使⽤ CSS 代替。
4定义⽂本显⽰的⽅向。
45HTML 5 中不⽀持。
定义⼤号⽂本。
4定义长的引⽤。
45定义 body 元素。
45插⼊换⾏符。
45定义按钮。
45定义图形。
5定义表格标题。
45HTML 5 中不⽀持。
定义居中的⽂本。
4定义引⽤。
45定义计算机代码⽂本。
45定义表格列的属性。
45定义表格列的分组。
45定义命令按钮。
5定义下拉列表。
5定义定义的描述。
45定义删除⽂本。
45定义元素的细节。
5定义定义项⽬。
45HTML 5 中不⽀持。
定义⽬录列表。
4定义⽂档中的⼀个部分。
45定义定义列表。
45定义定义的项⽬。
45定义强调⽂本。
45定义外部交互内容或插件。
5定义 fieldset。
45定义 figure 元素的标题。
5定义媒介内容的分组，以及它们的标题。
5HTML 5 中不⽀持。
4定义 section 或 page 的页脚。
5定义表单。
45HTML 5 中不⽀持。
定义⼦窗⼝（框架）。
4HTML 5 中不⽀持。
定义⼦窗⼝（框架）。
4 HTML 5 中不⽀持。
定义框架的集。
4定义标题 1 到标题 6。
45定义关于⽂档的信息。
45定义 section 或 page 的页眉。
5定义有关⽂档中的 section 的信息。
5定义⽔平线。
45定义 html ⽂档。
45定义斜体⽂本。
45定义⾏内的⼦窗⼝（框架）。
45定义图像。
html5十个新特性
html5⼗个新特性HTML5⼗个新特性（⼀）语义标签（语义化标签为页⾯提供了更好的页⾯结构。
） HTML5的语义化标签包括： <section> - 代表⽂档中的⼀段或者⼀节；<nav> - ⽤于构建导航；<article> - 表⽰⽂档、页⾯、应⽤程序或⽹站中⼀体化的内容；<aside> - 代表与页⾯内容相关、有别于主要内容的部分；<hgroup> - 代表段或者节的标题；<header> - 页⾯的页眉；<footer> - 页⾯的页脚；<time> - 表⽰⽇期和时间；<mark> - ⽂档中需要突出的⽂字。
（⼆）增强型表单 HTML5 新增的表单属性placehoder 属性，简短的提⽰在⽤户输⼊值前会显⽰在输⼊域上。
即我们常见的输⼊框默认提⽰，在⽤户输⼊后消失。
required 属性，是⼀个 boolean 属性。
要求填写的输⼊域不能为空pattern 属性，描述了⼀个正则表达式⽤于验证<input> 元素的值。
min 和 max 属性，设置元素最⼩值与最⼤值。
step 属性，为输⼊域规定合法的数字间隔。
height 和 width 属性，⽤于 image 类型的 <input> 标签的图像⾼度和宽度。
autofocus 属性，是⼀个 boolean 属性。
规定在页⾯加载时，域⾃动地获得焦点。
multiple 属性，是⼀个 boolean 属性。
规定<input> 元素中可选择多个值。
（三）视频和⾳频视频播放：<video src=""><video>⾳频播放：<audio src=""></audio>（四）Canvas绘图<canvas width="1000" height="1000"></canvas>js内容var canvas = document.getElementsByTagName("canvas")[0];var context = canvas.getContext("2d");路径写法是常⽤的写法// 1.开始⼀条路径// 2.具体是个什么样的路径// 3.结束路径（可选，加上去以后就会成⼀个封闭的，不加就表⽰随时结束）常⽤在点的绘制上// 4.设置属性（颜⾊）只要是在绘制之前设置都是OK的，随便你放在第⼏步，但是的再绘制之前// 5.绘制（fill（）stroke（））context.beginPath(); //开始⼀条路径context.rect(10,10,100,100);context.closePath();context.fillStyle = "#f00";context.fill()context.beginPath();context.moveTo(340,10);context.lineTo(440,10);context.lineTo(440,110);context.lineTo(340,110);context.lineTo(340,10);// context.closePath();context.strokeStyle = "#0f0";context.lineWidth = "10"context.stroke()context.beginPath();context.moveTo(450,10);context.lineTo(550,10);context.lineTo(550,110);// context.lineTo(450,110);context.fillStyle = "#00f";context.fill() //实⼼绘制会⾃动的闭合// 画圆// 1.开始⼀条路径// 2.绘制圆的路径⽅法// 3.结束⼀条路径// 4.设置圆的属性// 5.开始绘制context.beginPath();// context.arc(x,y,r,起始⾓，结束⾓[，绘制的⽅向。
HTML5标签大全(最终整理版)
一、文字备忘之标签HTML5中新增的标签<article> 定义文章<aside> 定义页面内容旁边的内容<audio> 定义声音内容<canvas> 定义图形<command> 定义一个控制按钮<datagrid> 指树或表格状数据格式中的动态数据<datalist> 定义一个下拉列表<details> 定义一个元素的细节<dialog> 定义会话或人的交谈<embed> 定义额外的交互内容或插件<figcaption>定义指定元素的标题<figure> 定义一组媒体内容，以及他们的标题<footer> 为章节或页面定义一个底部<header> 为章节或页面定义一个头部<hgroup> 定义文档中某段落的信息<keygen> 定义表单生成的关键<mark> 定义被标记的文本<meter> 定义预定义范围内的测量<nav> 定义导航链接<output> 定义某种类型的输出<progress> 定义任意种类任务的进程<rp> 定义浏览器不支持ruby元素的替代者<rt> 定义ruby注释的解释<ruby> 定义ruby 注释（中文注音或字符）。
<section> 定义章节<source> 定义媒体资源<summary> 定义某”detail”元素的头部<time> 定义日期/时间<video> 定义视频<wbr> 定义可能的换行HTML5支持且同时存在于HTML4中的标签<!–…–> 定义注释<!DOCTYPE> 定义文档类型<a> 定义超链接<abbr> 定义缩写<address> 定义地址元素<area> 定义图片地图的某区域<b> 定义加粗文字<base> 定义整个页面的基础URL <bdo> 定义文本显示的方向<blockquote> 定义一个长引用<body> 定义主体元素<br> 插入单个的换行<button> 定义按钮<caption> 定义表格的标题<cite> 定义引用<code> 定义计算机代码文本<col> 定义表格列的属性<colgroup> 定义表格列的组<dd> 定义个定义描述<del> 定义删除文本<dfn> 定义个定义项<div> 定义文档章节<dl> 定义定义列表<dt> 定义定义项<em> 定义强调文本<fieldset> 定义控件组<form> 定义表单<h1>到<h6> 定义头部1到头部6 <head> 定义文档信息<hr> 定义水平线<html> 定义个html文档<i> 定义倾斜文本<iframe> 定义内联替代窗口（框架）<img> 定义个图片<input> 定义输入域<ins> 定义插入文本<kbd> 定义键盘文本<label> 定义表单控件的标签<legend> 定义控件组的标题<li> 定义列表项<link> 定义相关资源<map> 定义图片地图<menu> 定义菜单列表<meta> 定义元信息<noscript> 定义无脚本章节<object> 定义内嵌对象<ol> 定义一个有序列表<optgroup> 定义个选项组<option> 定义下拉列表选项<p> 定义段落<params> 定义object的参数<pre> 定义预格式化文本<q> 定义短引用<s> 定义不再正确的文本<samp> 定义简单的计算机代码<script> 定义脚本<select> 定义可选择列表<small> 定义小点的文本<span> 定义文档章节<strong> 定义强调的文字<style> 定义一个样式定义<sub> 定义下标文字<sup> 定义上标文字<table> 定义表格<tbody> 定义表格的主体<td> 定义表格单元格<textarea> 定义文本域<tfoot> 定义表格底部<th> 定义表格头<thead> 定义表格头<title> 定义文档的标题<tr> 定义表格行<ul> 定义无序列表<var> 定义变量HTML5不支持的标签<acronym> 在HTML4.01中定义首字母缩略词<applet> 定义内嵌的小应用程序<basefont> 定义文档中基本的字体属性<big> 让文字变大点<center> 居中显示文字或内容<dir> 定义目录列表<font> 指定字体种类，大小，颜色等<frame> 在框架集中定义独有的窗体<frameset> 定义框架集，包含多个窗体<noframe> 当浏览器不支持框架的时候显示文字<strike> 定义删除线文本<tt> 定义电传打字机文本<u> 定义下划线文字<xmp> 定义格式化的文字HTML5中新增的标签<article> 定义文章<aside> 定义页面内容旁边的内容<audio> 定义声音内容<canvas> 定义图形<command> 定义一个控制按钮<datagrid> 指树或表格状数据格式中的动态数据<datalist> 定义一个下拉列表<details> 定义一个元素的细节<dialog> 定义会话或人的交谈<embed> 定义额外的交互内容或插件<figcaption> 定义指定元素的标题<figure> 定义一组媒体内容，以及他们的标题<footer> 为章节或页面定义一个底部<header> 为章节或页面定义一个头部<hgroup> 定义文档中某段落的信息<keygen> 定义表单生成的关键<mark> 定义被标记的文本<meter> 定义预定义范围内的测量<nav> 定义导航链接<output> 定义某种类型的输出<progress> 定义任意种类任务的进程<rp> 定义浏览器不支持ruby元素的替代者<rt> 定义ruby注释的解释<ruby> 定义ruby 注释（中文注音或字符）。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
布局元素
➢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: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器 尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如 图片）部分区域不可见。