TML(HyperText Markup Language)是一種用于創建網頁的標記語言。它由一系列的標簽組成,這些標簽用于描述網頁的結構和內容。HTML標簽通常由尖括號包圍,例如<tag>。
HTML標簽可以分為兩類:塊級元素和內聯元素。塊級元素用于組織網頁的結構,例如段落、標題、列表等。內聯元素用于標記文本中的特定部分,例如鏈接、強調文本等。
HTML標簽可以包含屬性,屬性提供了有關標簽的額外信息。例如,<a>標簽用于創建鏈接,可以使用href屬性指定鏈接的目標URL。
除了標簽和屬性,HTML還支持一些特殊字符實體,用于表示特殊字符,例如小于號(<)、大于號(>)等。
HTML可以與CSS(層疊樣式表)和JavaScript一起使用,以增強網頁的外觀和功能。CSS用于控制網頁的樣式,例如顏色、字體、布局等。JavaScript用于實現交互性和動態效果,例如表單驗證、動畫等。
通過使用HTML,開發人員可以創建具有結構良好、易于理解和導航的網頁。它是構建互聯網的基礎之一,被廣泛應用于網站開發和內容管理系統。
HTML的語法由標簽、屬性和內容組成。下面是HTML的基本語法規則:
下面是一個簡單的HTML示例:
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎來到我的網頁</h1>
<p>這是一個段落。</p>
<a href="https://www.example.com">點擊這里</a>訪問示例網站。
</body>
</html>
在這個示例中,<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息,例如標題和樣式表。<title>標簽定義了網頁的標題,將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內容。<h1>標簽定義了一個一級標題,<p>標簽定義了一個段落,<a>標簽定義了一個鏈接。
TML常用標簽
主要包括 結構 、 表現 和 行為 三個方面。
標準說明結構用于對 網頁元素 進行整理和分類(HTML)表現用于設置網頁元素的 外觀樣式 (CSS)行為網頁模型的定義及 交互 的編寫(JavaScript)
如果將web標準比喻為一只鳥,則
雙標簽關系分為:
<!--head標簽包含title標簽-->
<head>
<title></title>
</head>
<!--head標簽與body標簽并列-->
<head></head>
<body></body>
標簽名定義<html></html>html標簽<head></head>文檔的頭部<title></title>文檔的標題<body></body>文檔的主體
<!DOCTYPE html> <!--文檔類型聲明標簽-->
<html lang="en"> <!--en:英語,zh-CN:中文-->
<head>
<!--字符集,UTF-8為萬國碼,統一使用-->
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
一個標題獨占一行。(塊級元素)
<h1>
一級標題(字號最大)
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
六級標題(字號最小)
</h6>
用于將HTML文檔分割為若干段落。
特點:
<p>
這是一個段落
</p>
用于強制換行。
特點:
<br>這是換行標簽
語義標簽加粗<strong></strong>傾斜<em></em>刪除線<del></del>下劃線<ins></ins>
用于界面布局。
特點:
<div>
這是大盒子
</div>
<span>這是小盒子</span>
用于定義頁面中的圖像。
<!--屬性與屬性之間用空格分開-->
<img src="圖像的url" alt="" title="">
屬性說明src圖片路徑( 必須屬性 )alt圖像不能顯示時的替換文本title鼠標放到圖像上顯示的提示文本width設置圖像的寬度height設置圖像的高度border設置圖像的邊框粗細(在CSS中修改)
注:圖像的寬和高一般只修改其中一個,另一個會隨之調整。
相對路徑分類符號說明同一級src="文件名"下一級/src="同一級文件夾名稱/文件名"上一級../src="../文件名"
注意:絕對路徑用“\”分隔,相對路徑用“/”分隔。
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
屬性作用href鏈接目標的url( 必須屬性 )target鏈接頁面的打方式。_self:在當前窗口打開(默認值),_blank:在新窗口打開
<!--這是一行注釋-->
特殊字符描述字符的代碼空格符<小于號<>大于號>&和號&¥人民幣¥?版權©?注冊商標®°攝氏度°±正負號±?乘號×?除號÷2平方²3立方³
注:重點記住前三個。
大家平時學習web前端的時候肯定會遇到很多問題,小編我為大家準備了web前端學習資料,將這些免費分享給大家!如果想要的可以找我領取
領取方式:
如果想獲取這些學習資料,先關注我然后私信小編“01”即可免費領取!(私信方法:點擊我頭像進我主頁右上面有個私信按鈕)
如果這篇文章對你有幫助,請記得給我來個評論+轉發噢
想寫這篇文章,是因為最近在 GA 中發現了一些問題。
EmarSys 是公司新簽約的 EDM 服務商,在 GA 中已經可以看到最新一期 EDM 帶來的流量。但它的媒介參數似乎不正確,理論上應該設置為 email。
運營部的同學認為提供給 EDM 的鏈接不會有錯,于是我深入分析之后便有了這篇文章。寫完它,我以后應該就不需要口頭再解答很多問題了。
UTM 參數的作用這里暫不贅述。我們先看一個正常的、加了 UTM 參數的鏈接(URL),它通常是這樣的:
http://www.foobar.com/?utm_source=google&utm_medium=cpc&utm_campaign=test&utm_term=test
簡單小結一下參數規則:
實際工作中,建議使用專門的鏈接生成工具來為鏈接添加 UTM 參數,避免手工失誤。
當有人用瀏覽器訪問這個 URL 時,UTM 參數就會發揮作用。
好的,如果你只是提供一個最終鏈接給一個靠譜的 Agency,那么直接提供上面的鏈接就可以了。但是如果是自己制作 EDM,情況會稍稍復雜一些。
EDM 的本質實際上是一個 HTML 頁面(或一段 HTML 代碼),理論上它需要遵守 HTML 規范。
我們在上面提到的 & 字符在 HTML 代碼中是一個特殊字符,有特殊用途,它不能直接代表它自己。如果要在 HTML 頁面中表達這個字符時,你需要在源代碼中把它寫成 &。這種寫法叫做“HTML 實體”,其它一些字符也需要以實體的形式來寫入 HTML 代碼中(比如大于號 > → >、人民幣符號 ¥ → ¥ 等等)。
所以,如果要把鏈接加到 EDM 中的某個元素身上,在 HTML 源碼中就需要這樣寫(摘自 EDM 源文件):
當然,用戶并不會接觸到源代碼。用戶通常是使用郵件客戶端(比如 FoxMail、Outlook 等)或瀏覽器來查看郵件,這些程序都是遵循 HTML 規范來開發的,它們可以正確地解析實體,將其轉換為本來的字符。
所以,雖然我們在源代碼中看到鏈接使用的是 & 實體,但郵件在顯示的時候,這些實體會被解讀為 & 字符。也就是說,用戶在查看郵件的時候,會得到一個正確的鏈接。如下圖(EDM 源文件在瀏覽器中的效果):
好,文章正文到此已經結束。不過文章開頭的問題還沒有解決,所以我們繼續。
到目前為止,事情看起來都還不錯,對吧?
可是,我們并不是直接發送 HTML 文件,而是通過 EDM 投放系統(比如目前剛剛開始使用的 EmarSys)來完成郵件的發送。一封 EDM 從我們做好的 HTML 頁面到發送到用戶的郵箱中,經歷了一些處理。其中一個相當重要的處理步驟,是把頁面中原有的鏈接(通常已經加上了 UTM 參數)“包裝”起來。也就是說,并不會把原鏈接直接提供給用戶,而是把原鏈接替換成一個“中轉鏈接”(格式大約是 http://link2.foobar.com/u/nrd.php?p=XXX)。
我們觀察一下收到的 EDM 郵件,可以發現這一點:
這個中轉鏈接會把用戶帶到真正的目標頁面。(為什么 EmarSys 要使用這種中轉鏈接?其實幾乎所有成熟的 EDM 服務商都會這樣做,這樣做有一些好處,不過這里也不贅述了。)
鋪墊了這么久,終于要發現真相了——問題就出在 EmarSys 的系統和這個中轉鏈接。
這個系統并不能正確識別 HTML 頁面中的實體,在生成中轉鏈接的過程中,并不能把原鏈接中的 &實體解析為它的本意 & 字符,而是直接理解為實體的字面。這樣一來,用戶會被中轉鏈接帶到一個錯誤的、不是我們本意的地址。
下圖是我對中轉鏈接的跟蹤,它通過 HTTP 重定向(302)實現跳轉,跳轉目標由 Location 字段指定:
發現問題了吧?如果點擊 EDM 中的鏈接,用戶真正到達的地址是這樣的:
不要小看這幾個字符的差異,這個 URL 的實際效果已經不是我們最初期望的那樣了。如果你分析一下,會發現這個頁面(除了 utm_source 參數以外)真正接收到的是 amp;utm_media 這樣的參數,而不是原本的 utm_media 等等。參數傳錯了,GA 當然也就收不到正確的值,所以實際上不僅媒介參數有問題,活動、內容、關鍵字參數都沒有收到:
目前我們所能做的:
點贊+轉發,讓更多的人也能看到這篇內容(收藏不點贊,都是耍流氓-_-)
關注 {我},享受文章首發體驗!
每周重點攻克一個前端技術難點。更多精彩前端內容私信 我 回復“教程”
原文鏈接:https://mp.toutiao.com/profile_v3/graphic/publish
*請認真填寫需求信息,我們會在24小時內與您取得聯系。