全部学科
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
Web前端
TypeScript vue CSS HTML javascript pinia vite
GO后端
golang gorm gin
NodeJS全栈
nodejs
通用技术
redis git docker nginx mysql zookeeper rabbitmq
Python全栈
python
小程序首页
HTML / 专题
📝 1 篇文章 20 道配套习题

HTML高级语义化与结构化数据专题

专题说明

本专题聚焦HTML高级语义化与结构化数据技术，涵盖语义化表单、表格、导航设计，ARIA可访问性增强，以及JSON-LD、RDFa、Microdata等结构化数据标记格式。掌握这些技术可显著提升页面可访问性和SEO效果。

学习目标

  1. 掌握语义化表单、表格、导航的标准结构和最佳实践
  2. 理解ARIA角色与属性的正确使用方法
  3. 熟悉Schema.org词汇表的核心类型和属性
  4. 掌握JSON-LD、RDFa、Microdata三种结构化数据格式
  5. 能够设计完整的结构化数据方案实现富媒体搜索结果

学习内容

  • 语义化组件设计：表单（form/label/fieldset）、表格（thead/tbody/tfoot/caption）、导航（nav/aria-label）
  • ARIA可访问性：role属性、aria-label/aria-labelledby、aria-expanded/aria-selected等状态属性
  • 结构化数据格式：JSON-LD（Google推荐）、RDFa、Microdata对比与选择
  • Schema.org词汇表：核心类型（Product/Article/Event/Organization）、属性命名规范
  • SEO优化实践：富媒体搜索结果、结构化数据验证工具使用

学习建议

  1. 先学习语义化HTML基础，再进阶到结构化数据
  2. 优先掌握JSON-LD格式，这是Google推荐的方案
  3. 结合实际项目练习结构化数据标记
  4. 使用Google Rich Results Test验证实现效果
  5. 关注Schema.org官网获取最新类型和属性定义

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1
单选题

以下哪个HTML结构最能体现表单的语义化设计？

A

<div class="form"><div class="input"><span>用户名</span><input type="text"></div></div>

B

<form><label for="username">用户名</label><input id="username" type="text"></form>

C

<form><div class="field"><span>用户名</span><input type="text"></div></form>

D

<div role="form"><p>用户名</p><input type="text"></div>

2
单选题

在语义化表单设计中，<fieldset>和<legend>标签的主要作用是什么？

A

fieldset用于样式美化，legend用于显示图标

B

fieldset用于分组相关表单控件，legend用于描述该分组标题

C

fieldset用于创建表格布局，legend用于表格标题

D

fieldset用于隐藏表单字段，legend用于显示错误信息

3
单选题

以下哪个HTML表格结构是最符合语义化标准的写法？

A

<table><tr><td>标题</td></tr><tr><td>数据</td></tr></table>

B

<table><thead><tr><th>标题</th></tr></thead><tbody><tr><td>数据</td></tr></tbody></table>

C

<div class="table"><div class="row"><div class="cell">标题</div></div></div>

D

<table><tr><th>标题</th></tr><tr><td>数据</td></tr></table>

4
单选题

在复杂表格中，如何使用headers属性建立单元格与表头的关联？

A

使用headers属性将单元格链接到外部CSS文件

B

使用headers属性指向表头单元格的id，建立语义关联

C

使用headers属性定义表格的排序方式

D

使用headers属性设置表格的默认样式

5
单选题

以下哪个是语义化导航的最佳实践？

A

<div class="nav"><a href="/">首页</a><a href="/about">关于</a></div>

B

<nav><ul><li><a href="/">首页</a></li><li><a href="/about">关于</a></li></ul></nav>

C

<nav><a href="/">首页</a><a href="/about">关于</a></nav>

D

<div role="navigation"><span onclick="go('/')">首页</span></div>

6
单选题

以下哪个是语义化面包屑导航的正确实现？

A

<div class="breadcrumb"><a href="/">首页</a> > <a href="/p">产品</a> > 详情</div>

B

<nav aria-label="面包屑"><ol><li><a href="/">首页</a></li><li><a href="/p">产品</a></li><li aria-current="page">详情</li></ol></nav>

C

<nav><span>首页</span> / <span>产品</span> / <span>详情</span></nav>

D

<ul class="breadcrumb"><li>首页</li><li>产品</li><li>详情</li></ul>

7
单选题

结构化数据标记的主要目的是什么？

A

提高网页的视觉美观度

B

帮助搜索引擎理解页面内容，获得富媒体搜索结果

C

减少网页加载时间

D

增加网页的JavaScript功能

8
单选题

以下哪种结构化数据格式是Google推荐使用的？

A

Microdata（微数据）

B

RDFa

C

JSON-LD

D

Microformats（微格式）

9
填空题

在HTML中嵌入JSON-LD结构化数据时，需要使用________________________标签，并设置type属性为___________________，同时指定@context为__________________来引用Schema.org词汇表。

10
单选题

以下哪个是正确的hCard微格式标记人物信息的方式？

A

<div class="person"><span>张三</span><span>zhang@test.com</span></div>

B

<div class="vcard"><span class="fn">张三</span><a class="email" href="mailto:zhang@test.com">zhang@test.com</a></div>

C

<person name="张三" email="zhang@test.com"></person>

D

<meta name="person" content="张三"><meta name="email" content="zhang@test.com">

11
单选题

Schema.org是由哪些组织联合创建的？

A

Apple、Microsoft、Amazon

B

Google、Microsoft、Yahoo、Yandex

C

Facebook、Twitter、LinkedIn

D

W3C、Mozilla、Adobe

12
填空题

在Schema.org结构化数据中，________属性用于指定词汇表来源，通常值为https://schema.org；______属性用于定义数据类型，如Product、Article等；______属性用于提供数据的唯一标识符，通常是一个URL地址。

13
单选题

ARIA（Accessible Rich Internet Applications）的主要目的是什么？

A

增加网页的动画效果

B

提高网页的加载速度

C

为无法用原生HTML表达的动态内容和复杂控件提供可访问性支持

D

增加网页的CSS样式选项

14
单选题

以下哪个ARIA属性用于为没有可见文本的元素提供无障碍标签？

A

aria-labelledby

B

aria-label

C

aria-describedby

D

aria-hidden

15
单选题

以下哪个是正确的RDFa标记产品信息的方式？

A

<div class="product"><span data-name="商品名">手机</span></div>

B

<div vocab="https://schema.org" typeof="Product"><span property="name">手机</span></div>

C

<script type="application/ld+json">{"@type":"Product","name":"手机"}</script>

D

<div itemscope itemtype="https://schema.org/Product"><span itemprop="name">手机</span></div>

16
简答题

请详细对比RDFa、Microdata和JSON-LD三种结构化数据标记格式的技术特点、优缺点和适用场景，并说明Google对这些格式的支持情况。

17
单选题

JSON-LD的名称含义是什么？

A

JavaScript Object Notation - Lightweight Data

B

JSON for Linking Data

C

JavaScript Linked Documents

D

JSON Language Definition

18
多选题

以下哪些是JSON-LD的标准关键字？

A

@context

B

@type

C

@class

D

@id

E

@value

19
填空题

在HTML页面中嵌入JSON-LD结构化数据时，使用________________________标签包裹JSON数据，并设置type属性为___________________，通常将JSON-LD代码放在________________________标签内。JSON-LD数据以________属性开头，用于指定词汇表来源，通常值为__________________。

20
简答题

请设计一个完整的JSON-LD结构化数据方案，用于一个电商产品详情页，需要包含以下信息：产品基本信息（名称、描述、图片、SKU）、价格信息（价格、货币、库存状态）、品牌信息、聚合评分（平均评分、评论数量）、多条用户评论（评论内容、评分、作者、日期）、销售商家信息（名称、地址、电话）。请写出完整的JSON-LD代码并解释各部分的作用。

← 上一个专题 HTML高级标签与文档结构专题

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？
小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库