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

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

news 2026/4/2 14:30:50

这一小节，我们继续说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

Halcon点云拼接实战：如何用特征模板搞定3D扫描缺失问题？

Halcon点云拼接实战&#xff1a;特征模板技术在工业3D扫描中的应用 在工业检测和逆向工程领域&#xff0c;3D扫描常常面临一个棘手问题——单次扫描无法完整捕获复杂物体的所有表面细节。想象一下&#xff0c;当您需要检测一个汽车发动机缸体的内部结构&#xff0c;或者重建一…...

编程新知 2026/4/2 14:26:00

JD-GUI：3分钟掌握Java反编译的终极免费工具

JD-GUI&#xff1a;3分钟掌握Java反编译的终极免费工具 【免费下载链接】jd-gui A standalone Java Decompiler GUI 项目地址: https://gitcode.com/gh_mirrors/jd/jd-gui 你是否曾经面对一个没有源码的Java程序感到无从下手&#xff1f;或者需要快速理解第三方库的内部…...

编程新知 2026/4/2 13:12:26

013、部署篇：从本地开发到云原生（Docker/K8s）服务化部署

013、部署篇&#xff1a;从本地开发到云原生&#xff08;Docker/K8s&#xff09;服务化部署一、从一次深夜调试说起 上周三凌晨两点&#xff0c;我被报警短信吵醒——线上RAG服务的响应时间从200ms飙到了5秒。登录服务器一看&#xff0c;CPU跑满了&#xff0c;内存倒是还剩不少…...

编程新知 2026/4/2 11:55:18

面试复盘（Debrief）的艺术：挂了面试不可怕，如何通过感谢信获取真实Feedback并为下次“埋伏笔”？

在2026年竞争极其激烈的北美科技求职市场中&#xff0c;即使是背景最优秀的候选人&#xff0c;也必然会经历面试失败。在工业界的招聘漏斗中&#xff0c;由于技术栈匹配度、团队预算&#xff08;Headcount&#xff09;变动或单纯的竞争者过强&#xff0c;收到拒信&#xff08;R…...

编程新知 2026/4/2 11:38:52

GitHub OCaml项目：C++后端突破与代码编译新变革

【导语&#xff1a;GitHub的OCaml项目迎来重要升级&#xff0c;开发者stedolan提交补丁为ocamlc添加新的C后端&#xff0c;改进运行时和FFI使用的非增量C代码&#xff0c;这一突破将为代码编译带来新的可能。】OCaml新添C后端&#xff1a;代码编译新途径开发者stedolan希望将2次…...

编程新知 2026/4/2 11:28:43

ENVI实战：利用传感器波谱响应函数实现光谱曲线精准重采样

1. 为什么需要光谱重采样&#xff1f; 在遥感数据分析中&#xff0c;我们经常会遇到一个头疼的问题&#xff1a;不同传感器采集的光谱数据分辨率不一致。比如实验室用光谱仪测量的叶片反射率可能有上千个波段&#xff0c;而Landsat-8卫星只能获取11个波段的数据。这就好比用高清…...

编程新知 2026/4/2 9:47:28

【Java等保三级最小可行合规方案】：从Spring Boot 2.7到3.2，仅需修改8处配置+3个注解

第一章&#xff1a;Java等保三级合规的底层逻辑与演进脉络等保三级&#xff08;GB/T 22239-2019《信息安全技术 网络安全等级保护基本要求》&#xff09;对Java应用系统提出了覆盖“安全物理环境、安全通信网络、安全区域边界、安全计算环境、安全管理中心”五大层面的强制性约…...

编程新知 2026/4/2 9:31:07

MacOS自动操作神器：3个隐藏功能一键搞定桌面整理（附脚本）

MacOS自动操作神器&#xff1a;3个隐藏功能一键搞定桌面整理&#xff08;附脚本&#xff09; 每次打开Mac电脑&#xff0c;看到满屏的文件和图标&#xff0c;是不是感觉工作效率瞬间降了一半&#xff1f;特别是视频创作者和设计师&#xff0c;桌面上经常堆满素材和半成品&#…...

编程新知 2026/4/2 6:26:29

Istio Gateway+VirtualService配置不生效？Java服务流量劫持失败的6大隐性原因深度诊断

第一章&#xff1a;Istio GatewayVirtualService配置不生效&#xff1f;Java服务流量劫持失败的6大隐性原因深度诊断Istio 的 Gateway 与 VirtualService 是实现南北向流量治理的核心资源&#xff0c;但 Java 应用在启用 Istio Sidecar 注入后&#xff0c;常出现请求未被 Envoy…...

编程新知 2026/4/2 4:09:11

从MySQL到Doris：手把手教你无缝迁移数据模型（附分区分桶实战配置）

从MySQL到Doris&#xff1a;数据模型迁移实战与分区分桶深度优化 如果你正在使用MySQL处理海量数据分析任务&#xff0c;可能会遇到查询性能瓶颈、复杂聚合计算效率低下等问题。Apache Doris作为新一代MPP分析型数据库&#xff0c;兼容MySQL协议却提供了完全不同的底层架构设计…...

编程新知 2026/4/2 4:01:07