几个实用的生僻 html 属性
时间：2026-1-2 00:12 作者：独元殇 分类： 前端技术
昨天我有乱翻了一下 MDN，因为这个地方的文档最全，然后能发现一些 在 CDN 里很小众的技术。我时不时就喜欢去这地方，漫无目的的翻翻找找，就像潜入一个寂静无声、空无一人的档案馆里，翻找好东西一样。
不过，收获也不可能会很大，但也找到几个我觉得值得分享的玩意儿：
跨境编程必备的 hreflang 属性
这个感觉有点意思。
是这样的，在多语言里，如果你的站点，有中 英 两个版本，可能没啥必要。
但是你的站点，如果有 英国 美国 两个版本（都是英语嘛，不免内容高度同质化，中国和新加坡同理），而内容结构都差不多的话，并且考虑 SEO ，不想被搜索引擎误判，那就有这个必要了。
可以使用 hreflang 来标识一下，以免出现收录混乱。
具体 HTML 里使用是这样：
<head>
<meta charset="UTF-8">
<!-- 当前页面 (中文版) -->
<link rel="alternate" hreflang="zh-CN" href="https://example.com/cn/" />
<!-- 备用页面 (日文版) -->
<link rel="alternate" hreflang="jp" href="https://example.com/jp/" />
<!-- 默认页面 (比如英语页) -->
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
<title>一个多语言网站</title>
</head>
<body>
<h1>欢迎来到中国站</h1>
</body>当然，很遗憾，上面的三行 link 并不会对前端显示有什么影响，它就是给 爬虫 看的，爬虫爬到这里，就会知道，你这个站是有不同的语言版本的，就不会做出一些可怕的误解行为，比如认为你这站在作弊....
当然，也可以写在 a 标签里了，只不过对 SEO 没有帮助，但 MDN 上说，对于 无障碍阅读器 有辅助标识作用。比如可以表示对应链接的内容，使用英式英语还是美式英语来阅读。
但对于跨境编程的人，尤其是做多语言的人来说，我建议注意一下自己的站，有没有写上这个标识，以免 SEO 出现毛病。
辅助翻译的 translate 属性
我们肯定都经常使用翻译插件。但是，有时候我们多语言站点里的内容，有些是生僻的专用名词或其他词，我们不希望它被翻译，那就使用这个 translate 属性。
当然，主要是标识不能翻译的内容了！就是使用 translate="no" 这个。一般用在文本框里，当然，最好给 pre 代码块也标注一下。Chrome 的内置谷歌翻译，有时候会把 代码 pre 里的东西也翻译了..... 真的觉得这个世界就是个草台班子，造浏览器的，根本不懂更深入的内容。
<p>Our brand name is <strong translate="no">iPhone</strong>.</p>
<pre translate="no">const a = 10;</pre>就像上面那样。
数字列表 ol 必备的 reversed 属性
如果你做游戏攻略网站，肯定经常遇到数字需要倒着列的情况。
然而 ol 的列表，默认是正着列的..... 所以，搞个 reversed 很好用！
<h3>火箭发射倒计时，需要做的事情</h3>
<ol reversed>
<li>检查燃料系统</li>
<li>引擎点火</li>
<li>全速起飞</li>
</ol>这样显示出来的效果是：
语义良好，能省很多劲儿。
建议在各位笔记里，收藏一下这个，以备不时之需。知道有这个东西。而且，使用阅读器，来阅读时，也同样按着倒着的顺序来念的。