作者：前段时间我写了一篇关于 一些 CSS 小技巧 的文章，现在是时候给我们的 HTML 添加一些润色了！在这篇文章中，我将分享一些关于 HTML 代码的技巧和建议。其中一些指导最适合初学者 - 如何正确构建段落，使用标题，或改进表单，但我们还将讨论 SVG 精灵用于图标，这是一个更高级的话题。
文本
段落
我们的大部分写作都以段落的形式组织，并且有一个 HTML 元素用于此：<p>。请不要使用换行符标签 <br> 将文本块分隔成伪段落，因为换行符不是用于此目的的。
避免
Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jelly
beans muffin donut marzipan oat cake.
<br>
Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes pudding
chocolate cake cheesecake toffee.
推荐
<p>Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream
pie jelly beans muffin donut marzipan oat cake.</p>
<p>Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes
pudding chocolate cake cheesecake toffee.</p>
换行符的合法用途是，例如，将一首诗或歌曲的诗节分隔开来。
<p>So close, no matter how far<br>
Couldn’t be much more from the hearth<br>
Forever trusting who we are<br>
And nothing else matters</p>
标题
从 <h1> 到 <h6> 的标题标签都有一个隐含的等级分配给它们，从 1（最重要）到 6（不重要）。
为了正确处理语义， 按顺序选择你的标题等级，不仅仅是因为浏览器将使用的大小来渲染标题。你可以 - 并且应该！- 为此使用 CSS，并选择一个合适的等级。
避免
<article>
<h1>Monkey Island</h1>
<h4>Look behind you! A three-headed monkey!</h4>
<!-- ... -->
</article>
推荐
<article>
<h1>Monkey Island</h1>
<h2>Look behind you! A three-headed monkey!</h2>
<!-- ... -->
</article>
另一个要考虑的事情是如何创建子标题或标签线来伴随标题。 W3C 的建议 是使用常规文本标记，而不是更低等级的标题。
避免
<header>
<h1>Star Wars VII</h1>
<h2>The Force Awakens</h2>
</header>
推荐
<header>
<h1>Star Wars VII</h1>
<p>The Force Awakens</p>
</header>
表单
占位符
<input> 表单元素中的占位符属性将让你向用户显示一个示例值，该值会在用户在字段中输入任何内容后自动擦除。占位符旨在显示格式的示例，该格式对于字段是有效的。
不幸的是，在实际应用中，有很多占位符充当 <label> 元素，告知字段是什么，而不是作为有效输入值的示例。这种做法不是 可访问的，你应该避免这样做。
避免
<input type="email" placeholder="Your e-mail" name="mail">
推荐
<label>
Your e-mail:
<input type="email" placeholder="darth.vader@empire.gov" name="mail">
</label>
移动设备上的键盘
为从移动设备（如手机或平板电脑）浏览的人提供输入提示至关重要。我们可以通过为 <input> 元素选择 正确的类型 来轻松实现这一点。
例如，type="number" 将使移动电话显示数字键盘，而不是常规的字母数字键盘。同样适用于 type="email"、type="tel" 等。
避免
<label>Phone number: <input type="text" name="mobile"></label>
推荐
<label>Phone number: <input type="tel" name="mobile"></label>
以下是一个比较：左侧是使用 type="text" 时出现的键盘；右侧是 type="tel" 的键盘。
图像
向SVG 文件问好！你不仅可以在 <img> 标签中使用矢量图形，就像这样
<img src="acolyte_cartoon.svg" alt="acolyte">
你还可以使用SVG 精灵在你的网站中实现矢量图标，而不是使用网页字体 - 这是一个技巧，可能不会产生完美的结果。这是因为浏览器将网页字体图标视为文本，而不是图像。还有一些其他潜在问题，例如内容/广告拦截器会禁用网页字体的下载。如果你想了解更多关于这方面的信息，请观看 Sarah Semark 关于为什么使用 SVG 用于图标比使用网页字体更好的演讲。你也可以在 CSS-Tricks 上阅读更多关于此技术的知识。
SVG 精灵的概念与 CSS 精灵 非常相似。实现方法是将所有 SVG 资源合并到一个图像文件中。对于 SVG，每个资源都被包裹在一个 <symbol> 标签中，就像这样
<svg>
<symbol id="social-twitter" viewBox="...">
<!-- actual image data here -->
</symbol>
</svg>
然后，可以使用 <svg> 标签在 HTML 中使用图标，就像这样，这样我们就可以指向 SVG 文件中的符号 ID
<svg class="social-icon">
<use xlink:href="icons.svg#social-twitter" />
</svg>
创建 SVG 精灵表是否看起来很繁琐？好吧，这就是为什么会有像 gulp-svgstore 这样的工具来自动化这个过程，并从你的单个资源文件生成一个精灵表。
请记住，由于我们使用的是 <svg> 标签而不是 <img> 来包含图片，因此我们可以使用 CSS 来应用样式。因此，你可以使用网页字体图标完成的所有酷炫的事情，也可以使用这些 SVG 图标完成！
.social-icon {
fill: #000;
transition: all 0.2s;
}
.social-icon:hover {
fill: #00f;
}
不过，有一些 CSS 限制：以这种方式使用 SVG 时，使用 <use> 链接到 <symbol>，图像会被注入到 Shadow DOM 中，并且我们失去了一些 CSS 功能。在这种情况下，我们无法挑选 SVG 中要应用样式的哪些元素，而某些属性（例如，fill）将只应用于那些属性未定义的元素。但是，嘿，你无法使用网页字体图标做到这一点！
在下面的演示中，你可以看到一个 SVG 精灵在行动的例子。当你的鼠标悬停在图像上时，火把的火焰会通过 CSS 改变颜色。
查看 SVG 助手演示 由 ladybenko (@ladybenko) 在 CodePen 上创建。
我希望这些技巧对你有所帮助。如果你有任何问题，或者想分享你自己的技巧，请留言！
关于 Belén Albeza
Belén 是一位工程师和游戏开发者，在 Mozilla 开发者关系部门工作。她关心网络标准、高质量代码、可访问性和游戏开发。
36 条评论