HTML功能性文本

最新推荐文章于 2024-03-29 19:06:40 发布

nuist__NJUPT

最新推荐文章于 2024-03-29 19:06:40 发布

阅读量333

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： html 搜索引擎前端

本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/120960004

版权

HTML+CSS+JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML功能性文本

HTML标识特定功能信息，新增加多个文本标签，具体如下。
1-定义标记文本
< mark >标签定义带有记号的文本，表示文本中需要突出显示或者高亮显示的信息，对于当前用户具有参考作用的一段文字。通常在引用原文的时候使用mark元素，目的是引起用户的注意，mark元素是对原文内容进行补充。

最能体现mark元素的应用：它在网页中检索某个关键词时候呈现的检索结果，现在许多搜索引擎都用其它方法实现mark元素的功能。
示例：使用mark元素高亮显示对HTML5关键词的搜索结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义标记文本</title>
</head>
<body>
<article>
    <h2><mark>HTML5</mark>中国最大的<mark>HTML5</mark>中文门户</h2>
    <p><mark>HTML5</mark></p>
    <p>窗前明月<mark>光</mark>，疑是地上<mark>霜</mark></p>
    <p>举头望明<mark>月</mark>，低头思故<mark>乡</mark></p>
</article>
</body>
</html>

2-定义进度条信息
< progress > 标签可以标识任务的进度，这个进度是不确定的，表示进度正在进行，但是不清楚还有多少进度没有完后，也可以用0到某个最大数字之间的数字来表示完成情况。

progress元素包含两个新属性，表示当前任务完后情况。
max:定义任务一共需要多少工作量
value:定义已完后多任务

在设置属性时，value和max只能指定有效的浮点数。

示例：使用progress元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义进度信息</title>
</head>
<body>
<section>
    <p>百分比进度：<progress id = "progress" max = "100"><span>0</span>%</progress></p>
    <input type = "button" onclick = "click1()" value = "显示进度"/>
    <script>
        function click1() {
            var progress = document.getElementById("progress") ;
            progress.getElementsByTagName("span")[0].textContent = "0" ;
            for(var i = 0; i <= 100; i++){
                updateProgress(i) ;
            }
        }
        function updateProgress(newValue) {
            var progress = document.getElementById("progress") ;
            progress.value = newValue ;
            progress.getElementsByTagName("span")[0].textContent = newValue ;
        }
    </script>
</section>
</body>
</html>

3-定义刻度信息
< meter >定义已知范围或者分数值内的标量，刻度，例如磁盘用量，查询结果等信息。
meter元素包含7个属性：
1-value:在元素中特别标注出来的实际值
2-min:设置规定范围内，允许的最小值
3-max:设置规定的范围内，允许的最大值
4-low:设定范围的下限值
5-high:设定范围的上限值
6-optimum:设定最佳值
7-form:设定meter元素所属的一个或者多个表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义刻度信息</title>
</head>
<body>
<meter value = "3" min = "0" max = "10">十分之三</meter>
<meter value = "0.6">60%</meter>
</body>
</html>

4-定义时间信息
< time >标签定义公历的时间或日期，使其和时间偏移是可选的，该元素能够以机器可读的方式对日期和时间进行编码，例如，用户代理能够把生日提醒或者排定的事件添加到用户日程表中，搜索引擎也能够生成更加智能的结果。

示例1：time元素代表24小时中某个时刻或者某个日期，表示时刻时，允许带有时差。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>定义时间信息</title>
</head>
<body>
<time datetime="2021-10-1">2021年10月1日</time>
<time datetime = "2021-11-13">11月13日</time>
<time datetime="2021-11-13"title="20:00">我的生日是晚上8点</time>
</body>
</html>

5-定义联系文本
< address >标签定义了文档或者文章的作者或者拥有者的联系信息，其包含文本通常显示为斜体，大部分浏览器会在address元素前后添加折行。

1-如果address标签位于body标签内，它表示文档联系信息。
2-如果address标签位于article标签内，它表示文章的联系信息

注意：address标签不应描述通信地址，除非它是联系信息的一部分，一般address被包含在footer标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义联系文本</title>
</head>
<body>
<address>
    <a href = "http://www.baidu.com">百度</a>
    <a href = "http://www.write-bug.com">博客网</a>
</address>
<footer>
    <section>
        <address>
            <a title="作者": wgd href="http://www.baidu.com">web开发学习</a>
            <p>
                发布于：
                <time datetime="2021-11-01">2021年11月1日</time>
            </p>
        </address>
    </section>
</footer>
</body>
</html>

6-定义断点换行
< wbr >标签定义在文本中何处添加换行符，如果单词太长，或者担心浏览器错误的位置换行，那么可以通过wbr标签添加单词换行点，避免浏览器随意换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义换行断点</title>
</head>
<body>
<p>本站的旧网址为：https:<wbr>//<wbr>www.baidu.com,新的地址为：http:<wbr>//<wbr>www.write-bug.com</p>
</body>
</html>

7-定义文本注释
< ruby >标签可以定义ruby注释，即中文注音或者字符。
必须和< rt > 和< rb >标签一起使用。
1-rt标签定义字符的解释或发音
2-rp标签定义当前浏览器不支持ruby显示的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义文本注释</title>
</head>
<body>
<style type="text/css">
    ruby{font-size: 40px}
</style>
<ruby>
    王<rt>wang</rt>国<rt>guo</rt>栋<rt>dong</rt>我<rt>wo</rt>爱<rt>ai</rt>你<rt>ni</rt>
</ruby>
</body>
</html>

案例实战
要求：
1-在网页标题栏显示“自我介绍”文本信息
2-以一级标题显示“自我介绍文本信息”
3-以定义列表的形式介绍个人基本情况，包括姓名，性比，住址，兴趣爱好等。
4-插入个人头像
5-以段落文本的形式显示个人简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自我介绍</title>
</head>
<body>
<h1>自我介绍</h1>
<dl>
    <dt>姓名</dt>
    <dd>王国栋</dd>
    <dt>性别</dt>
    <dd>男</dd>
    <dt>住址</dt>
    <dl>江苏省南京市</dl>
    <dt>兴趣爱好</dt>
    <dd>程序设计，听歌，刷抖音</dd>
</dl>
<img src = "WEB-INF/image/girl.png" width="50%">
<p>大家好，我叫王国栋，双非本硕，热爱学习，热爱生活，一起努力做个合格的程序员吧</p>
</body>
</html>