伪手写HTML排版公众号文章的几点笔记

Blog

发布日期: 2021-02-28

更新日期: 2021-03-01

文章字数: 737

阅读时长: 3 分

阅读次数:

继使用 Markdown + MarkHere 之后，最近又转向用「在线编辑器+手动微调 HTML」方式，进行公众号文章的排版，整理了这篇笔记。

图片作为背景

在HTML里面使用一张图片，从语义角度讲，应当是使用img标签。但是，有些图片，它并非内容，无需传达信息，可以将它放入到CSS当中的 background属性里。这样有两个好处：第一，必须图片加载完毕，整个内容才会显示出来（相应的，作为背景使用的图片，不能太大，不然加载太慢）；第二，不会在浏览时误触，即无法点击放大。

举例

图片一：可点击

图片二：不可点击

对应HTML

图片一

<img src="https://mmbiz.qpic.cn/mmbiz_png/29ic8DSckSnBBVSuHzuy1GibwHBp0jU88zbuQDGzjr6NkMTma4MgWAFExLe8p4ms1kdpTdiaVZ11tOkMdXbWrwEmQ/0?wx_fmt=webp" alt="哆啦A梦">

图片二

<p style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/29ic8DSckSnBBVSuHzuy1GibwHBp0jU88zbuQDGzjr6NkMTma4MgWAFExLe8p4ms1kdpTdiaVZ11tOkMdXbWrwEmQ/0?wx_fmt=webp);"></p>

文字不可被选中

与图片不可被选中类似的，文字也可以设置为不可被选中状态。目前，我使用这个的场景在于：提供需要复制的内容，比如分享的网址，或者相关内容。

而实现以上需求的办法，便是在对应内容的CSS当中，添加以下属性：

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
/* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
user-select:none;

举例

这是一段可以选中的文字

这是一段不可以被选中的文字

这段最后的链接是可以被选中、复制的：https://imouyang.com

对应HTML

<p style="margin: 0 0 15px; padding: 0; line-height: 1.5;">这是一段可以选中的文字</p>
<p style="margin: 0 0 15px; padding: 0; line-height: 1.5;-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;">这是一段不可以被选中的文字</p>
<p style="margin: 0 0 15px; padding: 0; line-height: 1.5;-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;">这段最后的链接是可以被选中、复制的：<span style="-webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;">https://imouyang.com</span></p>