Home > Web Front-end > HTML Tutorial > How to annotate statements in front-end development? Three methods of annotation (introduction)

How to annotate statements in front-end development? Three methods of annotation (introduction)

青灯夜游
Release: 2018-09-15 17:37:52
Original
13809 people have browsed it

In front-end development, comment statements are often needed for some reasons (such as code description, annotation, etc.). So how to annotate annotation statements, and what are some precautions for annotation statements? This chapter shows you how to annotate statements in front-end development? Three methods of annotation (introduction). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. HTML Tag

1.Definition:

Comment tag is used to insert comments in html source code. Comments will not be displayed in the browser.

2. Usage

<!--xxxxxx(需要注释的语句)-->
Copy after login

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML <!--...--> 标签</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.demo{
				width: 200px;
				height: 100px;
				margin: 50px auto;
			}
			ul li{
				width: 20px;
				height: 20px;
				float: left;
				margin: 10px;
				list-style: none;
				background-color: #70DBDB;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>1~5的数字,不会显示2</p>
			<ul>
				<li>1</li>
				<!--<li>2</li>-->
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</body>
</html>
Copy after login

Rendering:

How to annotate statements in front-end development? Three methods of annotation (introduction)

##In the above example, the number 2 The reason why it cannot be displayed on the monitor is because the string of code that displays the number 2 is commented out and cannot be displayed.

tag can be used for multi-line comments and can only be used in HTML files to comment HTML source code.

2. //--Single line comment

Double slash comment line (//) can only be used in JavaScript Comments on source code can only be implemented as single-line comments.

Code example:

<script type="text/javascript">
//alert("Hello World!")
</script>
Copy after login

When you run the above code, the "Hello World!" dialog box will not pop up.


3. /*...*/--Multi-line comments ## Slash star comments (/*.. .*/) can be used to comment CSS source code and JavaScript source code, and can be used to comment multiple lines together.

In the css source file:

/* 注释内容 */ 
/* ----------文字样式开始---------- */ 
/* 白色12象素文字 */ 
.dreamduwhite12px 
{ 
color:white; 
font-size:12px; 
} 
/* 黑色16象素文字 */ 
.dreamdublack16px 
{ 
color:black; 
font-size:16px; 
} 
/* ----------文字样式结束---------- */
Copy after login

Commenting the source code can help explain the code and enhance the readability of the code.

In JavaScript:

/* var jb51 = "m.sbmmt.com"; 
var jb51 = "du"; 
*/
Copy after login

Note:

##Excessive comments in JavaScript will reduce the execution speed of JavaScript and loading speed, so before publishing the website, JavaScript comments need to be removed.
  • In JavaScript, (/* or */) cannot appear in the comment block (/* ... */), because this kind of code may be generated in JavaScript regular expressions , this will produce a syntax error, so it is recommended to use // as a comment statement in JavaScript to comment the code.
Summary:

In the process of front-end development, you can use comments to explain the code and enhance the readability of the code. This will help you edit (maintain or review) the code in the future. This is especially useful when writing a lot of code; you can use comment tags to hide scripts that are not supported by the browser (so that the script is not displayed as plain text).

The above is the detailed content of How to annotate statements in front-end development? Three methods of annotation (introduction). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template