文档类型说明和html标记头标记
文档类型（Doctype）
- HTML5 之前：文档类型说明非常冗长，需引用 DTD（如 XHTML 1.0 Transitional）。
- HTML5 现在：可简写为
<!DOCTYPE html>。 - 规范要求：必须出现在 HTML 文档的第一行，用于告知浏览器使用标准模式渲染。
html标记
<html>标记代表文档的开始，以</html>结尾，包裹整个页面的全部内容。
头标记head
- 用于说明文档头部相关信息，一般包含标题（title）、元信息（meta）、CSS样式和脚本代码等。
- 作用范围是整篇文档，且内容不会在网页上直接显示。
head的子标记
1. title标题标记
- 用来说明页面的用途，显示在浏览器的标题栏/标签页中（如
<title>第三课</title>），帮助用户识别页面。
2. 元信息标记meta
- 提供网页的元信息（如搜索引擎关键字、页面描述），一个页面可包含多个 meta，以键值方式搭配。
- 编码设置：
<meta charset="utf-8"/>定义字符编码，防止乱码。 - 属性与值（结合图表）：
charset：定义文档字符编码。content：定义与http-equiv或name相关的元信息。http-equiv：关联 HTTP 头部（如content-type、refresh、expires、set-cookie）。name：关联名称（如author、description、keywords、generator、revised等）。
- 关键字（keywords）：
- 写法：
<meta name="keywords" content="关键字1,关键字2,关键字3"/>（英文逗号隔开，注意 keywords 带 s）。 - 现状：曾是搜索引擎排名重要因素，现多被浏览器/搜索引擎忽略；不恰当堆砌易被判定欺诈。
- 使用注意：内容应贴合核心、不生僻、不重复堆砌；一般 3~5 个即可；各页面关键字应不同。
- 写法：
- 页面描述（description）：
- 写法：
<meta name="description" content="北盟网校是一个编程学习网址。提供很多免费的课程视频。"/>。 - 作用：简单描述网页主要内容，常被搜索引擎用于搜索结果页的摘要展示。
- 写法：
结合前几节，一个符合现代 HTML5 规范的基础结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="HTML5,前端,北盟网校"/>
<meta name="description" content="XXXX编程学习课程。"/>
<title>第三课</title>
</head>
<body>
<!-- 页面主体内容 -->
</body>
</html>Code language: HTML, XML (xml)页面定时跳转与刷新
承接上一节关于 meta 标签的讲解，这里重点说明 http-equiv="refresh" 的实际应用：
1. 定时跳转（自动重定向）
- 通过设置
http-equiv属性为refresh，配合content属性定义时间与目标地址。 - 示例代码：
<meta http-equiv="refresh" content="5;url=http://www.foxdevelop.com"/> - 含义：表示页面停留 5秒后 自动跳转到“xxxx”（
http://www.foxdevelop.com）。 - 格式说明：
content的值中，数字代表秒数，分号后接url=目标地址。
2. 定时刷新（无跳转）
- 如果仅想让页面每隔一段时间自动刷新，可以不写
url部分。 - 示例代码：
<meta http-equiv="refresh" content="5"/> - 含义：表示每 5秒 自动刷新当前页面一次。
补充说明
- 该用法属于早期 Web 常见的元信息控制方式，通常写在
<head>标签内。 - 现代开发中，复杂的跳转逻辑更多由 JavaScript 或后端 HTTP 头控制，但此标签在简单倒计时跳转页（如“支付成功，即将跳转…”）中依然直观好用。
- 注意图中示例网址为 foxdevelop.com，结合前文课程上下文，属于教学演示域名。
结合前几节内容，包含编码、描述与定时跳转的完整头部结构示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="编程学习课程。"/>
<meta http-equiv="refresh" content="5;url=http://www.Foxdevelop.com"/>
<title>第三课</title>
</head>
<body>
<!-- 页面主体 -->
5秒后将跳转到北盟网校...
</body>
</html>Code language: HTML, XML (xml)Previous: HTML5的开发工具
Next: 网页的主体标记body和注释标记