【用AI学前端】HTML-01-HTML 基础框架
介绍了HTML基础框架知识，重点讲解了HTML文档的基本结构。HTML作为网页的骨架，使用标签定义网页结构和内容。文章详细解析了HTML5文档的各个组成部分：DOCTYPE声明、根元素、头部区域（包含字符编码、视口设置和页面标题）以及主体区域（包含可见内容）。同时提供了最佳实践建议，如使用UTF-8编码、设置viewport、指定语言属性等。最后附有基础练习和进阶练习，帮助读者巩固所学知识，检查学
HTML 基础框架
本章目的
学会搭建网页的"骨架"，理解 HTML 文档的基本结构，能够创建一个标准的 HTML5 页面。
什么是 HTML？
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言。你可以把它想象成网页的"骨架"，它定义了网页的结构和内容。
通俗理解
如果把网页比作一栋房子：
- HTML 就是房子的框架结构（墙壁、屋顶、门窗）
- CSS 就是房子的装修装饰（颜色、家具、布局）
- JavaScript 就是房子的功能设施（电路、水管、智能设备）
HTML 使用"标签"来标记不同类型的内容，就像给房子的不同房间贴上标签：“这里是客厅”、“那里是卧室”。
HTML 文档的基本结构
一个完整的 HTML 文档就像一本书，有固定的结构：
<!doctype html> ← 告诉浏览器：这是 HTML5 文档
<html> ← 整个网页的开始
<head> ← 网页的"头部信息"（不给用户看，但浏览器需要）
<meta> ← 元数据（编码、视口设置等）
<title> ← 网页标题（显示在浏览器标签页上）
</head> ← 头部信息结束
<body> ← 网页的"主体内容"（用户看到的部分）
<h1> ← 一级标题（章节标题）
<p> ← 段落（正文内容）
</body> ← 主体内容结束
</html> ← 整个网页的结束
每个 HTML 页面都遵循这个基本结构，确保浏览器能够正确解析和显示内容。
逐行讲解
1. 文档类型声明
<!DOCTYPE html>
作用：告诉浏览器这是一个 HTML5 文档。
说明：这个声明必须是 HTML 文件的第一行，告诉浏览器用什么标准来解析后面的代码。
2. HTML 根元素
<html lang="zh-CN">
作用：包裹整个网页的根标签，所有内容都写在它里面。
属性说明：
lang="zh-CN"：声明页面使用简体中文- 这有助于搜索引擎理解页面语言，也有助于浏览器进行翻译和语音朗读
3. 头部区域（<head>）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 基础</title>
</head>
头部区域包含网页的元数据，这些信息不会直接显示在页面上，但浏览器和搜索引擎会读取。
3.1 字符编码
<meta charset="UTF-8">
作用：告诉浏览器网页使用 UTF-8 编码，可以正确显示中文和各种符号。
说明：如果不设置或设置错误，中文会显示成乱码。
3.2 视口设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
作用：让网页在手机和平板上正确显示，不会出现字体太小或需要左右滚动的问题。
参数说明：
width=device-width：宽度等于设备宽度initial-scale=1.0：初始缩放比例为 1.0（不缩放）
3.3 页面标题
<title>HTML 基础</title>
作用：设置网页标题，显示在浏览器标签页上。
说明：这是用户看到网页的第一印象，也会影响搜索引擎排名，建议简洁明确。
4. 主体区域（<body>）
<body>
<h1>欢迎来到 HTML 学习之旅！</h1>
<p>这是你第一次写的 HTML 页面。</p>
</body>
作用：包含网页的所有可见内容，用户在浏览器中看到的所有内容都写在这里。
常用标签：
<h1>：一级标题，页面主标题（还有 h2-h6 共 6 级标题）<p>：段落标签，用于包裹一段文字
最佳实践
- 使用 UTF-8 编码：支持中文和多语言显示，这是现代网页的标准编码
- 设置 viewport：确保在移动设备上正确显示，提升用户体验
- 指定语言属性：
lang="zh-CN"有助于搜索引擎和辅助技术 - 使用小写标签：HTML5 不区分大小写，但小写是行业规范
- 缩进对齐：保持代码层次清晰，便于阅读和维护
文件说明
index.html- 基础 HTML 页面示例，包含完整的 HTML5 标准结构
使用方法
直接在浏览器中打开 index.html 文件即可查看效果。
练习题
基础练习
创建一个新的 HTML 文件 practice.html，要求：
- 使用 UTF-8 编码和正确的 viewport 设置
- 设置页面标题为"我的第一个网页"
- 包含一级标题"你好，世界！"
- 包含两段文字，介绍你自己
进阶练习
- 尝试修改
index.html的内容，改成一个简单的"自我介绍"页面 - 在浏览器中查看效果，然后尝试修改标题和内容
- 思考：如果把
lang="zh-CN"改成lang="en"会有什么影响？（提示：浏览器翻译功能）
学习目标检查
- 理解 HTML 文档的基本结构
- 掌握
<head>和<body>的作用 - 能够创建一个标准的 HTML5 页面
- 理解 meta 标签的作用（编码和视口）
- 能够设置正确的页面标题和语言属性
参考
项目在https://github.com/tao355667/frontend-journey，借助 OpenCode 内置的 GLM 4.7 与 Kimi 2.5 模型生成内容，并结合学习进度对项目内容进行针对性修改与润色
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
8
0- 0
已为社区贡献10条内容
所有评论(0)