【HTML入门】第三课 - 标题、段落、空格

发布于:2024-07-07 ⋅ 阅读:(124) ⋅ 点赞:(0)

这一小节,我们说一些比较零散的知识,HTML课程中呢,其实就是一些标签,正是这些标签组成了前端网页的各种元素,所以你也可以叫他们标签元素。

像前两节我们说的,html head body title meta style 。这些都是标签。

1 段落

段落,很好理解,我们从小就看书,内容一段一段的,这些一段一段的内容,我们就可以放到段落标签里,段落标签是 p 。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头的山海关到西头的嘉峪关,有一万三千多里。
        </p>
        <p>
            从北京出发,不过几十公里就来到长城脚下。这一段
            长城修筑在八达岭上,高大坚固,是用巨大的条石和
            城砖筑成的。城墙顶上铺着方砖,十分平整,像很宽
            的马路,五六匹马可以并行。城墙外沿有两米多高的
            成排的垛子,垛子上有方形的瞭望口和射口,供瞭望
            和射击用。城墙顶上,每隔三百多米就有一座方形的
            城台,是屯兵的堡垒。打仗的时候,城台之间可以
            互相呼应。
        </p>
    </body>
</html>

2 标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <h1>长城 标题h1</h1>
        <h2>长城 标题h2</h2>
        <h3>长城 标题h3</h3>
        <h4>长城 标题h4</h4>
        <h5>长城 标题h5</h5>
        <h6>长城 标题h6</h6>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头的山海关到西头的嘉峪关,有一万三千多里。
        </p>
    </body>
</html>

可以看出,从h1标签到h6标签,是 从大到小 的标题体现过程。但标题标签不只是可以让文字变的大一些,变得粗壮一些,他更符合搜索引擎对于网页的抓取规范。这个我们后面说,我们现在还只是单纯的学习HTML标签就可以。

3 空格

你是否想过,我们打字的时候,敲一个空格键就可以了,那么网页中呢?我们来试一下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头      的山海关到西头的嘉峪关,有一万三千多里。
        </p>
    </body>
</html>

怎么样,你是不是看到了很多空格,我们再刷新一下浏览器,看一下效果:

这几乎就是没有起作用,对吧。那么HTML开发中,该如何开发出空格来呢?看代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>
            远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
            从东头&nbsp;&nbsp;&nbsp;&nbsp;的山海关到西头的嘉峪关,有一万三千多里。
        </p>
    </body>
</html>

看效果:

怎么样,空格是不是挺明显的了,这里就是添加了 &nbsp;  这样的控制。


网站公告

今日签到

点亮在社区的每一天
去签到