HTML5官方文档学习笔记（四）----新的语义元素

深碍√TFBOYSˉ_ 2023-05-29 06:49 18阅读 0赞

## mark ##

HTML标记文本元素(`< Mark >`)表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。  
![在这里插入图片描述][20191105114949404.png]

## figure ##

HTML `<figure>` 元素代表一段独立的内容, 经常与说明（caption） `<figcaption>` 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

<figure>
        <img src="/media/examples/elephant-660-480.jpg"
             alt="Elephant at sunset">
        <figcaption>An elephant at sunset</figcaption>
    </figure>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70]

## data ##

HTML `<data>` 元素 将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的，一定要使用 `<time>`。

<data value="3967381398">迷你番茄酱</data>

## time ##

HTML time 标签(`<time>`) 用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。

## output ##

HTML `<output>` 标签表示计算或用户操作的结果。

## progress ##

和其他的HTML元素一样,该元素具有全局属性.

max  
该属性描述了这个progress元素所表示的任务一共需要完成多少工作.  
value  
该属性用来指定该进度条已完成的工作量.如果没有value属性,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成(比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).

![在这里插入图片描述][20191105120846124.png]

## meter ##

HTML `<meter>`元素用来显示已知范围的标量值或者分数值。  
**value**  
当前的数值。如果设置了最小值和最大值（分别由min属性和max属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。  
使用备注: 除非值域在0到1（闭区间）, 否则最小值和最大值属性需要定义，以保证value属性在值域范围内。换言之，默认的min和max值分别为0和1。  
**min**  
值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0。  
**max**  
值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1。  
**low**  
定义了低值区间的上限值（译者注：如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在\[min,low\]、\[high,max\]等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。  
**high**  
定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。  
**optimum**  
这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了low和high属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和low之间，那么lower区间就被认为是更佳的取值范围。  
**form**  
该属性将本元素与对应的form元素关联。例如，一个计量器可能用来显示某个数值输入框（input元素，number类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。

<p>Heat the oven to <meter min="200" max="500"
      value="350">350 degrees</meter>.</p>

![在这里插入图片描述][20191105122221750.png]

![在这里插入图片描述][20191105122256602.png]

## main ##

HTML `<main>` 元素呈现了文档的 `<body>` 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

[20191105114949404.png]: https://img-blog.csdnimg.cn/20191105114949404.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191105115542331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE=,size_16,color_FFFFFF,t_70
[20191105120846124.png]: https://img-blog.csdnimg.cn/20191105120846124.png
[20191105122221750.png]: https://img-blog.csdnimg.cn/20191105122221750.png
[20191105122256602.png]: https://img-blog.csdnimg.cn/20191105122256602.png