【网页前端设计HTML】水平线、div、自闭合标签及块元素和行内元素、特殊符号

最新推荐文章于 2024-08-21 15:28:06 发布

5 12霞

最新推荐文章于 2024-08-21 15:28:06 发布

阅读量2.4k

点赞数 51

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/weixin_53597021/article/details/140402044

版权

使用所分享的知识，还不能够完成下图的设计，观察一下，我们还有什么知识没讲呢?
在这里插入图片描述
聪明的你一定能看到：一条长长的线分隔开每一个科目，但是这条长线怎么表示，用什么标签呢?

一、水平线标签

我来告诉你，这条长长的线，我们称之为“水平线”。在HTML中，我们可以使用“hr标签”来实现一条水平线。hr，是horizon（水平线）的缩写。
语法：<hr />
我们通过一张图来看一下它的效果：
在这里插入图片描述
红色的框框里面的内容对应的就是水平线的代码和效果。
请完成以下练习：

二、div标签

每个科目我们可以看成一部分，那么它可以分成几部分呢？那怎么表示这样的某一部分呢？在HTML中，我们可以使用“div标签”来划分HTML结构。
尝试使用div把以上的两首古诗分成2部分。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>水平线标签</title>
</head>
<body>
    <!--这是第一首诗-->
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr/>
    <!--这是第二首诗-->
    <h3>春晓</h3>                  
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
</body>
</html>

加上div标签：

<body>
    <!--这是第一首诗-->
    <div>
        <h3

最低0.47元/天解锁文章