HTML文本格式化标签2

共38个标签,本文档包含(20-38)

1. <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> 

2. <pre> 定义与格式化文本

<pre>标签可以保留您需要的文本格式，不会取消手动换行和手动空格，并且标签内的内容和浏览器上的内容是等宽的。

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

3. <progress> 进度条 (new)

<progress>标签显示某个任务完成的进度指示器，一般用于表示进度条。
<progress value="22" max="100"></progress>

4. <q> 短引用

用来表示包含的文本是一个短的引用，属于行内元素，在浏览器中显示时表示为使用引号包含的内容。

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.
</p>

5. <rp> 定义不支持ruby元素的浏览器所显示的内容 (new)

必须在<ruby>标签中使用，用于防止不支持<ruby>标签的浏览器。在支持<ruby>标签的浏览器中不会显示<rp>标签内的内容。是HTML5中新增加的标签。

<ruby>
漢 <rt><rp>(</rp>kan<rp>)</rp></rt>
字 <rt><rp>(</rp>ji<rp>)</rp></rt>
</ruby>

6. <rt> 定义字符的解释或发言 (new)

在 <ruby> 元素中需要多某些字符作出解释或者标记其发音时使用。

是HTML5中新增加的标签。

<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

7. <ruby> 注释标签 (new)

与<rp>和<tr>标签一起配合使用，ruby元素由一个或多个需要解释//发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>Zi</rt><rp>)</rp>
</ruby>

8. <s> 贯穿线

标签中的文本会以贯穿一条线呈现给用户，表示该处的内容是不相关或不准确的，可以用作删除线。，但不能定义替换或删除的文本（使用<del>）。

<p><s>我的车是蓝色的。</s></p>
<p>我的新车是银色的。</p>

9. <samp> 表示计算机程序输出

使用该标签定义的文本会以特殊的样式显示，通常使用浏览器默认的字体。

<samp>计算机样本</samp>。

10. <small> 定义小型文本

使显示在浏览器中的文本变为较小号的字体，<small> 标签可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字，如果被<small> 标签包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。

<p>Copyright 1999-2050 by Refsnes Data</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>

11. <strong> 加粗文本

用来强调某些文本的重要性，这意味着这些文本会以加粗的形式呈现在浏览器中。

<strong>加粗文本</strong>

12. <sup> 上标文本

上标文本将会显示在当前文本流中字符高度的一半为基准线的上方

<p>This text contains <sup>subscript</sup> text.</p>

13. <sub> 下标文本

下标文本将会显示在当前文本流中字符高度的一半为基准线的下方。

<p>This text contains <sub>subscript</sub> text.</p>

14. <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>

15. <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>

16. <tt> 改变字体样式

使标签中的文本显示为打字机文本。

<p><tt>Teletype text</tt></p>

17. <u> 下划线

<p>This is a <u>parragraph</u>.</p>

18. <var> 斜体

<var>变量</var>

19. <wbr> 换行 (new)

如果浏览器窗口的宽度足够，则不换行；反之，则在添加了 <wbr> 标签的位置进行换行。

<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>