首頁  >  文章  >  web前端  >  一文詳解HTML註解與顏色(顏色名稱、十六進位值)

一文詳解HTML註解與顏色(顏色名稱、十六進位值)

青灯夜游
青灯夜游原創
2022-08-02 19:05:283142瀏覽

這篇文章帶大家了解HTML註解和顏色,並分享一些常用顏色名稱、十六進位值,希望對大家有幫助!

一文詳解HTML註解與顏色(顏色名稱、十六進位值)

一、HTML註解(附帶範例)

HTML 註解主要用來對文件中的程式碼進行解釋說明,註解也是程式碼的一部分,但瀏覽器會自動忽略註解的內容,所以使用者在網頁中看不到註解的。

我們在寫程式碼時應該善用註釋,因為一個完整的HTML 文件往往由成百上千行程式碼組成,當我們想要修改其中的某個部分時可能需要花費很長的時間才能找到想要修改的地方。有了註釋就不一樣了,我們可以根據功能或其它條件將程式劃分為若干個部分並透過註釋進行標記,這樣可以幫助您和他人閱讀您的程式碼,提高程式碼的可讀性。

單行註解

在HTML 中您可以使用<!--  -->在程式碼中加入註釋,<!--和--> ;之間的所有內容都會被視為註釋。範例程式碼如下:

<!DOCTYPE html>
<html>
<!-- head 开始 -->
<head>
    <meta charset="UTF-8">  <!-- 当前文档采用UTF-8编码 -->
    <title>HTML注释的写法</title>
</head>
<!-- head 结束 -->
<!-- body 开始 -->
<body>
    <!-- 一段文本 -->
    <p>欢迎来到PHP中文网</p>
</body>
<!-- body 结束 -->
</html>

註解可以出現在 HTML 文件的任何位置,包括文件開頭、文件結尾、文件中間、標籤外部、標籤內容中等。

多行註解

前面我們主要示範的是單行註釋,在 HTML 中同樣支援多行註解。多行註解與單行註解的差異並不大,我們只需要保證註解的內容在<!---->之間即可,如下所示:

<!--
    多行注释
-->

使用註解除了可以對程式碼進行說明外,還可以用來註解程式中的程式碼,例如當不希望某段程式碼執行時,就可以先將它們註解掉,這樣瀏覽器就不會執行這段程式碼了。

IE 條件註解

條件註解僅對 Windows 系統上的 Internet Explorer(IE)瀏覽器中有效,其他的瀏覽器會忽略它們。從 IE5 開始支援條件註釋,您可以使用條件註釋為使用 IE 瀏覽器的使用者提供一些說明。如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE浏览器条件注释</title>
</head>
<body>
<h4>根据不同的 IE 版本显示不同的内容</h4>
<!-- 如果使用 IE,则显示 -->
    <!--[if IE]>
        <p>您正在使用IE浏览器</p>
    <![endif]-->
    <!-- 如果使用 IE8,则显示 -->
    <!--[if IE 8]>
        <p>您正在使用 IE8</p>
    <![endif]-->
    <!-- 如果不是使用 IE7,则显示 -->
    <!--[if !IE 7]>
        <p>您使用的不是 IE7</p>
    <![endif]-->
    <!-- 如果版本小于 IE10,则显示 -->
    <!--[if lt IE 10]>
        <p>您正在使用 IE10 以下的版本</p>
    <![endif]-->
    <!-- 如果版本大于等于 IE6,则显示 -->
    <!--[if gte IE 6]>
        <p>您正在使用 IE6 及其以上的版本</p>
    <![endif]-->
</body>
</html>

在IE8 下的運作效果:

一文詳解HTML註解與顏色(顏色名稱、十六進位值)

#在Chrome 瀏覽器下的運作效果:

一文詳解HTML註解與顏色(顏色名稱、十六進位值)

#條件註解可以偵測目前瀏覽器是否為IE,以及IE 版本,開發人員可以根據不同的IE 瀏覽器載入不同的樣式表或JS 腳本。

比較 IE 版本將會用到以下關鍵字:

  • lt:less than 的簡寫,也就是小於的意思。

  • lte:less than or equal to 的簡寫,也就是小於或等於的意思。

  • gt:greater than 的簡寫,也就是大於的意思。

  • gte:greater than or equal to 簡寫,也就是大於或等於的意思。

  • !:不等於

IE 瀏覽器對HTML5 支援不太友好,低版的行為更是怪異,IE 已經逐漸退出市場,各大網路巨頭也不再相容IE,大家在開發過程中也不用重點考慮IE。

二、HTML 顏色值的設定

#HTML 顏色由紅色、綠色、藍色混合而成。

1、瀏覽器都支援顏色名稱集合,顏色值是一個關鍵字或是一個 RGB 格式的數字,在網頁中間用的很多。

2、使用英文單字當顏色值: 

  • red 紅色 |green 綠色 | blue 藍色 | pink 粉紅色 | purple 紫色等。

3.六位的十六進位顏色值:

  • #ff0000 簡寫:#f00

  • 前兩位表示紅色,中間兩位表際綠色,最後兩位表示藍色。

點選一個顏色名稱或 16 進位值,就可以查看與不同文字顏色搭配的背景顏色。

##  ##水##00FFFF##海藍寶石#7FFFD4Nyo色彩#F0FFFF##米色 #F5F5DCBisque#FFE4C4# # ##黑色##000000#  #    #深卡其色 #BDB76B深洋紅色8B008B深橄欖綠  #  ##黑鮭魚#E9967A# #  ##  ##DodgerBlue#1E90FFFireBrick##B22222#FloralWhite#FFFAF0## #   ##DAA520# 808080# ##薰衣草腮紅 ##FFF0F5##草坪綠色#7CFC00檸檬雪紡#FFFACD##淺藍色#ADD8E6# #LightCoral #白色E0FFFF   # # #石灰綠#32CD32##亞麻 ##洋紅色 ##栗子  中藍色#0000CD #BA55D3 #9370DB  ##MediumSlateBlue#7B68EE#中春綠##00FA9A#  #FFE4B5納瓦霍懷特#FFDEAD#海軍 # ##Olive##808000  6B8E23 #FFA500FF4500## ##粉紅藍色#B0E0E6##紫色 紅色#FF0000玫瑰色棕色BC8F8FRoyalBlue#4169E1#「馬鞍棕色#8B4513鮭魚##FA8072#SandyBrown#F4A460##海綠# 2E8B57#SeaShell##FFF5EE #Norena#A0522D 銀色##C0C0C0##天藍色 #SlateBlue## ##   ##Thistle ##D8BFD8#Tomato#FF6347Turquoise##40E0D0#Violet#EE82EEWheat#F5DEB3#White#FFFFFFWhiteSmoke#F5F5F5Yellow#FFFF00
顏色名稱 HEX 顏色
#AliceBlue  F0F8FF
古董白色  #FAEBD7
 
   
 
 
##白杏仁 #FFEBCD
藍色 0000FF
#藍紫 8A2BE2 ## 
#棕色##  #A52A2A############################################################################# #### ##########BurlyWood### ###########DEB887########## #################################################################### #### CadetBlue### ##########5F9EA0######### ##############Chartreuse### #### #### ###7FFF00######## ################### #########D2691E##### ### ## ##############珊瑚色### ##########FF7F50########## ###### ##### ######矢車菊藍### ##########6495ED###  
##玉米絲 #FFF8DC
#深紅色  #DC143C
青色  #00FFFF
##深藍色  ##00008B
#深青色 # 008B8B # # 
#DarkGoldenRod  #B8​​860B
深灰色 #A9A9A9
深綠色 ##006400
 
#556B2F # 深橘色
#FF8C00 ##深蘭花
#9932CC 深紅
#8B0000 ##   
深海綠
#8FBC8F ### #####DarkSlateBlue### # ##########483D8B# ######### #############DarkSlateGray### ### ######2F4F4F###  
##深綠松石  #00CED1
深紫  #9400D3
#深粉紅色  #FF1493
Booo #00BFFF
##DimGray  #696969
## 
 
 
##森林綠 #228B22 ## 
紫紅色  #FF00FF
蓋恩斯伯勒  #DCDCCDC
##幽靈白
##F8F8FF ##金色
##FFD700##  ##GoldenRod
#灰色
######## ######綠色### ##########008000########## ###############綠黃### # ########ADFF2F######### ############################################################################################################################################################################ ###HoneyDew### ##########F0FFF0############## #FF69B4
#印度紅 #CD5C5C  
##靛藍   #4B0082
#象牙色  ##FFFFF0
##卡其色 ##F0E68C
薰衣草色  E6E6FA
   
 
   
 
# F08080
淺金棒黃色
#FAFAD2 #淺灰色
#D3D3D3
##淺綠色 90EE90########## ############################################################################ ####淺粉色### ##########FFB6C1#### #### ################## ### #######FFA07A########## ###### ########淺海綠### ##########20B2AA## ######## ################淺藍色藍色# ## ##########87CEFA###  
##LightSlateGray  #778899
#淺鋼藍  #B0C4DE
##淺黃色  #FFFFE0
  #00FF00## 
   
#FAF0E6
#FF00FF
#800000 ##  #MediumAquaMarine
##66CDAA##   
##中蘭花
#中紫色
  ##中海綠
#3CB371  
########################################。 ################# #####中綠松石### ##########48D1CC########## # ##############中紫羅蘭色### # #########C71585########## ########### ####午夜藍### ##########191970# ##  
##薄荷奶油 #F5FFFA
#MistyRose  #FFE4E1
莫卡辛
 
   
# 000080
OldLace  #FDF5E6
OliveDrab
##  橘紅色 
##蘭花 #DA70D6
################################ ########淡金棒### ##########EEE8AA######### ###############白綠### ####### ###98FB98######## ##############淡綠松石色### ######## ###AFEEEE######## #################淡紫紅色##############DB7093#### ################ ######木瓜鞭### ##########FFEFD5########## ## ##############PeachPuff### # #########FFDAB9######### ############################# #秘魯### ##########CD853F#### ##########CD853F#### ##########CD853F############## #FFC0CB
#梅 DDA0DD
 
#800080
 
 
   
 
   
 
 
 
#87CEEB ## 
#6A5ACD #####SlateGray#### ###########708090# ######### ###### ########雪### ##########FFFAFA######### #### ############春綠# ############00FF7F###  
SteelBlue  #4682B4
Tan  #D2B48C
Teal   #008080
   
 
   
 
 
   
   
   

YellowGreen一文詳解HTML註解與顏色(顏色名稱、十六進位值) 

#9ACD32

#### ##################Web安全色##### ####數年以前,當大多數電腦只支援256 種顏色的時候,一系列216 種Web 安全色作為Web 標準被建議使用。其中的原因是,微軟和 Mac 作業系統使用了 40 種不同的保留的固定係統顏色(雙方大約各使用 20 種)。 ######我們不確定如今這麼做的意義有多大,因為越來越多的電腦有能力處理數百萬種顏色,不過做選擇還是你自己。 ######最初,216 跨平台 web 安全色被用來確保:當電腦使用 256 色調色板時,所有的電腦能夠正確地顯示所有的顏色。 ###############相關推薦:《###html影片教學###》###

以上是一文詳解HTML註解與顏色(顏色名稱、十六進位值)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn