HTML入门几个小点的记载（四）

最新推荐文章于 2021-05-30 21:14:34 发布

卑微小张在线咕咕咕

最新推荐文章于 2021-05-30 21:14:34 发布

阅读量103

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43460290/article/details/92994066

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

< meter >标签不知道是干嘛用的：先放一个例子：

<!DOCTYPE html>
<html>
    <body>
        <meter min="9" max="10">2</meter><br />
        <meter>3 out of 10</meter><br />
        <meter>90%</meter>
    </body>
</html>

< nav > 标签：

<!DOCTYPE html>
<html>
    <body>
        <nav>
            <!--
                <nav>定义导航链接的部分
            -->
            <a href="/html5/index.asp">Home</a>
            <a href="/html5/html5_meter.asp">Previous</a>
            <a href="/html5/html5_noscript.asp">Next</a>
        </nav>
    </body>
</html>

运行结果图：

在这里插入图片描述

< optgroup >标签：

<!DOCTYPE html>
<html>
    <body>
       <select>
           <!--
               <optgroup>标签定义选项组。此元素允许我们组合选项，
                当我们使用一个长的选项列表时，对相关的选项进行组合
                会使处理更加容易。
           -->
           <optgroup label="fff">
               <option value="volvo">Volvo</option>
               <option value="saab">Saab</option>
           </optgroup>
           <optgroup label="ccc">
                <option value="deep">Deep</option>
                <option value="dark">Dark</option>
            </optgroup>
       </select>
    </body>
</html>

运行结果：
在这里插入图片描述

< option >标签

<!DOCTYPE html>
<html>
    <body>
        <form>
            <select name="cars">
                <!--
                    <option>标签定义下拉列表中的一个选项，也可以用于HTML5的新元素<datalist>中
                    <option>标签能够在不带任何属性的情况下使用，但是通常需要value属性，这个属性
                    定义了发送到服务器的数据。
                -->
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat" selected="selected">Fiat</option>
                <option value="audi">Audi</option>
                <!--
                    通常搭配<select>或<datalist>标签结合使用，在其他地方，
                    这个标签使没有意义的。
                -->
            </select>
        </form>
    </body>
</html>

< output >标签

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
        function write_sum(){
            x=5,y=3;
            document.forms["sumform"]["sum"].value=x+y;
        }
        </script>
    </head>
    <body onload="write_sum()">
        <form action="form_action.asp" method="GET" name="sumform">
            <output name="sum"></output>
        </form>
    </body>
</html>

< pre > 标签：

<!DOCTYPE html>
<html>
    <body>
        <pre>
            这是预留的
            保留了  空格
            以及换行
        </pre>
        <!--
            <pre>标签可以定义预格式化的文本，这些文本通常会保留空格和换行符，
            文本会显示为等宽字体。
        -->
        <p>pre 标签也很适合显示计算机代码</p>

        <pre>
            for i=1 to 10
            print i
            next i
        </pre>
    </body>
</html>

< progress >标签：

<!DOCTYPE html>
<html>
    <body>
       The object's downloading progress:
       <progress>
           <span id="objectpro">99%</span>%
       </progress>
       <!--
           <progress>标签用来定义运行中的进度
            也可以使用它来显示JavaScript中耗费时间的函数的进度
            <span>对文档中的行内元素进行组合。
       -->
    </body>
</html>

运行结果：

在这里插入图片描述

< q > < rp > 和< rt > 标签：

<!DOCTYPE html>
<html>
    <body>
        <p>how can we
            <q cite="http://www.wwf.org">
                build a future
            </q>we hope they succeed.
            <!--
                <q>标签定义一个短的引用
            -->
        </p>
    </body>
</html>

运行结果：
在这里插入图片描述

<!DOCTYPE html>
<html>
    <body>
        <ruby>
            汉<rt><rp>(</rp>:我去<rp>)</rp></rt>
        </ruby>
        <ruby>
            汉<rt>我去</rt>
        </ruby>
    </body>
</html>

运行结果：

在这里插入图片描述

< section >标签

<!DOCTYPE html>
<html>
    <body>
        <section>
            <h1>prc</h1>
            <p>the future</p>
        </section>
        <section>
            <h1>amc</h1>
            <p>your love</p>
        </section>
        <!--
            <section>标签定义文档中的节（section、区段）
            比如章节，页眉或文档中的其它部分。
        -->
    </body>
</html>

运行结果：

在这里插入图片描述

< style >标签

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        h1 {color:red}
        p  {color: blue}
        </style>
    </head>
    <!--
        <style> 标签定义HTML文档的样式信息
        在style元素中，您规定的是HTML元素如何在浏览器中呈现。
    -->
    <body>
        <h1>Header_1</h1>
        <p>This is a paragraph</p>
    </body>
</html>

运行结果：

在这里插入图片描述

卑微小张在线咕咕咕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门几个小点的记载（四）

< meter >标签不知道是干嘛用的：先放一个例子：<!DOCTYPE html><html> <body> <meter min="9" max="10">2</meter><br /> <meter>3 out of 10</meter>&l...
复制链接

扫一扫

专栏目录