HTML常用文本标签以及注释文本

目录

前言:

 1.标题标签:

前言:

实践:

总结:

2.段落标签:

前言:

段落中的空格:

总结:

3.文本格式化标签:

前言:

标签的区别:

标记之间的区别:

总结:

 4.如何注释:

前言:

如何在代码中注释:

总结:

总结:


前言:

文本是一种常见的元素,在日常生活,在描述某个东西时,在阅读文章时,都会大量出现。而在Web中我们所书写的代码,也是文本的一部分,有时候大量文字聚集在一起时我们常常难以找到其中关键点,所以在Web中就有很多用来描述文本的标签。

 HTML标签的语法和属性-CSDN博客

 1.标题标签:

前言:

html中提供了<h1>到<h6>六个级别的标题标签,<h1>标签的级别最高,<h6>标签的级别最低,通过这些标签可以定义网页的标签,合理使用标题可以使网页层次结构更加清晰。如下图:

实践:

在默认的情况下,浏览器会比普通文本更大和更粗的字体显示标题中的内容,使用<h1>标签定义的标题字体最大,而使用<h6>定义的标题字体最小。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>一个简陋的网页</h1><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"alt="此图片加载成功了??" title="此图片加载成功了"><p class="change">此表示可以显示一段文本</p><a href="https://www.bilibili.com/">此链接到bilibili</a><ul><li><a href="https://www.bilibili.com/" id="content"><b id="url">https://www.bilibili.com/</b></a></li><li>无序列表第二行</li><li>无序列表第三行</li></ul><hr><h2>新的开始</h2><br><input type="text"><ul><li style="color: aquamarine;">此文本的颜色为青色</li><li><a href="https://www.bilibili.com/" style="color:red;">点击跳转bilibili</a></li></ul><h3>一段路程</h3><div class="Name1 Name2 Name3">此处应该有点内容</div><p class="cont">此处并没有什么内容</p><div class="cont Name1">此处没有内容</div><h4>快结束了....</h4><h6>无人的结束....</h6>
</body></html>

注意:在网页上使用标签时,浏览器内置的样式会在每个标题上下添加一定的空白区域(外边距),后续可以通过CSS中的margin来设置空白区域的大小。

 上述代码的运行结果为:

总结:

使用标题标签时需要注意的是:

  • HTML标题标签只能用来定义标题,不可以使用标题标签来对文本进行加粗设计;
  • 由于搜索引擎(如百度等)是使用标题来索引网页结构和内容的,因此使用标题标签有利于搜索引擎的抓取。
  • 标题标签并不是随意使用,要根据使用的环境,按照级别由高到低的使用标题标签。

应该使用<h1>标签来标记最重要的标题,该标题常位于页面顶部,而且一个HTML文档中通常应该有且仅有一个<h1>标题,至于较低级别的标题标签(如<h2>,<h3>,<h4>),的使用可以不加太多的限制。


2.段落标签:

前言:

HTML中可以使用段落标签<p>来将文档中的内容分割为若干个段落,语法格式如下:

<p>内容</p>

段落标签有开始标签<p>还有结束标签</p>,开始标签和结束标签里面的内容会被视为段落,段落标签在很多网站里面都会用到,如下图:

需要注意的是:浏览器内置样式会在段落上下自动添加一定的空白区域(外边距),可以使用CSS中的margin属性来设置空白区域的大小。

在HTML4以及更早的版本之前,可以省略段落标签的结束标签,浏览器会自动补全缺失的结束标签,如下:

<p>bilibili

<p>前端教程

<p>前端教程-哔哩哔哩_Bilibili

段落中的空格:

在默认情况下,段落标签会对文本中的空格符进行合并,将多个空格显示为一个空格的效果,具体表现为:

  • 如果段落中出现多个连续的空格,浏览器会忽略这些空格只保留一个。
  • 如果段落中出现多个连续的行,浏览器会将这些换行转换成一个空格。

如下代码:

<p>bili             bili</p>
<p>前端教程</p>
<p>前端教程-哔哩哔哩_                                 bilibili</p>

在想要在段落标签中换行,需要专门的换行的标签<br>,<br>标签属于自闭合标签,因此不需要对应的结束标签</br>,如下:

<p>前端教程 <br> -哔哩哔哩_ <br>bilibili</p>

总结:

段落标签在实际开发中很常用,但是常常需要配合其他标签才能达到更好的效果。


3.文本格式化标签:

前言:

一些HTML标签除了具有一定的语义(含义)外,还有默认样式,如<i>设置字体为斜体,<em>强调标签中的内容,并使标签中的字体倾斜。如下是用来文本格式化的标签,表格如:

标签功能
<b>....</b>加粗标签中的字体。
<em>....</em>强调标签中的内容,并使标签中的字体倾斜。
<i>...</i>

定义标签中的字体为斜体。

<small>...</small>定义标签中的字体为小号字体。
<strong>....</strong>强调标签中的内容,并将字体加粗。
<sub>....</sub>定义上下标文本。
<sup>...</sup>定义上标文本。
<ins>....</ins>定义文档的其余部分之外的插入文本。
<del>...</del>在文本内容上添加删除线。
<code>...</code>定义一段代码。
<kbd>...</kbd>用来表示文本是通过键盘输入的。
<samp>....</samp>定义程序的样本。
<var>...</var>

定义变量。

<pre>....</pre>定义预格式化的文本,被该标签包裹的文本会保留所有的空格和换行符,字体也会呈现为等宽字体。
<abbr>...</abbr>用来表示标签中的内容为缩写形式。
<address>...</address>用来定义文档作者的联系信息,被该标签包裹的文本通常会以斜体呈现,并在文本前面换行。
<bdo>...</bdo>定义标签中的文字方向。
<blockquote>...</blockquote>定义一段引用的文本,例如名人名言,文本会以换行输入,并在左右两边进行缩进。
<q>...</q>定义一段短引用,浏览器会将引用的内容使用双引号包裹起来。
<cite>...</cite>表示对某个文献的引用,例如书籍或杂志的名称,文本会以斜体显示。
<dfn>....</dfn>yonl

按照作用可以把上述标签分为两类:

  • 物理标签:这类标签用来设置文本的外观
  • 逻辑标签:这类标签用来赋予文本一些逻辑或语义值

通过上表可以看出,有些标签虽然效果一样,但是语义并不同,如<strong>和<b>标签,<em>和<i>标签,下面就来说明他们之间的关系;

<strong>和<b>标签的区别:

在默认情况下,<strong>和<b>标签都可以使文本以粗体展示其中的文本,但是<strong>标签是说明标签里内容具有很高的重要性,而<b>标签仅仅只是加粗并没有别的含义。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>&lt;strong&gt;和&lt;b&gt;标签演示</title>
</head>
<body><p>你学会了 <strong>HTML</strong> </p><p>你已经超越<b>80%</b>的程序员</p>
</body>
</html>

此处给HTML加<strong>标签是为了强调HTML的其的重要性,以及它的震撼效果。而给网址添加<b>标签仅仅是为了视觉上的粗效果,这样能引起读者的注意。 

<em>和<i>标记之间的区别:

<em>和<i>标签在默认情况下均为斜体显示标签里的文本,<em>标签具有强调的语义,用来表示内容的重要性,但是<i>标签仅仅只是用来定义斜体文本的。

代码如下:

<p>你学会了 <em>HTML</em> </p>
<p>你已经超越<i>80%</i>的程序员</p>

总结:

在使用文本格式化标签的时候需要注意标签的语义(含义),然后再选择合适的标签,如强调重要的文本应该使用<strong>而不是<b>,因为<b>标签的作用仅仅只是加粗,不能只是为了达到效果就胡乱使用这样是不对的

 4.如何注释:

前言:

HTML注释主要用来对文档中的代码进行解释说明,注释也是代码的一部分,但浏览器会自动忽略注释的内容,所以用户在网页中是看不到注释的。

注释在我们编写代码的过程很有作用,因为一个完整的网页中的HTML代码起码有上千行,此时我们若要修改某部分代码则需要花费很长的时间去找,但是有了注释就不需要这么麻烦,我们可以根据他的功能或者其他作用将程序划分然后注释,这样既对自己阅读方便也方便他人阅读,可以大大提高代码的可读性。

如何在代码中注释:

在HTML中,<!---->里面的内容皆为注释的内容,里面的内容会被编译器,浏览器忽略。如下代码:

<!DOCTYPE html>
<!-- 此为头注释 -->
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 此为中间注释 -->
<body><ul><!-- 下面有几行被注释掉了 --><li>第一行的内容</li><!-- <li>第二行的内容</li> --><li>第三行的内容</li><li>第四行的内容</li><!-- <li>第五行的内容</li> --></ul></body>
<!-- 此为尾注释 -->
</html>

可以看到的是注释可以出现在HTML文档的任意位置,包括文档头,尾,中间,标签外部,标签内容中。注释除了可以用来对代码的说明外,还可以用来注释掉代码,如果某段代码不想执行了就可以直接注释掉。上述代码运行结果如:

总结:

注释是所有的程序中必不可少的一部分。但是也不要滥用注释,导致没必要的内容过于长,总之合理规范的使用注释可以帮助我们开发程序。

总结:

文本是我们平时最常见的元素,学习这些描述文本的标签可以帮助我们更好的描述文本的内容,能让观看者更加容易理解其中意思,可以说文本标签是必不可少的。

HTML常用的图片标签和超链接标签-CSDN博客

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

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

相关文章

go入门到精通

初识Go语言 Go语言介绍 Go语言是什么 2009年11月10日&#xff0c;Go语言正式成为开源编程语言家庭的一员。 Go语言&#xff08;或称Golang&#xff09;是云计算时代的C语言。Go语言的诞生是为了让程序员有更高的生产效率&#xff0c;Go语言专门针对多处理器系统应用程序的编…

Spring面试常见问题

目录 1、为什么要用Spring框架&#xff1f;2、有了spring为什么又出现了 springboot&#xff1f;3、springboot出现后为什么又出现了spring cloud&#xff1f;4、SpringBoot自动配置&#xff08;重点&#xff09;5、SpringBoot启动流程&#xff08;重点&#xff09;6、简单谈一…

在Linux中创建新用户的三种方法,总有一种适合你

将用户添加到Linux计算机是一项基本的管理任务,有几种方法可以实现这一点。每种创建用户的方法都有优点和缺点,我们将向你介绍三种不同的用户创建方法。 Linux计算机为什么需要用户 一台没有用户的个人计算机用处并不大。Linux支持多个用户。无论他们是同时登录并共享计算机…

PostgreSQL PGCA/PGCE/PGCM包通过率

PostgreSQL认证课程一共分为三个等级&#xff08;PGCA-PGCE-PGCM&#xff09;&#xff0c;特别注意&#xff1a;参加认证须有同级别合格培训记录&#xff0c;且不可跳级报考 PGCA-PGCE-PGCM都是线上考试&#xff0c;每两个月一次全国统考&#xff0c;详细考试时间可以参考下方表…

github拉取的项目添加至自己的仓库

想把GitHub的开源项目拉到本地进行二开&#xff0c;研究了一下上传到gitee的步骤&#xff1a; 步骤 gitee新建仓库&#xff0c;仓库名与本地文件夹的名称一致&#xff0c;建好后gitee的页面也会有显示git命令 打开项目目录&#xff0c;右键打开git bash&#xff08;或者在gi…

照片改格式怎么改?这两种方法帮你解决

不同的平台和应用程序可能对照片格式有不同的要求&#xff0c;将照片转换为适当的格式可以确保它们在网页、社交媒体、聊天应用等上加载和显示良好&#xff0c;常见的网络可接受的照片格式包括jpg、png和webp&#xff0c;那么怎么去将照片改格式呢?下面介绍几个比较简单的方法…

C# WPF编程-元素绑定

C# WPF编程-元素绑定 将元素绑定到一起绑定表达式绑定错误绑定模式代码创建绑定移除绑定使用代码检索绑定多绑定绑定更新绑定延时 数据绑定是一种关系&#xff0c;该关系告诉WPF从源对象提取一下信息&#xff0c;并用这些信息设置目标对象的属性。目标属性始终是依赖项属性&…

oracle19c安装-aarch64

建议 参考oracle官方文档提供的软硬件要求 https://docs.oracle.com/en/database/oracle/oracle-database/19/ladbi/operating-system-checklist-for-oracle-database-installation-on-linux.html#GUID-E5C0A90E-7750-45D9-A8BC-C7319ED934F0 建议使用OracleLinux8.6及以上操作…

数据结构:非比较排序

非比较排序都具有很大的局限性,包括技术排序,基数排序,桶排序等 计数排序 时间复杂度:O(N) 空间复杂度:O(range) 适用范围 数据的范围集中的数组进行排序,不适合数据分散的数组 方法 统计每个数据出现的次数为n 建立一个相同大小的数组,将每个数据都初始化为0 然后遍历…

niushop单商户V5多店版源码分享三端uniapp打包方法包括PC端_小程序或h5端打包_收银端打包_APP端打包_商户端

目前多店版有四端uniapp&#xff0c;包括PC端uniapp&#xff0c;商家端uniapp&#xff0c;收银端uniapp&#xff0c;门店手机端uniapp&#xff0c;下面我总结下这些端的打包流程希望能帮助到大家&#xff0c;需要交流的可以看我昵称或者点我头像关注我分享代码和教程 一.niush…

【微众银行笔试题汇总】 2024-03-31-微众银行春招笔试题-三语言题解(CPP/Python/Java)

&#x1f36d; 大家好这里是KK爱Coding &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新微众银行近期的春秋招笔试题汇总&#xff5e; &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&…

Java面试必问题24:线程池的拒绝策略有哪些 synchronized 和 lock 的区别 (重点)

以上列出的是Java线程池中常见的拒绝策略&#xff0c;具体可以根据实际情况选择合适的拒绝策略&#xff0c;也可以自定义实现RejectedExecutionHandler接口来定义自己的拒绝策略。默认的拒绝策略是AbortPolicy&#xff0c;即直接抛出异常。 最简回答&#xff1a;线程池的拒绝策…

YOLOv9改进策略:主干系列 | Transformer架构ConvNeXt 网络在检测中大放异彩

💡💡💡本文改进内容:Transformer架构 ConvNeXt 网络在图像分类和识别、分割领域大放异彩,同时对比 Swin-T 模型,在多种任务中其模型的大小和准确率均有一些提升,模型的 FLOPs 较大的减小且 Acc 有部分提高。 💡💡💡将此Transformer ConvNeXt 网络引入到YOLOv9…

【prometheus】k8s集群部署Grafana安装并接入Promethues数据源

目录 一、概述 1.1 优点 1.2 特点 二、grafana部署 三、grafana接入Promethues数据源 四、grafana可视化展示物理节点指标数据 五、grafana可视化展示k8s组件指标数据 5.1 kube-state-metrics简介 5.2 安装kube-state-metrics组件 一、概述 Grafana是一款用Go语言开发…

软考 - 系统架构设计师 - 数据流图案例题

阅读以下关于系统数据分析与建模的叙述&#xff0c;在答题纸上回答问题1至问题3。 【说明】 某公司正在研发一套新的库存管理系统。系统中一个关键事件是接收供应商供货。项目组系统分析员小王花了大量时间在仓库观察了整个事件的处理过程&#xff0c;并开发出该过程所执行活动…

vue 响应式原理 Object.defineProperty(obj,‘属性名A‘,options);

目录 self简单讲解1. 视图影响数据2. 数据影响视图3. 视图数据双向影响页面展示 百度 self 简单讲解 get和set方法是ES5中提供的&#xff0c;因为是方法&#xff0c;所以可以进行判断&#xff0c;get 一般是要通过 return 返回的&#xff1b;而 set 是设置&#xff0c;不用返回…

GT收发器第六篇_GT channel内部时钟关系

文章目录 一、TX端时钟二、RX端时钟 一、TX端时钟 TX端可分为4个区域&#xff0c;分别为FPGA TX接口、PCS靠FPGA侧、PCS靠PMA侧、PMA&#xff0c;如下图。GTX/GTH发射器包括TXBUFFER和TX相位校准电路&#xff0c;以解决时钟域之间的相位差。TX相位校准电路用于TXBUFFER被旁路时…

书生·浦语大模型开源体系(二)笔记

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

【tensorflow框架神经网络实现鸢尾花分类_Keras】

文章目录 1、前言2、鸢尾花分类3、结果打印 1、前言 【tensorflow框架神经网络实现鸢尾花分类】一文中使用自定义的方式&#xff0c;实现了鸢尾花数据集的分类工作。在这里使用tensorflow中的keras模块快速、极简实现鸢尾花分类任务。 2、鸢尾花分类 import tensorflow as t…

营销日历丨2024年4月营销日历火热出炉!四月热点抢先看

4月1日 愚人节 愚人节是一个充满欢乐和恶搞的节日&#xff0c;品牌可以巧妙地利用这个节点来开展一些有趣的营销活动。在这个特殊的日子里&#xff0c;品牌可以走“愚人”的恶搞路线&#xff0c;但需要注意的是&#xff0c;营销活动要把握好尺度&#xff0c;避免过度恶搞&#…