HTML:注释的 5 种场景和 5 点注意事项

你好,我是云桃桃。

HTML 代码注释是用来在 HTML 源代码中添加一些说明性文字,而不会显示在页面中的内容。它们不会在浏览器中显示或渲染。

现在我们一起来看看它的语法,用途和注意事项吧。

注释语法

HTML 注释的基本语法格式是:

<!-- 注释内容 -->

它在编辑器里效果,如下图。

图片

在大多数代码编辑器中,HTML注释通常会以灰色文本显示,并且不会被浏览器解析和显示在页面上。这使得注释可以在代码中提供额外的说明和解释,而不会影响页面的外观或功能。

无论是注释多行代码,还是单行,在 vscode 里,可以直接通过ctrl + /快捷键来出现注释,但多行的时候,要先选中再注释。

使用场景

HTML 代码注释,在什么时候使用呢?主要有以下几种使用情况:

1、隐藏不需要显示的代码:可以使用 HTML 注释把一些调试代码或不需要输出的代码注释掉,但还保留在源代码中。

尤其在多人协作的时候,一串代码可能现在不需要,但后续又需要了,这时候,删除不是最好的方法,隐藏是最佳的。

例如,我暂时不需要h1大标题了。

<!-- <h1>大标题</h1> -->

然后按 F12,在浏览器预览页面,就不会出现这个内容了。 

图片

2、说明代码的作用:使用注释来说明某段代码的目的或者功能,增强代码的可读性和可维护性。这在新手阶段,特别需要,尤其我们以后网页布局内容越来越多的时候。

例如,标识区块开始结束:

<!-- 导航栏开始 -->
<div class="nav">...</div>
<!-- 导航栏结束 -->

此时注释就像是,你在一本书的页边写下了一些私人笔记或备注,这些注释不会在书的正文中显示,但它们可以帮助你在以后阅读时更好地理解书中的内容,或者在需要时提醒你注意一些重要的细节。

再例如,单行注释解释意思:

<thead><tr><th rowspan="2">姓名</th><!-- 姓名单元格占2行 --><th colspan="3">地址</th><!-- 地址单元格跨3列 --></tr><tr><!-- <th></th>  这个注释掉,因为,姓名单元格已经占住这一个单元格了--><th>省份</th><th>市区</th><th>详细地址</th></tr>
</thead>

3、标记待修复的代码:可以使用注释标记一些计划需要修复或优化的代码。

例如:

<!-- TODO: 此处图片大小响应式,需修复 -->

4、标注作者和创建时间等信息:通常在一个文件的开头。标注作者、创建时间、最后修改时间等信息。

例如:

<!-- 作者:云桃桃  创建时间:2024-01-02 -->

5、注释掉 IE 条件注释内容:当不需要支持 IE 时,可以注释掉 IE 条件注释代码。

例如:

<!--[if IE]><p>You are using Internet Explorer</p>
<![endif]-->

另外,使用 HTML 注释,需要注意以下几点:

1、注释不能嵌套,一个注释标签内不能再放置注释标签。比如,下面这样,就是嵌套了。

图片

2、注释标签不能出现在 HTML 标签中间,否则会导致 HTML 解析错误。比如下图这样,就是错误写法。

图片

3、尽量简洁明了地表达注释的目的,避免写太多容易引起误会的文字。

4、不要注释大段的代码,这会隐藏源代码中的逻辑,降低可维护性。

5、合理使用注释,太多无用注释也会增加页面代码体积,拖慢加载速度。

新手最常见的问题是,按注释语法写了,预览后却没起效,那就很有可能是1,2的问题,做下修改即可。

总结

综上,HTML 注释如果合理使用,可以很好地提高代码的可读性和可维护性。

尤其对于我们新手来说,注释一下方便看出来各个结构之间的关系以及写法作用,尤其是写上百行代码的时候。写注释对前端新手来说有 以下 3 点作用——

1、解释代码功能: 注释可以帮助新手理解代码的功能和逻辑,特别是在面对复杂的代码结构或算法时,注释可以提供关键的解释和指导。

2、记忆和学习: 通过编写注释,新手可以加深对代码的记忆和理解。将思路和解决问题的方法写下来,有助于加深印象,并在以后遇到类似问题时能够更快地解决。

3、代码维护: 随着项目的发展和代码的修改,注释可以帮助开发者快速定位和理解需要修改的部分,从而提高代码的可维护性和可读性。

总之,写注释是提高代码质量、加速学习和提升团队合作效率的重要手段,尤其对于前端新手来说,注释是学习和成长的利器。

好了,以上,本文完。

排版:云桃桃 | 图片设计:云桃桃   

图片

作者介绍:

云桃桃,在写作的程序媛。终身学习者,陪你一起编程,一起写作❤️

图片

如果你的朋友也在编程,写作

可以转发分享给TA~感谢你呀

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

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

相关文章

利用Nginx正向代理实现局域网电脑访问外网

引言 在网络环境中&#xff0c;有时候我们需要让局域网内的电脑访问外网&#xff0c;但是由于网络策略或其他原因&#xff0c;直接访问外网是不可行的。这时候&#xff0c;可以借助 Nginx 来搭建一个正向代理服务器&#xff0c;实现局域网内电脑通过 Nginx 转发访问外网的需求…

绝赞春招拯救计划 -- 数据结构篇

哈希表 来吧&#xff01;一文彻底搞定哈希表&#xff01; - 知乎 (zhihu.com) 百科解释&#xff1a; “散列表&#xff08;Hash table&#xff0c;也叫哈希表&#xff09;&#xff0c;是根据键&#xff08;Key&#xff09;而直接访问在内存存储位置的数据结构。也就是说&…

免费的 AI 视频生成工具 Moonvalley 厉害了!Moonvalley 怎么用(保姆级教程)

一、Moonvalley 介绍 Moonvalley&#xff0c;号称地表最强的 AI 视频生成工具&#xff0c;到底有多厉害&#xff1f;今天一起来看一下~ 这是 Moonvalley 官网的介绍&#xff1a; Moonvalley 是一个开创性的新型文本到视频的生成式 AI 模型。用简单的文本即可创建出惊人的电影和…

【机器学习】支持向量机 | 支持向量机理论全梳理 对偶问题转换,核方法,软间隔与过拟合

支持向量机走的路和之前介绍的模型不同 之前介绍的模型更趋向于进行函数的拟合&#xff0c;而支持向量机属于直接分割得到我们最后要求的内容 1 支持向量机SVM基本原理 当我们要用一条线&#xff08;或平面、超平面&#xff09;将不同类别的点分开时&#xff0c;我们希望这条…

蓝桥杯练习系统(算法训练)ALGO-976 P0804字符串压缩

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 编写一个函数void strcompress(char *s)&#xff0c;输入一个字符串&#xff08;只包含小写字母和空格&#xff0c;且长度小于1000&am…

MotionCtrl: A Unified and Flexible Motion Controller for Video Generation

MotionCtrl: A Unified and Flexible Motion Controller for Video Generation 这篇论文是基于VideoCrafter的&#xff0c;而VideoCrafter是基于LVDM的 关于LVDM可以看https://blog.csdn.net/Are_you_ready/article/details/136615853 2023年12月6日发表在arxiv 这篇论文讨论…

【深度学习】线性回归

Linear Regression 一个例子线性回归机器学习中的表达评价函数好坏的度量&#xff1a;损失&#xff08;Loss&#xff09;损失函数&#xff08;Loss function&#xff09;哪个数据集的均方误差 (MSE) 高 如何找出最优b和w?寻找最优b和w如何降低损失 (Reducing Loss)梯度下降法梯…

我们都想要一个好的前景

大家好&#xff0c;我是记得诚。 有个读者向我咨询了一下他的就业问题。 问题&#xff1a; 大佬好&#xff0c;我咨询一下就业方向问题。我本身是大专毕业的&#xff0c;专业是应用电子技术&#xff0c;学了一部分硬件知识和软件。 毕业后第一份工作是去一家比较小的医疗机…

天猫魔盒解码报错

最近有个天猫魔盒&#xff08;Tmall,MagicBox_M17,MagicBox_M17&#xff09;有报错&#xff0c;报错信息如下&#xff1a; generic_decoder.cc, (line 98): Too many frames backed up in the decoder, dropping frame with timestamp 4219980314https://chromium.googlesourc…

工人安全绳穿戴识别系统---豌豆云

工人安全绳穿戴识别系统采用视频图像自动识别的形式&#xff0c;豌豆云工人安全绳穿戴识别系统通过安装在作业区域的监控摄像头。 一旦发现工人高空作业未佩戴安全带的情况&#xff0c;系统可以立即发出告警&#xff0c;相关人员可以迅速采取措施&#xff0c;防止事故的发生。…

记一次多线程写入文件出现IOException:Stream Closed的问题

背景 网关在解析1000个05文件&#xff08;txt&#xff09;写入到SFTP文件时&#xff0c;是每次读取1000 * 5条数据&#xff0c;然后每1000笔数据创建一个线程逐条数据进行字段数值映射转换&#xff0c;一共创建5个线程扔到线程池进行处理。每条数据解析完都会将数据写入到SFTP的…

绪论——算法设计原则【数据科学与工程算法基础】

一、题记 最近情绪不太稳定&#xff0c;些许烦躁&#xff0c;也就一直没践行前边说的“学习记录”的想法。现在开始做了&#xff0c;春华易逝&#xff0c;正当时&#xff0c;有想法就去做&#xff0c;踌躇懊悔是这个年纪最不该做的事。 二、前言 之前说了分块做这个系列&#x…

101. Go单测系列1---使用monkey打桩

本文将介绍如何在单元测试中使用monkey进行打桩。 monkey支持为任意函数及方法进行打桩。 monkey介绍 monkey是一个Go单元测试中十分常用的打桩工具&#xff0c;它在运行时通过汇编语言重写可执行文件&#xff0c;将目标函数或方法的实现跳转到桩实现&#xff0c;其原理类似…

我用 Python 做了个小仙女代码蹦迪视频

前言 最近在B站上看到一个漂亮的仙女姐姐跳舞视频&#xff0c;循环看了亿遍又亿遍&#xff0c;久久不能离开&#xff01; 看着仙紫小姐姐的蹦迪视频&#xff0c;除了一键三连还能做什么&#xff1f;突发奇想&#xff0c;能不能把小仙女的蹦迪视频转成代码舞呢&#xff1f; 说…

uniapp引入jQuery

安装 npm install jquery --saveoryarn add jquery引入 import Vue from vue import jquery from "jquery"; Vue.prototype.$ jquery;<template><view>abc</view> </template><script>export default {data() {return {}}} </scr…

Vue3全家桶 - VueRouter - 【1】快速使用(创建路由模块 + 规定路由模式 + 使用路由规则 + RouterView-RouterLink)

VueRouter Vue-Router官网&#xff1b;vue-router 是 vue.js 官方给出的路由解决方案&#xff0c;能够轻松的管理 SPA 项目中组件的切换&#xff1b;安装&#xff1a;yarn add vue-router4&#xff1b; 快速使用 1.1 创建路由模块 在项目中的 src 文件夹中创建一个 router …

【智慧公寓】东胜物联嵌入式硬件解决方案,为智慧公寓解决方案商降本增效,更快实现产品规模化生产

方案背景 东胜物联本次服务的客户是一家专注于提供智慧公寓解决方案的欧洲企业&#xff0c;该公司旨在为用户提供智能&#xff0c;便捷&#xff0c;安全的生活体验。其解决方案涵盖智慧公寓控制、自动化、能源管理和智能建筑&#xff0c;它的使命是通过复杂的控制系统使用户能…

【OpenGL实现 03】纹理贴图原理和实现

目录 一、说明二、纹理贴图原理2.1 纹理融合原理2.2 UV坐标原理 三、生成纹理对象3.1 需要在VAO上绑定纹理坐标3.2 纹理传递3.3 纹理buffer生成 四、代码实现&#xff1a;五、着色器4.1 片段4.2 顶点 五、后记 一、说明 本篇叙述在画出图元的时候&#xff0c;如何贴图纹理图片…

局域网管理工具

每个组织的业务运营方法都是独一无二的&#xff0c;其网络基础设施也是如此&#xff0c;由于随着超融合基础设施等新计算技术的发展&#xff0c;局域网变得越来越复杂&#xff0c;因此局域网管理也应该如此&#xff0c;组织需要量身定制的局域网管理解决方案&#xff0c;这些解…

php 面试题目

当涉及到PHP排序的面试题目时&#xff0c;面试官通常会希望了解你对PHP内置排序函数的理解&#xff0c;以及你如何处理复杂的排序需求。以下是一些可能的PHP排序面试题目&#xff1a; 解释PHP中sort(), rsort(), asort(), arsort(), ksort(), 和 krsort()等函数的区别和用途。…