整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

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

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

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

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

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

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

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

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

          1. 外部鏈接:例如http://www.bilibili.com
          2. 內部鏈接:網站內部頁面之間的相互鏈接,例如index.html
          3. 空鏈接:#
          4. 下載鏈接:地址里是一個文件或壓縮包
          5. 網頁元素鏈接:在網頁中的各種網頁元素都可以添加超鏈接
          6. 錨點鏈接:可以快速定位到頁面中的某個位置鏈接:<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 當然也就收不到正確的值,所以實際上不僅媒介參數有問題,活動、內容、關鍵字參數都沒有收到:

          解決方案

          目前我們所能做的:

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

          希望本文能幫助到您!

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

          關注 {我},享受文章首發體驗!

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

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


          主站蜘蛛池模板: 国产福利一区二区精品秒拍| 水蜜桃av无码一区二区| 另类免费视频一区二区在线观看| 久久久久人妻一区精品性色av | 国产一区在线视频| 亚洲精品伦理熟女国产一区二区| 日韩精品成人一区二区三区| 一区二区三区四区在线观看视频 | 久久一区二区三区免费| 精品国产福利在线观看一区| 亚洲爆乳精品无码一区二区| 亚洲天堂一区在线| 亚洲电影唐人社一区二区| 久久亚洲AV午夜福利精品一区| 香蕉视频一区二区| 国产一区二区三区高清视频| 波多野结衣的AV一区二区三区| 亚洲AV无码一区二三区| 国产成人久久精品麻豆一区| 麻豆精品一区二区综合av| 国产一区二区三区露脸| 精品一区二区三区中文| 亚洲一区二区三区免费| 亚洲一区日韩高清中文字幕亚洲 | 亚洲日韩国产欧美一区二区三区| 麻豆AV一区二区三区| 国产91久久精品一区二区| 亚洲av无码成人影院一区| 国产一区二区好的精华液| 国产成人精品无码一区二区老年人| 少妇一晚三次一区二区三区| 国产日产久久高清欧美一区| 日韩在线一区高清在线| 一区五十路在线中出| 成人日韩熟女高清视频一区| 九九久久99综合一区二区| 99精品国产高清一区二区麻豆| 亚洲av成人一区二区三区观看在线 | 国产一区高清视频| 国产精品亚洲不卡一区二区三区| 亚洲国产精品无码久久一区二区|