如何通过配置HTML头部规则简化body部分的重复代码编写

你要实现自定义HTML标签的技术是 自定义元素（Custom Elements），属于W3C推出的Web Components规范的核心部分。

需求实现方案 #

你只需要在原有HTML的<head>标签内添加一段JS代码即可实现需求，完整可运行的示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    /* 原有mkf标签样式，也可直接合并到自定义标签样式中 */
    mkf { font-family:'Courier'; color:red; }
    /* 自定义linkandfont标签的默认样式 */
    linkandfont {
      font-family: 'Courier';
      color: red;
      text-decoration: underline;
      cursor: pointer;
    }
  </style>
  <script>
    // 定义自定义元素的类
    class LinkAndFont extends HTMLElement {
      constructor() {
        super();
        // 绑定点击跳转逻辑
        this.onclick = () => {
          // 默认跳转to_do_list.pdf，也可通过自定义属性支持不同链接
          location.href = this.getAttribute('href') || 'to_do_list.pdf';
        }
      }
    }
    // 注册自定义元素，规范要求自定义元素名称必须包含短横线
    customElements.define('linkandfont', LinkAndFont);
  </script>
</head>
<body>
  <!-- 直接按你想要的方式使用即可 -->
  <linkandfont>Example1</linkandfont>
  <!-- 也可以自定义跳转地址，适配不同链接需求 -->
  <linkandfont href="other_doc.pdf">Example2</linkandfont>
</body>
</html>

学习建议 #

• 入门阶段先掌握自定义元素基础用法：包括元素注册、属性读取、基础事件绑定，完全可以满足你编写离线文档时的各类自定义标签需求
• 有进阶需求时可以学习Web Components的其他配套能力：Shadow DOM可以隔离自定义元素的样式，避免和页面全局样式冲突；slot插槽可以支持自定义元素嵌套复杂结构
• 如果你不想引入JS代码，也可以用CSS类简化现有写法：给a标签定义专用类.mkf-link，把mkf的样式直接写到这个类上，之后使用<a href="xxx.pdf" class="mkf-link">文字</a>即可，不需要嵌套mkf标签，也能减少重复代码量。

内容的提问来源于stack exchange，提问作者metamech