HTML &lt;!-……-&gt; 注释标签

例

HTML 注释：

<p>这是一个段落</p>

浏览器支持

所有主流浏览器都支持  注释标签。

标签定义及使用说明

注释标签用来在源文档中插入注释。注释不会在浏览器中显示。

您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。

您也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中，这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。

<scripttype="text/javascript"></script>

注释：命令行最后的两个正斜杠（//）是 JavaScript 注释符号。这确保了 JavaScript 不会执行 --> 标签。

除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单的包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。

HTML 4.01 与 HTML5之间的差异

无。

标准属性

注释标签不支持任何标准属性。

如需更多有关 HTML 标准属性的信息，请访问标准属性。

事件属性

注释标签不支持任何事件属性。

如需更多有关 HTML 事件属性的信息，请访问事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML标题

HTML标题通过<h1>-<h6>

标题大小与字体大小的关系：1到6号标题与1到6号字体是逆序对应

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
</body>
</html>

HTML段落

HTML段落是通过标签<p>来定义

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
</body>
</html>

HTML链接

HTML链接是通过标签<a>来定义的

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
 <a href = "https://www.baidu.com"> 这是一个链接</a>
</body>
</html>

HTML图像

HTML通过标签<img>来定义

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<img  src="/images/logo.png" width="258" height="39" />
</body>
</html>

HTML属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

大多数HTML元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML水平线

<hr>标签在HTML页面中创建水平线

hr元素可用于分隔内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<p>hr 标签定义水平线：</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
</body>
</html>

运行结果：

HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下：

写个HTML标准文档结构

<!DOCTYPE html>
<html>
<head>
	<title>HTML代码一般结构</title>
	<style type="text/css">
		/*我是被注释掉了的css代码*/
	</style>
</head>
<body>
<p>我是苏逗逗</p>
<!-- <span>我是被注释掉了的HTML代码</span> -->
<script type="text/javascript">
	/*我是被注释掉了的javascript代码*/
</script>
</body>
</html>

写了一段事件的代码，发现自己的前端基础还是不够牢，于是就重新回到起点，复习下基础知识。

先学第一个标签吧，

众所周知，这是HTML代码内部的注释标签。它的作用就是让我们写的代码不被浏览器解析。

一般来说，这个标签的应用范围除了style标签和script标签内部以外的所有位置。因为这两个标签内部有自己的注释标签，如上面代码所示。

这里有个很有意思的事情，之前为了解决旧浏览器不支持script的情况，然后出现了下方类型的写法：

<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

旧的浏览器会看到两个不支持的标签和一个注释。这里的//也被旧浏览器视为被注释掉的代码内容的一部分。

新的浏览器是可以看到JS代码。新浏览器中的JavaScript引擎将字符<!--视为单行注释的开始。

//由于是在script代码的前面，表示script的单行注释，于是后面的-->也会被视为注释内容。

然后新浏览器就可以正常识别这样的代码，旧浏览器识别为两个不认识的标签，内容为空（因为被注释掉了），所以这部分内容就会在页面上被忽略了。

下面说说标签常常用到的的标准属性和事件属性，我得复习几个基础概念。

HTML其实就是超文本标记语言 (Hyper Text Markup Language)的缩写。

标记语言是一套标记标签 (markup tag)

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。其实就是简称了。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 文档包含 HTML 标签和纯文本。HTML 文档一般是由多个HTML 元素嵌套或者平行组成的内容。

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。这个和开头的那个script例子正好呼应。

下面是关于HTML 标签属性的知识。

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。

比如：

<a href="http://www.xiaosuchao.com">这是我的网站，虽然没钱租服务器，访问不了。。。</a>

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定。

这里需要注意的是，属性值应该始终被包括在引号内，属性和属性值对大小写不敏感，不过，推荐使用小写的属性/属性值。

对于所有的标签来说，都会有几个通用的属性值，我们叫他HTML 全局属性，比如id，class等。

这里的全局属性一般是给HTML标签添加css样式用的。所以，属性值的走向一般都到了css样式表文件或者是就在标签内部实现了样式改变。

另外，对于input之类的表单元素，我们常常会遇到失去焦点等情况，所以，这里在HTML标签引进了HTML 事件属性。

body标签常用的几个事件属性：onload，onresize，

form 元素常用的几个事件属性：onblur，onfocus，onchange等等。

另外就是键盘和鼠标事件了，这里的键盘事件，我感觉还是离不开input输入框这样的标签了，因为，一般只有输入框才会触发，键盘按下的事件吧。

常用的三个键盘事件属性：onkeydown，onkeypress，onkeyup。

Mouse 事件就比较多了，比如常用的button按钮的onclick，ondblclick。比如应用于p元素的onmousedown，可以让文字内容便颜色。

如下是代码：

<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}
function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>

说到这里，我突然想到了Vue代码中的，@click="search"这样的内容。最近还在接触子组件向父组件传值，也用到了@，然后就有点弄不清楚了。

但其实这里的内容和父子组件传值无关了，这里就只是单纯的点击响应了。

重新复习下概念

v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href

<a :href="{{url}}">aa</a>

v-on 指令用于绑定HTML事件：v-on:click 缩写为 @click

<button @click="get()">aa</button>

其实 @click只是提供了一种模版语法，使冒泡、阻止默认行为更加方便，本质上还是和onClick用的一样的事件监听方式。两者并没有什么区别@click能做到的onClick也能做到。@click应该是vue对onClick的封装。

如下方我这边基于element-ui写的代码，

<el-button type="primary" @click="search">查询</el-button>

这里的@click="search"其实是v-on:click="search"了。

回到HTML 标签的属性这里， 标签不光自己本身并没有自己特有的属性，也不支持任何标准属性和事件属性。可谓是HTML所有标签中最简单的一个了吧。

这篇就写到这里吧，主要介绍了 标签相关的一些基础知识，我们下一篇见！

在线咨询

上一篇：如何在网页设计中用好圆形要素
下一篇：HTML网页编程之Span标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML &amp;lt;!-……-&amp;gt; 注释标签