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

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

news 2025/11/4 16:38:13

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

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/10/30 5:06:46

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/11/3 21:35:01

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/10/10 10:23:21

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/10/28 1:29:18

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/10/14 13:55:53

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/10/31 1:13:56

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/11/3 0:39:14

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/11/3 20:53:27