零基础HTML入门教程(8)——水平线hr标签

简介: 本小结我们讲述了hr水平线,加上他可以出来一个水平线,适当的使用回事文章更加清晰。我们上几小节学习了块级元素,行内元素,我们接下来学习一下水平线,熟练运用水平线。水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。我们可以看到加上hr春晓下面会出现一个水平线,这样就会看上去更清晰。标签在 HTML 页面中创建一条水平线。2.在 HTML 中,

本章目录

1.任务目标

我们上几小节学习了块级元素,行内元素,我们接下来学习一下水平线,熟练运用水平线。

2.水平线hr

1.hr 标签在 HTML 页面中创建一条水平线。

水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

2.在 HTML 中,hr标签没有结束标签。

3.代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    《春晓》
    <hr>
    春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。
</body>
</html>

效果如下:

我们可以看到加上hr春晓下面会出现一个水平线,这样就会看上去更清晰。

4.小节

本小结我们讲述了hr水平线,加上他可以出来一个水平线,适当的使用回事文章更加清晰。

相关文章
|
17天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
17天前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
43 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1
|
1月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
110 0
JavaWeb学习之路(14)--HTML之水平线hr
本文目录 1. 水平线的概念 2. 水平线的用法 3. 小结
275 0
|
14天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
37 1
[HTML、CSS]细节与使用经验
|
15天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
29 1
[HTML、CSS]知识点
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。