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

news2024/11/14 17:56:08

这一小节,我们继续说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.coloradmin.cn/o/1907908.html

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

相关文章

贝叶斯估计(1):期末大乱炖

写在前面&#xff01; 1 先验分布和后验分布 三种信息&#xff1a;总体信息、样本信息、先验信息 总体信息&#xff1a;“总体是正态分布”&#xff1b;样本信息&#xff1a;总体抽取的样本提供的信息&#xff0c;是最新鲜的信息&#xff1b;先验信息&#xff1a;在抽样之前就…

从OpenAI停服看中国市场:国产替代崛起的机遇与挑战

一、OpenAI 停服事件背景 OpenAI 自 2020 年推出 GPT-3 以来&#xff0c;在全球范围内引起了极大的反响。其强大的自然语言处理能力使其成为许多企业和开发者的首选工具。然而&#xff0c;2024 年 6 月 25 日&#xff0c;许多中国用户收到了一封来自 OpenAI 的邮件&#xff0c…

c++之命名空间详解(namespace)

引例 在学习之前我们首先了来看这样一个情形: 在c语言下&#xff0c;我们写了两个头文件&#xff1a;链表和顺序表的。我们会定义一个type(typedef int type)方便改变数据类型&#xff08;比如将int改成char&#xff09;&#xff0c;来做到整体代换。 但是我们两个头文件里面…

精益生产培训公司:从混乱到高效,只需一步!

大家有没有觉得工作中的琐事总是让你忙得团团转&#xff0c;却总是达不到预期的效果&#xff1f;其实&#xff0c;很多人都遇到过类似的困扰。今天张驰咨询想跟你们分享一个能彻底改变这种情况的方法——精益生产。其实它并不复杂&#xff0c;而是非常实用和高效&#xff01; …

Xilinx FPGA DDR4 接口的 PCB 准则

目录 1. 简介 1.1 FPGA-MIG 与 DDR4 介绍 1.2 DDR4 信号介绍 1.2.1 Clock Signals 1.2.2 Address and Command Signals 1.2.3 Address and Command Signals 1.2.4 Data Signals 1.2.5 Other Signals 2. 通用存储器布线准则 3. Xilinx FPGA-MIG 的 PCB 准则 3.1 引脚…

通过高德地图 JS API实现单击鼠标进行标注

效果图: 核心代码: <template><a-modal title="选择地图所在位置" :width="width" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"><div class="location-…

java —— JSP 技术

一、JSP &#xff08;一&#xff09;前言 1、.jsp 与 .html 一样属于前端内容&#xff0c;创建在 WebContent 之下&#xff1b; 2、嵌套的 java 语句放置在<% %>里面&#xff1b; 3、嵌套 java 语句的三种语法&#xff1a; ① 脚本&#xff1a;<% java 代码 %>…

白嫖A100活动来啦,书生·浦语大模型全链路开源体系

扫码参加即可获得&#xff1a; 第一节 书生浦语大模型全链路开源体系 书生浦语大模型的开源历程。 从模型到应用的典型流程 书生浦语的开源体系&#xff0c;包含从数据、预训练、微调、部署、评测、应用等环节

一手洞悉泰国slot线上游戏投放本土网盟CPI计费广告优势

一手洞悉泰国slot线上游戏投放本土网盟CPI计费广告优势 ​在泰国这个拥有独特文化背景和审美观念的国家&#xff0c;Slots游戏以其丰富的玩法和刺激的体验迅速赢得了玩家们的喜爱。然而&#xff0c;要在竞争激烈的市场中脱颖而出&#xff0c;有效的推广策略显得尤为重要。本土…

消防认证-防火窗

一、消防认证 消防认证是指消防产品符合国家相关技术要求和标准&#xff0c;且通过了国家认证认可监督管理委员会审批&#xff0c;获得消防认证资质的认证机构颁发的证书&#xff0c;消防产品具有完好的防火功能&#xff0c;是住房和城乡建设领域验收的重要指标。 二、认证依据…

C++入门基础篇(1)

欢迎大家来到海盗猫鸥的博客—— 断更许久&#xff0c;让我们继续好好学习吧&#xff01; 目录 1.namespace命名空间 命名空间的存在价值&#xff1a; 命名空间的定义&#xff1a; 命名空间的使用&#xff1a; 2.C输入输出函数 使用&#xff1a; 3.缺省参数 4.函数重载…

静脉分割YOLOV8-SEG

静脉分割&#xff0c;YOLOV8*SEG资源-CSDN文库 首先使用YOLOV8-SEG训练&#xff0c;得到PT模型&#xff0c;然后转换成ONNX&#xff0c;OPENCV的DNN调用&#xff0c;从而摆脱PYTORCH依赖&#xff0c;支持C,PYTHON,ANDROID调用

Spring AOP源码篇二之 代理工厂ProxyFactory学习

了解AspectJ表达式以及PointCut、Advice、Advisor后&#xff0c;继续学习Spring AOP代理工厂 AspectJ表达式参考&#xff1a;Spring AOP之AspectJ表达式-CSDN博客 PointCut、Advice、Advisor参考&#xff1a;Spring AOP源码篇一之 PointCut、Advice、Advisor学习-CSDN博客 简单…

昇思13天

ResNet50迁移学习 ResNet50迁移学习总结 背景介绍 在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;很少有人会从头开始训练整个网络。普遍做法是使用在大数据集上预训练得到的模型&#xff0c;然后将该模型的权重参数用于特定任务中。本章使用迁移学习方法对Im…

2.5 C#视觉程序开发实例1----IO_Manager实现切换程序

2.5 C#视觉程序开发实例1----IO_Manager实现切换程序 1 IO_Manager中输入实现 1.0 IO_Manager中输入部分引脚定义 // 设定index 目的是为了今后可以配置这些参数、 // 输入引脚定义 private int index_trig0 0; // trig index private int index_cst 7; //cst index priva…

简单介绍 Dagger2 的入门使用

依赖注入 在介绍 Dagger2 这个之前&#xff0c;必须先解释一下什么是依赖注入&#xff0c;因为这个库就是用来做依赖注入的。所以这里先简单用一句话来介绍一下依赖注入&#xff1a; 依赖注入是一种设计模式&#xff0c;它允许对象在运行时注入其依赖项。而不是在编译时确定&a…

学习数据库2

在数据库中创建一个表student&#xff0c;用于存储学生信息 查看建表结果 向student表中添加一条新记录 记录中id字段的值为1&#xff0c;name字段的值为"monkey"&#xff0c;grade字段的值为98.5 并查看结果 向student表中添加多条新记录 2,"bob"…

Gradle基础:从入门到掌握

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 在现代软件开发中&#xff0c;自动化构建工具是提高效率和管理依赖的重要手段。而Gradle作为一种灵活且强大的构…

Oracle 19c 统一审计表清理

zabbix 收到SYSAUX表空间告警超过90%告警&#xff0c;最后面给出的清理方法只适合ORACLE 统一审计表的清理&#xff0c;传统审计表的清理SYS.AUD$不适合&#xff0c;请注意。 SQL> Col tablespace_name for a30 Col used_pct for a10 Set line 120 pages 120 select total.…

2024全球数字经济大会:大模型时代下DataOps驱动企业数智化升级

7月5日&#xff0c;以“开源生态筑基础&#xff0c;数字经济铸未来”为主题的2024全球数字经济大会在北京成功举办&#xff0c;来自全国各地的专家学者、企业代表、数据库行业从业人士及众多开源开发者&#xff0c;共聚一堂&#xff0c;共同探讨开源数据库技术的发展现状与未来…