Question

在HTML中撰写评论的正确方法是：。对于Javascript，撰写评论的正确方法是// Comment或/* Comment */，而对于CSS，评论则写为/* Comment */。

在HTML元素的style和onclick属性中撰写评论的正确方法是什么？

例如，哪个是对的？这样：

<span style='color: red; <!-- background-color: green; -->'>Test</span>

或者这个：

<span style='color: red; /* background-color: green; */'>Test</span>

在fiddle中进行测试后，两个代码都生成了与“测试”一词相同的结果，红色并且没有背景颜色。

另外，哪个是正确的？这样：

<span onclick="alert('1'); // alert('2');">Click me!</span>

这样：

<span onclick="alert('1'); /* alert('2'); */">Click me!</span>

或者这个：

<span onclick="alert('1'); <!-- alert('2'); -->">Click me!</span>

因为，根据this小提琴，所有3个元素在点击时都会产生一个提示“1”。

感谢您的回答。

Answer 1

style属性的语法与CSS文件基本相同。因此注释语法与CSS中的相同，即/* ... */

onEVENT属性的语法是Javascript。 Javascript有两种类型的注释：//注释到行尾，而/* ... */包含注释。如果onEVENT属性是一行，如果您使用//，它将对该属性的其余部分进行注释。如果您想先结束评论，请使用/* ... */。您还可以在onEVENT属性中添加换行符;那么//评论只会持续到换行符。

示例：

<div id="foo" onclick="alert('foo'); // comment */; alert('bar');">
    // comment
</div>
<div id="bar" onclick="alert('foo'); /* comment */ alert('bar');">
    /* */ comment
</div>
<div id="foobar" onclick="alert('foo'); // comment
alert('bar')">
    // comment multi-line
</div>

在// comment中，第二个alert()被注释掉了。在/* */ comment中，两个警报都会执行。此外，两个警报都在// comment multi-line中执行。令人惊讶的是，SO代码荧光笔可以做到这一点！

FIDDLE

Answer 2

首先，不要混淆HTML，CSS和JavaScript评论。它们不可互换。

让我们从您的第一个HTML代码段开始：

<span style='color: red; <!-- background-color: green; -->'>Test</span>

这里没有评论。您不能将HTML注释放在属性中。例如，如果您将该属性从style更改为title，则您会注意到整个属性 - ＆＃34;评论＆＃34;并且全部 - 在悬停/工具提示文本中结束：http://jsfiddle.net/Mw3wy/

这意味着内容已包含在文档内容中 - 即它未被注释掉。

下一步。

<span style='color: red; /* background-color: green; */'>Test</span>

这里我们有嵌套格式：我们有一个HTML元素，其属性值为多个CSS declarations。在CSS中，you can create comments using /* C-style */ block comments。

所以这里我们没有HTML评论，但我们有CSS评论。这意味着内容没有被注释成为HTML文档内容的一部分，但它是从CSS声明中注释掉的 - 所以无论引擎负责解析CSS并根据这些声明呈现页面上的元素都将忽略它。

但是如果我们在不同的上下文中使用相同的语法：

<span title='color: red; /* background-color: green; */'>Test</span>

...现在没有评论，因为此代码段中不需要CSS语法。

让我们同时谈谈接下来的两个：

<span onclick="alert('1'); // alert('2');">Click me!</span>  
<span onclick="alert('1'); /* alert('2'); */">Click me!</span>

这两者都没有HTML注释，但它们确实包含JavaScript注释。同样，我们有嵌套格式：我们有一个HTML元素，其中一个属性被解释（和格式化）为JavaScript代码，因此您可以在该上下文中使用JavaScript风格的注释。

但是......

<span onclick="alert('1'); <!-- alert('2'); -->">Click me!</span>

...是JavaScript的语法错误。你可能会让alert('1')工作，但是在它之后的任何其他代码都不会执行：http://jsfiddle.net/Ma9Tb/

这是因为您在无法使用HTML环境的情况下使用HTML评论。您无法在<script>元素中使用HTML评论：http://jsfiddle.net/SbZ2m/

重要的是要跟踪嵌套格式的时间。例如，您可以拥有一个包含JavaScript代码的HTML属性 - 包括注释 - 然后操作一串CSS格式的数据 - 其中包含CSS注释：http://jsfiddle.net/EGK5X/

<button onclick="this.setAttribute('style', 'color:red;/*CSS comment!*/background:black;'); // JavaScript comment!">Click on me!</button>

如果您对此感到困惑，您最终会遇到this one等问题。

Answer 3

我成功尝试了以下代码 -

    <div style="width:816px; /*height:1300px;*/ float: left"></div>
<div style="width:816px; <!--height:1300px;--> float: left"></div>

我认为两者都是正确的方法。

在诸如＆＃39; style＆＃39;等属性中写评论的正确方法是什么？和＆＃39; onclick＆＃39;？

3 个答案: