UTM 参数、URL 和 HTML 实体的那点事

起

想写这篇文章，是因为最近在 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

HTML标签相关的字符串格式化

string nl2br ( string $string )

nl2br() 就是将\n 替换成 <br> //javascript对\n才能够执行换行,对</br>是不能执行换行

htmlspecialchars() 把一些预定义的字符转换为 HTML 实体。

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

转换以下字符及对应的实体

& （和号） 成为 &
" （双引号） 成为 "
' （单引号） 成为 '
< （小于） 成为 <
> （大于） 成为 >

第二个参数: ENT_COMPAT 只转换双引号, 保留单引号, 为默认值 compat: 兼容性

ENT_QUOTES 同时转换两种引号 quotes: 引号

ENT_NOQUOTES 不对引号进行转换

<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>

输出结果:John & " 'Adams'

John & " 'Adams'

htmlentities() 可以将所有的非ASCII码字符转换为对应的实体代码;除字母、数字、\外, 汉字和键盘上其他字符都转换

<?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>
?>

返回的结果:A 'quote' "is <b>bold</b>

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

注意: htmlspecialchars()和htmlentities作用直接输出HTML脚本

htmlspecialchars()和htmlentities()函数对于转义字符"\"处理,不会转义实体代码,要么当转义字符对待,要么原样输出;

PHP中htmlentities和htmlspecialchars的区别

这两个函数的功能都是转换字符为HTML字符编码, 特别是url和代码字符串。防止字符标记被浏览器执行。

使用中文时没什么区别, 但htmlentities会格式化中文字符使得中文输入是乱码。

htmlentities转换所有的html标记, htmlspecialchars只格式化& ' " < 和 > 这几个特殊符号

addslashes() 在指定的预定义字符前添加反斜杠。

这些预定义字符是：单引号 (') 双引号 (") 反斜杠 (\) NULL字符(\x00)

提示：该函数可用于为存储在数据库中的字符串以及数据库查询语句准备合适的字符串。

注释：默认情况下，PHP 指令 magic_quotes_gpc 为 on，对所有的 GET、POST 和 COOKIE数据自动运行 addslashes()。

不要对已经被magic_quotes_gpc转义过的字符串使用 addslashes()，因为这样会导致双层转义。

遇到这种情况时可以使用函数 get_magic_quotes_gpc() 进行检测。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)

在本例中，我们要向字符串中的预定义字符添加反斜杠：

<?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() 删除反斜线（"\"）

在提交的表单数据中 ' " \ 等字符前被自动加上一个\ ,这是配置文件php.ini中选项magic_quotes_gpc在起作用，

默认是打开的，如果不处理则将数据保存到数据库时，有可能会被数据库误当成控制符号而引起错误。

通常htmlspecialchars()和stripslashes()函数复合的方式，联合处理表单中的提交的数据htmlspecialchars(stripslashes())

strip_tags()

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

剥去 HTML、XML 以及 PHP 的标签。

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

输出结果:Hello world!

实例:

<?php
$str = "<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接输出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只转换双引号,为默认参数
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不对引号进行转换
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同时转换单引号和双引号
echo "<br />";
echo htmlentities($str); //将所有的非ASCII码字符转换为对应的实体代码
echo "<br />";
echo addslashes($str); //将" ' \ 字符前添加反斜线
echo "<br />";
echo stripslashes($str); //删除反斜线
echo "<br />";
echo strip_tags($str); //删除<html>标记
?>

输出结果:

webserver; & \ 'Linux' & Apache

上一篇：php基础知识

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

思维导图

思维导图第一版

1、web编程基础-什么是HTML、CSS、Javascript

web网站可以说是互联网的基础。每个网站，可以比喻为一座座房子。宽带网络，就是房子门前的路。url地址，就是房子的门牌标志。HTML代码，就是建造房子的建筑材料（砖头、水泥、钢筋）；CSS代码，就是装修房子的装修材料；那么Javascript代码就是这房子的水电了？ JS代码则更像是未来世界可以让房子成为变形金刚的智能机器。因此，一些展示“老房子”的浏览器，可能并不支持Javascript。

定义：

HTML（Hyper Text Markup Language），是使用标记标签来描述网页的一种超文本标记语言。

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。HTML定义网页的内容。

CSS（Cascading Style Sheets），指层叠样式表。样式定义如何显示HTML元素，规定网页的布局。

Javascript 则是属于HTML和Web的编程语言，对网页进行编程。

Jquery 是一个Javascript函数库

2、环境配置

参考上一篇：php基础知识，安装-集成环境与编辑器

推荐使用 phpstudy + phpstorm

操作步骤：1、在phpstudy 安装目录下，把代码文件放大到根目录www/ 下。

2、浏览器直接访问 localhost/index.html即可看到效果。

3、HTML

HTML元素：是从开始标签（start tag）到结束标签（end tag）的所有代码。

例如：<p>前面这个是开始标签，中间文字是元素内容，后面这个是结束标签</p>

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

常用HTML元素属性：

class ：规定元素的类名（classname），一个html文件里面多个标签可以拥有相同的类名。

id ：规定元素的唯一 id，一个html文件里面id不能相同。

style ：规定元素的行内样式（inline style）

3.1、常用HTML标签：

1、标题：标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

2、段落：通过 <p> 标签定义。

3、注释标签  用于在 HTML 插入注释。

4、链接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。

5、图像：<img src="yummuu.png" alt="Yummuu" /> 。src 图像源属性，alt替换文本属性。

6、表格标签：

7、列表标签

8、块级元素和内联元素

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

两者的区别：就是在显示时是否起新行。块级元素会起新行，而内联元素则不会。

9、框架与内联框架：frame，<iframe src=" " name=" "></iframe>

10、脚本：<script> 定义客户端脚本，如Javascript；<noscript> 为不支持客户端脚本的浏览器定义替代内容。

11、头部元素：

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>：在所有 HTML/XHTML 文档中都是必需的。它能够定义浏览器工具栏中的标题，提供页面被添加到收藏夹时显示的标题，显示在搜索引擎结果中的页面标题。

<base>：为页面上的所有链接规定默认地址或默认目标（target）

12、HTML实体

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

13、表单元素：

<form> ：定义 HTML 表单。

<input> ：是最重要的表单元素。<input> 元素有很多形态，根据不同的 type 属性。

input的输入类型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> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项。

<textarea>：定义多行输入字段（文本域）

<button>：定义可点击的按钮

4、CSS

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1、浏览器缺省设置

2、外部样式表

3、内部样式表（位于 <head> 标签内部）

4、内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

4.1、CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

4.2、CSS选择器

1、派生选择器：

通过依据元素在其位置的上下文关系来定义样式，例如: h1 span{color:red;}

2、id选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

3、类选择器：

以一个点号显示，例如： .className{text-align: center;}

4、属性选择器：

对带有指定属性的 HTML 元素设置样式。例如： div[rel=’mm’]{ color:’#000’;}

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

5、后代选择器（包含选择器）：可以选择作为某元素后代的元素

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

7、相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。

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

8、伪类：用于向某些选择器添加特殊的效果。

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

:focus 向拥有键盘输入焦点的元素添加样式

:hover 当鼠标悬浮在元素上方时，向元素添加样式

:link 向未被访问的链接添加样式

:visited 向已被访问的链接添加样式

:first-child 向元素的第一个子元素添加样式（不建议使用）

:lang 向带有指定lang属性的元素添加样式

9、伪元素：用于向某些选择器设置特殊效果。

:first-letter 向文本的第一个字母添加样式

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

:before 在元素之前添加内容

:after 在元素之后添加内容

4.3、常用CSS属性

在线咨询

上一篇：HTML <body> 标签
下一篇：HTML 编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商