在 HTML 中，建议使用什么标签来标记文件路径？

Question

在这种情况下建议替换什么sometag：

<p>Please find the configuration in <sometag>/etc/important.conf</sometag>.</p>

对于这种情况有一个既定的标准吗？

Answer 1

从语义的角度来看，我会使用ol有序列表，因为路径由文件夹列表组成，其中顺序很重要，可以选择以文件名结束。

当然，您必须调整标准 CSS，ol使其看起来像您想要的那样。还会设置分隔符的 CSS 示例：

.path {
  list-style-type: none;
  display: inline;
  font-size: 0;
  margin: 0;
  padding: 0;
}
.path li {
  display: inline;
  font-size: 16px;
  font-family: monospace;
}
li[role=folder]::before,
li[role=file]::before {
  content: "/";
}
li[role=extension]::before {
  content: ".";  
}

<div>Please find the configuration in
  <ol class="path" reversed="reversed">
    <li role="folder">etc</li>
    <li role="file">important</li>
    <li role="extension">conf</li>
  </ol>
</div>

MDN 对<ol>vs 的详细阐述<ul>也揭示了这种方法背后的语义：

和<ol>都<ul>表示项目列表。​ 它们的不同之处在于，对于<ol>元素，顺序是有意义的。作为确定使用哪一个的经验法则，请尝试更改列表项的顺序；如果含义改变，<ol>则应使用该元素，否则 the<ul>就足够了。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

关于该reversed属性，我认为假设文件名本身始终与1.顺序有关是有意义的。话虽如此，它可能会增强语义，不使用两个不同的<li>文件名和文件扩展名，而是将其分成两个<span>元素。最重要的是，我想指出这种方法允许很好的路径“语法”突出显示：

.path {
  list-style-type: none;
  display: inline;
  font-size: 0;
  margin: 0;
  padding: 0;
}
.path li {
  display: inline;
  font-size: 14px;
  font-family: Consolas, monospace;
  font-weight: 600;
}
li[role=folder] {
  color: #00a;
}
li[role=file] {
  color: #a00;
}
li[role=folder]::before,
li[role=file]::before {
  content: "/";
  color: #888;
}
[role=file-extension] {
  color: #0a0;
  }
[role=file-extension]::before {
  content: ".";
  color: #888;
}

<div>Please find the configuration in
  <ol class="path" reversed="reversed">
    <li role="folder">etc</li>
    <li role="folder">conf</li>
    <li role="file"><span role="file-name">important</span><span role="file-extension">cfg</span>
    </li>
  </ol>
</div>

属性reversed就是boolean属性。如果存在，则表明该列表是降序列表 (..., 3, 2, 1)。如果省略该属性，则列表为升序列表 (1, 2, 3, ...)。

<ol>在当前的 HTML 5 规范中