Python小案例71- HTML基礎及語法

TML（HyperText Markup Language）是一種用于創建網頁的標記語言。它由一系列的標簽組成，這些標簽用于描述網頁的結構和內容。HTML標簽通常由尖括號包圍，例如<tag>。

HTML標簽可以分為兩類：塊級元素和內聯元素。塊級元素用于組織網頁的結構，例如段落、標題、列表等。內聯元素用于標記文本中的特定部分，例如鏈接、強調文本等。

HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。例如，<a>標簽用于創建鏈接，可以使用href屬性指定鏈接的目標URL。

除了標簽和屬性，HTML還支持一些特殊字符實體，用于表示特殊字符，例如小于號（<）、大于號（>）等。

HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強網頁的外觀和功能。CSS用于控制網頁的樣式，例如顏色、字體、布局等。JavaScript用于實現交互性和動態效果，例如表單驗證、動畫等。

通過使用HTML，開發人員可以創建具有結構良好、易于理解和導航的網頁。它是構建互聯網的基礎之一，被廣泛應用于網站開發和內容管理系統。

HTML的語法由標簽、屬性和內容組成。下面是HTML的基本語法規則：

標簽：HTML標簽用于定義網頁的結構和內容。標簽通常由尖括號包圍，例如<tag>。標簽可以是成對出現的，其中包含一個開標簽和一個閉標簽，例如<tag>content</tag>。也可以是自閉合標簽，即只有一個標簽，沒有內容，例如<tag />。
屬性：HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。屬性通常以鍵值對的形式出現，例如<tag attribute="value">。屬性的值可以是字符串或布爾值。常見的屬性包括class、id、src、href等。
內容：HTML標簽可以包含文本內容或其他標簽。文本內容直接放置在標簽的開閉標簽之間，例如<p>這是一個段落。</p>。標簽可以嵌套在其他標簽中，形成標簽的層次結構。
注釋：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常用標簽

1. web標準

1.1 web標準的構成

主要包括結構、表現和行為三個方面。

標準說明結構用于對 網頁元素 進行整理和分類（HTML）表現用于設置網頁元素的 外觀樣式 （CSS）行為網頁模型的定義及交互的編寫（JavaScript）

如果將web標準比喻為一只鳥，則

結構=身體
表現=羽毛
行為=動作（飛行、站立等）

1.2 標簽關系

雙標簽關系分為：

包含關系（父子）
并列關系（兄弟）

(1)包含關系

<!--head標簽包含title標簽-->
<head>
    <title></title>
</head>

(2)并列關系

<!--head標簽與body標簽并列-->
<head></head>
<body></body>

2. HTML基本結構

標簽名定義<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>

3. HTML常用標簽

3.1 標題標簽

一個標題獨占一行。（塊級元素）

<h1>
    一級標題（字號最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
    六級標題（字號最小）
</h6>

3.2 段落標簽

用于將HTML文檔分割為若干段落。

特點：

文本在一個段落中會根據瀏覽器窗口的大小自動換行
段落之間有空隙

<p>
    這是一個段落
</p>

3.3 換行標簽

用于強制換行。

特點：

單標簽
換行沒有像段落那樣的空隙

<br>這是換行標簽

3.4 文本格式化標簽

語義標簽加粗<strong></strong>傾斜<em></em>刪除線<del></del>下劃線<ins></ins>

3.5 盒子標簽

用于界面布局。

特點：

div一行只能放一個（塊級元素）
span一行可以放多個（行級元素）

<div>
    這是大盒子
</div>
<span>這是小盒子</span>

3.6 圖像標簽和路徑

(1)圖像標簽

用于定義頁面中的圖像。

<!--屬性與屬性之間用空格分開-->
<img src="圖像的url" alt="" title="">

屬性說明src圖片路徑（ 必須屬性 ）alt圖像不能顯示時的替換文本title鼠標放到圖像上顯示的提示文本width設置圖像的寬度height設置圖像的高度border設置圖像的邊框粗細（在CSS中修改）

注：圖像的寬和高一般只修改其中一個，另一個會隨之調整。

(2)路徑

相對路徑：文件相對于HTML頁面的位置

相對路徑分類符號說明同一級src="文件名"下一級/src="同一級文件夾名稱/文件名"上一級../src="../文件名"

絕對路徑：完整的路徑名稱（一般很少用）。eg. C:\xxx\xxxx.jpg

注意：絕對路徑用“\”分隔，相對路徑用“/”分隔。

3.7 超鏈接標簽和鏈接分類

(1)超鏈接標簽

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

屬性作用href鏈接目標的url（ 必須屬性 ）target鏈接頁面的打方式。_self：在當前窗口打開（默認值），_blank：在新窗口打開

(2)鏈接分類

外部鏈接：例如http://www.bilibili.com
內部鏈接：網站內部頁面之間的相互鏈接，例如index.html
空鏈接：#
下載鏈接：地址里是一個文件或壓縮包
網頁元素鏈接：在網頁中的各種網頁元素都可以添加超鏈接
錨點鏈接：可以快速定位到頁面中的某個位置鏈接：<a href="#名字"></a>找到目標位置標簽，里面添加一個id屬性，<h2 id="名字"></h2>返回頂部：<a href="#"></a>

3.8 注釋和特殊字符

(1)注釋

<!--這是一行注釋-->

(2)特殊字符

特殊字符描述字符的代碼空格符<小于號<>大于號>&和號&￥人民幣¥?版權©?注冊商標®°攝氏度°±正負號±?乘號×?除號÷2平方²3立方³

注：重點記住前三個。

大家平時學習web前端的時候肯定會遇到很多問題，小編我為大家準備了web前端學習資料，將這些免費分享給大家！如果想要的可以找我領取

領取方式：

如果想獲取這些學習資料，先關注我然后私信小編“01”即可免費領取！（私信方法：點擊我頭像進我主頁右上面有個私信按鈕）

如果這篇文章對你有幫助，請記得給我來個評論+轉發噢

起

想寫這篇文章，是因為最近在 GA 中發現了一些問題。

EmarSys 是公司新簽約的 EDM 服務商，在 GA 中已經可以看到最新一期 EDM 帶來的流量。但它的媒介參數似乎不正確，理論上應該設置為 email。

運營部的同學認為提供給 EDM 的鏈接不會有錯，于是我深入分析之后便有了這篇文章。寫完它，我以后應該就不需要口頭再解答很多問題了。

UTM 參數

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

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

簡單小結一下參數規則：

UTM 參數可能有一個或多個。
每個 UTM 參數由參數名和參數值組成，使用等號（=）連接。
多個 UTM 參數之間使用 and 字符（&）連接。
所有參數使用問號（?）附加到原始鏈接的尾部。
（其它略微高級一點的規則與主題無關，暫且略過。）

實際工作中，建議使用專門的鏈接生成工具來為鏈接添加 UTM 參數，避免手工失誤。

當有人用瀏覽器訪問這個 URL 時，UTM 參數就會發揮作用。

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

HTML 實體

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 當然也就收不到正確的值，所以實際上不僅媒介參數有問題，活動、內容、關鍵字參數都沒有收到：

解決方案

目前我們所能做的：

向 EmarSys 反饋此問題，要求修復此缺陷。
在此問題修復之前，我們在 HTML 代碼的鏈接中，不使用實體，直接使用 & 字符。（需要注意的是，這樣編寫的 HTML 代碼是不規范的，我們這樣做僅僅是為了繞過 EmarSys 系統的缺陷。）

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信我回復“教程”

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

在線咨詢

上一篇：如何使用Pandas read_html從HTML表格中獲取數據
下一篇：個體工商戶營業執照注銷流程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商