聊一聊HTML 標籤

時間 2019-12-01

標籤 html 標籤欄目 HTML 简体版

原文原文鏈接

定義

註釋標籤用於在html源代碼中插入註釋。註釋不會在瀏覽器上顯示。javascript

用法

根據定義的基本用法，代碼以下css

<!-- 這是一段註釋，我不會顯示在頁面上 -->

瀏覽器的支持狀況

全部瀏覽器都支持
上面這些只是最簡單的定義和使用方法。對於註釋的使用，有哪些更高級的使用。html

高級應用

一、分配工做

<!-- todo:張三 begin -->
<div></div>
<!-- end -->

二、說明功能模塊及使用方法

<!-- 激活狀態類：active,默認狀態類：default,沒法使用狀態類:disabled -->
<ul><li class="active">激活</li><li class="default">默認</li><li class="disabled">沒法使用</li></ul>

三、對於頁面製做的備註

<!-- 此頁面建立於2016/5/31,前端：李四,設計：王五 -->

以上3種應用都是基於註釋的說明做用，利用其在瀏覽器上不顯示的特性，對文檔進行說明，方便工做中跨組跨部門的溝通。前端

四、在頁內CSS/JS的做用

用於兼容老版的瀏覽器，對於js和css還沒法識別。（只用於瞭解，如今基本能夠放棄使用這個功能了），代碼以下java

<!DOCTYPE html>
<html>
<head>
<style>
.good{color:red;}
</style>
</head>
<body>
<script>alert('good')</script>
<p>morning</p>
</body>
</html>

上面的代碼會直接顯示在頁面jquery

.good{color:red;}alert('good')
morning

可使用註釋，以防止代碼顯示，影響頁面體驗。瀏覽器

<!DOCTYPE html>
<html>
<head>
<style>
<!--
.good{color:red;}
-->
</style>
</head>
<body>
<script>
<!--
alert('good')
//-->
</script>
<p>morning</p>
</body>
</html>

此處理還使用了//,是javascript的註釋符號，防止js對-->執行。優化

五、利用註釋插入代碼

這點也是利用註釋不會被頁面渲染的特性，來對頁面進行優化。能夠用來存儲數據，能夠用來存儲模板。this

<!-- {id:10000,type:ad,image:1.jpg} -->
<div is-tpl>
<!--
<div>1111111</div>
<div>2222222</div>
-->
</div>

這裏的代碼能夠用正則表達進行匹配，來取出對應數據而後對數據進行解析處理。下面是使用jquery簡單的演示代碼編碼

$('[is-tpl]').each(function(){
	console.log($(this).html())	
	var comment=$(this).html();
	$(this).html(comment.replace('<!--','').replace('-->',''));
})

這樣代碼也正確顯示了，具體註釋裏要放什麼數據以及怎麼處理，你們本身思考一下吧。

六、利用條件註釋來兼容各瀏覽器

如下條件註釋判斷IE瀏覽器（IE10之後已經不支持這些註釋了），其它瀏覽器都會認爲下面是註釋，不進行解析。

<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if IE]> 全部的IE可識別 <![endif]--> 
<!--[if !IE]><!--> 除IE外均可識別 <!--<![endif]--> 
<!--[if IE 6]> 僅IE6可識別 <![endif]--> 
<!--[if lt IE 6]> IE6如下版本可識別 <![endif]--> 
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]--> 
<!--[if IE 7]> 僅IE7可識別 <![endif]--> 
<!--[if lt IE 7]> IE7如下版本可識別 <![endif]--> 
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]--> 
<!--[if IE 8]> 僅IE8可識別 <![endif]--> 
<!--[if IE 9]> 僅IE9可識別 <![endif]-->

以上代碼你們應該是比較熟悉的，只作js和移動端的高大上，應該沒有見過。

看着不少，記憶這個能夠根據下面的規律記：
a、基本結構：

<!--[if ]> 代碼 <![endif]-->

b、和IE關係

等於爲空
大於爲gt
小於爲lt
大小於加等於gte,lte

c、而後加版本號
d、最後記得中間用空格
記住一個特別的其餘瀏覽器使用的。

<!--[if !IE]><!--> 除IE外均可識別 <!--<![endif]-->

這個能夠解釋成，兩對註釋加中間代碼。

對於這些個條件註釋的使用，常常看到有：

條件註釋html標籤

<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->

這個能夠在特定的瀏覽器去對樣式進行定義

.ie6 body{}

上面這個只有在ie6的瀏覽器纔會有這個樣式。

根據註釋引用不一樣的樣式表

<!--[if IE 6 ]>
<link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
<![endif]-->

根據條件加載js

在IE6，引用對png24的圖像支持的js

<!--[if IE 6]> 
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('.png');// .png改爲使用了透明PNG圖片的選擇器 
</script> 
<![endif]-->

對於DD_belatedPNG.js，你們百度一下，很容易找到相關的使用方法和庫。

BUG問題

IE6下的小尾巴

在ie6下，對於行內元素，中間添加註釋，可能會產生，一個尾巴。

<div style="width:80px; background:red;"><!--我是一個註釋--><a href="#">1</a><a href="#">12</a><a href="#">31</a><!--我是一個註釋--><a href="#">41</a><a href="#">51</a><a href="#">61</a><!--我是一個註釋--><a href="#">71asdfasfd</a><!--我是一個註釋--></div>
<style>
a{
float:left;
display:inline-block;
padding:0 3px;
}
</style>

如圖

只要刪除各行註釋和換行，問題解決。

註釋出如今DOCTYPE以前

雖說DOCTYPE html以前不該該出現任何代碼，但出現註釋，各主流瀏覽器並不會出現問題。但在ie7及如下IE瀏覽器會沒法識別渲染類型，致使使用怪異模式渲染，出現頁面樣式錯亂。

<!--我是第一行的註釋-->
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>無標題文檔</title>
<style>
.demo{
	width:100px;
	margin:0 auto;
	height:100px;
	background:red;
}
</style>
</head>

<body>
<div class="demo"></div>
</body>
</html>

ie7及如下顯示爲

前端其它註釋

css中的註釋

/* 我是css中的註釋 */

css中的註釋，只有這一種。

注意：使用中文註釋注意在註釋符號的先後各加一個空格，防止編碼錯誤亂碼致使樣式沒法讀取。

js中的註釋

單行註釋

//我是單行註釋

多行註釋

/* 我是多行註釋
我是多行註釋
*/

建議都使用多行註釋，以防止出現，換行符刪除後出現的代碼功能錯誤。

如

var s=10;//定義了s爲10
var b=20;
console.log(b);

少了換行符後

var s=10;//定義了s爲10var b=20;
console.log(b);

這時出現錯誤。
若是使用的多行則

var s=10;/*定義了s爲10*/var b=20;
console.log(b);

代碼不會出錯。

以上狀況也會出如今多個js合併時，單行註釋也會形成相應的錯誤。

總結

經過這一通查找資料，一直也沒以爲一個註釋標籤能夠整理這麼多東西。裏面有些好比建議或注意的問題，都是我在實際工做中遇到過的。其餘沒有接觸的也無從寫起了，還有什麼漏掉的，能夠在評論中給我一些建議。固然但願你對這個文章喜歡，並關注我。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。