Appearance
HTML 基础
HTML 文档结构
HTML 文档有一个基本的结构，每个 HTML 页面都应该包含以下基本元素：
html
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>基本结构解释
1. <!DOCTYPE html>
- 文档类型声明
- 告诉浏览器这是 HTML5 文档
- 必须放在文档的第一行
- 不区分大小写
2. <html> 元素
- HTML 文档的根元素
- 包含整个页面的内容
- 所有其他元素都在这个元素内部
3. <head> 元素
- 包含页面的元数据
- 不会显示在页面上
- 包含标题、字符编码、样式表链接等
4. <title> 元素
- 定义页面标题
- 显示在浏览器标签页上
- 搜索引擎会显示这个标题
5. <body> 元素
- 包含页面的可见内容
- 用户能看到的所有内容都在这里
完整的示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一个 HTML 页面。</p>
<p>HTML 是一种标记语言，用于创建网页。</p>
</body>
</html>HTML 标签语法
标签的基本语法
- HTML 标签用尖括号包围：
<标签名> - 大多数标签成对出现：开始标签和结束标签
- 结束标签在标签名前加斜杠：
</标签名>
html
<h1>这是标题</h1>
<p>这是段落</p>自闭合标签
有些标签不需要结束标签，称为自闭合标签：
html
<br> <!-- 换行 -->
<img> <!-- 图片 -->
<input> <!-- 输入框 -->
<hr> <!-- 水平线 -->HTML 元素嵌套
HTML 元素可以嵌套，即一个元素包含另一个元素：
html
<html>
<body>
<h1>主标题</h1>
<p>这是一个 <strong>重要</strong> 的段落。</p>
</body>
</html>嵌套规则
- 元素必须正确嵌套
- 内层元素必须完全包含在外层元素中
- 不能交叉嵌套
正确的嵌套：
html
<p><strong>粗体文本</strong></p>错误的嵌套：
html
<p><strong>粗体文本</p></strong>常用的基础标签
标题标签
HTML 提供了六级标题：
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>段落标签
html
<p>这是一个段落。</p>
<p>这是另一个段落。</p>换行标签
html
<p>第一行<br>第二行</p>水平分割线
html
<p>上面的内容</p>
<hr>
<p>下面的内容</p>HTML 注释
注释用于在代码中添加说明，不会在浏览器中显示：
html
<!-- 这是注释，不会显示在页面上 -->
<p>这是可见的内容</p>
<!--
这是多行注释
可以写很多行
-->字符编码
设置 UTF-8 编码
html
<meta charset="UTF-8">为什么需要设置编码
- 正确显示中文字符
- 避免出现乱码
- 支持国际化字符
语言属性
为 HTML 文档设置语言：
html
<html lang="zh-CN"> <!-- 简体中文 -->
<html lang="en"> <!-- 英语 -->视口设置
响应式设计的基础设置：
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">实践练习
创建一个包含以下内容的 HTML 页面：
- 页面标题：「我的个人介绍」
- 一级标题：你的名字
- 二级标题：「关于我」
- 两个段落：介绍你的兴趣爱好和学习目标
- 添加适当的注释
常见错误
1. 忘记闭合标签
html
<!-- 错误 -->
<p>这是段落
<!-- 正确 -->
<p>这是段落</p>2. 标签嵌套错误
html
<!-- 错误 -->
<p><h1>标题</h1></p>
<!-- 正确 -->
<h1>标题</h1>
<p>段落</p>3. 忘记文档类型声明
html
<!-- 错误 -->
<html>
<head>...
<!-- 正确 -->
<!DOCTYPE html>
<html>
<head>...小结
- HTML 文档有固定的基本结构
- 标签必须正确嵌套和闭合
- 使用注释增加代码可读性
- 设置正确的字符编码
- 养成良好的编码习惯
下一章我们将详细学习 HTML 元素的概念和分类。