您不知道的 6 个 HTML 技巧。

语境

我在工作中建立了很多电子邮件模板。

我想做得更好，所以我参加了 HTML 和 CSS 的进修课程。

当我点击“开始课程”时，我感觉自己像个骗子。

“兄弟，你有大约 4 年构建 Web 应用程序的经验，我为什么要学习 HTML 和 CSS？”我内心的声音说道。

我的感觉就像莎士比亚在写完《麦克白》后学习 ABC 时的感觉一样。

如果说每个开发者都知道一件事，那就是不可能无所不知。这就是为什么我们都阅读文章、做业余项目，并且疯狂地用谷歌搜索。

在所有 Google 搜索中，有一半是开发者试图弄清楚如何将 div 居中。另外 10% 是开发者在搜索左连接和右连接之间的区别。

跳过 lamba，我在课程中学到了几样东西，提高了我编写语义 HTML 的能力，提高了我构建的 Web 应用程序和电子邮件模板的可访问性。

因为分享就是关爱，以下是我学到的 8 件新事物。

1. Blockquote 和 Cite 元素

我从来都不知道有原生的引用元素，别评判我。这组元素用于创建引用，浏览器会原生添加边距来缩进内容，并设置 cite 元素的样式。

2. Figure 和 Figcaption 元素

我承认，我知道 Figure 元素，但之前从未用过。Figure 元素用于包含独立内容，例如代码、图片、视频、插图等。figcaption 标签用于为图片添加标题，浏览器会很乐于使用标题。

“Tomide，abeg，这些都是故事，我为什么要使用 Figure 元素？”

“您希望您的网络应用在搜索引擎上排名更高，对吗？”

“是的”

“您希望您的网络应用在搜索引擎上排名更高，对吗？”

“您希望残疾人能够毫无问题地访问您网站上的内容，对吗？”

3. 创建带有锚链接的详细电子邮件。

好吧，这是我知道但完全忘记的，您可以使用该属性将电子邮件的主题包含在锚元素中mailto。

4. 根相对路径

<img src="/path/to/image.jpg" />

这会告诉浏览器，忽略当前路径并开始从网站的根位置查找图像。

<img src="./path/to/image.jpg" />

这告诉浏览器，从当前路径开始寻找图像。

5. 嵌入 SVG

嵌入 SVG的方法有很多种inline，，，img。object

<!-- a inline embed -->
<svg width="212" height="224" viewBox="0 0 212 224" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M106 212C164.542 212 212 164.542 212 106C212 47.4578 164.542 0 106 0C47.4578 0 0 47.4578 0 106C0 164.542 47.4578 212 106 212Z" fill="#081928"/>
<path d="M211.5 106C211.5 164.266 164.266 211.5 106 211.5C47.734 211.5 0.5 164.266 0.5 106C0.5 47.734 47.734 0.5 106 0.5C164.266 0.5 211.5 47.734 211.5 106Z" stroke="#1B3554" stroke-opacity="0.0198992"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="212" height="212">
<path fill-rule="evenodd" clip-rule="evenodd" d="M106 212C164.542 212 212 164.542 212 106C212 47.4578 164.542 0 106 0C47.4578 0 0 47.4578 0 106C0 164.542 47.4578 212 106 212Z" fill="white"/>
<path d="M211.5 106C211.5 164.266 164.266 211.5 106 211.5C47.734 211.5 0.5 164.266 0.5 106C0.5 47.734 47.734 0.5 106 0.5C164.266 0.5 211.5 47.734 211.5 106Z" stroke="white"/>
</mask>
</svg>

<!-- img method -->
<img src="/path/dramon.svg" alt="Illustration of Dramon the Dog" Title="Dramon the dog"/>

<!-- object element -->
<object type="image/svg+xml" data="/path/dramon.svg">
    <!-- fallback embed -->
    <img src="/path/dramon.svg"/>
</object>

哪种方法最好？就像科技领域的许多事情一样，这取决于你的情况。要做出这个决定，需要考虑三个主要因素

交互性：object内联嵌入允许您将 SVG 视为 HTML、动画，并使用 CSS 和 JS 操作 SVG 图像。
SEO：这有点棘手，Google 不会在图片搜索结果中显示内联 SVG，所以如果你想从图片搜索中获取流量，应该使用<img title="image title" alt="SEO keyword"/>。为了优化内联 SVG 以适应网页搜索，你可以使用 ARIA 属性和
可访问性：仅<img />支持屏幕阅读器大声朗读的alt和属性。title

6. 轨道元素

轨道元素用于在页面上嵌入视频内容的文本。

它最适合用于字幕或隐藏式字幕，但还可以用于更多用途。

<video controls width="300" src="/path/to/your/video.mp4">
    <track default kind="subtitles" srclang="end" src="/path/to/track.vtt"> 
</video>

感谢您的阅读，如果您发现本文有用，请在社交媒体上分享给您的开发者朋友。

你还知道其他 HTML 技巧吗？请在下方评论区分享。

鏂囩珷鏉ユ簮锛�https://dev.to/tomiiide/6-html-tips-you-did-not-know-3nek