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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/42931.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

免费分享:1981-2016全球粮食产量数据集(附下载方法)

了解主要作物的历史产量模式&#xff0c;包括趋势和年际变化&#xff0c;对于了解在粮食需求和气候变化日益增长的情况下粮食生产的现状、潜力和风险至关重要。 数据简介 1981-2016全球粮食产量数据集是农业普查统计&#xff08;粮农组织报告的国家产量统计数据&#xff09;和…

【Linux】如何在 Linux 上查找占用空间较大的文件和文件夹

如何在 Linux 上查找占用空间较大的文件和文件夹 在日常使用 Linux 的过程中&#xff0c;我们常常需要清理磁盘空间。找出占用空间较大的文件和文件夹是一个重要的步骤。本文将介绍几种方法来查找这些占用空间较大的文件和文件夹。 方法一&#xff1a;使用 du 和 sort 命令 …

MySQL右连接详解

在 MySQL 中&#xff0c;右连接&#xff08;RIGHT JOIN&#xff09;用于从两个或多个表中获取数据&#xff0c;返回右表中的所有行&#xff0c;即使在左表中没有匹配的行。 右连接的语法如下&#xff1a; SELECT column_name(s) FROM table1 RIGHT JOIN table2 ON table1.col…

云渲染平台那个好?2024云渲染测评

1.渲染100&#xff08;强烈推荐&#xff09; 以高性价比著称&#xff0c;是预算有限的小伙伴首选。 15分钟0.2,60分钟内0.8;注册填邀请码【5858】可领30元礼包和免费渲染券) 提供了多种机器配置选择(可以自行匹配环境)最高256G大内存机器&#xff0c;满足不同用户需求。支持…

【文件共享 windows和linux】Windows Server 2016上开启文件夹共享,并在CentOS 7.4上访问和下载文件

要在Windows Server 2016上开启文件夹共享&#xff0c;并在CentOS 7.4上访问和下载文件&#xff0c;请按照以下步骤操作&#xff1a; 在Windows Server 2016上开启文件夹共享&#xff1a; 启用SMB服务&#xff1a; 打开“服务器管理器”。选择“文件和存储服务” > “共享…

ubuntu22.04下安装labelme标注工具

1、下载指令很简单 pip install labelme 如果下载速度很慢的话需要加上清华源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple labelme2、打开labelme使用以下指令 labelme 3、若出现以下错误QObject::moveToThread: Current thread (0x1634080) is not the ob…

GDBFuzz:基于硬件断点的嵌入式系统模糊测试工具

关于GDBFuzz GDBFuzz是一款功能强大的模糊测试工具&#xff0c;在该工具的帮助下&#xff0c;广大研究人员可以使用硬件断点对嵌入式系统进行模糊测试。 GDBFuzz的理念是利用微控制器的硬件断点作为覆盖引导模糊测试的反馈。因此&#xff0c;GDB被用作通用接口以实现广泛的适用…

Java异常详解及自定义异常

认识异常&#xff0c;掌握异常处理主要的5个关键字&#xff1a;throw、try、catch、final、throws并掌握自定义异常 目录 1、异常概念与体系结构 1、1异常的概念 1、2异常体系结构 1、3异常的分类 编译时异常&#xff1a; 运行时异常 &#xff1a; 2、异常处理 2、1防御式…

金银铜牌排序【二维数组借用Arrays.sort方法进行排序】

1475: 金银铜奖牌排序 题目描述 奥运会开始了,想请你为各个国家和地区做奖牌排序,按照金牌>银牌>铜牌的格式进行排序 输入 第一行 告诉你共有n个国家 接来下的n 行 每行三个数字 分别代表 金牌数量 银牌数量 铜牌数量 中间用空格隔开 输出 输出n行 每行三个数字 按…

Android v有哪些新特性?全部hidl接口更换为aidl不做支持了吗?

首先&#xff0c;需要澄清的是&#xff0c;Android的版本命名并不直接对应于字母&#xff08;如v&#xff09;&#xff0c;而是采用数字递增的方式&#xff08;如Android 1、Android 2、...、Android 14等&#xff09;。因此&#xff0c;当我们谈论“Android v”时&#xff0c;…

Kylin基本操作教程演示

以下是Kylin基本操作教程&#xff0c;内容包括安装、数据源配置、数据模型设计、数据分析和报表生成等方面&#xff1a; 安装Kylin 1.下载Kylin安装包&#xff0c;支持的操作系统包括Linux、Windows和Mac OS X。 2.解压缩安装包&#xff0c;得到kylin-xxx.jar文件。 3.在命令…

如何确保 PostgreSQL 在高并发写操作场景下的数据完整性?

文章目录 一、理解数据完整性二、高并发写操作带来的挑战三、解决方案&#xff08;一&#xff09;使用合适的事务隔离级别&#xff08;二&#xff09;使用合适的锁机制&#xff08;三&#xff09;处理死锁&#xff08;四&#xff09;使用索引和约束&#xff08;五&#xff09;批…

【C++】类和对象(中)--下篇

个人主页~ 类和对象上 类和对象中-上篇 类和对象 五、赋值运算符重载1、运算符重载2、赋值运算符重载3、前置和后置重载 六、const成员七、日期类的实现Date.hDate.cpptest.cpptest1测试结果test2测试结果test3测试结果test4测试结果test5测试结果test6测试结果test7测试结果 八…

Spring Boot 事件监听机制工作原理

前言&#xff1a; 我们知道在 Spring 、Spring Boot 的启动源码中都大量的使用了事件监听机制&#xff0c;也就是我们说的的监听器&#xff0c;监听器的实现基于观察者模式&#xff0c;也就是我们所说的发布订阅模式&#xff0c;这种模式可以在一定程度上实现代码的解耦&#…

SAP FICO自定义权限对象及自定义作业创建

设置的通用说明 要求设置税收分组权限&#xff0c;自定义权限对象&#xff1a;Z_SSFZ 执行按钮权限控制&#xff1a;权限对象Z_SSFZ 字段名&#xff1a;ZSSFZ对应维护税收分组 字段名&#xff1a;ZACTVT01 01&#xff1a;付款银行信息维护 02&#xff1a;员工基本信息维护…

Ant-Vue——modal对话框

在Vue3的项目里&#xff0c;组件库用的是Ant-design 3.2版本 修改样式 需求是需要修改原生的 modal 样式 如果直接用类名 .ant-modal-body 去修改样式&#xff0c;会发现无法修改。因为默认不支持修改高度和外边距padding 所以需要&#xff1a;先通过 挂载元素 再css穿透/de…

知识图谱驱动的深度推理:ToG算法的创新与应用

LLMs通过预训练技术在大量文本语料库上生成连贯且符合上下文的响应。然而&#xff0c;面对需要复杂知识推理的任务时&#xff0c;它们存在明显的局限性。这些问题包括对超出预训练阶段的专业知识的准确回答失败&#xff0c;以及缺乏责任性、可解释性和透明度。为了解决这些问题…

伦敦银交易平台价格的突破成不成功?这点很重要!

在伦敦银交易中&#xff0c;当银价出现突破的时候&#xff0c;也正是引起很多投资者关注的时候。一旦银价出现突破&#xff0c;很可能是新行情的开端。但是做过突破交易&#xff0c;有相关经验的朋友会发现&#xff0c;自己在伦敦银交易平台做突破的时候&#xff0c;也并不是每…

【QT】多元素控件

多元素控件 多元素控件1. List Widget2. Table Widget3. Tree Widget 多元素控件 Qt 中提供的多元素控件有: QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView xxWidget 和 xxView 之间的区别&#xff0c;以 QTableWidget 和 QTableView 为例&#xff1a; …

怎麼解決代理伺服器中的網路延遲問題-okeyproxy

使用代理伺服器時&#xff0c;不可避免地會遇到網路延遲的問題。本文將深入探討代理伺服器中的網路延遲問題&#xff0c;並提出一些解決方案。 什麼是網路延遲&#xff1f; 網路延遲指的是數據從一個點傳輸到另一個點所需的時間&#xff0c;它通常以毫秒&#xff08;ms&#…