从零开始前端学习[27]:html5中的特殊结构标签，ruby，mark，meter，progress，details

最新推荐文章于 2022-06-13 10:41:37 发布

^_^ 小小码nong

最新推荐文章于 2022-06-13 10:41:37 发布

阅读量659

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签：特殊标签 ruby mark meter progress

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78118319

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

html5中的特殊结构标签

ruby标签
mark标签
meter标签
progress标签
details标签

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

ruby标签

ruby标签一般相对来说使用还是比较少的吧，它是一种注释解释性标签，一般是与rt标签进行联用的，使用方式感觉类似于span标签一样

<ruby>章飞<rt>zhangfei</rt></ruby>

mark标签

markdown，目前来说比较好用的编辑器，那什么是mark呢？？mark也就是标记的意思。mark标签同样也是为了标记而生，也就是相当于语义化的span标签。是一个行内标签
定义带有记号的文本，用于凸显，以灰常黄的黄色标记

    <section class="mark">
        <p>永和<mark>九年</mark> <mark>岁在癸丑</mark>暮春之初</p>
    </section>

meter标签

meter标签是定义已知范围或分数值内的标量测量
标签不应用于指示进度（在进度条中）。
如果标记进度条，请使用标签。

属性	属性值
min	最小值
max	最大值
low	指定点为最低值，是一个评判的标准，低于这个标准会变色
optimum	指定的最佳值
high	指定点为最高值，高于最高值的时候，也会变色

  <section class="meter">
        <meter min="0" max="100" value="90" low="20" optimum="50" high="80"></meter>
    </section>

很多情况下meter都是与js进行绑定，然后进行事件调用的过程

progress进度条

progress标签显示任务的进度或者进程一般结合js使用，当不给定值时为一种加载的状态，在谷歌里面是一直滚动的状态，火狐里面是一种闪光的状态。支持宽高但是背景是要与js进行联合使用的
属性值有两个:max和value

 <section class="progress">
        <progress max="100" value="50"></progress>
 </section>

details标签

用于描述文档细节部分，类似于定义列表,通常与summary标题进行联合使用

<details>
    <summary>标题</summary>
    <p>对标题的描述</p>
</details>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Author" content="网页作者" />
    <meta name="Copyright" content="网站版权" />
    <meta name="keywords" content="网站关键字" />
    <meta name="description" content="网站描述" />
    <title>Document</title>
    <style>
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; color:inherit; }
        *{ margin: 0; padding: 0; }
        a img{ display:block; border:none;}
        .clearfix:after{ content:""; display: block; clear: both;}
        .main{
            width: 1200px;
            margin: 100px auto;
            box-shadow: 0 0 10px 0 #000;
        }
        .main section{
            width: 400px;
            margin: 20px auto;
            box-shadow: 0 0 10px 0 #000;
        }
        section.ruby ruby{
            color: deeppink;
            font: bold 20px/30px "";
        }
        section.meter meter,section.progress progress{
            height: 30px;
            width: 400px;
        }
        </style>
    <!--特殊标签
            ruby:   注释标签 行级元素 横排显示   试图写多个汉字和注释，需要多个ruby
             mark:  重点标记，以灰常黄的黄色标记
             meter: 类似与进度条有一下属性
                    min:类进度条的最小值
                    max： 最大值
                    value：实际的值
                    low: 评判标准，低于low是什么颜色显示（残血了）
                    optimum：状态良好（可以开团，状态良好）
                    high: 状态完美（开炮！开炮！开炮！）
                    也就是说，在low和high之间都是绿了，在low一下或者high以上就黄了
                    progress: 正宗的进度条 在谷歌里面是天蓝色加载界面，在火狐里面是绿色的背景，然后有一束光的进度条
                    details: 和我们的dl定义列表类似，也和我们的下拉列表类似，但是，显示的方式不一样用于描述细节  summary标题（要描述的对象） 后面接上你要描述的内容
    -->
</head>
<body>
    <section class="main">
        <section class="ruby">
            <ruby>龙<rt>long</rt></ruby>
            <ruby>的<rt>de</rt></ruby>
            <ruby>传<rt>chuan</rt></ruby>
            <ruby>人<rt>ren</rt></ruby>
        </section>
        <section class="mark">
            <p>永和 <mark>九年</mark> <mark>岁在癸丑</mark>暮春之初</p>
        </section>

        <section class="meter">
            <meter min="0" max="100" value="90" low="20" optimum="50" high="80"></meter>
        </section>
        <section class="progress">
            <progress max="100" value="50"></progress>
        </section>

        <section class="details">
            <details>
                <summary>小米手机</summary>
                <p>运行内存：</p>
                <p>处理器：</p>
                <p>屏幕大小</p>
                <p>像素：</p>
                <p>售价3000￥</p>
                <img src="imgs/0.jpg" alt="" width="150px">
            </details>
        </section>
    </section>
</body>
</html>

显示效果如下所示:

这里写图片描述

^_^ 小小码nong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[27]:html5中的特殊结构标签，ruby，mark，meter，progress，details

html5中的特殊结构标签ruby标签mark标签meter标签progress标签details标签提示博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041ruby标签ruby标签一般相对来说使用还是比较少的吧，它是一种注释解释性标签，一般是与rt标签进行联用的，使用方式感觉类似于span标签一样<ruby>章飞<
复制链接

扫一扫