HTML面试题库

1. 什么是HTML？

参考答案：

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。

HTML 使用标记标签来描述网页的结构和内容
HTML 文档由 HTML 元素组成，这些元素由标签表示
HTML 标签通常成对出现，如 <html> 和 </html>
HTML 文档的基本结构包括 <!DOCTYPE html>、<html>、<head> 和 <body> 等元素

2. HTML5 相比 HTML4 有哪些主要改进？

参考答案：

HTML5 相比 HTML4 的主要改进包括：

新的语义化标签：如 <header>、<nav>、<article>、<section>、<aside>、<footer> 等
多媒体支持：原生支持音频（<audio>）和视频（<video>）标签
表单增强：新的输入类型如 email、url、date、range 等
Canvas 绘图：<canvas> 元素支持 2D 和 3D 图形绘制
本地存储：localStorage 和 sessionStorage API
地理定位：Geolocation API
Web Workers：支持后台 JavaScript 线程

3. 解释HTML文档的基本结构

参考答案：

HTML文档的基本结构如下：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>页面标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

<!DOCTYPE html>：文档类型声明，告诉浏览器这是HTML5文档
<html>：根元素，包含整个页面内容
<head>：头部元素，包含元数据，不显示在页面上
<body>：主体元素，包含页面的可见内容

4. 什么是HTML标签和元素？

参考答案：

HTML标签和元素的区别：

HTML标签：

标签是用尖括号包围的关键字，如 <p>、<div>
大多数标签成对出现：开始标签 <p> 和结束标签 </p>
某些标签是自闭合的，如 <img>、<br>、<hr>

HTML元素：

元素是由开始标签、内容和结束标签组成的完整结构
例如：<p>这是一个段落</p> 是一个段落元素
元素可以包含属性：<p class="highlight">内容</p>

5. 常用的HTML标签有哪些？

参考答案：

常用的HTML标签分类：

文本标签：

<h1> 到 <h6>：标题标签
<p>：段落标签
<span>：行内文本标签
<strong>、<em>：强调标签

结构标签：

<div>：块级容器
<header>、<nav>、<main>、<footer>：语义化结构标签

列表标签：

<ul>、<ol>、<li>：无序和有序列表

链接和媒体：

<a>：链接标签
<img>：图片标签
<video>、<audio>：多媒体标签

6. HTML属性是什么？如何使用？

参考答案：

HTML属性用于为HTML元素提供额外信息：

属性的特点：

属性总是在开始标签中定义
属性以名称/值对的形式出现：name="value"
属性值应该用引号包围

常用属性：

id：元素的唯一标识符
class：元素的类名，用于CSS样式
src：指定资源的URL（如图片、脚本）
href：指定链接的目标URL
alt：图片的替代文本

示例：

html

<img src="image.jpg" alt="描述文字" class="photo" />
<a href="https://example.com" target="_blank">链接</a>

7. 什么是语义化HTML？为什么重要？

参考答案：

语义化HTML是指使用具有明确含义的HTML标签来构建网页：

语义化标签的优势：

可访问性：屏幕阅读器能更好地理解页面结构
SEO优化：搜索引擎能更好地理解页面内容
代码可读性：开发者更容易理解和维护代码
样式分离：便于CSS样式的应用

常用语义化标签：

<article>：独立的内容区域
<section>：文档中的节
<nav>：导航链接区域
<aside>：侧边栏内容
<time>：时间或日期

8. HTML表单的基本结构是什么？

参考答案：

HTML表单用于收集用户输入：

基本结构：

html

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required />

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required />

  <button type="submit">提交</button>
</form>

重要属性：

action：表单提交的URL
method：提交方法（GET或POST）
enctype：编码类型（用于文件上传时）

表单控件：

<input>：输入字段
<textarea>：多行文本区域
<select>：下拉选择框
<button>：按钮

9. HTML中的块级元素和行内元素有什么区别？

参考答案：

块级元素和行内元素的主要区别：

块级元素（Block-level Elements）：

独占一行，宽度默认为父容器的100%
可以设置宽度、高度、内外边距
常见的块级元素：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>

行内元素（Inline Elements）：

在同一行内显示，只占用必要的宽度
不能设置宽度和高度（部分内外边距也受限）
常见的行内元素：<span>、<a>、<strong>、<em>、<img>

行内块元素（Inline-block）：

结合了两者特点，可以在同一行显示，也可以设置宽高

10. 如何在HTML中插入图片？

参考答案：

使用 <img> 标签插入图片：

基本语法：

html

<img src="图片路径" alt="替代文字" />

重要属性：

src：图片的URL或路径（必需）
alt：替代文字，用于可访问性和SEO（必需）
width、height：设置图片尺寸
title：鼠标悬停时显示的提示文字

完整示例：

html

<img
  src="images/logo.png"
  alt="公司logo"
  width="200"
  height="100"
  title="这是我们的logo"
/>

响应式图片：

html

<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 25vw"
  alt="响应式图片"
/>

11. HTML中如何创建链接？

参考答案：

使用 <a> 标签创建链接：

外部链接：

html

<a href="https://www.example.com">访问示例网站</a>

内部链接：

html

<a href="about.html">关于我们</a> <a href="/contact">联系页面</a>

锚点链接：

html

<a href="#section1">跳转到第一节</a>
...
<h2 id="section1">第一节标题</h2>

邮件链接：

html

<a href="mailto:contact@example.com">发送邮件</a>

电话链接：

html

<a href="tel:+86-138-0000-0000">拨打电话</a>

新窗口打开：

html

<a href="https://example.com" target="_blank">在新窗口打开</a>

12. HTML表格的基本结构是什么？

参考答案：

HTML表格使用以下标签构建：

基本结构：

html

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>

主要标签：

<table>：表格容器
<thead>：表格头部
<tbody>：表格主体
<tfoot>：表格脚部
<tr>：表格行
<th>：表头单元格
<td>：数据单元格

常用属性：

colspan：跨列合并
rowspan：跨行合并

13. 什么是HTML实体？常用的有哪些？

参考答案：

HTML实体用于显示保留字符和特殊字符：

为什么需要HTML实体：

某些字符在HTML中有特殊含义（如 <、>、&）
需要使用实体来正确显示这些字符

常用HTML实体：

实体	符号	说明
`<`	<	小于号
`>`	>	大于号
`&`	&	和号
`"`	"	双引号
`'`	'	单引号
` `		不间断空格
`©`	©	版权符号
`®`	®	注册商标

数字实体：

< → <
> → >
& → &

14. HTML中的注释如何写？

参考答案：

HTML注释用于在代码中添加说明，不会在浏览器中显示：

基本语法：

html

<!-- 这是一个注释 -->

单行注释：

html

<!-- 这是页面头部 -->
<header>...</header>

多行注释：

html

<!--
    这是一个多行注释
    可以包含多行内容
    用于详细说明
-->

注释的用途：

解释代码功能
临时禁用代码
添加开发者注释
标记代码段落

注意事项：

注释不能嵌套
注释内容不应包含 --
注释在源代码中可见，不要包含敏感信息

15. HTML5中的新表单输入类型有哪些？

参考答案：

HTML5 引入了多种新的输入类型：

日期时间类型：

html

<input type="date" />
<!-- 日期选择器 -->
<input type="time" />
<!-- 时间选择器 -->
<input type="datetime-local" />
<!-- 日期时间选择器 -->
<input type="month" />
<!-- 月份选择器 -->
<input type="week" />
<!-- 周选择器 -->

数值类型：

html

<input type="number" min="0" max="100" step="1" />
<input type="range" min="0" max="100" value="50" />

联系信息类型：

html

<input type="email" />
<!-- 邮箱验证 -->
<input type="tel" />
<!-- 电话号码 -->
<input type="url" />
<!-- URL验证 -->

其他类型：

html

<input type="search" />
<!-- 搜索框 -->
<input type="color" />
<!-- 颜色选择器 -->
<input type="file" multiple />
<!-- 文件上传 -->

16. 什么是HTML的DOCTYPE声明？

参考答案：

DOCTYPE声明告诉浏览器文档使用哪种HTML版本：

HTML5的DOCTYPE：

html

<!DOCTYPE html>

作用和重要性：

必须放在HTML文档的第一行
告诉浏览器使用标准模式渲染页面
避免浏览器进入怪异模式（Quirks Mode）
确保页面在不同浏览器中的一致性

历史版本的DOCTYPE：

html

<!-- HTML 4.01 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5简化：

HTML5的DOCTYPE非常简洁
向后兼容，适用于所有现代浏览器

17. HTML中的列表有哪些类型？

参考答案：

HTML提供三种类型的列表：

无序列表（Unordered List）：

html

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

有序列表（Ordered List）：

html

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

描述列表（Description List）：

html

<dl>
  <dt>术语1</dt>
  <dd>术语1的描述</dd>
  <dt>术语2</dt>
  <dd>术语2的描述</dd>
</dl>

嵌套列表：

html

<ul>
  <li>
    主项目1
    <ul>
      <li>子项目1</li>
      <li>子项目2</li>
    </ul>
  </li>
  <li>主项目2</li>
</ul>

18. HTML中如何插入音频和视频？

参考答案：

HTML5提供了原生的音频和视频支持：

音频标签：

html

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  您的浏览器不支持音频播放。
</audio>

视频标签：

html

<video width="640" height="480" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  您的浏览器不支持视频播放。
</video>

常用属性：

controls：显示播放控制器
autoplay：自动播放
loop：循环播放
muted：静音
poster：视频封面图片（仅视频）

多格式支持：

使用多个 <source> 标签提供不同格式
浏览器会选择支持的第一个格式

19. 什么是HTML的meta标签？

参考答案：

meta标签提供关于HTML文档的元数据：

字符编码：

html

<meta charset="UTF-8" />

视口设置（响应式设计）：

html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

SEO相关：

html

<meta name="description" content="页面描述" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="author" content="作者姓名" />

HTTP等效标签：

html

<meta http-equiv="refresh" content="30" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

社交媒体标签：

html

<meta property="og:title" content="页面标题" />
<meta property="og:description" content="页面描述" />
<meta property="og:image" content="图片URL" />

20. HTML中的head标签包含哪些内容？

参考答案：

head标签包含文档的元数据，不在页面中显示：

必需元素：

html

<head>
  <meta charset="UTF-8" />
  <title>页面标题</title>
</head>

常见元素：

html

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>页面标题</title>
  <meta name="description" content="页面描述" />
  <link rel="stylesheet" href="styles.css" />
  <link rel="icon" href="favicon.ico" />
  <script src="script.js"></script>
</head>

head中的标签：

<title>：页面标题
<meta>：元数据
<link>：外部资源链接
<style>：内部样式
<script>：JavaScript代码
<base>：基础URL

21. 如何在HTML中创建表单验证？

参考答案：

HTML5提供了内置的表单验证功能：

必填字段：

html

<input type="text" name="username" required />

输入类型验证：

html

<input type="email" name="email" required />
<input type="url" name="website" />
<input type="number" name="age" min="18" max="100" />

模式验证：

html

<input type="text" name="phone" pattern="[0-9]{11}" title="请输入11位手机号" />

长度限制：

html

<input type="text" name="username" minlength="3" maxlength="20" />
<textarea name="message" maxlength="500"></textarea>

自定义验证消息：

html

<input
  type="email"
  name="email"
  required
  oninvalid="this.setCustomValidity('请输入有效的邮箱地址')"
  oninput="this.setCustomValidity('')"
/>

22. HTML中的iframe标签是什么？如何使用？

参考答案：

iframe用于在当前页面中嵌入另一个HTML页面：

基本语法：

html

<iframe src="https://www.example.com" width="800" height="600"></iframe>

常用属性：

html

<iframe
  src="page.html"
  width="100%"
  height="400"
  frameborder="0"
  scrolling="auto"
  name="myframe"
>
</iframe>

安全属性：

html

<iframe
  src="external-site.com"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy"
>
</iframe>

响应式iframe：

html

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="video.html"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
  >
  </iframe>
</div>

注意事项：

可能存在安全风险
影响页面加载速度
SEO不友好

23. HTML5中的Canvas元素是什么？

参考答案：

Canvas是HTML5中用于绘制图形的元素：

基本用法：

html

<canvas id="myCanvas" width="800" height="600"></canvas>

JavaScript绘图：

javascript

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')

// 绘制矩形
ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 100, 100)

// 绘制圆形
ctx.beginPath()
ctx.arc(200, 200, 50, 0, 2 * Math.PI)
ctx.fillStyle = 'blue'
ctx.fill()

Canvas的用途：

动态图形绘制
图表和数据可视化
游戏开发
图像处理
动画效果

Canvas vs SVG：

Canvas：基于像素，适合复杂动画
SVG：基于矢量，适合静态图形

24. 什么是HTML的data属性？

参考答案：

data属性用于存储自定义数据：

基本语法：

html

<div data-user-id="123" data-role="admin" data-status="active">用户信息</div>

JavaScript访问：

javascript

const element = document.querySelector('div')

// 获取data属性
console.log(element.dataset.userId) // "123"
console.log(element.dataset.role) // "admin"
console.log(element.dataset.status) // "active"

// 设置data属性
element.dataset.newAttribute = 'value'

CSS访问：

css

div[data-status='active'] {
  color: green;
}

div::before {
  content: attr(data-role);
}

命名规则：

必须以 data- 开头
只能包含小写字母、数字、连字符、点、冒号、下划线
JavaScript中转换为驼峰命名

25. HTML中的button和input[type="button"]有什么区别？

参考答案：

button元素和input[type="button"]的主要区别：

内容支持：

html

<!-- button可以包含HTML内容 -->
<button type="button"><img src="icon.png" alt="图标" /> 点击我</button>

<!-- input只能显示纯文本 -->
<input type="button" value="点击我" />

默认行为：

html

<!-- button在表单中默认type="submit" -->
<form>
  <button>提交</button>
  <!-- 会提交表单 -->
  <button type="button">不提交</button>
</form>

<!-- input[type="button"]不会提交表单 -->
<input type="button" value="不提交" />

样式控制：

button更容易样式化
button支持伪元素（::before, ::after）
input的样式选项更有限

可访问性：

button语义更明确
屏幕阅读器支持更好

26. HTML中如何实现响应式图片？

参考答案：

HTML提供多种方式实现响应式图片：

srcset属性：

html

<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw, 
            (max-width: 800px) 50vw, 
            25vw"
  alt="响应式图片"
/>

picture元素：

html

<picture>
  <source media="(max-width: 480px)" srcset="mobile.jpg" />
  <source media="(max-width: 800px)" srcset="tablet.jpg" />
  <img src="desktop.jpg" alt="响应式图片" />
</picture>

不同格式支持：

html

<picture>
  <source srcset="image.webp" type="image/webp" />
  <source srcset="image.jpg" type="image/jpeg" />
  <img src="image.jpg" alt="现代格式图片" />
</picture>

CSS配合：

css

img {
  max-width: 100%;
  height: auto;
}

27. 什么是HTML的语义化标签？列举一些例子

参考答案：

语义化标签具有明确的含义，描述内容的结构和用途：

页面结构标签：

html

<header>页面头部</header>
<nav>导航菜单</nav>
<main>主要内容</main>
<aside>侧边栏</aside>
<footer>页面底部</footer>

内容区域标签：

html

<article>独立文章</article>
<section>文档章节</section>
<figure>
  <img src="chart.png" alt="销售图表" />
  <figcaption>2023年销售数据</figcaption>
</figure>

文本语义标签：

html

<mark>高亮文本</mark>
<time datetime="2023-12-25">圣诞节</time>
<address>联系地址</address>
<blockquote cite="source.html">引用内容</blockquote>

表单语义标签：

html

<fieldset>
  <legend>个人信息</legend>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" />
</fieldset>

28. HTML中的pre标签有什么作用？

参考答案：

pre标签用于显示预格式化文本：

基本特性：

保留空白字符（空格、制表符、换行符）
使用等宽字体显示
不会自动换行

使用示例：

html

<pre>
这是预格式化文本
    保留    所有空格
和换行符
</pre>

代码显示：

html

<pre><code>
function hello() {
    console.log("Hello World!");
}
</code></pre>

ASCII艺术：

html

<pre>
     /\_/\  
    ( o.o ) 
     > ^ <
</pre>

注意事项：

内容会按原样显示
长行不会自动换行
通常与 <code> 标签配合使用

29. HTML中的fieldset和legend标签如何使用？

参考答案：

fieldset和legend用于组织表单元素：

基本结构：

html

<fieldset>
  <legend>个人信息</legend>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" />

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" />
</fieldset>

多组表单：

html

<form>
  <fieldset>
    <legend>基本信息</legend>
    <input type="text" name="name" placeholder="姓名" />
    <input type="email" name="email" placeholder="邮箱" />
  </fieldset>

  <fieldset>
    <legend>联系方式</legend>
    <input type="tel" name="phone" placeholder="电话" />
    <textarea name="address" placeholder="地址"></textarea>
  </fieldset>
</form>

禁用整组：

html

<fieldset disabled>
  <legend>已禁用的选项</legend>
  <input type="text" name="disabled-input" />
</fieldset>

样式化：

css

fieldset {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

legend {
  font-weight: bold;
  padding: 0 10px;
}

30. HTML5中的details和summary标签是什么？

参考答案：

details和summary标签用于创建可折叠的内容区域：

基本用法：

html

<details>
  <summary>点击展开详情</summary>
  <p>这里是详细内容，默认隐藏。</p>
  <p>点击上方标题可以展开或收起。</p>
</details>

默认展开：

html

<details open>
  <summary>默认展开的内容</summary>
  <p>这个内容区域默认是展开的。</p>
</details>

复杂内容：

html

<details>
  <summary>FAQ - 如何使用这个功能？</summary>
  <div>
    <h4>步骤说明：</h4>
    <ol>
      <li>首先打开设置页面</li>
      <li>找到相关选项</li>
      <li>按照提示操作</li>
    </ol>
    <img src="screenshot.png" alt="操作截图" />
  </div>
</details>

JavaScript控制：

javascript

const details = document.querySelector('details')
details.addEventListener('toggle', function () {
  console.log(this.open ? '展开了' : '收起了')
})

31. HTML中的abbr标签有什么用途？

参考答案：

abbr标签用于标记缩写或首字母缩略词：

基本用法：

html

<p><abbr title="HyperText Markup Language">HTML</abbr>是网页标记语言。</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr>用于样式设计。</p>

可访问性增强：

html

<p>我们公司位于<abbr title="中华人民共和国">中国</abbr>。</p>
<p>请在<abbr title="尽快">ASAP</abbr>完成任务。</p>

样式化：

css

abbr {
  text-decoration: underline dotted;
  cursor: help;
}

abbr:hover {
  color: #007bff;
}

与其他标签结合：

html

<p>
  <abbr title="World Wide Web Consortium">W3C</abbr>
  制定了<abbr title="HyperText Markup Language">HTML</abbr>标准。
</p>

好处：

提高可访问性
帮助搜索引擎理解内容
为用户提供额外信息

32. HTML中如何创建下拉菜单？

参考答案：

使用select标签创建下拉菜单：

基本下拉菜单：

html

<select name="city">
  <option value="">请选择城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

分组选项：

html

<select name="location">
  <optgroup label="直辖市">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </optgroup>
  <optgroup label="省会城市">
    <option value="guangzhou">广州</option>
    <option value="chengdu">成都</option>
  </optgroup>
</select>

多选下拉菜单：

html

<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
</select>

默认选中：

html

<select name="country">
  <option value="cn" selected>中国</option>
  <option value="us">美国</option>
  <option value="uk">英国</option>
</select>

33. HTML中的progress和meter标签有什么区别？

参考答案：

progress和meter都用于显示数值，但用途不同：

progress标签（进度条）：

html

<!-- 确定进度 -->
<progress value="70" max="100">70%</progress>

<!-- 不确定进度 -->
<progress>加载中...</progress>

<!-- 文件上传进度 -->
<label for="upload">上传进度：</label>
<progress id="upload" value="32" max="100">32%</progress>

meter标签（测量值）：

html

<!-- 磁盘使用量 -->
<meter value="6" min="0" max="10">6 out of 10</meter>

<!-- 温度显示 -->
<meter value="25" min="-10" max="50" optimum="20" high="35" low="5">25°C</meter>

<!-- 电池电量 -->
<meter value="0.6" optimum="1" high="0.9" low="0.2">60%</meter>

主要区别：

progress：表示任务完成进度，有明确的开始和结束
meter：表示已知范围内的标量值或分数值

meter的特殊属性：

optimum：最佳值
high：高值阈值
low：低值阈值

34. HTML中的kbd、samp、var标签分别用于什么？

参考答案：

这三个标签都用于标记特殊类型的文本：

kbd标签（键盘输入）：

html

<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。</p>
<p>使用 <kbd>Alt</kbd> + <kbd>Tab</kbd> 切换窗口。</p>
<p>输入命令：<kbd>npm install</kbd></p>

samp标签（程序输出）：

html

<p>程序输出：<samp>Hello, World!</samp></p>
<p>错误信息：<samp>File not found</samp></p>
<pre><samp>
$ ls -la
total 64
drwxr-xr-x  8 user  staff   256 Dec 25 10:30 .
</samp></pre>

var标签（变量）：

html

<p>方程式：<var>y</var> = <var>mx</var> + <var>b</var></p>
<p>
  在函数 <code>calculate(<var>x</var>, <var>y</var>)</code> 中...
</p>
<p>设 <var>n</var> 为正整数。</p>

组合使用：

html

<p>
  在终端中输入 <kbd>node <var>filename</var>.js</kbd>， 将输出
  <samp>Script executed successfully</samp>。
</p>

35. HTML中的cite标签如何使用？

参考答案：

cite标签用于标记作品的标题或引用来源：

引用书籍：

html

<p>我最近在读<cite>《JavaScript高级程序设计》</cite>这本书。</p>

引用文章：

html

<blockquote>
  <p>学而时习之，不亦说乎？</p>
  <footer>—— <cite>《论语》</cite></footer>
</blockquote>

引用网站或博客：

html

<p>根据<cite>MDN Web Docs</cite>的说明，HTML5引入了许多新特性。</p>

引用电影、歌曲等：

html

<p>电影<cite>《肖申克的救赎》</cite>是我最喜欢的电影之一。</p>
<p>这首<cite>《月亮代表我的心》</cite>很好听。</p>

与blockquote结合：

html

<blockquote cite="https://example.com/article">
  <p>这是一段引用的内容。</p>
  <footer>来源：<cite>某某网站</cite></footer>
</blockquote>

样式化：

css

cite {
  font-style: italic;
  color: #666;
}

36. HTML5中的article和section标签有什么区别？

参考答案：

article和section都是HTML5的语义化标签，但用途不同：

article标签：

表示独立、完整的内容
可以单独存在和理解
通常有自己的标题

html

<article>
  <header>
    <h2>文章标题</h2>
    <time datetime="2023-12-25">2023年12月25日</time>
  </header>
  <p>文章内容...</p>
  <footer>
    <p>作者：张三</p>
  </footer>
</article>

section标签：

表示文档中的一个章节或区域
通常是更大内容的一部分
按主题分组相关内容

html

<article>
  <h1>完整指南</h1>
  <section>
    <h2>第一章：基础知识</h2>
    <p>基础内容...</p>
  </section>
  <section>
    <h2>第二章：高级技巧</h2>
    <p>高级内容...</p>
  </section>
</article>

嵌套关系：

html

<!-- article包含多个section -->
<article>
  <h1>博客文章</h1>
  <section>
    <h2>引言</h2>
    <p>...</p>
  </section>
  <section>
    <h2>正文</h2>
    <p>...</p>
  </section>
</article>

<!-- section包含多个article -->
<section>
  <h1>最新文章</h1>
  <article>
    <h2>文章1</h2>
    <p>...</p>
  </article>
  <article>
    <h2>文章2</h2>
    <p>...</p>
  </article>
</section>

37. HTML中的map和area标签如何创建图像映射？

参考答案：

map和area标签用于创建图像映射，让图片的不同区域可以点击：

基本结构：

html

<img src="world-map.jpg" alt="世界地图" usemap="#worldmap" />

<map name="worldmap">
  <area shape="rect" coords="0,0,100,50" href="asia.html" alt="亚洲" />
  <area shape="circle" coords="200,100,50" href="europe.html" alt="欧洲" />
  <area
    shape="poly"
    coords="300,0,400,50,350,100"
    href="africa.html"
    alt="非洲"
  />
</map>

不同形状的区域：

html

<img src="office-layout.jpg" alt="办公室布局" usemap="#office" />

<map name="office">
  <!-- 矩形区域 -->
  <area shape="rect" coords="10,10,110,60" href="reception.html" alt="前台" />

  <!-- 圆形区域 -->
  <area
    shape="circle"
    coords="200,150,40"
    href="meeting-room.html"
    alt="会议室"
  />

  <!-- 多边形区域 -->
  <area
    shape="poly"
    coords="300,100,400,100,350,200"
    href="office.html"
    alt="办公区"
  />

  <!-- 默认区域 -->
  <area shape="default" href="main.html" alt="主页" />
</map>

坐标说明：

rect：左上角x,y，右下角x,y
circle：圆心x,y，半径
poly：各个顶点的x,y坐标对

响应式图像映射：

html

<img
  src="responsive-map.jpg"
  alt="响应式地图"
  usemap="#responsivemap"
  style="width:100%;"
/>

<map name="responsivemap">
  <area
    shape="rect"
    coords="0,0,50,25"
    href="link1.html"
    alt="区域1"
    style="cursor:pointer;"
  />
</map>

38. HTML中的ruby、rt、rp标签用于什么？

参考答案：

ruby、rt、rp标签用于显示东亚文字的注音或注释：

基本用法：

html

<ruby> 汉 <rt>hàn</rt> 字 <rt>zì</rt> </ruby>

日语假名注音：

html

<ruby> 日本語 <rt>にほんご</rt> </ruby>

<ruby> 東京 <rt>とうきょう</rt> </ruby>

使用rp标签（兼容性）：

html

<ruby> 北京 <rp>(</rp><rt>Běi jīng</rt><rp>)</rp> </ruby>

复杂注音：

html

<ruby>
  <rb>超</rb><rb>電磁</rb><rb>砲</rb> <rt>レール</rt><rt>ガン</rt><rt></rt>
</ruby>

样式化：

css

ruby {
  ruby-align: center;
}

rt {
  font-size: 0.7em;
  color: #666;
}

rp {
  color: #999;
}

用途：

中文拼音注音
日语假名注音
韩语注音
古文注释

39. HTML中的wbr标签有什么作用？

参考答案：

wbr（Word Break Opportunity）标签表示可能的换行位置：

基本用法：

html

<p>
  这是一个很长的URL：http://www.<wbr />example<wbr />.com/<wbr />very/<wbr />long/<wbr />path/<wbr />to/<wbr />resource
</p>

长单词换行：

html

<p>
  Pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis
</p>

代码换行：

html

<code>
  function very<wbr />Long<wbr />Function<wbr />Name<wbr />That<wbr />Might<wbr />Need<wbr />Breaking()
  { // 代码内容 }
</code>

与CSS word-break的区别：

html

<!-- wbr：建议换行位置 -->
<p>super<wbr />cali<wbr />fragi<wbr />listic<wbr />expiali<wbr />docious</p>

<!-- CSS：强制换行 -->
<p style="word-break: break-all;">supercalifragilisticexpialidocious</p>

实际应用：

长URL的友好显示
技术文档中的长标识符
多语言文本的换行控制
响应式设计中的文本处理

40. HTML中的template标签是什么？

参考答案：

template标签用于定义可重用的HTML模板：

基本概念：

template内容不会直接显示
需要通过JavaScript激活
用于动态生成内容

基本用法：

html

<template id="user-template">
  <div class="user-card">
    <img src="" alt="用户头像" class="avatar" />
    <h3 class="username"></h3>
    <p class="email"></p>
  </div>
</template>

JavaScript使用：

javascript

const template = document.getElementById('user-template')
const users = [
  { name: '张三', email: 'zhang@example.com', avatar: 'zhang.jpg' },
  { name: '李四', email: 'li@example.com', avatar: 'li.jpg' }
]

users.forEach(user => {
  const clone = template.content.cloneNode(true)
  clone.querySelector('.username').textContent = user.name
  clone.querySelector('.email').textContent = user.email
  clone.querySelector('.avatar').src = user.avatar
  document.body.appendChild(clone)
})

复杂模板：

html

<template id="product-template">
  <article class="product">
    <header>
      <h2 class="product-name"></h2>
      <span class="price"></span>
    </header>
    <img class="product-image" src="" alt="" />
    <p class="description"></p>
    <button class="add-to-cart">添加到购物车</button>
  </article>
</template>

41. HTML中的slot标签在Web Components中如何使用？

参考答案：

slot标签用于Web Components中的内容分发：

基本概念：

slot定义内容插入点
允许外部内容插入到组件内部
支持默认内容和命名插槽

基本用法：

html

<!-- 自定义组件模板 -->
<template id="my-component">
  <div class="wrapper">
    <h2>组件标题</h2>
    <slot>默认内容</slot>
  </div>
</template>

<!-- 使用组件 -->
<my-component>
  <p>这是插入的内容</p>
</my-component>

命名插槽：

html

<template id="card-component">
  <div class="card">
    <header>
      <slot name="header">默认标题</slot>
    </header>
    <main>
      <slot>默认内容</slot>
    </main>
    <footer>
      <slot name="footer">默认页脚</slot>
    </footer>
  </div>
</template>

<!-- 使用命名插槽 -->
<card-component>
  <h1 slot="header">自定义标题</h1>
  <p>主要内容</p>
  <p slot="footer">自定义页脚</p>
</card-component>

JavaScript定义组件：

javascript

class MyComponent extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    const template = document.getElementById('my-component')
    shadow.appendChild(template.content.cloneNode(true))
  }
}

customElements.define('my-component', MyComponent)

42. HTML中的noscript标签有什么用途？

参考答案：

noscript标签用于在JavaScript被禁用时显示替代内容：

基本用法：

html

<script>
  document.write('JavaScript已启用')
</script>
<noscript>
  <p>您的浏览器不支持JavaScript或JavaScript已被禁用。</p>
  <p>请启用JavaScript以获得最佳体验。</p>
</noscript>

提供替代功能：

html

<div id="interactive-map"></div>
<script>
  // 加载交互式地图
  loadInteractiveMap()
</script>
<noscript>
  <img src="static-map.jpg" alt="静态地图" usemap="#maplinks" />
  <map name="maplinks">
    <area shape="rect" coords="0,0,100,100" href="location1.html" alt="位置1" />
    <area
      shape="rect"
      coords="100,0,200,100"
      href="location2.html"
      alt="位置2"
    />
  </map>
</noscript>

表单回退：

html

<form id="ajax-form">
  <input type="email" name="email" required />
  <button type="button" onclick="submitAjax()">提交</button>
</form>

<noscript>
  <form action="/submit" method="post">
    <input type="email" name="email" required />
    <button type="submit">提交</button>
  </form>
</noscript>

SEO和可访问性：

html

<div id="dynamic-content"></div>
<script>
  loadDynamicContent()
</script>
<noscript>
  <div>
    <h2>重要内容</h2>
    <p>这是重要的内容，确保搜索引擎和禁用JavaScript的用户都能看到。</p>
  </div>
</noscript>

43. HTML中的object和embed标签有什么区别？

参考答案：

object和embed都用于嵌入外部内容，但有不同的特点：

object标签：

html

<!-- 嵌入PDF -->
<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>您的浏览器不支持PDF显示。<a href="document.pdf">点击下载</a></p>
</object>

<!-- 嵌入Flash -->
<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  width="400"
  height="300"
>
  <param name="movie" value="animation.swf" />
  <param name="quality" value="high" />
  <embed
    src="animation.swf"
    width="400"
    height="300"
    type="application/x-shockwave-flash"
  />
</object>

embed标签：

html

<!-- 嵌入音频 -->
<embed src="music.mp3" type="audio/mpeg" width="300" height="50" />

<!-- 嵌入视频 -->
<embed src="video.mp4" type="video/mp4" width="640" height="480" />

主要区别：

object：W3C标准，支持回退内容，更灵活
embed：简单直接，但标准化程度较低
object：可以嵌套param标签设置参数
embed：参数直接作为属性设置

现代替代方案：

html

<!-- 使用HTML5原生标签 -->
<audio controls>
  <source src="music.mp3" type="audio/mpeg" />
</audio>

<video controls width="640" height="480">
  <source src="video.mp4" type="video/mp4" />
</video>

<!-- 使用iframe -->
<iframe src="document.pdf" width="600" height="400"></iframe>

44. HTML中的base标签有什么作用？

参考答案：

base标签用于设置文档中所有相对URL的基础URL：

基本用法：

html

<head>
  <base href="https://www.example.com/pages/" />
  <base target="_blank" />
</head>
<body>
  <!-- 这个链接实际指向 https://www.example.com/pages/about.html -->
  <a href="about.html">关于我们</a>

  <!-- 这个图片实际指向 https://www.example.com/pages/images/logo.png -->
  <img src="images/logo.png" alt="Logo" />
</body>

设置默认目标：

html

<head>
  <base target="_blank" />
</head>
<body>
  <!-- 所有链接都会在新窗口打开 -->
  <a href="page1.html">页面1</a>
  <a href="page2.html">页面2</a>

  <!-- 除非明确指定其他target -->
  <a href="page3.html" target="_self">页面3（当前窗口）</a>
</body>

注意事项：

base标签必须放在head中
一个文档只能有一个base标签
影响所有相对URL（链接、图片、表单等）
不影响绝对URL

实际应用场景：

html

<!-- 适用于单页应用或子目录部署 -->
<head>
  <base href="/app/static/" />
</head>
<body>
  <link rel="stylesheet" href="css/style.css" />
  <!-- 实际路径：/app/static/css/style.css -->

  <script src="js/app.js"></script>
  <!-- 实际路径：/app/static/js/app.js -->
</body>

45. HTML中的contenteditable属性如何使用？

参考答案：

contenteditable属性使HTML元素可以被用户编辑：

基本用法：

html

<div contenteditable="true">这段文字可以直接编辑，点击试试看！</div>

<p contenteditable="false">这段文字不能编辑</p>

富文本编辑器：

html

<div
  contenteditable="true"
  style="border: 1px solid #ccc; padding: 10px; min-height: 200px;"
>
  <h2>可编辑的标题</h2>
  <p>这是一个简单的富文本编辑器。你可以：</p>
  <ul>
    <li>编辑文字</li>
    <li>添加<strong>粗体</strong>和<em>斜体</em></li>
    <li>创建列表</li>
  </ul>
</div>

与JavaScript配合：

html

<div id="editor" contenteditable="true">编辑我...</div>
<button onclick="getContent()">获取内容</button>
<button onclick="setContent()">设置内容</button>

<script>
  function getContent() {
    const editor = document.getElementById('editor')
    console.log(editor.innerHTML)
  }

  function setContent() {
    const editor = document.getElementById('editor')
    editor.innerHTML = '<p>新的<strong>内容</strong></p>'
  }

  // 监听内容变化
  document.getElementById('editor').addEventListener('input', function (e) {
    console.log('内容已改变:', e.target.innerHTML)
  })
</script>

样式化可编辑区域：

css

[contenteditable='true'] {
  border: 2px dashed #ccc;
  padding: 10px;
  min-height: 100px;
}

[contenteditable='true']:focus {
  border-color: #007bff;
  outline: none;
}

[contenteditable='true']:empty::before {
  content: '点击这里开始编辑...';
  color: #999;
}

46. HTML中的draggable属性如何实现拖拽功能？

参考答案：

draggable属性配合拖拽事件可以实现拖拽功能：

基本拖拽：

html

<div draggable="true" ondragstart="drag(event)" id="drag1">拖拽我</div>

<div
  ondrop="drop(event)"
  ondragover="allowDrop(event)"
  style="width:200px;height:200px;border:1px solid #ccc;"
>
  放置区域
</div>

<script>
  function allowDrop(ev) {
    ev.preventDefault()
  }

  function drag(ev) {
    ev.dataTransfer.setData('text', ev.target.id)
  }

  function drop(ev) {
    ev.preventDefault()
    const data = ev.dataTransfer.getData('text')
    ev.target.appendChild(document.getElementById(data))
  }
</script>

拖拽列表项：

html

<ul id="sortable">
  <li draggable="true">项目 1</li>
  <li draggable="true">项目 2</li>
  <li draggable="true">项目 3</li>
  <li draggable="true">项目 4</li>
</ul>

<script>
  const sortable = document.getElementById('sortable')
  let draggedElement = null

  sortable.addEventListener('dragstart', function (e) {
    draggedElement = e.target
    e.target.style.opacity = '0.5'
  })

  sortable.addEventListener('dragend', function (e) {
    e.target.style.opacity = ''
  })

  sortable.addEventListener('dragover', function (e) {
    e.preventDefault()
  })

  sortable.addEventListener('drop', function (e) {
    e.preventDefault()
    if (e.target.tagName === 'LI') {
      sortable.insertBefore(draggedElement, e.target.nextSibling)
    }
  })
</script>

文件拖拽上传：

html

<div
  id="dropZone"
  style="width:300px;height:200px;border:2px dashed #ccc;text-align:center;line-height:200px;"
>
  拖拽文件到这里
</div>

<script>
  const dropZone = document.getElementById('dropZone')

  dropZone.addEventListener('dragover', function (e) {
    e.preventDefault()
    this.style.backgroundColor = '#f0f0f0'
  })

  dropZone.addEventListener('dragleave', function (e) {
    this.style.backgroundColor = ''
  })

  dropZone.addEventListener('drop', function (e) {
    e.preventDefault()
    this.style.backgroundColor = ''

    const files = e.dataTransfer.files
    for (let file of files) {
      console.log('文件名:', file.name)
      console.log('文件大小:', file.size)
    }
  })
</script>

47. HTML中的spellcheck属性有什么作用？

参考答案：

spellcheck属性控制浏览器是否对元素内容进行拼写检查：

基本用法：

html

<!-- 启用拼写检查 -->
<textarea spellcheck="true" placeholder="输入一些英文文本试试..."></textarea>

<!-- 禁用拼写检查 -->
<input type="text" spellcheck="false" placeholder="代码或专业术语" />

<!-- 可编辑div的拼写检查 -->
<div contenteditable="true" spellcheck="true">
  这里可以编辑文本，浏览器会检查拼写错误。
</div>

不同场景的应用：

html

<!-- 文章编辑器 - 启用拼写检查 -->
<textarea spellcheck="true" placeholder="写文章..."></textarea>

<!-- 代码编辑器 - 禁用拼写检查 -->
<textarea spellcheck="false" placeholder="输入代码..."></textarea>

<!-- 用户名输入 - 禁用拼写检查 -->
<input type="text" name="username" spellcheck="false" placeholder="用户名" />

<!-- 邮箱输入 - 禁用拼写检查 -->
<input type="email" name="email" spellcheck="false" placeholder="邮箱地址" />

继承性：

html

<!-- 父元素设置会被子元素继承 -->
<div spellcheck="false">
  <input type="text" placeholder="继承父元素设置，不检查拼写" />
  <textarea placeholder="同样不检查拼写"></textarea>

  <!-- 子元素可以覆盖父元素设置 -->
  <input type="text" spellcheck="true" placeholder="覆盖设置，检查拼写" />
</div>

CSS样式化拼写错误：

css

/* 某些浏览器允许自定义拼写错误样式 */
::spelling-error {
  text-decoration: underline wavy red;
}

/* 语法错误样式 */
::grammar-error {
  text-decoration: underline wavy green;
}

48. HTML中的hidden属性如何使用？

参考答案：

hidden属性用于隐藏HTML元素：

基本用法：

html

<!-- 隐藏元素 -->
<div hidden>这个div被隐藏了</div>

<!-- 显示元素 -->
<div>这个div是可见的</div>

<!-- 通过JavaScript控制 -->
<button onclick="toggleVisibility()">切换显示/隐藏</button>

<p id="toggleText" hidden>这段文字可以切换显示状态</p>

<script>
  function toggleVisibility() {
    const text = document.getElementById('toggleText')
    text.hidden = !text.hidden
  }
</script>

与CSS display的区别：

html

<!-- hidden属性 -->
<div hidden>使用hidden属性隐藏</div>

<!-- CSS display: none -->
<div style="display: none;">使用CSS隐藏</div>

<!-- CSS visibility: hidden -->
<div style="visibility: hidden;">使用visibility隐藏（占用空间）</div>

条件显示内容：

html

<form>
  <label> <input type="checkbox" id="showAdvanced" /> 显示高级选项 </label>

  <div id="advancedOptions" hidden>
    <h3>高级选项</h3>
    <label>选项1: <input type="text" /></label>
    <label>选项2: <input type="text" /></label>
  </div>
</form>

<script>
  document
    .getElementById('showAdvanced')
    .addEventListener('change', function () {
      document.getElementById('advancedOptions').hidden = !this.checked
    })
</script>

模态框或弹窗：

html

<button onclick="showModal()">显示模态框</button>

<div
  id="modal"
  hidden
  style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);"
>
  <div
    style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px;"
  >
    <h2>模态框标题</h2>
    <p>模态框内容</p>
    <button onclick="hideModal()">关闭</button>
  </div>
</div>

<script>
  function showModal() {
    document.getElementById('modal').hidden = false
  }

  function hideModal() {
    document.getElementById('modal').hidden = true
  }
</script>

49. HTML中的tabindex属性如何控制焦点顺序？

参考答案：

tabindex属性控制元素的Tab键焦点顺序：

基本用法：

html

<!-- 正常Tab顺序（1, 2, 3） -->
<input type="text" tabindex="1" placeholder="第一个" />
<input type="text" tabindex="2" placeholder="第二个" />
<input type="text" tabindex="3" placeholder="第三个" />

<!-- 自定义Tab顺序（2, 1, 3） -->
<input type="text" tabindex="2" placeholder="第二个获得焦点" />
<input type="text" tabindex="1" placeholder="第一个获得焦点" />
<input type="text" tabindex="3" placeholder="第三个获得焦点" />

特殊值：

html

<!-- tabindex="0": 正常Tab顺序，但在指定tabindex之后 -->
<div tabindex="0">可获得焦点的div</div>

<!-- tabindex="-1": 不参与Tab导航，但可通过JavaScript获得焦点 -->
<div tabindex="-1" id="skipFocus">跳过Tab导航</div>
<button onclick="document.getElementById('skipFocus').focus()">
  点击让上面的div获得焦点
</button>

复杂表单的焦点管理：

html

<form>
  <fieldset>
    <legend>基本信息</legend>
    <input type="text" tabindex="1" placeholder="姓名" />
    <input type="email" tabindex="2" placeholder="邮箱" />
  </fieldset>

  <fieldset>
    <legend>详细信息</legend>
    <input type="tel" tabindex="3" placeholder="电话" />
    <textarea tabindex="4" placeholder="地址"></textarea>
  </fieldset>

  <div>
    <button type="submit" tabindex="5">提交</button>
    <button type="reset" tabindex="6">重置</button>
  </div>
</form>

可访问性增强：

html

<!-- 自定义组件的焦点管理 -->
<div class="custom-dropdown" tabindex="0" role="combobox" aria-expanded="false">
  <span class="selected">请选择...</span>
  <ul class="options" hidden>
    <li tabindex="-1" role="option">选项1</li>
    <li tabindex="-1" role="option">选项2</li>
    <li tabindex="-1" role="option">选项3</li>
  </ul>
</div>

<script>
  // 键盘导航支持
  document
    .querySelector('.custom-dropdown')
    .addEventListener('keydown', function (e) {
      if (e.key === 'Enter' || e.key === ' ') {
        // 打开/关闭下拉菜单
        const options = this.querySelector('.options')
        options.hidden = !options.hidden
      }
    })
</script>

50. HTML5中的自定义数据属性（data-*）在实际开发中有哪些应用场景？

参考答案：

自定义数据属性在现代Web开发中有广泛应用：

组件配置：

html

<!-- 轮播图组件配置 -->
<div
  class="carousel"
  data-autoplay="true"
  data-interval="3000"
  data-animation="fade"
>
  <img src="slide1.jpg" alt="幻灯片1" />
  <img src="slide2.jpg" alt="幻灯片2" />
</div>

<script>
  document.querySelectorAll('.carousel').forEach(carousel => {
    const autoplay = carousel.dataset.autoplay === 'true'
    const interval = parseInt(carousel.dataset.interval)
    const animation = carousel.dataset.animation

    // 根据配置初始化轮播
    initCarousel(carousel, { autoplay, interval, animation })
  })
</script>

状态管理：

html

<!-- 购物车商品 -->
<div
  class="product-item"
  data-product-id="123"
  data-price="99.99"
  data-stock="10"
  data-category="electronics"
>
  <h3>商品名称</h3>
  <button class="add-to-cart">加入购物车</button>
</div>

<script>
  document.addEventListener('click', function (e) {
    if (e.target.classList.contains('add-to-cart')) {
      const item = e.target.closest('.product-item')
      const productData = {
        id: item.dataset.productId,
        price: parseFloat(item.dataset.price),
        stock: parseInt(item.dataset.stock),
        category: item.dataset.category
      }

      addToCart(productData)
    }
  })
</script>

表单验证：

html

<form>
  <input
    type="text"
    name="username"
    data-required="true"
    data-min-length="3"
    data-max-length="20"
    data-pattern="^[a-zA-Z0-9_]+$"
    data-error-message="用户名只能包含字母、数字和下划线"
  />

  <input
    type="email"
    name="email"
    data-required="true"
    data-error-message="请输入有效的邮箱地址"
  />
</form>

<script>
  function validateForm(form) {
    const inputs = form.querySelectorAll('input[data-required="true"]')

    inputs.forEach(input => {
      const minLength = input.dataset.minLength
      const maxLength = input.dataset.maxLength
      const pattern = input.dataset.pattern
      const errorMessage = input.dataset.errorMessage

      // 执行验证逻辑
      if (!validateInput(input.value, { minLength, maxLength, pattern })) {
        showError(input, errorMessage)
      }
    })
  }
</script>

CSS样式控制：

html

<div class="theme-switcher">
  <button data-theme="light">浅色主题</button>
  <button data-theme="dark">深色主题</button>
  <button data-theme="auto">自动主题</button>
</div>

<style>
  [data-theme='light'] {
    background-color: white;
    color: black;
  }

  [data-theme='dark'] {
    background-color: black;
    color: white;
  }

  .button[data-theme='light']:hover {
    background-color: #f0f0f0;
  }
</style>

<script>
  document.addEventListener('click', function (e) {
    if (e.target.dataset.theme) {
      document.body.dataset.theme = e.target.dataset.theme
      localStorage.setItem('theme', e.target.dataset.theme)
    }
  })
</script>

分析和追踪：

html

<button
  class="cta-button"
  data-track-event="click"
  data-track-category="marketing"
  data-track-label="hero-cta"
  data-track-value="1"
>
  立即注册
</button>

<script>
  document.addEventListener('click', function (e) {
    const trackEvent = e.target.dataset.trackEvent
    if (trackEvent) {
      // 发送分析数据
      analytics.track(trackEvent, {
        category: e.target.dataset.trackCategory,
        label: e.target.dataset.trackLabel,
        value: e.target.dataset.trackValue
      })
    }
  })
</script>

React 基础与核心思想

React 状态管理方案

React Hooks 深度解析

React 性能优化与新特性

渲染和性能

DOM/事件模型

异步/网络/安全

前端攻防安全

经典布局案例

HTML面试题库 ​

1. 什么是HTML？ ​

2. HTML5 相比 HTML4 有哪些主要改进？ ​

3. 解释HTML文档的基本结构 ​

4. 什么是HTML标签和元素？ ​

HTML标签： ​

HTML元素： ​

5. 常用的HTML标签有哪些？ ​

文本标签： ​

结构标签： ​

列表标签： ​

链接和媒体： ​

6. HTML属性是什么？如何使用？ ​

属性的特点： ​

常用属性： ​

示例： ​

7. 什么是语义化HTML？为什么重要？ ​

语义化标签的优势： ​

常用语义化标签： ​

8. HTML表单的基本结构是什么？ ​

基本结构： ​

重要属性： ​

表单控件： ​

9. HTML中的块级元素和行内元素有什么区别？ ​

块级元素（Block-level Elements）： ​

行内元素（Inline Elements）： ​

行内块元素（Inline-block）： ​

10. 如何在HTML中插入图片？ ​

基本语法： ​

重要属性： ​

完整示例： ​

响应式图片： ​

11. HTML中如何创建链接？ ​

外部链接： ​

内部链接： ​

锚点链接： ​

邮件链接： ​

电话链接： ​

新窗口打开： ​

12. HTML表格的基本结构是什么？ ​

基本结构： ​

主要标签： ​

常用属性： ​

13. 什么是HTML实体？常用的有哪些？ ​

为什么需要HTML实体： ​

常用HTML实体： ​

数字实体： ​

14. HTML中的注释如何写？ ​

基本语法： ​

单行注释： ​

多行注释： ​

注释的用途： ​

注意事项： ​

15. HTML5中的新表单输入类型有哪些？ ​

日期时间类型： ​

数值类型： ​

联系信息类型： ​

其他类型： ​

16. 什么是HTML的DOCTYPE声明？ ​

HTML5的DOCTYPE： ​

作用和重要性： ​

历史版本的DOCTYPE： ​

HTML5简化： ​

17. HTML中的列表有哪些类型？ ​

无序列表（Unordered List）： ​

有序列表（Ordered List）： ​

描述列表（Description List）： ​

嵌套列表： ​

18. HTML中如何插入音频和视频？ ​

音频标签： ​

视频标签： ​

HTML面试题库

1. 什么是HTML？

2. HTML5 相比 HTML4 有哪些主要改进？

3. 解释HTML文档的基本结构

4. 什么是HTML标签和元素？

HTML标签：

HTML元素：

5. 常用的HTML标签有哪些？

文本标签：

结构标签：

列表标签：

链接和媒体：

6. HTML属性是什么？如何使用？

属性的特点：

常用属性：

示例：

7. 什么是语义化HTML？为什么重要？

语义化标签的优势：

常用语义化标签：

8. HTML表单的基本结构是什么？

基本结构：

重要属性：

表单控件：

9. HTML中的块级元素和行内元素有什么区别？

块级元素（Block-level Elements）：

行内元素（Inline Elements）：

行内块元素（Inline-block）：

10. 如何在HTML中插入图片？

基本语法：

重要属性：

完整示例：

响应式图片：

11. HTML中如何创建链接？

外部链接：

内部链接：

锚点链接：

邮件链接：

电话链接：

新窗口打开：

12. HTML表格的基本结构是什么？

基本结构：

主要标签：

常用属性：

13. 什么是HTML实体？常用的有哪些？

为什么需要HTML实体：

常用HTML实体：

数字实体：

14. HTML中的注释如何写？

基本语法：

单行注释：

多行注释：

注释的用途：

注意事项：

15. HTML5中的新表单输入类型有哪些？

日期时间类型：

数值类型：

联系信息类型：

其他类型：

16. 什么是HTML的DOCTYPE声明？

HTML5的DOCTYPE：

作用和重要性：

历史版本的DOCTYPE：

HTML5简化：

17. HTML中的列表有哪些类型？

无序列表（Unordered List）：

有序列表（Ordered List）：

描述列表（Description List）：

嵌套列表：

18. HTML中如何插入音频和视频？

音频标签：

视频标签：

常用属性：

多格式支持：

19. 什么是HTML的meta标签？

字符编码：

视口设置（响应式设计）：

SEO相关：

HTTP等效标签：

社交媒体标签：

20. HTML中的head标签包含哪些内容？