HTML入门几个小点的记载（三）_htmlol改变前面符号-优快云博客

博客介绍了多种HTML显示标签，如ins、label、li、link、mark、menu、meta等，还提及了嵌套列表，展示了部分标签的运行结果及样式效果，也举了map的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ins标签

<!DOCTYPE html>
<html>
    <body>
        <p>一打有<del>二十</del><ins>十二</ins>件。</p>
        <p>大多数浏览器会改写为删除文本和下划线文本。</p>
        <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
        <!--
            <ins>标签帝国一文档的其余部分之外的插入文本。
                一般与<del>标签一起使用，用来描述对文档的更新和修正。
        -->
    </body>
</html>

各种显示标签：

<!DOCTYPE html>
<html>
    <body>
        <b>This text is bold.</b>
        <br />
        <strong>This text is strong.</strong>
        <br />
        <big>This text is big.</big>
        <br />
        <em>This text is emphasized.</em>
        <br />
        <i>This text is italic</i>
        <br />
        <small>This text is small.</small>
        <br />
        <code>Computer code</code>
        <br />
        <kbd>Keyboard input</kbd>
        <br />
        <tt>Teletype text</tt>
        <br />
        <samp>Sample text</samp>
        <br />
        <var>Computer variable</var>
        <br />
        This text contains 
        <sup>superscript</sup>
    </body>
</html>

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

label标签

<!DOCTYPE html>
<html>
    <body>
        <!--
            lable标签，用来定义控件的标注，如果我们在label元素内点击文本
            就会出触发这个控件，就是说，当用户选择改标签是，浏览器就会自动将
            焦点转到和标签相关的表单控件上。
        -->
        <p>请点击文本标记之一，就可以触发相关控件</p>
        <form>
            <label for="male">Male</label>
            <input type="radio" name="sex" id="male" />
            <br />
            <label for="female">Female</label>
            <input type="radio" name="sex" id="female" />
        </form>
        <!--
            for属性可以把label绑定到另外一个元素，所以把for属性的值
            设置为相关元素的id属性的值。
        -->
    </body>
</html>

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

< li >标签

<!DOCTYPE html>
<html>
    <body>
        <h4>一个无序表： </h4>
        <u1>
            <li>coffee</li>
            <li>tea</li>
            <li>milk</li>
        </u1>
        <!--
            <li>标签定义列表项，有序和无序列表中都使用<li>标签。
        -->
        <ol>
            <li>coffee</li>
            <li>tea</li>
        </ol>
        <!--
            ul: 无序列表，unordered list
            ol：有序列表，ordered list
            ul和ol前面的符号可以修改，只需要修改他们的type值
        -->
        <ol>
            <li value="8">coffee</li>
            <li>Tea</li>
        </ol>
        <!--
            ul's type:disc（实心圆），circle（空心圆），square（实心方块）
            ol's type:1-数字默认，a-小写字母，A-大写字母
            也可以通过CSS将他们前面的符号改成图片，会更加美观。
            ul是块级元素可以定义宽和高，li表示行列，不能单独使用
            需要在ul和ol里面配合使用。
        -->
        <dl> 
            <dt>我是头</dt> 
            <dd>我是内容</dd> 
            <dd>我是内容</dd> 
        </dl> 
        <!--
            也存在一个dl，dl是定义列表，会默认前后层级关系
        -->
    </body>
</html>

运行结果样式：

在这里插入图片描述

当然我们也可以更深一层做一个简单的嵌套列表：

<!DOCTYPE html>
<html>
    <body>
        <h4>一个嵌套表： </h4>
        <u1>
            <li>coffee</li>
            <li>tea
                <ul>
                    <li>redtea</li>
                    <li>greentea</li>
                </ul>
            </li>
        </u1>
    </body>
</html>

运行样式效果如下：
在这里插入图片描述

link标签

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/Index.html">
    </head>
    <!--
        <link>标签定义两个连接文档之间的联系。
        link元素是空元素，只可以存在于head部分，不过可以出现任意次数
    -->
    <body>
        <p>我通过外部样式列表进行格式化</p>
        <p>我也一样</p>
    </body>
</html>

举一个map的例子

这个其它的都没有设置好，所以比较失败…

<!DOCTYPE html>
<html>
    <!--
        <map>标签定义客户端的图像映射，图像映射是带有可点击区域的图像。
        area元素永远嵌套在map元素的内部，area元素可以定义图像映射中的区域。
        一般用id而少用name来为map标签定义唯一的名称
    -->
    <body>
        <p>请点击图上的东西，将他们有所改变</p>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560771731957&di=054691aabd0a4568843393641033aa00&imgtype=0&src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2F4ec2d5628535e5dd81c5d11462d36aebcf1b622d.jpeg%3Ftoken%3Dee9201b16411bf0a62d1c257958be514%26s%3D2F3062831A4A24DC50156C020300E0D0" 
        border="0" usemap="#planemap" alt="Planets" />
        <map name="planetmap" id="planetmap">
            <area shape="circle" coords="180,139,14" href="Index.html"
            target="_blank" alt="Venus" />
            <area shape="circle" coords="129,161,10" href="Index.html"
            target="_blank" alt="Mercury" />
            <area shape="rect" coords="0,0,110,260" href="Index.html"
            target="_blank" alt="Sun" />
        </map>
    </body>
</html>

mark标签

<!DOCTYPE html>
<html>
    <body>
        <p>just do <mark>it</mark></p>
    </body>
</html>

运行结果：
在这里插入图片描述
< menu >标签

<!DOCTYPE html>
<html>
    <body>
        <menu>
            <li><input type="checkbook" />Red</li>
            <li><input type="checkbox" />blue</li>
        </menu>
    </body>
</html>

运行结果：

在这里插入图片描述
< meta >标签

<!DOCTYPE html>
<html>
    <head>
        <!--
            <meta>元素可以提供有关页面的的元信息，比如针对搜索引擎
            和更新频度的描述和关键词，<meta>标签位于文档的头部，不包含任何内容，
            <meta>标签的属性定义了于文档相关联的名称/值对。
            而且我们最好用CSS来定义列表的类型。
        -->
        <meta http-equiv="Content-Type" content="text/html: charset=gb2312" />
        <!--
            charset: 定义文档的字符编码。
            content：定义域http-equiv或者name属性相关的元信息
            http-equiv：把content属性关联到http头部
            name：把content属性关联到一个名称
            scheme：定义用于翻译content属性值的格式。不过html5中已经不支持了
        -->
        <meta name="author" content="w3shool.com.cn" >
        <meta name="revised" content="David Yang,8/1/07">
        <meta name="generator" content="Dreamweaver 8.0en">
    </head>
    <body>
        <p>本文档的meta属性表示了创作者和编辑软件</p>
    </body>
</html>