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

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

news 2025/9/10 20:13:22

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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/7/10 6:25:54

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/9/2 17:00:11

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/9/7 8:52:29

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/9/9 10:13:02

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/9/7 2:01:34

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/9/7 2:05:40

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/9/10 3:52:13

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/8/23 22:05:50

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/8/26 22:28:46

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32