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所有标签中最简单的一个了吧。
这篇就写到这里吧，主要介绍了<!--...--> 标签相关的一些基础知识，我们下一篇见！
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
