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)特殊字符

特殊字符描述字符的代码空格符<小于号<>大于号>&和号&￥人民币¥©版权©®注册商标®°摄氏度°±正负号±✖乘号×➗除号÷²平方²³立方³

注：重点记住前三个。

大家平时学习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小时内与您取得联系。

整合营销服务商