我想保护我在网页上的电子邮件地址。
但我不知道 JavaScript 和 PHP。我只知道 HTML 和 CSS。
所以，请帮助我如何仅使用 CSS 保护我的电子邮件地址。
user3087089
问问题
28411 次
13 回答
73
这很简单。您可以仅使用 HTML 和 CSS 保护您的电子邮件地址。您不需要了解 PHP 或 Java 脚本。试试下面的代码。
简单的 HTML 和 CSS 代码：
<!doctype html>
<html>
<head>
<title>Protect e-mail with only css</title>
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>
</body>
</html>
上述代码的输出：
jhon@gmail.com
请注意：
这里我只使用了两个额外的属性。
1)反向data-user写下您的电子邮件 id 用户名。
2）反向data-website写你的电子邮件ID网站。
于 2014-01-29T04:14:28.803 回答
20
试试这个代码：
.e-mail:before {
content: "\006a\0068\006f\006e\0040\0067\006d\0061\0069\006c\002e\0063\006f\006d";
}<span class="e-mail"></span>这只是以十六进制编码的电子邮件。
于 2014-04-04T03:31:59.800 回答
12
您可能知道：混淆技术并非万无一失，收割机机器人将继续改进。有许多反对混淆的论据。
话虽如此，对于您已经提到的相当有趣的技术，这里有一些额外的技术。
HTML技术：
使用html 注释符号或替换html 实体在几年前已经被证明是一种相当弱的方法。
对于大多数用户来说，使用图像而不是文本是一种痛苦，包括非视障人士，因为他们无法剪切和粘贴。不过效果很好。
不久前有人提出了一种有趣的纯 HTML 方法，它允许使用超链接。
<a href="mailto:jhonnotspam@gmail.com?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>
CSS 技术： 这些当然也不是万无一失的。除了你已经提到的：
使用 CSS display:none 也很有用。简单地去除样式标签的机器人将在收获的地址中包含隐藏的文本。
jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.可以使用网络图标字体来拉入@图标，并且可以以不会绊倒屏幕阅读器的方式执行此操作。由于显而易见的原因，我没有看到带有@图标的网络图标字体，但这会起作用。
更新： Font Awesome现在有一个 @ 图标。也许有人在看到这篇文章后建议它;-)。
于 2014-03-31T19:40:27.923 回答
12
在 html 中嵌入电子邮件的一种简单有效的方法是使用十六进制值！例如 john@smith.me 的十六进制值为：
%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65
您可以在 HTML 代码中使用以下标签
<a href="mailto:%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>
这是在网页中嵌入电子邮件的一种非常简单有效的方法。
您以这种方式隐藏了“maito：”和电子邮件。
您可以使用此工具生成 %64 十六进制代码
您还可以使用此工具生成十六进制代码
于 2014-04-01T11:46:20.703 回答
11
您可以结合上面的两个答案（Ans1和Ans2）来mailto使用 css 制作作品以提高可用性。
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
<a href="mailto:%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D">
<span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span>
</a>于 2015-07-13T22:53:22.117 回答
3
您可以使用字体真棒：
在<head>：
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
在<body>：
<p>john<i class="fa fa-at"></i>hotmail.com</p>
于 2017-06-15T12:33:07.080 回答
2
如果可能的话，我会推荐使用 JavaScript，而不是 CSS 和 JavaScript，因为它可以操纵 dom。很容易你可以用像这样的代码来做到这一点
<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>
这是一个简单但并不理想的解决方案。
于 2014-03-28T13:05:01.683 回答
2
我倾向于为我的客户使用它：
<a href="mailto:hello@goodbye.com">hello@goodbye.com</a>
从经验来看，可以肯定它在 90% 的时间内都可以正常工作，并且不需要 CSS/JS即可工作。虽然我不认为现在保护电子邮件有任何意义，因为几乎所有 CDN 都会使用 JS 自动为你做这件事。
于 2021-01-25T17:54:36.643 回答
1
使用 reCAPTCHA Mailhide API
使用编码器甲酸盐
Hide email using CSS trick (direction property)
Scramble the email - While coding HTML, jumble and write the email address in reverse direction. (a@b.com should be written as moc.b@a). We can then use CSS stylesheet to reverse the email address againwhen rendering. Here's the sample HTML code with CSS.
<style type="text/css">
.backwards {
unicode-bidi:bidi-override;
direction: rtl;
}
</style>
<span class="backwards">moc.b@a</span>
If someone copies your email address, it will available in the reverse direction. Would not work on older browsers.
如何使用 JavaScript 向垃圾邮件发送者隐藏您的电子邮件地址
Let's look at more advanced methods that use javascipt to hide the email (name@domain.com). Remember to use noscript tags since some users prefer to disable javascript in browsers:
- 基本电子邮件脚本
<script language=JavaScript>
<!--
document.write("name" + "@" + "domain.com");
//--> </script>
2. Basic Mailto: Email Script with Link Text
<script language=JavaScript>
<!--
var user = "name";
var host = "domain.com";
var link = user + "@" + host;
document.write("<a hre" + "f=ma" + "ilto:" + user + "@" + host + ">" + link + "</a>");
//--> </script>
3. Inline JavaScript
<a href="#" onclick="JavaScript:window.location='mailto:'+'name'+'@'+'domain'+'.com'" >Send me an email</a>
- 外部 JavaScript 文件
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.
于 2014-04-02T07:45:59.880 回答
1
Flexbox 允许您更改包含元素内的项目的顺序，我们可以使用它在 html 中分离和重新排列我们电子邮件地址的部分，但将它们作为一个清晰的整体呈现给用户。
div {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}<div>
<span>example.com</span>
<span>@</span>
<span>george</span>
<span>Email me at the following address: </span>
</div>这里我们使用flex-direction: row-reverse反转元素的顺序。
如果骗子努力尝试，他可能会解决这个问题，他所要做的就是反转元素以重新创建地址。为了更彻底的尝试，我们可以手动指定顺序。
div {
display: flex;
}<div>
<span style="order: 3">@</span>
<span style="order: 4">example.com</span>
<span style="order: 1">Email me at the following address: </span>
<span style="order: 2">user</span>
</div>在这里，我们使用order指定我们自己的顺序，因此不能使用简单的反向。
不幸的是，这样做会破坏复制/粘贴，因此您的用户将不得不输入地址，但这比收到另一位尼日利亚王子的来信要好。将此与其他技术结合使用，以获得真正防弹的电子邮件地址。
于 2018-02-01T18:45:47.197 回答
1
我正在检查一段时间的技术。虽然我同意混淆不是一个完整的解决方案，但我相信它仍然是实用的，因为我可以通过混淆获得零垃圾邮件来从中受益。
讨论的一些技术：
- 使电子邮件仅对人类可见的 CSS 技巧（请参阅@user3087089 接受的答案）
- 添加 HTML 垃圾以欺骗抓取工具（请参阅@fzzylogic 的答案）
- 使用 JS 注入电子邮件（如@Dean 和其他人所建议的那样）
base64此处未建议的另一种技术是通过使用编码永远不会以纯格式发送电子邮件。您只需对电子邮件进行编码并使用 JavaScript 将其注入网页。
我在GitHub 上safe-email构建了项目以结合所有列出的技术。使用免费许可证非常容易使用。您可以查看CodePen中的示例。随意使用它并挖掘它并做出贡献。
它只是 vanilla-JS，轻量级，没有依赖项，您可以使用电子邮件的 Base64 编码对其进行配置。
于 2020-04-19T13:11:14.643 回答
0
一段时间以来，我使用了一种类似的 JavaScript 技术，该技术允许“mailto”功能，同时保持 HTML 有效：
HTML：
<a href="http://www.domain.com" class="js-contact">user</a>
JavaScript（小型 jQuery 插件）
// mailto anti-spam
;(function($) {
$.fn.mailTo = function() {
this.each(function() {
var user = $(this).html() || false,
domain = $(this).attr('href')
.replace('http://www.', '')
.replace('www.', '')
.replace('http://', '')
.replace('/', '') || false;
if (user && domain) {
$(this).html(user + '@' + domain).attr('href', 'mailto:' + user + '@' + domain);
}
});
return this;
};
})(jQuery);
用法
// protect inline e-mails
$('.js-contact').mailTo();
http://codepen.io/ced-anamorphik/pen/QwVrKZ
但最近谷歌浏览器在网站上显示了网络钓鱼警告。由于这并非完全错误（从技术上讲，该链接确实是被欺骗的），还有其他简单的解决方案吗？
于 2015-03-09T08:30:34.620 回答
-1
要禁止人们复制它，请尝试：
span.email {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
和 HTML：
<span class="email">jack@gmail.com</span>
为了防止机器人使用 CSS Codedirection：
<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>
于 2014-04-02T07:14:02.503 回答