全部学科

GO后端

golang gorm gin

通用技术

redis git docker nginx mysql zookeeper rabbitmq

Web前端

TypeScript vue CSS HTML javascript pinia vite

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Python全栈

NodeJS全栈

小程序首页

📝 1 篇文章 20 道配套习题

HTML高级标签与文档结构专题

专题说明

本专题系统讲解HTML高级标签和文档结构技术，包括语义化内容标签、元数据配置、脚本加载策略、全局属性使用、HTML实体字符等内容。

学习目标

掌握figure、figcaption、details、summary等语义化标签的使用
掌握time、mark、wbr等文本语义化增强标签
掌握meta标签的字符编码、视口设置、SEO配置等用法
掌握script的defer、async属性和link的preload预加载
掌握HTML全局属性和data-*自定义数据属性
掌握HTML实体字符的使用场景和写法

学习内容

语义化标签：figure/figcaption、details/summary、dialog
文本增强：time、mark、wbr、bdi、bdo
元数据配置：meta charset、viewport、description、http-equiv
脚本加载：defer延迟执行、async异步执行、preload预加载
全局属性：id、class、title、hidden、tabindex、data-、aria-
HTML实体：保留字符、常见实体、数字实体

学习建议

语义化标签让内容更易理解，对SEO和可访问性有帮助
meta charset应放在head开头，确保字符编码正确
defer保持执行顺序，async不保证顺序，根据场景选择
data-*属性通过dataset访问，连字符自动转为驼峰
HTML实体用于显示特殊字符，避免与HTML语法冲突

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

📝 配套习题（20 题）

1

单选题

HTML5 的 <figure> 元素的主要用途是？

A

创建图形和图表

B

包裹独立的内容单元（如图片、代码块、表格等）

C

定义页面布局框架

D

创建画布元素

2

判断题

一个 <figure> 元素可以包含多个 <figcaption> 元素。

A

对

B

错

3

多选题

关于 HTML5 的 <details> 和 <summary> 元素，以下说法正确的有？

A

<details> 创建可折叠/展开的内容区域

B

<summary> 提供折叠区域的标题，点击可切换展开状态

C

<details> 默认是折叠状态，添加 open 属性可默认展开

D

<summary> 必须是 details 的第一个子元素

4

填空题

完成以下代码，创建一个默认展开的问答区域：

HTML

<_______ ______>
  <summary>什么是HTML？</summary>
  <p>HTML（HyperText Markup Language）是超文本标记语言...</p>
</_______>

5

单选题

以下哪个场景最适合使用 <figure> 元素？

A

页面导航菜单

B

文章中带有说明文字的插图

C

网站页脚版权信息

D

表单输入区域

6

单选题

HTML5 的 <time> 元素的主要用途是？

A

创建计时器动画

B

显示当前系统时间

C

语义化标记日期、时间或时间段

D

设置页面刷新时间间隔

7

判断题

<mark> 元素用于表示文本的重要性或关注点，常用于搜索结果高亮显示。

A

对

B

错

8

单选题

以下哪个 <meta> 标签用于设置页面字符编码为 UTF-8？

A

<meta encoding="UTF-8">

B

<meta charset="UTF-8">

C

<meta type="charset" value="UTF-8">

D

<meta name="charset" content="UTF-8">

9

多选题

以下关于 <meta name="viewport"> 的设置，哪些是正确的？

A

width=device-width 设置视口宽度等于设备宽度

B

initial-scale=1 设置初始缩放比例为 1

C

user-scalable=no 禁止用户缩放页面

D

maximum-scale=1 设置最大缩放比例为 1

10

判断题

<meta http-equiv="refresh" content="5"> 可以让页面每 5 秒自动刷新一次。

A

对

B

错

11

多选题

关于 <script> 标签的 defer 和 async 属性，以下说法正确的有？

A

defer 让脚本在 HTML 解析完成后执行

B

async 让脚本下载完成后立即执行，不等待 HTML 解析

C

defer 保证脚本按声明顺序执行

D

async 脚本执行顺序不确定，先下载完先执行

12

填空题

完成以下代码，引入外部 JavaScript 文件：

HTML

<______ ____________________ ______></______>

13

判断题

<link rel="preload"> 可以预加载重要资源，提升页面加载性能。

A

对

B

错

14

多选题

以下哪些是 HTML 的全局属性（可用于任何元素）？

A

id - 元素唯一标识符

B

class - 元素类名

C

title - 元素提示文本

D

hidden - 隐藏元素

15

填空题

完成以下代码，读取元素的自定义数据属性：

HTML

<div data-user-id="100" data-user-name="张三"></div>
<script>
const div = document.querySelector('div');
console.log(div.dataset.!!1_userId!!);    // 输出: 100
console.log(div.dataset.!!2_userName!!);  // 输出: 张三
</script>

16

单选题

设置 <div tabindex="-1"> 后会发生什么？

A

元素完全不可聚焦

B

元素可以通过 Tab 键获得焦点

C

元素可以通过 JavaScript 获得焦点，但不能通过 Tab 键

D

元素在 Tab 序列中排在第一个

17

多选题

以下 HTML 实体写法正确的有？

A

< 表示小于号 <

B

& 表示和号 &

C

  表示空格

D

© 表示版权符号 ©

18

判断题

  表示不换行空格，使用多个     可以创建多个空格。

A

对

B

错

19

判断题

可以通过 JavaScript 监听 <details> 元素的 toggle 事件来检测展开/折叠状态变化。

A

对

B

错

20

单选题

引入外部 CSS 样式表应该使用哪个标签？

A

<style src="style.css">

B

<link href="style.css" type="stylesheet">

C

<link rel="stylesheet" href="style.css">

D

<css src="style.css">

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

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

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