先寫個HTML標準文檔結(jié)構(gòu)
<!DOCTYPE html> <html> <head> <title>HTML代碼一般結(jié)構(gòu)</title> <style type="text/css"> /*我是被注釋掉了的css代碼*/ </style> </head> <body> <p>我是蘇逗逗</p> <!-- <span>我是被注釋掉了的HTML代碼</span> --> <script type="text/javascript"> /*我是被注釋掉了的javascript代碼*/ </script> </body> </html>寫了一段事件的代碼，發(fā)現(xiàn)自己的前端基礎(chǔ)還是不夠牢，于是就重新回到起點，復習下基礎(chǔ)知識。
先學第一個標簽吧，<!--...-->
眾所周知，這是HTML代碼內(nèi)部的注釋標簽。它的作用就是讓我們寫的代碼不被瀏覽器解析。
一般來說，這個標簽的應(yīng)用范圍除了style標簽和script標簽內(nèi)部以外的所有位置。因為這兩個標簽內(nèi)部有自己的注釋標簽，如上面代碼所示。
這里有個很有意思的事情，之前為了解決舊瀏覽器不支持script的情況，然后出現(xiàn)了下方類型的寫法：
<script type="text/javascript"> <!-- function displayMsg() { alert("Hello World!") } //--> </script>舊的瀏覽器會看到兩個不支持的標簽和一個注釋。這里的//也被舊瀏覽器視為被注釋掉的代碼內(nèi)容的一部分。
新的瀏覽器是可以看到JS代碼。新瀏覽器中的JavaScript引擎將字符<!--視為單行注釋的開始。
//由于是在script代碼的前面，表示script的單行注釋，于是后面的-->也會被視為注釋內(nèi)容。
然后新瀏覽器就可以正常識別這樣的代碼，舊瀏覽器識別為兩個不認識的標簽，內(nèi)容為空（因為被注釋掉了），所以這部分內(nèi)容就會在頁面上被忽略了。
下面說說標簽常常用到的的標準屬性和事件屬性，我得復習幾個基礎(chǔ)概念。
HTML其實就是超文本標記語言 (Hyper Text Markup Language)的縮寫。
標記語言是一套標記標簽 (markup tag)
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。其實就是簡稱了。
HTML 元素指的是從開始標簽（start tag）到結(jié)束標簽（end tag）的所有代碼。
HTML 文檔包含 HTML 標簽和純文本。HTML 文檔一般是由多個HTML 元素嵌套或者平行組成的內(nèi)容。
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內(nèi)容。這個和開頭的那個script例子正好呼應(yīng)。
下面是關(guān)于HTML 標簽屬性的知識。
HTML 標簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。屬性總是在 HTML 元素的開始標簽中規(guī)定。
比如：
<a href=";>這是我的網(wǎng)站，雖然沒錢租服務(wù)器，訪問不了。。。</a>
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定。
這里需要注意的是，屬性值應(yīng)該始終被包括在引號內(nèi)，屬性和屬性值對大小寫不敏感，不過，推薦使用小寫的屬性/屬性值。
對于所有的標簽來說，都會有幾個通用的屬性值，我們叫他HTML 全局屬性，比如id，class等。
這里的全局屬性一般是給HTML標簽添加css樣式用的。所以，屬性值的走向一般都到了css樣式表文件或者是就在標簽內(nèi)部實現(xiàn)了樣式改變。
另外，對于input之類的表單元素，我們常常會遇到失去焦點等情況，所以，這里在HTML標簽引進了HTML 事件屬性。
body標簽常用的幾個事件屬性：onload，onresize，
form 元素常用的幾個事件屬性：onblur，onfocus，onchange等等。
另外就是鍵盤和鼠標事件了，這里的鍵盤事件，我感覺還是離不開input輸入框這樣的標簽了，因為，一般只有輸入框才會觸發(fā)，鍵盤按下的事件吧。
常用的三個鍵盤事件屬性：onkeydown，onkeypress，onkeyup。
Mouse 事件就比較多了，比如常用的button按鈕的onclick，ondblclick。比如應(yīng)用于p元素的onmousedown，可以讓文字內(nèi)容便顏色。
如下是代碼：
<!DOCTYPE html> <html> <head> <script> function mouseDown() { document.getElementById("p1").;red"; } function mouseUp() { document.getElementById("p1").;green"; } </script> </head> <body> <p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"> 請點擊文本！mouseDown() 函數(shù)當鼠標按鈕在段落上被按下時觸發(fā)。此函數(shù)把文本顏色設(shè)置為紅色。mouseUp() 函數(shù)在鼠標按鈕被釋放時觸發(fā)。mouseUp() 函數(shù)把文本的顏色設(shè)置為綠色。 </p> </body> </html>說到這里，我突然想到了Vue代碼中的，@click="search"這樣的內(nèi)容。最近還在接觸子組件向父組件傳值，也用到了@，然后就有點弄不清楚了。
但其實這里的內(nèi)容和父子組件傳值無關(guān)了，這里就只是單純的點擊響應(yīng)了。
重新復習下概念
v-bind指令用于設(shè)置HTML屬性：v-bind:href 縮寫為 :href
<a :href="{{url}}">aa</a>v-on 指令用于綁定HTML事件 ：v-on:click 縮寫為 @click
<button @click="get()">aa</button>其實 @click只是提供了一種模版語法，使冒泡、阻止默認行為更加方便，本質(zhì)上還是和onClick用的一樣的事件監(jiān)聽方式。兩者并沒有什么區(qū)別@click能做到的onClick也能做到。@click應(yīng)該是vue對onClick的封裝。
如下方我這邊基于element-ui寫的代碼，
<el-button type="primary" @click="search">查詢</el-button>這里的@click="search"其實是v-on:click="search"了。
回到HTML 標簽的屬性這里，<!--...--> 標簽不光自己本身并沒有自己特有的屬性，也不支持任何標準屬性和事件屬性。可謂是HTML所有標簽中最簡單的一個了吧。
這篇就寫到這里吧，主要介紹了<!--...--> 標簽相關(guān)的一些基礎(chǔ)知識，我們下一篇見！
1.《.vue 如何寫注釋看這里!HTML相關(guān)知識之注釋標簽——HTML學習之路（1）》援引自互聯(lián)網(wǎng)，旨在傳遞更多網(wǎng)絡(luò)信息知識，僅代表作者本人觀點，與本網(wǎng)站無關(guān)，侵刪請聯(lián)系頁腳下方聯(lián)系方式。
2.《.vue 如何寫注釋看這里!HTML相關(guān)知識之注釋標簽——HTML學習之路（1）》僅供讀者參考，本網(wǎng)站未對該內(nèi)容進行證實，對其原創(chuàng)性、真實性、完整性、及時性不作任何保證。
3.文章轉(zhuǎn)載時請保留本站內(nèi)容來源地址，http://f99ss.com/gl/2189499.html
