当前位置： 首页 > news >正文

【HTML入门】第四课 - 换行、分割横线和html的注释

news 2026/6/4 11:59:59

这一小节，我们继续说HTML的入门知识，包括换行、横线分割以及注释（html的注释）。

目录

1 换行

2 分割横线

3 html注释

1 换行

html中分为块元素和行内元素。这一小节呢，先不说这些元素们，我们先说一下换行。为什么会说到块元素呢，后面也许你就明白啦。

换行是 br 标签，意思就是可以使两部分内容分开，中间产生换行的效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><p>这是第一段内容</p><p>这是第二段内容</p></body>
</html>

我们看上面的效果呢，因为p标签本身就是块元素，快元素的意思就是，写2个p元素，他们会换行。但p元素换行后，中间产生的高度是一定的，会受一些默认设置的控制。

那么如果希望这2个块元素中间的换行间距大一些呢？或者我希望文字中间产生一下换行效果呢？可以这样做：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><p>这是<br/>第一段内容</p><br/><p>这是第二段内容</p></body>
</html>

 

如上图效果所示，两个p标签，中间产生了很大的间距效果。而且第一个p标签内的文字也产生了换行显示的效果。

2 分割横线

这是一个大学的官网，你看这中间的横线，可以叫横线，也可以叫分割横线。他可以使用很多方式实现，那么其中一种呢，就是本节所说的这种。标签名字是 hr，一起来看一下代码效果：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><p>这是第一段内容</p><hr/><p>这是第二段内容</p></body>
</html>

这便产生了一根横线分割，当然，如果想要实现图片示例中那种效果，还需要加一些样式控制，或者使用其他方案来实现。

3 html注释

做为开发人员，写注释是非常关键的。如果你的代码没有注释，那么过一段时间，自己再回过头来看的时候，很容易看不懂，或者你不写注释，你的代码交给其他人的时候，别人也很容易看不懂，或者看着就很费劲。

而且注释呢，是一种开发人员，用来自己读的内容，不是用来给机器读的，也不是用来给浏览器展示的，所以注释是不会显示在网页里的。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body><!-- 这是第一行代码的注释内容 --><p>这是第一段内容</p><hr/><!-- 这里是第二行哦 --><p>这是第二段内容</p></body>
</html>

如上面的代码中，我们分别给两行代码加了注释，是为了告诉开发人员自己的一些话。但不会显示在浏览器上。

相关文章：

【HTML入门】第四课 - 换行、分割横线和html的注释

这一小节&#xff0c;我们继续说HTML的入门知识&#xff0c;包括换行、横线分割以及注释&#xff08;html的注释&#xff09;。 目录 1 换行 2 分割横线 3 html注释 1 换行 html中分为块元素和行内元素。这一小节呢&#xff0c;先不说这些元素们&#xff0c;我们先说一下换…...

编程日记 2024/7/8 16:35:09

基于Hadoop平台的电信客服数据的处理与分析④项目实现：任务15：数据生产

任务描述 电信数据生产是一个完整且严密的体系&#xff0c;这样可以保证数据的鲁棒性。在本项目的数据生产模块中&#xff0c;我们来模拟生产一些电信数据。同时&#xff0c;我们必须清楚电信数据的格式和数据结构&#xff0c;这样才能在后续的数据产生、存储、分析和展示环节…...

编程日记 2024/7/8 16:34:08

Kotlin中的数据类型

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…...

编程日记 2024/7/8 16:33:06

提高交易决策质量，Anzo Capital昂首资本只需两个交易策略

要想提高交易决策质量&#xff0c;其实很简单&#xff0c;Anzo Capital昂首资本只需两个交易策略&#xff0c;结合价格行为和VSA(成交量与价格分析)就可以达成我们的目的。首先&#xff0c;理解这两个概念&#xff1a; 1. 价格行为&#xff1a;价格行为是市场价格变动的方式&a…...

编程日记 2024/7/8 16:32:05

Ubuntu TensorRT安装

什么是TensorRT 一般的深度学习项目&#xff0c;训练时为了加快速度&#xff0c;会使用多 GPU 分布式训练。但在部署推理时&#xff0c;为了降低成本&#xff0c;往往使用单个 GPU 机器甚至嵌入式平台&#xff08;比如 NVIDIA Jetson&#xff09;进行部署&#xff0c;部署端也…...

编程日记 2024/7/8 16:31:03

spring mvc学习

第四章 Spring MVC 第一节 Spring MVC 简介 1. Spring MVC SpringMVC是一个Java 开源框架&#xff0c; 是Spring Framework生态中的一个独立模块&#xff0c;它基于 Spring 实现了Web MVC&#xff08;数据、业务与展现&#xff09;设计模式的请求驱动类型的轻量级Web框架&am…...

编程日记 2024/7/8 16:28:57

第4集《修习止观坐禅法要》

请打开讲义第七面&#xff0c;四、悟道。 我们前面讲到智者大师出家以后&#xff0c;他除了持戒以外&#xff0c;一方面拜忏&#xff0c;一方面就是打坐&#xff0c;来调伏他过去的烦恼跟罪业&#xff0c;以为他未来圆顿止观的一个基础&#xff0c;这以下讲到他开悟的情况&…...

编程日记 2024/7/8 16:25:53

IPython 日志的开关：精通 %logoff 命令的实用指南

IPython 日志的开关&#xff1a;精通 %logoff 命令的实用指南 在 IPython 的强大功能中&#xff0c;日志记录是一个不可或缺的工具&#xff0c;它帮助用户记录会话历史&#xff0c;以便日后分析和重现。%logoff 命令作为日志记录功能的补充&#xff0c;允许用户在需要时停止日…...

编程日记 2024/7/8 16:23:51

Redis 分布式集群方案 Cluster

引言 相比于Codis&#xff0c;Redis Cluster是Redis官方提供的解决方案。相比于Codis的不同&#xff0c;他是去中心化的&#xff0c;如图所示&#xff0c;该集群有三个Redis节点组成&#xff0c;每个节点负责整个集群的一部分数据&#xff0c;每个节点负责的数据多少可能不一样…...

编程日记 2024/7/8 16:22:49

Redis的两种持久化方案

Redis 提供了多种持久化机制来保证数据在发生意外情况下&#xff08;如断电或服务器崩溃&#xff09;不丢失。以下是几种主要的 Redis 持久化方案及其特点&#xff1a; 1. RDB (Redis Database Backup) RDB 是 Redis 创建的数据库快照&#xff0c;它可以将数据集快照以二进制…...

编程日记 2024/7/8 16:21:48

Spring中常见知识点及使用

Spring Framework 是 Java 生态系统中最流行的开源框架之一&#xff0c;它提供了一系列强大的功能&#xff0c;用于构建企业级应用。以下是一些常见的 Spring 知识点及其使用方法&#xff1a; 1. 依赖注入&#xff08;Dependency Injection&#xff09; 依赖注入是 Spring 的…...

编程日记 2024/7/8 16:20:46

Excel 宏录制与VBA编程 ——VBA编程技巧篇二 (合并内容相同连续单元格、取消合并单元格并在每个单元格中保留内容)

1、合并内容相同的连续单元格 如果需要合并如图所示的工作表中B列中部门相同的连续单元格 VBA代码&#xff1a; Sub Mergerng()Dim IntRow As IntegerDim i As IntegerApplication.DisplayAlerts FalseWith Sheet1IntRow .Range("A65536").End(xlUp).RowFor i In…...

编程日记 2024/7/8 16:19:44

理解和应用工业设备字典文件：一篇详细指南

理解和应用工业设备字典文件&#xff1a;一篇详细指南 在工业自动化领域&#xff0c;设备和模块的配置和管理是一个复杂而重要的任务。为了简化这个过程&#xff0c;字典文件被广泛应用于描述离线对象字典。本文将详细解释字典文件的用途、格式&#xff0c;并举例说明如何引用…...

编程日记 2024/7/8 16:17:41

Python酷库之旅-第三方库Pandas(010)

目录 一、用法精讲 22、pandas.read_hdf函数 22-1、语法 22-2、参数 22-3、功能 22-4、返回值 22-5、说明 22-6、用法 22-6-1、数据准备 22-6-2、代码示例 22-6-3、结果输出 23、pandas.HDFStore.put方法 23-1、语法 23-2、参数 23-3、功能 23-4、返回值 23-5…...

编程日记 2024/7/8 16:16:39

海康威视监控web实时预览解决方案

海康威视摄像头都试rtsp流&#xff0c;web页面无法加载播放&#xff0c;所以就得转换成web页面可以播放的hls、rtmp等数据流来播放。 一&#xff1a;萤石云 使用萤石云平台&#xff0c;把rtsp转化成ezopen协议&#xff0c;然后使用组件UIKit 最佳实践 萤石开放平台API文档 …...

编程日记 2024/7/8 16:13:35

ubuntu运行qq音乐闪退

ubuntu运行qq音乐闪退 修改/usr/share/applications中的qqmusic.desktop&#xff0c;在Exec后加上 --no-sandbox,如下图所示&#xff1a; 该文件有可能是只读&#xff0c;权限不够的话用sudo vim qqmusic.desktop...

编程日记 2024/7/8 16:11:32

人脸检测（Python）

目录 环境&#xff1a; 初始化摄像头&#xff1a; 初始化FaceDetector对象&#xff1a; 获取摄像头帧&#xff1a; 获取数据&#xff1a; 绘制数据&#xff1a; 显示图像&#xff1a; 完整代码&#xff1a; 环境&#xff1a; cvzone库&#xff1a;cvzone是一个基于…...

编程日记 2024/7/8 16:09:28

Offer150-23:链表中环的入口节点

题目描述:如果一个链表中包含环&#xff0c;找了环的入口节点。例如&#xff0c;在下图所示的链表中&#xff0c;环的入口节点是节点4。 分析&#xff1a;第一步需要确定一个链表中是否包含环&#xff0c;可以用快慢指针来解决这个问题。定义两个指针&#xff0c;同时从链表的头…...

编程日记 2024/7/8 16:08:27

【linux】服务器创建RAID1

【linux】服务器创建RAID1 文章目录 【linux】服务器创建RAID1一、配置介绍raid介绍raid类型RAID 0:RAID 1:RAID 5:RAID 6:二、配置RAID硬件RAID:软件RAID:三、软件配置RAID1（以linux为例）1.先进入管理员模式2.安装mdadm工具3.创建raid1数组4.查看RAID数组状态5.格式化和挂载…...

编程日记 2024/7/8 16:06:25

记录自己Ubuntu加Nvidia驱动从入门到入土的一天

前言 记录一下自己这波澜壮阔的一天&#xff0c;遇到了很多问题&#xff0c;解决了很多问题&#xff0c;但是还有很多问题&#xff0c;终于在晚上的零点彻底放弃&#xff0c;重启windows。 安装乌班图 1.安装虚拟机 我开始什么操作系统的基础都没有&#xff0c;网上随便搜了…...

编程日记 2024/7/8 16:05:24

从USB转TTL接线到手机热点配网：ESP8266无线通信保姆级避坑指南（附软件包）

从USB转TTL接线到手机热点配网&#xff1a;ESP8266无线通信保姆级避坑指南 当你第一次拿起ESP8266模块时&#xff0c;可能会被这个小巧的Wi-Fi模块惊艳到——它只有指甲盖大小&#xff0c;却蕴含着强大的无线通信能力。但很快&#xff0c;这种惊艳就会变成困惑&#xff1a;为什…...

编程新知 2026/5/26 4:52:25

上线前最后一道防线，DeepSeek代码审查如何帮你拦截87%的CVE类缺陷？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;上线前最后一道防线&#xff0c;DeepSeek代码审查如何帮你拦截87%的CVE类缺陷&#xff1f; 在软件交付生命周期末期&#xff0c;传统人工代码审计与通用SAST工具常因误报率高、上下文理解弱而漏检高危漏…...

编程新知 2026/5/26 0:05:57

OpenCore Legacy Patcher完全指南：3步让旧款Mac焕发新生的终极方案

OpenCore Legacy Patcher完全指南&#xff1a;3步让旧款Mac焕发新生的终极方案 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否拥有一台性能尚可但已被…...

编程新知 2026/5/25 21:05:31

实战对比：用直方图均衡化与CLAHE拯救你的背光/过曝照片（附Python完整代码）

拯救逆光废片&#xff1a;直方图均衡化与CLAHE的实战效果对比每次旅行回来整理照片时&#xff0c;总会有几张因为光线问题几乎要删除的废片——要么是逆光下的人脸黑得看不清五官&#xff0c;要么是天空过曝失去所有云层细节。这些照片往往记录着重要时刻&#xff0c;直接删除实…...

编程新知 2026/5/25 20:36:10

OpenRASP原理与实战：Java应用层实时防护技术详解

1. 为什么我宁愿花三天部署OpenRASP&#xff0c;也不愿再写第五个自定义WAF过滤器去年冬天&#xff0c;我在给一家做在线教育SaaS平台做安全加固时&#xff0c;连续踩了三个坑&#xff1a;第一次用NginxLua写了套SQL注入规则&#xff0c;结果学生提交的“SELECT * FROM courses…...

编程新知 2026/5/25 20:30:09

DeepSeek模型微调全链路解析：从数据准备、LoRA配置到推理部署的7大关键步骤

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek模型微调全链路概览 DeepSeek系列大语言模型&#xff08;如DeepSeek-V2、DeepSeek-Coder&#xff09;凭借其开源特性、高性能推理能力与丰富的领域适配性&#xff0c;已成为工业界与学术界微调…...

编程新知 2026/5/25 19:57:31

告别手动预约：i茅台自动预约系统5分钟部署指南

告别手动预约&#xff1a;i茅台自动预约系统5分钟部署指南 【免费下载链接】campus-imaotai i茅台app自动预约&#xff0c;每日自动预约&#xff0c;支持docker一键部署&#xff08;本项目不提供成品&#xff0c;使用的是已淘汰的算法&#xff09; 项目地址: https://gitcode…...

编程新知 2026/5/25 19:34:31

对比按量计费与Token Plan套餐的实际成本差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比按量计费与Token Plan套餐的实际成本差异 在构建和运营基于大模型的应用时&#xff0c;成本控制是一个核心的工程考量。Taotok…...

编程新知 2026/5/25 18:30:37

人工智能的伦理与安全：这3个问题，软件测试从业者必须重视

随着大语言模型、生成式AI的爆发式落地&#xff0c;人工智能已经从实验室走向千行百业的生产场景&#xff0c;深刻改变着软件开发与交付的逻辑。对于直接把控产品质量关口的软件测试从业者来说&#xff0c;我们的职责早已不再是单纯验证功能可用性、排查性能bug那么简单——AI系…...

编程新知 2026/5/25 17:53:13

实战解锁：在Blender中掌握专业级MMD动画制作全流程

实战解锁&#xff1a;在Blender中掌握专业级MMD动画制作全流程 【免费下载链接】blender_mmd_tools MMD Tools is a blender addon for importing/exporting Models and Motions of MikuMikuDance. 项目地址: https://gitcode.com/gh_mirrors/bl/blender_mmd_tools MMD …...

编程新知 2026/5/25 17:08:38