HTML·重点知识·总结与测试
这篇文档较长，可以多次观看。
HTML 基础概念
1）HTML 是什么
HTML 的全称是 HyperText Markup Language。
2）HTML、CSS、JS 的关系
HTML 构建 网页。
CSS 美化 网页。
JavaScript为提供网页 交互功能 。
3）HTML 基础结构
在 HTML 文档的最顶部，用于声明文档类型的代码是 <!DOCTYPE html>。
HTML 所有的可见内容都必须写在 <body> 标签内。
用于定义 HTML 文档元数据（如字符编码、标题）的标签是 <head>。
Loading Editor...
HTML 文本标签
标题
在 HTML 中，最大的一级标题标签是 <h1>。
Loading Editor...
段落
用于创建段落的标签是 <p>。
Loading Editor...
段落中多个连续的换行或空格会被折叠为 一个空格。
Loading Editor...
文本格式化
说出几个用于文本格式化的标签 <strong>、<b>、<em>、<i>、<pre>、<code>、<br />、<hr />。
关于 <em> 和 <i> 标签的区别，描述正确的是？
在 HTML 中，`<b>` 标签使文本加粗，语义上更推荐使用的强化重要性的标签是 <strong>。
像 `<br />` 这种没有结束标签、也不包含内容的标签被称为 单标签 标签。
在 HTML 中实现换行效果的单标签是 <br />。
用于在页面上创建主题转换或水平分割线的标签是 <hr />。
当你需要在网页上显示一段原始排版（保留所有空格和换行）的文本时，应该使用的标签是 <pre>。
专门用于标记一小段计算机代码，使其默认以等宽字体显示的行内标签是 <code>。
为了在网页上展示多行格式整齐的代码块，标准的做法是将 <code> 标签嵌套在 <pre> 标签内。
Loading Editor...
在 `<pre>` 标签中，如果想要显示符号 `<` 或 `>`，必须使用 字符实体 来避免被浏览器误认为 HTML 标签。
Loading Editor...
HTML 导入 CSS 的方式
引入外部 CSS 样式表时，使用 `<link>` 标签的 href 属性来指定文件的路径。
1）外部样式表——最常用
将所有 CSS 代码写在一个独立的 .css 文件中，通过 <link> 标签引入。适合实际工程开发，网页结构和样式分离，这样的源码读起来清晰明了。
Loading Editor...
2）内部样式表
适合单个 demo 演示
Loading Editor...
3）内联样式
结构和样式混杂在一起，最不易阅读。
Loading Editor...
哪种 CSS 导入方式具有最高的优先级（在不考虑 !important 的情况下）？
HTML 列表标签
在 HTML 中，列表标签有 3 种。
在 HTML 中，`<ul>` 标签的直接子元素必须是 <li> 标签。
若想让有序列表 `<ol>` 的编号从数字 5 开始，应设置其 start 属性。
定义列表中，用于表示“待解释名词”和“具体描述”的标签是 <dt> 和 <dd>。
下列关于列表嵌套的写法，正确的是？
在 HTML5 中，如果想去掉无序列表默认的圆点，最实用的做法是？
Loading Editor...
HTML 表格
1）表格的结构
Loading Editor...
在 HTML 表格中，`<th>` 标签默认的文字样式是加粗且 居中。
在书写表格代码时，所有的单元格标签（td 或 th）必须嵌套在 <tr> 标签内。
2）合并单元格
colspan 的含义是 跨列合并单元格。。
若想让一个单元格水平跨越 3 列，应在该标签上设置 colspan="3" 属性。
关于表格合并单元格，下列操作正确的是？
3）表格样式
想要彻底去掉表格单元格之间的双线间隙，最实用的 CSS 属性是？
Loading Editor...
HTML 图片
html图片标签
<img src="logo.png" alt="公司品牌标志" width="200">
<a href="https://example.com">
<img src="banner.jpg" alt="活动海报" title="点击跳转活动页">
</a>
<figure>
<img src="scenery.webp" alt="高山湖泊风景照" loading="lazy">
<figcaption>图1：位于阿尔卑斯山的清晨景色</figcaption>
</figure>
路径引用规则：
- 同级目录：
src="pic.jpg" - 下级目录：
src="images/pic.jpg" - 上级目录：
src="../pic.jpg" - 网络目录：
src="https://www.zxzsk.com/img/pic.jpg
<img> 是一个单标签（行内块元素），最实用的属性如下：
| 属性 | 作用 | 实用建议 |
|---|---|---|
| src | 图片路径 | 必填。可以是相对路径、绝对路径或 Base64。 |
| alt | 替代文本 | SEO 关键。图片加载失败时显示，且方便屏幕阅读器读取。 |
| width / height | 宽高 | 建议在 CSS 中设置，或只设其一以保持等比例缩放。 |
| title | 鼠标悬停提示 | 增加用户体验的小 Tips。 |
| loading | 懒加载 | 设置 loading="lazy" 可提升页面首屏加载速度。 |
关于 <img> 标签的描述，下列哪项是错误的？
当你在开发过程中发现图片太大了，最推荐的调整方法是？
在 `<img>` 标签中，用于在图片无法正常加载时显示的提示文字属性是 alt。
为了优化网页性能，让图片在进入可视区域时才开始加载，应设置属性 loading="lazy"。
如果想要将一张 图片变成可以点击的链接，应该将 `<img>` 标签嵌套在 <a> 标签内部。
HTML 视频
<video> 是一个双标签，具有极高的灵活性。
| 属性 | 作用 |
|---|---|
src | 视频路径（本地或网络）。 |
controls | 显示播放控件（播放/暂停、进度条、音量）。 |
autoplay | 自动播放（注意：现代浏览器要求必须配合 muted 才能生效）。 |
muted | 静音播放。 |
loop | 循环播放。 |
poster | 视频封面图（视频加载前显示的图片）。 |
width / height | 设置播放器尺寸。 |
由于不同浏览器对视频格式（MP4, WebM, Ogg）的支持不同，通常使用 <source> 子标签提供备选项。
Loading Editor...
为了让视频在页面加载后立即自动播放，除了设置 `autoplay` 属性外， 通常还需要设置 muted 属性。
`<video>` 标签内部的 <source> 标签允许我们指定多个不同格式的视频文件，以适应不同浏览器。
如果想给视频设置一个还没播放时看到的预览图，应该使用 poster 属性。
关于 <video> 标签，下列说法错误的是？
想要实现网页背景视频的效果（循环、静音、自动播放且无控件），标签属性应该怎么写？
HTML 表单
表单（form）是网页与用户交互的核心。它负责搜集用户输入的数据（如注册信息、搜索词、上传的文件），并将其发送到服务器。
Loading Editor...
form 是表单的根标签，其他表单控件必须写在 form 中：
input：多功能输入框。<textarea>: 多行文本输入（如评论区）。<select> + <option>: 下拉选择框。<button>: 按钮。比 input type="submit" 更灵活，内部可以放图片。
input 可通过 type 属性变换成多种形态：
| 类型 (Type) | 表现形式 | 说明 |
|---|---|---|
| text | 文本框 | 普通单行文字。 |
| password | 密码框 | 输入内容显示为掩码（点或星号）。 |
| radio | 单选框 | 必须设置相同的 name 才能实现“多选一”。 |
| checkbox | 复选框 | 打勾选择，可多选。 |
| file | 文件上传 | 选择本地文件。 |
| submit | 提交按钮 | 将表单数据发往 action 指定的地址。 |
| reset | 重置按钮 | 清空表单已填内容。 |
| hidden | 隐藏域 | 用户看不见，但数据会随表单提交。 |
常用属性：
- name: 最关键属性。服务器通过 name 来识别数据。没有 name 的控件数据不会被提交。
- value: 控件的默认值。
- placeholder: 输入框内的提示文字（占位符）。
- required: 必填项，如果不填，浏览器会阻止提交。
- readonly: 只读，用户不能改，但数据会提交。
- disabled: 禁用，用户不能动，数据不会提交。
在表单中，若想实现点击文字（如“男”）就能选中对应的单选框，应使用 <label> 标签。
在 `post` 请求中，服务器是通过控件的 name 属性来获取对应的数据值的。
若要限制用户只能从多个单选按钮（radio）中选择其中的一个，必须给它们设置相同的 name 属性。
关于 <input> 的 readonly 和 disabled 属性，说法正确的是？
提交带有文件上传（type="file"）的表单时，<form> 标签必须设置的属性是？
HTML5 语义化标签与 SEO
用正确的标签做正确的事，让搜索引擎像人类一样读懂网页
Loading Editor...
1）结构化标签（布局）
<header>/<footer>：页面或区块的头尾。<nav>：导航链接，利于爬虫抓取站点结构。<main>：页面唯一主体内容，SEO 权重最高。<article>：独立内容（如博客、新闻）。<section>：内容的逻辑分段。<aside>：侧边栏（非核心内容，权重较低）。
2）内容关键点（权重）
<h1>-<h6>：标题层级。<h1>必须唯一，包含核心关键词。<img>的alt：必填。让爬虫“读懂”图片，提升图片搜索排名。<a>的锚文本：链接文字需描述具体内容，避免“点击此处”。<strong>：重要内容，语义加重，爬虫重点关注。
3）为什么做语义化？
- 懂内容：帮助搜索引擎理解页面主次与主题。
- 提速度：结构清晰，提升爬虫抓取效率。
- 优体验：对屏幕阅读器友好，提升站点无障碍评分。
- 易维护：代码可读性强，降低开发成本。