课程 13168 的 100 个知识重点 | AI生成和翻译
问题：你能否提供广东省高等教育自学考试《网页设计与制作》（课程代码 13168）的 100 个核心知识点？
回答：为了帮助你准备网页设计与制作（实践）考试，我根据教学大纲的四个模块整理了 100 个关键知识点。这些点涵盖了取得成功所需的技术要求、语法和实践逻辑。
模块 1：浏览器与编辑器基础操作
- 主流引擎： Chrome 使用 Blink，Firefox 使用 Gecko，Edge 使用 Blink（此前为 EdgeHTML）。
- 浏览器渲染： 浏览器解释代码的方式存在差异，因此需要进行 “Cross-browser testing”。
- 缓存： 清除浏览器缓存 (Ctrl+Shift+Del) 对于查看 CSS 的实时更新至关重要。
- Developer Tools： 使用
F12检查元素、调试 CSS 并查看控制台。 - VS Code 安装： 考试推荐使用的主要编辑器。
- 扩展： 安装 “Chinese (Simplified)” 用于界面中文化，安装 “JS-CSS-HTML Formatter” 用于代码美化。
- Live Server： 一个常用的插件，用于在浏览器中即时预览网页。
- 文件命名： 使用小写字母、数字或下划线；避免使用空格和中文字符。
- 保存文件： 养成频繁使用
Ctrl + S的习惯；考试要求特定的命名规则（例如姓名_html.html）。 - VS Code 快捷键：
! + Tab可快速生成 HTML5 模板（Boilerplate）。 - 自动缩进： 使用
Shift + Alt + F格式化混乱的代码。 - 多光标编辑： 按住
Alt并点击可以同时在多个位置输入。 - 注释切换：
Ctrl + /是 HTML 和 CSS 中添加/删除注释的快捷键。 - 项目结构： 将图片存放在
images/文件夹，样式存放在css/文件夹，以保持组织有序。
模块 2：HTML5 页面设计（结构）
- Doctype 声明：
<!DOCTYPE html>告诉浏览器文档类型是 HTML5。 - 语言属性：
<html lang="zh-CN">辅助搜索引擎和屏幕阅读器。 - 字符编码：
<meta charset="UTF-8">防止文本乱码。 - Head 部分：
<head>包含 Metadata、标题和链接，不包含可见内容。 - Body 部分：
<body>包含网页的所有可见内容。 - 语义化标签：
<header>、<footer>、<nav>、<aside>和<article>可提高 SEO 和可访问性。 - 标题：
<h1>到<h6>定义层级；<h1>在每个页面中应只使用一次。 - 段落：
<p>是用于文本块的 Block-level 元素。 - 换行：
<br>是用于单行换行的 Void element（无闭合标签）。 - 水平分割线：
<hr>创建主题分隔或水平线。 - 预格式化文本：
<pre>保留代码中原样写入的空格和换行。 - 加粗与斜体： 语义上优先使用
<strong>和<em>，而非<b>和<i>。 - 区块：
<div>是用于布局的最通用容器（Block container）。 - 行内容器：
<span>是用于为特定文本部分设置样式的 Inline container。 - 相对路径：
./代表当前文件夹，../代表向上移动一级。 - 绝对路径： 完整的连接，如
https://www.google.com。 - 超链接：
<a href="url">创建链接。 - Target 属性：
target="_blank"在新标签页中打开链接；_self是默认值。 - 锚点链接： 使用
<a href="#id">跳转到具有特定 ID 的元素。 - 图像标签：
<img src="..." alt="...">用于显示图形。 - Alt 属性： 如果图片加载失败，
alt提供替代文本（对可访问性至关重要）。 - 图像尺寸：
width和height属性（可在 HTML 或 CSS 中设置）。 - 图像格式： 照片使用 JPG，透明图使用 PNG，简单动画使用 GIF。
- 图像映射：
<map>和<area>允许在单个图像上创建可点击区域。 - 表格基础：
<table>、<tr>（行）、<td>（单元格）。 - 表头：
<th>定义表头单元格，默认通常为加粗并居中。 - 单元格合并：
colspan合并列；rowspan合并行。 - 表格标题：
<caption>为表格提供标题。 - 表单容器：
<form action="server-url" method="get/post">。 - 文本输入：
<input type="text">和<input type="password">。 - 单选按钮：
<input type="radio" name="group">；name必须相同才能实现分组。 - 复选框：
<input type="checkbox">允许选择多项。 - 下拉列表：
<select>配合<option>子元素。 - 文本域：
<textarea>用于多行用户输入。 - 提交按钮：
<input type="submit">或<button type="submit">。 - 占位符：
placeholder="..."在输入框内提供提示。 - 必填属性：
required如果字段为空则阻止表单提交。 - HTML5 新输入类型：
email、url、number、date和color。 - 音频：
<audio src="..." controls>用于播放音乐。 - 视频：
<video src="..." controls width="...">用于播放影片。 - 自动播放与循环： 媒体属性；注意浏览器通常会拦截自动播放的音频。
- 列表：
<ul>（无序）和<ol>（有序）都使用<li>（列表项）。
模块 3：CSS3 基础与样式（表现）
- 行内 CSS： HTML 标签内的
style="..."属性。 - 内部 CSS：
<head>内部的<style>块。 - 外部 CSS：
<link rel="stylesheet" href="style.css">（最佳实践）。 - 元素选择器： 选择某种类型的所有标签（例如
p { ... }）。 - 类选择器：
.classname（可重复用于多个元素）。 - ID 选择器：
#idname（仅用于唯一元素）。 - 后代选择器：
div p选择 div 内部的所有段落。 - 优先级优先级： Inline > ID > Class > Element。
- 颜色关键字：
red、blue、transparent。 - 十六进制颜色：
#RRGGBB（例如白色为#FFFFFF）。 - RGB/RGBA：
rgba(255, 0, 0, 0.5)支持透明度 (Alpha)。 - 字体库：
font-family: "Microsoft YaHei", sans-serif;。 - 字体大小： 固定大小使用
px，相对大小使用em/rem。 - 字体粗细：
bold或数值（如700）。 - 文本对齐：
left、right、center或justify。 - 文本装饰：
none（用于移除链接下划线）或underline。 - 行高：
line-height控制文本行之间的间距。 - 文本缩进：
text-indent: 2em;常用于段落首行缩进。 - 盒模型： 由 Content（内容）、Padding（内边距）、Border（边框）和 Margin（外边距）组成。
- 宽度/高度： 定义内容区域的大小。
- Padding： 内容与边框之间的内部空间。
- Margin： 边框与其他元素之间的外部空间。
- 边框样式：
solid、dashed、dotted或double。 - 圆角：
border-radius: 50%;使元素变圆。 - 背景颜色：
background-color填充元素区域。 - 背景图像：
background-image: url('bg.jpg');。 - 背景重复：
no-repeat、repeat-x或repeat-y。 - 背景尺寸：
cover（填满区域）或contain（显示全图）。 - Float：
float: left;或right;用于简单的水平布局。 - Clearfix： 使用
clear: both;防止元素环绕浮动。 - Display 属性：
block、inline、inline-block或none。 - 可见性：
visibility: hidden;隐藏元素但保留其空间。 - 伪类：
:hover（鼠标悬停）、:active（点击中）、:visited。 - 列表样式：
list-style: none;移除<ul>的默认项目符号。
模块 4：综合网页开发（布局）
- DIV+CSS 概念： 使用
div负责结构，CSS负责所有视觉样式。 - 居中块元素： 使用
width和margin: 0 auto;。 - 导航栏： 通常使用
<ul>和<li>配合float: left或display: inline-block构建。 - 相对定位：
position: relative;相对于其正常位置移动元素。 - 绝对定位：
position: absolute;相对于最近的已定位祖先元素移动元素。 - 固定定位：
position: fixed;即使滚动也停留加速在同一位置。 - Z-index： 控制定位元素的堆叠顺序（数值越大越靠上）。
- 盒尺寸：
box-sizing: border-box;将 Padding 和 Border 包含在总宽度内。 - Flexbox 基础：
display: flex;是现代易用的对齐方式。 - 页面结构： 标准页面具有一个包裹
.header、.nav、.main和.footer的.container。
参考资料：
你是否需要我根据其中的样题创建一个 HTML/CSS 实践模板？