零基础HTML教程(14)--hr:黄昏的地平线_html水平线-程序员宅基地

技术标签： # 零基础HTML css 水平线 html5 html hr

文章目录

1. 引子
2. hr标签
3. 开整
4. 小结

1. 引子

犹记得那是俺上初二的时候，那年是2004年，天朗气清，惠风和畅。

那时候突然喜欢起流行音乐，也不知道从那本杂志上听到一首歌名《黄昏》，莫名的感觉这首歌很好听。

于是就去学校附近的集市买磁带，那个时候我还从未见过mp3，听歌都是买磁带，一盘磁带我记得是5块钱，那时候我一顿午饭饭钱才1元。

终于攒了好久的钱，买了一盘磁带，上面就有周传雄的《黄昏》。

在这里插入图片描述

于是那个下午放学后，我迫不及待从学校回到家里，爬到我家平房顶上，迎着乡村那美丽的落日，听了一遍一遍的歌。

依然记得从你口中说出再见坚决如铁
昏暗中有种烈日灼身的错觉
黄昏的地平线 划出一句离别
爱情进入永夜

这首歌我印象太深刻了，至今还停留在我的歌单中。

于是每次我写网页用到水平线标签，第一反应竟是——黄昏的地平线。

2. hr标签

hr标签就是网页中的水平线，该标签可以在网页上显示一条横线，一般用来分隔不同的网页内容。

使用方法很简单，在需要分割的地方，添加一个<hr>标签即可。

很多同学估计看到hr就想到单位人事…

3. 开整

编写代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>水平线实例</title>
    <meta charset="utf-8">
</head>
<body>
    《春晓》
    <hr>
    春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</body>
</html>

通过hr标签，在诗歌的标题和内容之间，就添加了一个水平线，所以效果如下：
在这里插入图片描述

4. 小结

水平线的使用非常简单，就不用再怎么总结了。

别小看水平线，在真实网页开发中，还经常会用到它。不错的标签！

本文链接：https://blog.csdn.net/woshisangsang/article/details/120422683

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Java面试必刷的200道真题，【LINQ语句】LINQ语句-程序员宅基地

文章浏览阅读934次，点赞18次，收藏11次。小编利用空余时间整理了一份《MySQL性能调优手册》，初衷也很简单，就是希望能够帮助到大家，减轻大家的负担和节省时间。关于这个，给大家看一份学习大纲（PDF）文件，每一个分支里面会有详细的介绍。这里都是以图片形式展示介绍，如要下载原文件以及更多的性能调优笔记（MySQL+Tomcat+JVM）！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！及更多的性能调优笔记（MySQL+Tomcat+JVM）！**

PowerShell学习基础篇（使用帮助）-程序员宅基地

文章浏览阅读3.2k次。PowerShell不仅仅是一门脚本语言，其实是一种运行命令行工具的命令行Shell。虽然PowerShell可以通过脚本实现很复杂的功能，但脚本仅是使用PowerShell的一种方式。PowerShell为Windows管理员提供自动化管理的工具，微软的多个产品组都采用了PowerShell，第三方生态系统扩展也是基于PowerShell，并且全球的社区专家与爱好者也都帮助PowerShell变得越来越好。_powershell

ResponseBodyAdvice的理解与应用-程序员宅基地

文章浏览阅读2.5w次，点赞6次，收藏31次。ResponseBodyAdvice接口类：/* * Copyright 2002-2017 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance..._responsebodyadvice

盘点各大互联网公司2017中秋月饼设计，你最喜欢哪一个？_各公司月饼礼盒-程序员宅基地

文章浏览阅读991次。日常，普通人拼车拼房拼自己，各大公司拼员工拼技术拼实力。每逢佳节，普通人拼奖金拼福利拼假期，而各大公司拼的是独树一帜的创意。在一年一度的中秋佳节来临之际，月饼作为中秋节的福利的代表，当然是各大公司必不可少的礼品之一。然而如何设计富有公司文化色彩的月饼；顺带还能为公司品牌宣传一波；并引起求职小高潮。这就需要丰富的想象力和新颖的创新能力。_各公司月饼礼盒

区块链学习-以太坊学习简介-程序员宅基地

文章浏览阅读235次。想知道更多关于区块链技术知识，请百度【链客区块链技术问答社区】链客，有问必答！！区块链1.0时代：也就是比特币应用中的区块链技术，里面记录着自比特币诞生以来的所有比特币转账交易，相当于比特币网络的“数据库”。其实在区块链1.0时代，也就是比特币运用的区块链技术中已经包含了智能合约的概念，可以说智能合约的引入，使得区块链技术进化为..._学习以太坊区块链需要哪些知识

vuex4的基本使用（typescript）_actiontree-程序员宅基地

文章浏览阅读2.9k次，点赞8次，收藏21次。每天对自己多问几个为什么，总是有着想象不到的收获。一个菜鸟小白的成长之路（copyer）前言：这篇博客主要介绍了vuex4的基本使用，从创建一个store对象，然后再store内部的属性进行一一的解释（就是vuex的五大和核心：state， getters，mutations，actions, modules），解释主要从类型，参数等等方面的解释，还是比较的详细。内容有点长，可以收藏起来，慢慢看哟（嘻嘻）vuex介绍 Vuex 是一个专为 Vue.js 应用程序开._actiontree