97、【Ubuntu】【Hugo】搭建私人博客：搜索功能（二）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

分析了 PaperMod 主题中的 _default/search.html 模板，分析了 SVG 图标及相关的 xmlns 元素信息，下面继续

搭建私人博客

上篇 blog 提到了 <svg> 标签中的 <circle> 和 <line> 是 SVG 元素，属于 XML 语法，不属于 HTML 原生元素，下面来看下 HTML 和 XML 的区别：

HTML：标记语言，用于构建网页结构，常用标签比如 <div>，<p>，<h1> 等等
XML：可扩展标记语言，一种更通用的数据格式，不限定场景为网页构建，强调更严格的标签结构（比如必须闭合，大小写敏感等）

SVG 是基于 XML 的图形语言，SVG 定义了一套自己的元素，比如 <circle> 表示画圆，<rect> 表示画矩形，<line> 表示画直线，<path> 表示画任意路径等等，这些都不是 HTML 标准的一部分，而是 SVG 规范定义的 XML 元素

现代的 HTML5 可以允许在 HTML 文档中，内联嵌入 SVG，但前提是必须用 <svg> 标签包裹，表示这里是 SVG 图标的相关描述，然后最好加上 xmlns 声明命名空间（虽然 HTML5 中有时可以省略，但是推荐保留），比如在 HTML 引入标签

html 复制代码

<body>
  <h1>搜索图标</h1>
  <!-- 下面是 SVG（XML 语法），嵌在 HTML 里 -->
  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
     <circle cx="11" cy="11" r="8"></circle>
     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</body>

搜索图标

浏览器会识别到这里的 <svg> 标签，并知道里面的 <circle> 和 <line> 是 SVG 的 circle 和 line，而不是一个叫 circle 的 HTML 自定义标签，而如果直接在 HTML 里面写

html 复制代码

<body>
  <h1>搜索图标</h1>
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</body>

搜索图标

那么这个时候浏览器会把 circle 和 line 当作未知的自定义元素，circle 和 line 不会被渲染成图形，只是空的 DOM 节点，只有放在 <svg> 内部，circle 和 line 才会被当作画一个圆和一条线的指令

另外，SVG 继承了 XML 的严格性，比如

属性值必须加引号：r="8"，像 r=8 这样是不行的
标签闭合：<circle.../> 和 <circle></circle> 都可以
大小写敏感：比如画圆指令是小写 <circle>，而不能是大写 <CIRCLE>

而 HTML 对这些规定比较宽松（比如 <img> 不需要闭合），但 SVG 不行

上面提到的 <img> 是 HTML 元素，HTML 允许某些标签是自闭合的（void elements），因为这些元素永远没有内容，所以规范规定它们不能有闭合标签，比如

html 复制代码

<img src="a.jpg" alt="图片">
<br>
<hr>
<input type="text">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

这些标签都叫空元素（void element），所以 HTML 标准 https://html.spec.whatwg.org/multipage/syntax.html#void-elements 明确规定，这些元素不能有结束标签，也不能包含子内容，所以如果写成 <img></img> 反而是错误的 HTML（虽然浏览器会容错，但不符合规范）

注意，虽然不能有结束标签，但在 HTML5 中，也可以写成 <img.../> 这种带斜杠的形式，这是为了兼容 XHTML 或开发者习惯，但那个 / 没有实际作用，只是装饰

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog