HTML基础之标签篇（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/52214014

这篇博客继续深入讲解HTML的基础标签，通过代码示例展示不同标签的使用，并强调在实践中记忆标签的重要性。博主指出，虽然标签众多，但通过实际操作和后续的复习，可以更好地掌握常用标签，并预告最后会有一个全面的标签总结图表。

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

本篇，继续学习html基础的标签，主要还是要在实践中记住它。
这里写图片描述

如下代码：

<html>
    <head>
        <title>标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>空格:</h1>
        <p>例如在html代码中输入空格&nbsp是不起作用的</p>
        <h1>多个空格:</h1>
        <p>输入多个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格</p>
        <h1>分隔的横线:</h1>
        <p>我是楼上<hr/>
              我是楼下<hr/>
              楼上两位被一条线分隔
        </p>
    </body>
</html>

运行结果: 这里写图片描述

这里写图片描述

代码示例:

<html>
    <head>
        <title>标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>地址:</h1>
        <address>
            中国广东省汕尾市某地某角落
        </address>
        <h1>放入一行代码(code标签)</h1>
        <p>
            准备放代码：
            <code>int sum = 0;</code> &nbsp;&nbsp;&nbsp;  这只能放一行代码
        </p>
        <h1>放入代码块(pre标签)</h1>
        <p>
            准备放代码：
            <pre>
            public String getName() {
                return name;
            }
            public int getAge() {
                return age;
            }
            </pre> &nbsp;&nbsp;&nbsp;  这能放多行代码
        </p>
    </body>
</html>

运行结果: 这里写图片描述

这里写图片描述

代码示例：

<html>
    <head>
        <title>标签</title>
        <meta charset="utf-8">
    </head>
    <body>
    <!--   ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点  -->
        <ul>
            <li>早睡早起</li>
            <li>多运动</li>
            <li>多读有用的书</li>
        </ul>
        <hr/>
        <!--<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始  -->
        <ol>
            <li>早睡早起</li>
            <li>多运动</li>
            <li>多读有用的书</li>
        </ol>
        <hr/>
        <a href="http://www.baidu.com"  title="点击进入百度" >百度</a>
        </body>
</html>