侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

HTML <!--...--> 注释标签的深层次作用分析

前端  /  管理员 发布于 2年前   108

我们查看很多网站源代码的时候,会发现很多注释,特别是新浪网注释标签用于在源文档中插入注释,注释文字一般作为程序员参考使用,特别是大型、多人开发的网站源码,如果没有注释就无法让甲程序员写的代码,让乙程序员识别,这样万一程序员甲离职了,那么他所写的代码将很难被维护。而有了注释之后,对代码的理解将更容易。



新浪网源代码HTML注释(绿色文字就是注释)

HTML 注释会被浏览器忽略,而HTML 注释直接在网站源代码内部编写,也不会显示在前端。如上图,绿色部分都是注释,不会被显示出来,通过上面绿色文字,我们可以知道这段代码是什么意思,以及代码开始结束。HTML 注释格式如下:


复制代码代码如下:
<!-- 这里是注释文字 by -->
<!--
这里也是注释文字
但是换行了也可以 by
-->

HTML 注释高级作用

顾名思义,HTML注释就是一种注释,对程序的内部注解。其实这只是最基础的作用,但是正是因为这些被前端浏览器忽视的功能,现代网页程序对注释进行了更深入的探究,让注释越来越有用。

对页内CSS/JS的作用

HTML 注释还被用于页内 Javascript 和 CSS 代码,很多老版的浏览器或者无法识别Javascript 和 CSS 的浏览器,如果直接写代码,往往会显示出文字,十分影响阅读。


复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<style >
body{color:#F00}
</style>
<script type="text/javascript">
alert('欢迎访问');
</script>
</head>
<body>
<p>Jbzj!</p>
</body>
</html>

上面的代码,没有使用HTML 注释,如果在一些老版手机浏览器和IE6以下版本访问,会显示下面文字:


复制代码代码如下:
body{color:#F00} alert('欢迎访问');</p><p>Jbzj!

即使这些老版浏览器不认识<style> 和 <script> 等等标签,但是根据标签不显示原则,这些标签也不会被显示出来的,就当作无法识别的自定义标签。而这些标签内部的文字就会被直接显示出来,毫无疑问,这些CSS 和 Javascript 代码肯定不想被显示出来,所以如果使用下面注释代码,就不会显示CSS 和 Javascript了。


复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<style >
<!--
body{color:#F00}
--!>
</style>
<script type="text/javascript">
<!--
alert('欢迎访问');
--!>
</script>
</head>
<body>
<p>Jbzj!</p>
</body>
</html>

HTML注释被用于MVC设计

现代很多开源代码项目,特别是MVC网页设计风格的开源代码,这些项目会在传统HTML代码中插入一些注释,之后在这些注释里面添加如广告等内容。



Discuz 利用HTML注释插入代码、判断Discuz代码


  • 上一条:
    jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
    下一条:
    Windows 7磁盘配置使用技巧提高磁盘使用率
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • TP(3/5)
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • uni-app在详情页中给电话信息添加点击拨打电话的功能按钮(0个评论)
    • uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo(0个评论)
    • uni-app开发小程序使用uni.getLocation()实现页面即时获取当前定位信息demo(1个评论)
    • uni-app开发小程序实现列表页条件筛选显示功能demo(0个评论)
    • vue+elementui实现百度地图api滑上列表显示位置信息(0个评论)
    • 近期文章
    • php语言中检测及转换文件字符编码函数介绍(0个评论)
    • laravel中轻量化的钱包实现方案:Laravel Wallet(0个评论)
    • mysql性能优化之8种常见SQL错误用法(0个评论)
    • Laravel 9.13版本发布(0个评论)
    • beego+GeoLite2免费数据库获取ip地址经纬度等定位归属信息(0个评论)
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
    • Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
    • go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
    • 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
    • 近期评论
    • 阿凡达123 在

      golang 怎么做热更新中评论 也可以看看这个:https://github.com/edwingeng/hot..
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 路过的靓仔 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..
    • 激光豆芽 在

      为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客