UTM 參數(shù)、URL 和 HTML 實(shí)體的那點(diǎn)事

起

想寫(xiě)這篇文章，是因?yàn)樽罱?GA 中發(fā)現(xiàn)了一些問(wèn)題。

EmarSys 是公司新簽約的 EDM 服務(wù)商，在 GA 中已經(jīng)可以看到最新一期 EDM 帶來(lái)的流量。但它的媒介參數(shù)似乎不正確，理論上應(yīng)該設(shè)置為 email。

運(yùn)營(yíng)部的同學(xué)認(rèn)為提供給 EDM 的鏈接不會(huì)有錯(cuò)，于是我深入分析之后便有了這篇文章。寫(xiě)完它，我以后應(yīng)該就不需要口頭再解答很多問(wèn)題了。

UTM 參數(shù)

UTM 參數(shù)的作用這里暫不贅述。我們先看一個(gè)正常的、加了 UTM 參數(shù)的鏈接（URL），它通常是這樣的：

http://www.foobar.com/?utm_source=google&utm_medium=cpc&utm_campaign=test&utm_term=test

簡(jiǎn)單小結(jié)一下參數(shù)規(guī)則：

UTM 參數(shù)可能有一個(gè)或多個(gè)。
每個(gè) UTM 參數(shù)由參數(shù)名和參數(shù)值組成，使用等號(hào)（=）連接。
多個(gè) UTM 參數(shù)之間使用 and 字符（&）連接。
所有參數(shù)使用問(wèn)號(hào)（?）附加到原始鏈接的尾部。
（其它略微高級(jí)一點(diǎn)的規(guī)則與主題無(wú)關(guān)，暫且略過(guò)。）

實(shí)際工作中，建議使用專(zhuān)門(mén)的鏈接生成工具來(lái)為鏈接添加 UTM 參數(shù)，避免手工失誤。

當(dāng)有人用瀏覽器訪(fǎng)問(wèn)這個(gè) URL 時(shí)，UTM 參數(shù)就會(huì)發(fā)揮作用。

好的，如果你只是提供一個(gè)最終鏈接給一個(gè)靠譜的 Agency，那么直接提供上面的鏈接就可以了。但是如果是自己制作 EDM，情況會(huì)稍稍復(fù)雜一些。

HTML 實(shí)體

EDM 的本質(zhì)實(shí)際上是一個(gè) HTML 頁(yè)面（或一段 HTML 代碼），理論上它需要遵守 HTML 規(guī)范。

我們?cè)谏厦嫣岬降?& 字符在 HTML 代碼中是一個(gè)特殊字符，有特殊用途，它不能直接代表它自己。如果要在 HTML 頁(yè)面中表達(dá)這個(gè)字符時(shí)，你需要在源代碼中把它寫(xiě)成 &。這種寫(xiě)法叫做“HTML 實(shí)體”，其它一些字符也需要以實(shí)體的形式來(lái)寫(xiě)入 HTML 代碼中（比如大于號(hào) > → >、人民幣符號(hào) ￥ → ￥等等）。

所以，如果要把鏈接加到 EDM 中的某個(gè)元素身上，在 HTML 源碼中就需要這樣寫(xiě)（摘自 EDM 源文件）：

當(dāng)然，用戶(hù)并不會(huì)接觸到源代碼。用戶(hù)通常是使用郵件客戶(hù)端（比如 FoxMail、Outlook 等）或?yàn)g覽器來(lái)查看郵件，這些程序都是遵循 HTML 規(guī)范來(lái)開(kāi)發(fā)的，它們可以正確地解析實(shí)體，將其轉(zhuǎn)換為本來(lái)的字符。

所以，雖然我們?cè)谠创a中看到鏈接使用的是 & 實(shí)體，但郵件在顯示的時(shí)候，這些實(shí)體會(huì)被解讀為 & 字符。也就是說(shuō)，用戶(hù)在查看郵件的時(shí)候，會(huì)得到一個(gè)正確的鏈接。如下圖（EDM 源文件在瀏覽器中的效果）：

好，文章正文到此已經(jīng)結(jié)束。不過(guò)文章開(kāi)頭的問(wèn)題還沒(méi)有解決，所以我們繼續(xù)。

繼續(xù)分析問(wèn)題

到目前為止，事情看起來(lái)都還不錯(cuò)，對(duì)吧？

可是，我們并不是直接發(fā)送 HTML 文件，而是通過(guò) EDM 投放系統(tǒng)（比如目前剛剛開(kāi)始使用的 EmarSys）來(lái)完成郵件的發(fā)送。一封 EDM 從我們做好的 HTML 頁(yè)面到發(fā)送到用戶(hù)的郵箱中，經(jīng)歷了一些處理。其中一個(gè)相當(dāng)重要的處理步驟，是把頁(yè)面中原有的鏈接（通常已經(jīng)加上了 UTM 參數(shù)）“包裝”起來(lái)。也就是說(shuō)，并不會(huì)把原鏈接直接提供給用戶(hù)，而是把原鏈接替換成一個(gè)“中轉(zhuǎn)鏈接”（格式大約是 http://link2.foobar.com/u/nrd.php?p=XXX）。

我們觀察一下收到的 EDM 郵件，可以發(fā)現(xiàn)這一點(diǎn)：

這個(gè)中轉(zhuǎn)鏈接會(huì)把用戶(hù)帶到真正的目標(biāo)頁(yè)面。（為什么 EmarSys 要使用這種中轉(zhuǎn)鏈接？其實(shí)幾乎所有成熟的 EDM 服務(wù)商都會(huì)這樣做，這樣做有一些好處，不過(guò)這里也不贅述了。）

發(fā)現(xiàn)問(wèn)題

鋪墊了這么久，終于要發(fā)現(xiàn)真相了——問(wèn)題就出在 EmarSys 的系統(tǒng)和這個(gè)中轉(zhuǎn)鏈接。

這個(gè)系統(tǒng)并不能正確識(shí)別 HTML 頁(yè)面中的實(shí)體，在生成中轉(zhuǎn)鏈接的過(guò)程中，并不能把原鏈接中的 &實(shí)體解析為它的本意 & 字符，而是直接理解為實(shí)體的字面。這樣一來(lái)，用戶(hù)會(huì)被中轉(zhuǎn)鏈接帶到一個(gè)錯(cuò)誤的、不是我們本意的地址。

下圖是我對(duì)中轉(zhuǎn)鏈接的跟蹤，它通過(guò) HTTP 重定向（302）實(shí)現(xiàn)跳轉(zhuǎn)，跳轉(zhuǎn)目標(biāo)由 Location 字段指定：

發(fā)現(xiàn)問(wèn)題了吧？如果點(diǎn)擊 EDM 中的鏈接，用戶(hù)真正到達(dá)的地址是這樣的：

不要小看這幾個(gè)字符的差異，這個(gè) URL 的實(shí)際效果已經(jīng)不是我們最初期望的那樣了。如果你分析一下，會(huì)發(fā)現(xiàn)這個(gè)頁(yè)面（除了 utm_source 參數(shù)以外）真正接收到的是 amp;utm_media 這樣的參數(shù)，而不是原本的 utm_media 等等。參數(shù)傳錯(cuò)了，GA 當(dāng)然也就收不到正確的值，所以實(shí)際上不僅媒介參數(shù)有問(wèn)題，活動(dòng)、內(nèi)容、關(guān)鍵字參數(shù)都沒(méi)有收到：

解決方案

目前我們所能做的：

向 EmarSys 反饋此問(wèn)題，要求修復(fù)此缺陷。
在此問(wèn)題修復(fù)之前，我們?cè)?HTML 代碼的鏈接中，不使用實(shí)體，直接使用 & 字符。（需要注意的是，這樣編寫(xiě)的 HTML 代碼是不規(guī)范的，我們這樣做僅僅是為了繞過(guò) EmarSys 系統(tǒng)的缺陷。）

希望本文能幫助到您！

點(diǎn)贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點(diǎn)贊，都是耍流氓-_-）

關(guān)注｛我｝，享受文章首發(fā)體驗(yàn)！

每周重點(diǎn)攻克一個(gè)前端技術(shù)難點(diǎn)。更多精彩前端內(nèi)容私信我回復(fù)“教程”

原文鏈接：https://mp.toutiao.com/profile_v3/graphic/publish

HTML標(biāo)簽相關(guān)的字符串格式化

string nl2br ( string $string )

nl2br() 就是將\n 替換成 <br> //javascript對(duì)\n才能夠執(zhí)行換行,對(duì)</br>是不能執(zhí)行換行

htmlspecialchars() 把一些預(yù)定義的字符轉(zhuǎn)換為 HTML 實(shí)體。

string htmlspecialchars(string,quotestyle,[character-set])

轉(zhuǎn)換以下字符及對(duì)應(yīng)的實(shí)體

& （和號(hào)） 成為 &
" （雙引號(hào)） 成為 "
' （單引號(hào)） 成為 '
< （小于） 成為 <
> （大于） 成為 >

第二個(gè)參數(shù): ENT_COMPAT 只轉(zhuǎn)換雙引號(hào), 保留單引號(hào), 為默認(rèn)值 compat: 兼容性

ENT_QUOTES 同時(shí)轉(zhuǎn)換兩種引號(hào) quotes: 引號(hào)

ENT_NOQUOTES 不對(duì)引號(hào)進(jìn)行轉(zhuǎn)換

<html>
<body>
<?php
$str = "John & \" 'Adams'";
echo htmlspecialchars($str, ENT_COMPAT);
echo "<br />";
echo htmlspecialchars($str, ENT_QUOTES);
echo "<br />";
echo htmlspecialchars($str, ENT_NOQUOTES);
?>
</body>
</html>

輸出結(jié)果:John & " 'Adams'

John & " 'Adams'

htmlentities() 可以將所有的非ASCII碼字符轉(zhuǎn)換為對(duì)應(yīng)的實(shí)體代碼;除字母、數(shù)字、\外, 漢字和鍵盤(pán)上其他字符都轉(zhuǎn)換

<?php
$str = "A 'quote' \" is <b>bold</b>" ;
echo htmlentities ( $str ); // 輸出后源代碼: A 'quote' is <b>bold</b>
echo htmlentities ( $str , ENT_QUOTES ); // 輸出后源代碼: A 'quote' is <b>bold</b>
?>

返回的結(jié)果:A 'quote' "is <b>bold</b>

A 'quote' "is <b>bold</b>

注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本

htmlspecialchars()和htmlentities()函數(shù)對(duì)于轉(zhuǎn)義字符"\"處理,不會(huì)轉(zhuǎn)義實(shí)體代碼,要么當(dāng)轉(zhuǎn)義字符對(duì)待,要么原樣輸出;

PHP中htmlentities和htmlspecialchars的區(qū)別

這兩個(gè)函數(shù)的功能都是轉(zhuǎn)換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標(biāo)記被瀏覽器執(zhí)行。

使用中文時(shí)沒(méi)什么區(qū)別, 但htmlentities會(huì)格式化中文字符使得中文輸入是亂碼。

htmlentities轉(zhuǎn)換所有的html標(biāo)記, htmlspecialchars只格式化& ' " < 和 > 這幾個(gè)特殊符號(hào)

addslashes() 在指定的預(yù)定義字符前添加反斜杠。

這些預(yù)定義字符是：?jiǎn)我?hào) (') 雙引號(hào) (") 反斜杠 (\) NULL字符(\x00)

提示：該函數(shù)可用于為存儲(chǔ)在數(shù)據(jù)庫(kù)中的字符串以及數(shù)據(jù)庫(kù)查詢(xún)語(yǔ)句準(zhǔn)備合適的字符串。

注釋?zhuān)耗J(rèn)情況下，PHP 指令 magic_quotes_gpc 為 on，對(duì)所有的 GET、POST 和 COOKIE數(shù)據(jù)自動(dòng)運(yùn)行 addslashes()。

不要對(duì)已經(jīng)被magic_quotes_gpc轉(zhuǎn)義過(guò)的字符串使用 addslashes()，因?yàn)檫@樣會(huì)導(dǎo)致雙層轉(zhuǎn)義。

遇到這種情況時(shí)可以使用函數(shù) get_magic_quotes_gpc() 進(jìn)行檢測(cè)。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)

在本例中，我們要向字符串中的預(yù)定義字符添加反斜杠：

<?php
$str = "Who's John Adams?";
echo $str . " This is not safe in a database query.<br />";
echo addslashes($str) . " This is safe in a database query.";
?>

輸出：

Who's John Adams? This is not safe in a database query.

Who\'s John Adams? This is safe in a database query.

<?php
header("Content-type:text/html; charset=utf-8");
$str = "wo are \x0a studying \x00 php";
echo $str;
echo "<br>";
echo addslashes($str);
?>

輸出:

wo are studying php

wo are studying >wo are studying \0 php< php

stripslashes() 刪除反斜線(xiàn)（"\"）

在提交的表單數(shù)據(jù)中 ' " \ 等字符前被自動(dòng)加上一個(gè)\ ,這是配置文件php.ini中選項(xiàng)magic_quotes_gpc在起作用，

默認(rèn)是打開(kāi)的，如果不處理則將數(shù)據(jù)保存到數(shù)據(jù)庫(kù)時(shí)，有可能會(huì)被數(shù)據(jù)庫(kù)誤當(dāng)成控制符號(hào)而引起錯(cuò)誤。

通常htmlspecialchars()和stripslashes()函數(shù)復(fù)合的方式，聯(lián)合處理表單中的提交的數(shù)據(jù)htmlspecialchars(stripslashes())

strip_tags()

string strip_tags ( string $str [, string $allowable_tags ] )

剝?nèi)?HTML、XML 以及 PHP 的標(biāo)簽。

<?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>

輸出結(jié)果:Hello world!

實(shí)例:

<?php
$str = "<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉(zhuǎn)換雙引號(hào),為默認(rèn)參數(shù)
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對(duì)引號(hào)進(jìn)行轉(zhuǎn)換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時(shí)轉(zhuǎn)換單引號(hào)和雙引號(hào)
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉(zhuǎn)換為對(duì)應(yīng)的實(shí)體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線(xiàn)
echo "<br />";
echo stripslashes($str); //刪除反斜線(xiàn)
echo "<br />";
echo strip_tags($str); //刪除<html>標(biāo)記
?>

輸出結(jié)果:

webserver; & \ 'Linux' & Apache

上一篇：php基礎(chǔ)知識(shí)

主要參考：https://www.w3school.com.cn

思維導(dǎo)圖

思維導(dǎo)圖第一版

1、web編程基礎(chǔ)-什么是HTML、CSS、Javascript

web網(wǎng)站可以說(shuō)是互聯(lián)網(wǎng)的基礎(chǔ)。每個(gè)網(wǎng)站，可以比喻為一座座房子。寬帶網(wǎng)絡(luò)，就是房子門(mén)前的路。url地址，就是房子的門(mén)牌標(biāo)志。HTML代碼，就是建造房子的建筑材料（磚頭、水泥、鋼筋）；CSS代碼，就是裝修房子的裝修材料；那么Javascript代碼就是這房子的水電了？ JS代碼則更像是未來(lái)世界可以讓房子成為變形金剛的智能機(jī)器。因此，一些展示“老房子”的瀏覽器，可能并不支持Javascript。

定義：

HTML（Hyper Text Markup Language），是使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)的一種超文本標(biāo)記語(yǔ)言。

Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容。HTML定義網(wǎng)頁(yè)的內(nèi)容。

CSS（Cascading Style Sheets），指層疊樣式表。樣式定義如何顯示HTML元素，規(guī)定網(wǎng)頁(yè)的布局。

Javascript 則是屬于HTML和Web的編程語(yǔ)言，對(duì)網(wǎng)頁(yè)進(jìn)行編程。

Jquery 是一個(gè)Javascript函數(shù)庫(kù)

2、環(huán)境配置

參考上一篇：php基礎(chǔ)知識(shí)，安裝-集成環(huán)境與編輯器

推薦使用 phpstudy + phpstorm

操作步驟：1、在phpstudy 安裝目錄下，把代碼文件放大到根目錄www/ 下。

2、瀏覽器直接訪(fǎng)問(wèn) localhost/index.html即可看到效果。

3、HTML

HTML元素：是從開(kāi)始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。

例如：<p>前面這個(gè)是開(kāi)始標(biāo)簽，中間文字是元素內(nèi)容，后面這個(gè)是結(jié)束標(biāo)簽</p>

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。

屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn)，比如：name="value"。

屬性總是在 HTML 元素的開(kāi)始標(biāo)簽中規(guī)定。

常用HTML元素屬性：

class ：規(guī)定元素的類(lèi)名（classname），一個(gè)html文件里面多個(gè)標(biāo)簽可以擁有相同的類(lèi)名。

id ：規(guī)定元素的唯一 id，一個(gè)html文件里面id不能相同。

style ：規(guī)定元素的行內(nèi)樣式（inline style）

3.1、常用HTML標(biāo)簽：

1、標(biāo)題：標(biāo)題（Heading）是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。

2、段落：通過(guò) <p> 標(biāo)簽定義。

3、注釋標(biāo)簽  用于在 HTML 插入注釋。

4、鏈接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 屬性規(guī)定鏈接的目標(biāo)。開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。

5、圖像：<img src="yummuu.png" alt="Yummuu" /> 。src 圖像源屬性，alt替換文本屬性。

6、表格標(biāo)簽：

7、列表標(biāo)簽

8、塊級(jí)元素和內(nèi)聯(lián)元素

<div> 元素是塊級(jí)元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒(méi)有特定的含義。除此之外，由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行。如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。

<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。

<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。

<span> 元素也沒(méi)有特定的含義。

當(dāng)與 CSS 一同使用時(shí)，<span> 元素可用于為部分文本設(shè)置樣式屬性。

兩者的區(qū)別：就是在顯示時(shí)是否起新行。塊級(jí)元素會(huì)起新行，而內(nèi)聯(lián)元素則不會(huì)。

9、框架與內(nèi)聯(lián)框架：frame，<iframe src=" " name=" "></iframe>

10、腳本：<script> 定義客戶(hù)端腳本，如Javascript；<noscript> 為不支持客戶(hù)端腳本的瀏覽器定義替代內(nèi)容。

11、頭部元素：

<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。

以下標(biāo)簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>：在所有 HTML/XHTML 文檔中都是必需的。它能夠定義瀏覽器工具欄中的標(biāo)題，提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題，顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題。

<base>：為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）

12、HTML實(shí)體

在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）。

13、表單元素：

<form> ：定義 HTML 表單。

<input> ：是最重要的表單元素。<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性。

input的輸入類(lèi)型type有text、password、submit、radio、checkbox、button；（HTML5新增）number、date、color、range、month、week、time、datetime、datetime-local、email、search、tel、url。

input的常用屬性：value、readonly、disabled、size、maxlength；（HTML5新增）required、multiple、pattern、min和max、list、height和width、autocomplete

<select> ：定義下拉列表 <option> 元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)。您能夠通過(guò)添加 selected 屬性來(lái)定義預(yù)定義選項(xiàng)。

<textarea>：定義多行輸入字段（文本域）

<button>：定義可點(diǎn)擊的按鈕

4、CSS

樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。

層疊次序

當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？

一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。

1、瀏覽器缺省設(shè)置

2、外部樣式表

3、內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）

4、內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

4.1、CSS語(yǔ)法

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

每條聲明由一個(gè)屬性和一個(gè)值組成。

屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)。

selector {property: value}

4.2、CSS選擇器

1、派生選擇器：

通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，例如: h1 span{color:red;}

2、id選擇器：

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來(lái)定義。

3、類(lèi)選擇器：

以一個(gè)點(diǎn)號(hào)顯示，例如： .className{text-align: center;}

4、屬性選擇器：

對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。例如： div[rel=’mm’]{ color:’#000’;}

可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。

注釋?zhuān)褐挥性谝?guī)定了 !DOCTYPE 時(shí)，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

5、后代選擇器（包含選擇器）：可以選擇作為某元素后代的元素

6、子元素選擇器：選擇作為某元素子元素的元素。例如：h1>span{font-size:16px;}

7、相鄰兄弟選擇器：可選擇緊接在另一元素后的元素，且二者有相同父元素。

例如：h1 + p {margin-top:50px;}

8、偽類(lèi)：用于向某些選擇器添加特殊的效果。

:active 向被激活的元素添加樣式

:focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式

:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式

:link 向未被訪(fǎng)問(wèn)的鏈接添加樣式

:visited 向已被訪(fǎng)問(wèn)的鏈接添加樣式

:first-child 向元素的第一個(gè)子元素添加樣式（不建議使用）

:lang 向帶有指定lang屬性的元素添加樣式

9、偽元素：用于向某些選擇器設(shè)置特殊效果。

:first-letter 向文本的第一個(gè)字母添加樣式

:first-line 向文本的首行添加樣式

:before 在元素之前添加內(nèi)容

:after 在元素之后添加內(nèi)容

4.3、常用CSS屬性

在線(xiàn)咨詢(xún)

上一篇：HTML <body> 標(biāo)簽
下一篇：HTML 編輯器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商