正在加载...

HTML 基础

在前面的课程中，你认识了 HTML 并选择了编辑器。现在你将构建一个完整的基础页面：每个现代 HTML 文件都应由此开始的标准骨架，外加少量可见内容。

什么是基础 HTML 文档？

基础 HTML 文档是具有固定外层结构的文本文件。你在该结构内放置访问者看到的内容。本课程几乎每一页都会复用同一外层骨架，只改变 body 里的内容。

直接回答：必需的骨架

现代基础页面按以下顺序包含这些部分：

<!DOCTYPE html> — 声明 HTML5 文档
<html> — 包裹整页的根元素
<head> — 关于页面的信息（不是主要可见文章）
head 中的 <title> — 浏览器标签页和书签的文字
<body> — 人们在页面上看到的内容

基础 HTML 文档

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>

逐行阅读示例

doctype 必须在最前，以便浏览器使用现代 HTML 规则
其余内容都在 <html> ... </html> 内
<head> 保存标题；访问者主要在标签页名称中看到它
<body> 保存你在页面区域看到的标题和段落
大多数元素需要带斜杠的匹配结束标签，例如 </p>

Head 与 body

把 <head> 想成幕后备注，把 <body> 想成舞台。搜索引擎和浏览器使用 title 及其他 head 数据。阅读页面的人看 body。把主要文章文字只放在 head 里是初学者的常见错误。

嵌套与顺序

HTML 元素会嵌套：一个元素可以位于另一个元素内部。保持清晰的标签树。先关闭内层标签再关闭外层。基础骨架保持此顺序：doctype，然后 html，然后 head（含 title），然后 body。

亲自试一试

在编辑器中创建名为 basic.html 的文件
粘贴上面的示例
更改 title 文字和标题文字
保存文件并在浏览器中打开
保存并刷新后，确认标签页标题与页面标题都已更新

稍后能省时间的小提示

现代 HTML 风格请优先使用小写标签名（<p>，而不是 <P>）
给嵌套行缩进，以便看出哪些标签属于一起
早期示例中保留一个清晰的 <h1> 作为页面主标题
稍后会添加 charset、链接、图片等；先掌握这个骨架

常见错误

忘记在顶部写 <!DOCTYPE html>
以错误顺序关闭标签（例如在 body 之前关闭 html）
把可见标题只放在 <head> 里
保存时没有 .html 扩展名，然后奇怪浏览器行为异常
在元素需要成对标签时只写开始标签而不写结束标签

小结

基础 HTML 页面使用 doctype、html、head、title 和 body
title 主要出现在浏览器标签页
可见内容属于 body
元素会嵌套；先关闭内层标签
通过编辑小文件并刷新浏览器来练习
后续课程在同一骨架上添加更多元素

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言