DanLevy.net

测验：HTML是否仍应出现在你的简历中？

证明你自己！

所以，你觉得你掌握了 HTML5 技能吗？

毕竟，你分得清 <div> 和 <span> 吧？但你对 HTML5 中更高级的语义元素了解多少呢？

提示：如果你无法通过这个测试，你必须从简历中删除「HTML 技能」。

开始吧！

1. 

热身

HTML中<ul>元素的主要作用是什么？

HTML中<ul>标签用于创建无序列表，列表项通常以项目符号标记。

2. 

高级语义HTML

HTML 中的 <dd> 元素代表什么？

<dd> 元素 在描述列表中定义描述、定义或值，需与 <dl> 标签配合使用，并与 <dt> (描述术语) 配对使用。

当需要展示键值数据时非常有用。个人资料信息、设置和统计数据是常见的应用场景。

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>


<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

3. 

高级语义HTML

何时应该使用 <figure> 和 <figcaption> 元素？

<figure> 标签通常用于包裹自包含的（媒体）内容，比如图片或图表，并使用 <figcaption> 提供标题。

这对于图片、图表、代码片段等非常有用。

<figure>
<img src="../image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

4. 

高级语义HTML

HTML 中 <article> 元素的用途是什么？

HTML5 的 <article> 元素 用于定义可以独立分发或重复使用的内容模块。

常用于博客文章、新闻稿、论坛帖子或用户评论等场景。

页面中可以包含多个 article 元素（比如无限滚动页面），也可以嵌套使用来构建”独立内容”的层级结构。

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

5. 

高级语义HTML

表单中<fieldset>和<legend>元素的作用是什么？

<fieldset>用于分组相关表单控件，<legend>为该分组提供标题/标签，提升可访问性。

这对分组相关表单元素很有用，比如送货地址或支付详情部分。

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

6. 

高级语义HTML

<meter> 元素的用途是什么？

<meter> 元素 用于表示在设定范围内标量（单一）的测量值，例如温度、磁盘使用率或投票统计。

它可能看起来与 <progress> 进度条类似，但进度条始终从零开始。因此 <progress> 元素显示的是“完成百分比”，而 <meter> 显示的是可定义范围内的任意值。

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

7. 

语义化HTML

为什么使用<source>元素？

<source>元素用于指定可用的媒体格式。

特别用于<video>、<audio>和<picture>元素，让浏览器选择最合适的格式。

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

8. 

高级语义HTML

你应该如何使用 <hgroup> 元素？

<hgroup> 元素将标题与其相关的次要内容（通常是一个或多个 <p> 元素）分组。

当标题有副标题、标语或替代标题时，它可能很有用，这些内容不应成为文档大纲中的另一个标题。

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

9. 

高级语义HTML

HTML中<menu>元素的用途是什么？

HTML中的<menu>元素表示命令列表或交互式控件。

如果您的列表是导航链接，请使用<nav>和<ul>。对于工具栏控件或命令列表，请使用<menu>。

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

10. 

高级语义HTML

HTML 中 <details> 和 <summary> 的作用是什么？

<details> 允许创建可折叠内容，<summary> 用于指定内容的可见标题。

这对 FAQ、可折叠部分或任何可切换的内容都非常有用。

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

11. 

高级语义HTML

为什么应该使用 <dialog> 元素？

HTML5 的 <dialog> 元素专门用于模态框或弹出窗口，它提供了语义化标记、增强的CSS样式和原生API来实现这些交互。

使用 JavaScript 通过 .showModal() 打开模态对话框，或通过 .show() 打开非模态对话框，用 .close() 关闭对话框，或通过表单提交时设置 method="dialog" 来关闭。

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

12. 

高级语义HTML

HTML中如何使用 <time> 元素？

<time> 元素用于日期、时间或持续时间。它可以包含人类可读的内容和机器可读的 datetime 属性。HTML 没有 <date> 元素。

13. 

高级语义化 HTML

ARIA 属性的作用是什么？

ARIA（Accessible Rich Internet Applications）属性通过为屏幕阅读器和其他辅助技术提供额外上下文来增强网页可访问性。

有角色（roles）、状态（states）和属性（properties）可用于描述元素。

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

14. 

高级语义HTML

HTML中role属性的作用是什么？

role属性通过向辅助技术描述元素的用途，帮助提升可访问性。

那么，你做得如何？准备好在下一个项目中使用更多语义HTML元素了吗？🚀

还是打算一辈子都用<div>和<span>？😅

在评论区告诉我吧！👇

Loading comments...