如何注释html、css、js代码

JavaScript017

如何注释html、css、js代码,第1张

不是每行代号都需要注释，但注释代码量要占10% ~ 20%，以免其他人在检测调试代码的时候，不知道这段代码是什么意思，还得从前面开始理解代码，增加别人的工作量。下面，我们来看看如何注释html、css、js代码吧。

html注释的格式

html注释的格式是【 <!--代码块-->】，把注释的内容写在“<!--”和“-->”里面就可以了。这个表示多行或单行注释。

　<!--这里写这个元素的层级、包含的大致内容、这个区域的名称-->

html注释的快捷键

在sublime编辑代码的时候，可以使用快捷键组合【 ctrl+shift+/ 】来注释代码。

css注释的格式

CSS注释的格式是【/* 注释内容 */】

js注释的格式

js注射的格式是【// js代码】

很抱歉，图中的try catch我研究了一下，是有意义的，我已更改文中内容

如果看不清图片，就右键保存查看

话说你是从哪找的，这代码可以称得上是工业级的了ヽ(ー_ー)ノ

如果图片看不清，这是源代码：

/*函数后的(window, document)表示要执行这个函数。所以要求(window, document)前面必须是一个表达式，而 ！正是这个作用。也就意味着这是自调用函数*/

! function (e, t, a) {//这的参数a可能已被弃用

function n() {

c(".love{width: 20pxheight: 20pxposition: fixedbackground: #f00transform: rotate(45deg)-webkit-transform: rotate(45deg)-moz-transform: rotate(45deg)}.love:after,.love:before{content: ''width: inheritheight: inheritbackground: inheritborder-radius: 50%-webkit-border-radius: 50%-moz-border-radius: 50%position: fixed}.love:after{top: -10px}.love:before{left: -10px}"), o(), r()

//上面是调用c()并传入了一串css样式与过渡动画，并一起调用o()r()

}

function r() {

/*下面这个for就是遍历整个d，因为与执行代码写在了一行，所以省略{}，后面的 ? : 为三元运算符  而后面大意为：判断绘画的图像是否透明，如果是，将其移除，如果不是再传入参数绘画*/

for (var e = 0 e < d.length e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "pxtop:" + d[e].y + "pxopacity:" + d[e].alpha + "transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg)background:" + d[e].color + "z-index:99999")

requestAnimationFrame(r)

//requestAnimationFrame()是一个请求动画的API，而其中的 r 就是指调用r()

}

function o() {

//这里的=是赋值，==是判断，而&&是逻辑运算符，而typeof返回的是数据类型 注：这的e应指window对象

var t = "function" == typeof e.onclick && e.onclick

e.onclick = function (e) {

t && t(), i(e)

}

}

//创建div并添加class为love,再向d中添加一串对象（用于r()的绘画）

function i(e) {

var a = t.createElement("div")

a.className = "love", d.push({

el: a,

x: e.clientX - 5,//注：这的e应指window对象

y: e.clientY - 5,

scale: 1,

alpha: 1,

color: s()

}), t.body.appendChild(a)//添加了a这个子节点

}

function c(e) {

var a = t.createElement("style")//简化代码

a.type = "text/css"

try {

a.appendChild(t.createTextNode(e)/*添加了一个内容为e的文本节点*/)//并作为a的子节点

} catch (t) {//这里的t纯属需要，无实意

a.styleSheet.cssText = e

}

//这的try catch语句意义为如果上文的e无法添加，则会将a.styleSheet.cssText赋值为e

t.getElementsByTagName("head")[0].appendChild(a)

//getElementsByTagName("head")[0].appendChild(a) 表在第一个head处添加子节点a

}

function s() {

return "#cc2a5d"//这只返回一个颜色=>RGB(204,42,93)

}

var d = []

//下面这个是对requestAnimationFrame方法进行了一个全面兼容 ||也是个逻辑运算符

e.requestAnimationFrame = function () {

return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {

setTimeout(e, 1e3 / 60)//这的e应指是window对象

}

}(), n()

}(window, document)//这的window对应参数e,document对应参数t

// rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")

//顺便说一下上面应是生成随机颜色

<!--

具体页面你要具体处理，我这里给出你最基础的，你看着变换一下就可以了

其实是我不会写正则

-->

<body>

<script>

// alert("注释的代码!")

</script>

<script>

var sc = document.getElementsByTagName('script')[0]//找到 <script>标签 这个是很容易的，有很多办法，查出现的顺序是最暴力的一个

var text = sc.text.replace('//','')//取出确定的<script>标签中的代码，再用简单的正则替换掉 “//”注释 ，没错，.text 属性就是<script>的内容 根据你具体情况选择具体的替换方法。

var sc1 = document.createElement('script')//创建一个新的<script>,如果你把旧的代码插入回原来的地方，代码是不会执行的

sc1.text = text//把去掉注释后的代码加进这个新创建的<script>标签中，

document.body.appendChild(sc1)//将新建的<script>加入到 body 中。代码被执行。

</script>

当然 这是在你能编辑 页面的情况下，

如果不能可以使用 "地址栏" 运行js的方式

</body>

---------------------------------------------分割线--------------------------------------------------------

复制下边 的到 任意 .html 文件，

<body>

<script>

//alert("注释的代码")

</script>

</body>

在 IE、火狐 中打开，

然后在地址栏输入：

javascript:(function(){var sc1=document.createElement('script')sc1.text=document.getElementsByTagName('script')[0].text.replace('//','')document.body.appendChild(sc1)})()

---------------------------

上边这是一行代码，不能断开。