HTML5新增文本标签

1 标记文本 mark

mark标签

<mark>mark>
1

表示页面中需要突出显示或高亮显示的信息

样式：

代码：

    <h2>静夜思h2>
    <p>床前明月<mark>光mark>，疑是地上<mark>霜mark>。p>
    <p>举头望明月，低头思故<mark>乡mark>p>
1
2
3

2 进度信息 progress

progress标签

<progress>progress>
1

标识任务的进度（进程），不适合用来表示度量衡。

progress元素包含两个属性：

1.max:定义任务一共需要多少工作量
2.value:定义已完成多少任务

注意：

1.value和max属性值只能指定为有效的浮点数

2.value属性值必须大于0或小于等于max属性值

3.max属性值必须大于0

样式：

代码：

 <section>
        <p>百分比进度:<progress id="progress" max="100"><span>0span>%progress>p>
        <input type="button" onclick="click1()" value="显示进度">
    section>

    <script>
        let count = 0
        function click1(){
            let progress = document.getElementById('progress')
            progress.getElementsByTagName('span')[0].textContent="0"
            count += 10
            updateProgress(count%100) 
        }
        function updateProgress(newValue){
            let progress = document.getElementById('progress')
            progress.value=newValue
            progress.getElementsByTagName('span')[0].textContent=newValue
        }
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3 刻度信息 meter

meter标签

<meter>meter>
1

定义已知范围或分数值内的标量、进度。

meter元素包含以下七个属性

1.value:元素中特别标示出来的实际值。该属性值默认为0，可以为该属性设置一个浮点小数值
2.min:设置规定范围时，允许使用的最大值。默认为0，设定的值不能小于0
3.max:设置规定范围时，允许使用的最大值。如果设定时该属性值小于min的属性值，那么把min属性值视为最大值。max属性的默认值为1。
4.low:设置范围的下限值，必须小于或等于high属性的值。如果low属性的值小于min属性的值，那么把min属性值视为low属性的值
5.high:设置范围的上限值。如果属性值小于low属性值，那么把low属性的值视为heigh属性的值，如果该属性值大于max属性值，那么把max属性值设置为high值
6.optimum：设置最佳值，该属性必须在min属性值与max属性值之间可以大于high属性值
7.form:设置meter元素所属的一个或多个表单

样式：

代码：

  <meter value="3" min="0" max="10">十分之三meter>
  <meter value="0.6">60%meter>
1
2

4 时间信息 time

time标签

<time>time>
1

定义公历的时间（24小时制）或日期

time标签包含两个属性：

1.datetime：定义日期和时间，否则由元素内容给定日期和时间
2.pubdate：定义 < time >标签中的日期和时间是文档或 < article.> 标签的发布日期

为避免引擎误解发布日期，使用pubdate属性可以显示告诉引擎文章中那个是真正的发布时间

样式：

代码：

    <time datetime="2022-9-6">2022年9月6号time><br>
    <time datetime="2022-9-6">9月6号time><br>
    <time datetime="2022-9-6">我的生日time><br>
    <time datetime="2022-9-6T20:00">我生日的晚上八点time><br>
    <time datetime="2022-9-6T20:00+09:00">我生日的晚上八点的美国时间time><br>
1
2
3
4
5

编码时引擎读到的部分在datetime属性里，而元素的开始标记与结束标记中间部分是显示在网页上的。

datetime属性中日期与时间要用T文字分隔，T表示时间

5 联系文本 address

address标签

<address>address>
1

定义文档或文章的作者、拥有者信息。

如果address标签在body标签内，表示文档的联系信息

如果address标签在article标签内，表示文章的联系信息

样式：

代码：

  <footer>
        <address>
            <a title="作者：MDN" herf="https://developer.mozilla.org/en-US/">Web开发指南a>
        address>
        <p>
            <time datetime="2022-9-6">2020年9月6号time>
        p>
    footer>
1
2
3
4
5
6
7
8

6 隔离文本 bdi

bdi标签

<bdi>bdi>
1

允许设置一段文本，使其脱离父元素的文本设置方向

样式：

代码：

 <ul>
      <li>用户<bdi>adminbdi>:70分li>
      <li>用户<bdi>listbdi>:80分li>
      <li>用户<bdi>zhangsanbdi>:90分li>
  ul>
1
2
3
4
5

7 换行断点 wbr

wbr标签

<wbr>wbr>
1

定义在文本中何处适合添加换行符，避免浏览器随意换行

样式：

代码：

  <p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pagesp>

 
1
2
3

8 文本注释 ruby

ruby标签

改标签需要与rt或rp标签一同使用

其中rt和rp标签必须位于ruby标签内

样式：

代码：

 <ruby>
        汉 <rp>(rp><rt>hanrt><rp>)rp>
        字 <rp>(rp><rt>zirt><rp>)rp>
    ruby>
1
2
3
4