览在线网站的体验并不总是流畅的。

曾经有一段时间，你在网上冲浪时，可能会听到你不愿意听的音乐，并在配色奇怪的网页上浏览用呆板字体（通常是 Times New Roman）写成的文字。

在 2000 年代，在 Squarespace 和社交媒体出现之前，网站是个性的体现，完全由对代码有一定了解并渴望上网的用户使用 HTML 从零开始构建。

现在，分散在网络上的程序员社区，正在努力恢复这种看似过时的东西。这场运动来源于艺术家劳蕾尔·施伍斯特（Laurel Schwulst）和埃利奥特·科斯特（Elliott Cost）创造的“HTML 能量”概念，绝不是对复古美学的肤浅致敬。

它专注于 HTML 编码的“触觉”过程，探索语言如何实现自我表达，并使个人能够在互联网中占据一席之地。

HTML 能量运动在小型 Discord 频道和数字杂志等领域形成，旨在庆祝数字体验中的“人性触摸”。

如今，大多数互联网都针对社交、电子商务和流媒体进行了优化。大多数互联网流量集中在少数几个网站上，这些网站又都归少数几家公司所有。从冗长的广告到咄咄逼人的 cookie 设置，一些小障碍和麻烦层出不穷。

用户不断被提醒，他们访问互联网的条件是让少数人从中获利。X（原推特）的情况完美地概括了互联网所有权的这种状态，只需要一位高管就可以引发大量用户逃离该平台，并将其长期存在的社区割裂开来。

然而，尽管大型科技公司垄断了市场，但一个基本现实仍然能够证明互联网的民主：任何人都可以用 HTML 免费发布网站。

从技术上讲，互联网为每个人都提供了空间，因此不存在无处容身的问题。真正的问题是流量。

当我与 HTML 能量社区的不同成员交谈时，所有人都一致地传达着一个基本信息：网络上的一切最终都是 HTML。HTML 是任何网站的主干。

这是网站运行所需的唯一东西。虽然当今流行的 web 开发语言使用 abridged 命令，通过所谓的数据抽象来隐藏技术复杂性，但 HTML 是细粒度的，编程经验也不是先决条件。

正如科斯特所解释的，正是 HTML 的包容性给了渴望在网络上发布自我的人机会。使用 HTML，即使缺少一行代码，网站仍将加载。HTML 能量运动包含了这些可能性：欢迎通过试错学习，鼓励创造性实验。

随着主流数字体验趋向于同质的视觉语言，人类的触觉在许多抽象层中迷失了。网站创建者离他们的网站越来越远，网络也变得更具交易性。

但 HTML 能量运动呼吁人们重新审视我们与技术的关系，使用 HTML 制作网站可以让程序员探索网站的本质。

与公司不同，人们自己创建网站无需向股东负责。他们没有创造有利可图的体验的压力，所以他们的创作可以采取各种各样的形式。

常见类型的 HTML 能量网站包括数字花园，其中的元素随着季节的变化而变化；交互式诗歌生成器，用户的输入会创造新的意义；以及分享创作者生活细节的个人网站。

在一个消费主义至上的互联网中，HTML 能量的网站温和地提醒人们，网站可以带来冥想一样的体验。

HTML 能量社区提倡理解 HTML 的字面含义，它就是一种语言。它赞美了这种语言的基本特征对用户意图的要求。

作为微小和复杂创意决策的融合，仅使用 HTML 构建的网站是一种自我表达形式。

查看网站的源代码与浏览界面一样重要。代码中经常隐藏着彩蛋，比如来自其他 HTML 网站的消息或引用。

在很多方面，HTML 网站都“记录着”创作者的身份：这个人选择了构建什么？如何构建？

这种对 HTML 不同应用的迷恋，也出现在被称为“freewrites”的物理社区聚会中，社区成员常聚在一起编写代码。

Sunday Sites 和 Fruitful School 是组织这些集会的网站之一，它们经常将教育元素融入活动中，以增强更多人加入该社区的能力。

与此同时，像 HTML 评论这样的网站以文学杂志的形式展示了它的一些产品。

项目 1：多景剧场

吉·金（Ji Kim）的“多景剧场”拼贴了一部旧 iPhone 的多个片段。当访问者浏览网站时，图像会重叠，并播放嵌入的音频片段。

当用户点击任何图像时，都会出现一个关于拍摄时间和地点的小描述，以及更多额外的媒体内容。

金的网站旨在模仿记忆的零散性和层次性。这是一种有意分散的数字体验，就像试图回忆几年前的一次家庭旅行一样。

项目 2：有窗户的房间

谢尔比·威尔逊（Shelby Wilson）的带窗户的房间，是一个只允许一种互动的网站：打开和关闭一组窗帘。

该网站有意将物理空间和数字空间混合在一起。威尔逊将浏览器视为通往有物理边界和边缘的地方的门户，但也保留了超现实主义元素（百叶窗关闭时房间不会变暗）和随机元素（每次访问时房间的颜色都会变化），以突出数字形式。

项目 3：HTML 花园

史宾赛·张（Spencer Chang）的网站设想了一个花园在互联网上的样子。

一些由原生 HTML 元素组成的“植物”在生长，每次访问你都会注意到时间的流逝：季节的变化、植物的发芽和开花。没有明确的行为，你所需要做的只是观察。

项目 4：散文剧

凯瑟琳·杨（Katherine Yang）的散文游戏是一首互动诗，鼓励用户在预设的句子结构中输入不同的单词。

该网站以单词为变量，探索互联网的互动性。它把“作者之死”的文学理论，即“文本的意义不是由作者的本意决定的，而是由读者的解释决定的”放在了代码的语境中。

项目 5：Erich Friedman

埃里希·弗里德曼（Erich Friedman）的网站是他生活的个人百科全书，里面有从电影评级到佛罗里达州中部迷你高尔夫球场评论的各种档案。该网站分为数学类、益智类、个人类和专业类，结构比较简单。

它使用基本的 HTML 来展示弗里德曼在过去十年中不拘一格的兴趣，包括从 0 到 9999 的每个数字的有趣事实列表，以及数学和琐事问题的集合。

该网站不需要任何特定操作。它只是对埃里希·弗里德曼的详尽、坦率的描述，在庞大的互联网中占据了一小部分。

项目 6：屏幕博物馆

图卢·图穆（Toulou TouMou）的屏幕博物馆，是一个存放由游戏爱好者创建的浏览器游戏的网站。为了与展示的游戏互动，用户必须在数字空间中导航，就像用 ASCII 图形可视化的物理博物馆一样。

这个网站有实际的参观时间，还会随机选择一个“休息日”。

图穆的博物馆是为了在 Flash 游戏时代给予业余开发者应有的荣誉而创建的，旨在强调承认作者身份和独立游戏丰富历史的重要性。

HTML 能量的网站没有集中的来源，偶然发现让他们觉得自己很特别，就像发现停车场的一幅街头艺术作品一样。它们不是为被发现而设计的，也不是为任何特定操作而优化的。

他们只是按照访客的条件与访客互动，描绘出创作者的风格。如果像谷歌或脸书这样的网站是你购买必需品的超市和购物中心，那么 HTML 能量的网站就像你偶然发现的隐藏花园，在任何地图上都找不到。

支持：Ren

时在我们的收件箱里面,经常会收到很多精美的HTML邮件,上面有文字,图片,图文并茂,点击图片按钮可以直接跳转到所要导流的页面,有的邮件下面还有Social的Logo,比如Facebook,twitter,点击按钮就会跳转所对应的页面。

比如上面截取了一些HTML的邮箱格式,这种HTML的EDM营销感觉非常的酷,比纯文本的邮件更有丰富多彩,也更能传达出更多的内容跟素材,也更吸引抓住用户的眼球。图片下面直接可以设置链接,也方便用户直接点击进入,避免二次流失。

今天就给大家介绍一款在线制作HTML邮件的工具,其实操作也是非常的简单,可以直接在网站内的系统模板修改，替换成自己的素材和链接,也可以自己去设置图文排版。

这款工具就是Topol,一款专门在线制作HTML邮件的工具,非常容易操作跟上手

网址为https://app.topol.io

刚开始制作时建议直接使用网址内的模板去替换自己产品的素材,文案跟链接,因为网址里面提供了几十套制作非常精美的HTML邮件,我们先来看看。

大家可以根据自己的喜爱,去选择喜欢的模板直接点击进去去后台编辑,替换自己的元素,接下来来看看如何替换跟编辑：

比如就以下面这个手环的HTML邮件为模板,因为上面的图文信息真的非常非常丰富,有产品图片,购买按钮,产品Slogan,产品功能介绍以及社媒链接等，展示元素非常充足。

打开后台页面是这样的,首先先熟悉下下方左侧红色方框内的意思,其实也都是非常好理解的, 就是我们想要在右侧HTML邮件模板中需要什么元素,直接把红色方框内的按钮拖过去,比如需要放置文案，就把TEXT按钮,拖过去,如果是放置图片,GIF或者视频,就把对应的按钮拖到需要放置的展示位置就可以。

Sturecture按钮就是你想要图片或者文案的格式,直接拖过去就可以,知道这些意思之后,接下来我们看看如何操作。

第一,先选择你想要排列的Structure,比如选择2个横排并列,直接拖2个并列的结构过去，如下所示：

第二,就是要思考你想要展示的元素是什么,是文案还是图片,把想要展示的形式直接拖到上图2个方框里面,比如我们选择图片

然后选择2个我们自己产品的图片放上去,如下图所示,为了节省时间,文案部分就不做修改,修改方式跟图片是一样的,只需要把图片的文案替换成我们自己的就可以。

然后图片下面有个Check whole collection按钮，可以删去这个按钮,也可以点击保留按钮,可以在按钮下面放上自己的产品链接以及显示在按钮上的文案, 还可以调整按钮显示的验收,尺寸大小,字体验收等等非常详细的信息,建议大家可以都去尝试下。

下面就是产品功能的一些展示,可以把下面的主要展示功能替换为自己产品的功能以及图片，文案等,操作方法跟上面那个一样。

接下来就是产品橱窗展示以及购物按钮添加,以及一些物流等相关信息,可以把下面的产品展示图片替换成自己的以及链接。

在接下来就是一些社交媒体的展示,直接点击下面的按钮然后在对应的社交媒体输入对应的链接,当用户点击的时候就会跳转到对应的页面。

加好这些之后,就可以预览下效果怎么样，可以Preview在PC跟移动端,哪里有不合适的可以直接调整下，如果觉得一切都ok的可以发送到自己的邮箱预览,尤其是导流的链接,点击下是否能跳转到所要导流的页面。

然后你的邮箱就会收到你自己亲手做的HTML精美的邮件,因为我这个主要做演示作用,有很多没有调整所以做的比较难看,大家可以好好设计一下,做出非常精美的HTML邮件,从而做好EDM营销，吸引用户点击邮箱,从而提高转化。

如果你的邮箱收到自己做的HTML邮件,检查之后没有问题,就可以转发给用户,可以是做B2C的用户，也可以是外贸B端用来发开发信的用户。

还有一个方法发送HTML邮件,就是比较复杂一些,做好HTML邮件之后点击保存按钮,然后获取HTML源代码，然后复制源代码去转换。

比如常见的QQ邮箱,网易邮箱都可以转化,以QQ邮箱为例,点击格式--然后复制粘贴HTML源代码--点击可视化编辑按钮就可以啦，如下图所示

Topol工具真的非常方便制作HTML图文并茂邮件,且操作方法也非常简单,功能也非常繁多,建议大家可以好好去研究下，做好EDM营销，不仅仅对B端,C端用户,对开发红人,联系海外科技媒体编辑同样适用。

这篇文章写的也比较简单,主要是讲一些重要的步骤,如何设计非常有吸引力的HTML需要小伙伴在下面好好去尝试下。（来源： 下班后8小时）

以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。