共38个标签,本文档包含(20-38)
<meter> 尺度 (new)
定义已知范围或分数值内的标量测量,注:<meter> 标签不应用于指示进度(在进度条中).
<meter>是HTML5新增的标签.
属性 | 值 | 作用 |
form | id(表单id) | 规定元素所属的一个或多个表单 |
high | 数字(number) | 规定被视作高的值的范围 |
low | 数字(number) | 规定被视作低的值的范围 |
max | 数字(number) | 规定范围的最大值 |
min | 数字(number) | 规定范围的最小值 |
optimum | 数字(number) | 规定度量的优化值 |
value | 数字(number) | 必需!规定度量的当前值 |
<meter value="0.3" high="0.9" low="0.1" optimum="0.5"></meter>
<pre> 定义与格式化文本
<pre>标签可以保留您需要的文本格式,不会取消手动换行和手动空格,并且标签内的内容和浏览器上的内容是等宽的。
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
<progress> 进度条 (new)
<progress>标签显示某个任务完成的进度指示器,一般用于表示进度条。
<progress value="22" max="100"></progress>
<q> 短引用
用来表示包含的文本是一个短的引用,属于行内元素,在浏览器中显示时表示为使用引号包含的内容。
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.
</p>
<rp> 定义不支持ruby元素的浏览器所显示的内容 (new)
必须在<ruby>标签中使用,用于防止不支持<ruby>标签的浏览器。在支持<ruby>标签的浏览器中不会显示<rp>标签内的内容。是HTML5中新增加的标签。
<ruby>
漢 <rt><rp>(</rp>kan<rp>)</rp></rt>
字 <rt><rp>(</rp>ji<rp>)</rp></rt>
</ruby>
<rt> 定义字符的解释或发言 (new)
在 <ruby> 元素中需要多某些字符作出解释或者标记其发音时使用。
是HTML5中新增加的标签。
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
<ruby> 注释标签 (new)
与<rp>和<tr>标签一起配合使用,ruby元素由一个或多个需要解释//发音的字符和一个提供该信息的 <rt> 元素组成,还包括可选的 <rp> 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
<ruby>
汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
字 <rp>(</rp><rt>Zi</rt><rp>)</rp>
</ruby>
<s> 贯穿线
标签中的文本会以贯穿一条线呈现给用户,表示该处的内容是不相关或不准确的,可以用作删除线。,但不能定义替换或删除的文本(使用<del>)。
<p><s>我的车是蓝色的。</s></p>
<p>我的新车是银色的。</p>
<samp> 表示计算机程序输出
使用该标签定义的文本会以特殊的样式显示,通常使用浏览器默认的字体。
<samp>计算机样本</samp>。
<small> 定义小型文本
使显示在浏览器中的文本变为较小号的字体,<small> 标签可以嵌套,从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号,直到达到下限的一号字,如果被<small> 标签包围的字体已经是字体模型所支持的最小字号,那么 <small> 标签将不起任何作用。
<p>Copyright 1999-2050 by Refsnes Data</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>
<strong> 加粗文本
用来强调某些文本的重要性,这意味着这些文本会以加粗的形式呈现在浏览器中。
<strong>加粗文本</strong>
<sup> 上标文本
上标文本将会显示在当前文本流中字符高度的一半为基准线的上方
<p>This text contains <sup>subscript</sup> text.</p>
<sub> 下标文本
下标文本将会显示在当前文本流中字符高度的一半为基准线的下方。
<p>This text contains <sub>subscript</sub> text.</p>
<template> 页面加载时隐藏
<template> 标签定义在页面加载时隐藏的一些内容,该标签中的内容可以使用 JavaScript 展示出来。一些需要重复使用的 HTML 代码,也可以使用 <template> 设置为公用的模板。
<button onclick="showContent()">显示隐藏内容</button>
<template>
<h2>logo</h2>
<img decoding="async" src="https://atts.w3cschool.cn/attachments/image/20221207/1670380025475113.png" >
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
<time> 网页中出现的日期和时间 (new)
定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
<p>We open at<time>10:00</time> every morning.</p>
<p>I have a date on<time datetime="2017-02-14">Valentines day</time>.</p>
<tt> 改变字体样式
使标签中的文本显示为打字机文本。
<p><tt>Teletype text</tt></p>
<u> 下划线
<p>This is a <u>parragraph</u>.</p>
<var> 斜体
<var>变量</var>
<wbr> 换行 (new)
如果浏览器窗口的宽度足够,则不换行;反之,则在添加了 <wbr> 标签的位置进行换行。
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>