第132集 HTML基础

1. HTML简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，用于定义网页的结构和内容。

1.1 HTML的历史

HTML 1.0（1993）：第一个官方版本
HTML 2.0（1995）：标准化的HTML规范
HTML 4.01（1999）：广泛使用的版本
XHTML（2000）：基于XML的HTML版本
HTML5（2014）：当前最新版本，增加了许多新特性

1.2 HTML的作用

定义网页的结构和内容
提供文本的语义化标记
支持插入图片、视频、音频等多媒体
创建表单和交互元素
建立网页之间的链接

2. HTML文档结构

一个基本的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>这是一个段落。</p>
</body>
</html>

2.1 文档声明

<!DOCTYPE html>：声明文档类型为HTML5
告诉浏览器使用HTML5标准解析页面

2.2 HTML根元素

<html>：HTML文档的根元素
lang="zh-CN"：指定页面语言为中文

2.3 头部区域

<head>：包含页面的元数据（metadata）
<meta charset="UTF-8">：设置字符编码为UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，用于响应式设计
<title>：设置网页标题，显示在浏览器标签栏

2.4 主体区域

<body>：包含页面的可见内容
所有的文本、图片、链接等都放在body标签内

3. HTML标签基础

3.1 标签的结构

HTML标签通常由开始标签、内容和结束标签组成：

<标签名>内容</标签名>

有些标签是自闭合的，不需要结束标签：

<标签名 属性="值" />

3.2 标签的属性

标签可以包含属性，提供额外的信息：

<标签名 属性1="值1" 属性2="值2">内容</标签名>

常用属性：

id：唯一标识符
class：类名，用于CSS选择
src：资源地址（图片、视频等）
href：链接地址
alt：替代文本（图片加载失败时显示）

4. 常用HTML标签

4.1 文本标签

标题标签

HTML提供了6级标题，从h1到h6：

<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>

段落标签

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

文本格式化标签

<strong>粗体文本</strong>
<em>斜体文本</em>
<u>下划线文本</u>
<s>删除线文本</s>
<code>代码文本</code>
<pre>预格式化文本</pre>

4.2 链接标签

<a href="https://www.example.com">访问示例网站</a>
<a href="page2.html">跳转到页面2</a>
<a href="#section1">跳转到页面内锚点</a>
<a href="mailto:user@example.com">发送邮件</a>
<a href="tel:123456789">拨打电话</a>

4.3 图片标签

<img src="image.jpg" alt="示例图片" width="300" height="200">
<img src="image2.jpg" alt="另一张图片" title="鼠标悬停时显示的文字">

4.4 列表标签

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

<dl>
    <dt>术语1</dt>
    <dd>术语1的定义</dd>
    <dt>术语2</dt>
    <dd>术语2的定义</dd>
</dl>

4.5 表格标签

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>

4.6 表单标签

<form action="submit.php" method="post">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
    </div>
    <div>
        <label>爱好：</label>
        <input type="checkbox" id="hobby1" name="hobbies[]" value="reading">
        <label for="hobby1">阅读</label>
        <input type="checkbox" id="hobby2" name="hobbies[]" value="sports">
        <label for="hobby2">运动</label>
    </div>
    <div>
        <label for="city">城市：</label>
        <select id="city" name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
        </select>
    </div>
    <div>
        <label for="message">留言：</label>
        <textarea id="message" name="message" rows="4" cols="50"></textarea>
    </div>
    <div>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </div>
</form>

5. 语义化HTML

HTML5引入了许多语义化标签，使网页结构更加清晰：

<header>页面头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<section>一个内容区块</section>
<article>一篇文章</article>
<aside>侧边栏</aside>
<footer>页面底部</footer>

语义化HTML的好处：

提高代码的可读性和可维护性
有利于搜索引擎优化（SEO）
改善可访问性，便于屏幕阅读器等辅助技术

6. HTML验证

确保HTML代码的正确性非常重要，可以使用W3C的HTML验证工具：
https://validator.w3.org/

常见的HTML错误：

缺少结束标签
属性值没有用引号包围
嵌套不正确
使用已废弃的标签

7. HTML与其他技术的关系

7.1 HTML、CSS和JavaScript

HTML：定义网页的结构和内容
CSS：定义网页的样式和布局
JavaScript：实现网页的交互功能

7.2 HTML与后端

HTML文件可以直接由浏览器打开
也可以通过后端服务器动态生成（如Python的Django、Flask等框架）

8. 总结

HTML是网页开发的基础，通过各种标签可以构建出丰富的网页内容。掌握HTML的基本概念和常用标签是学习Web开发的第一步。

下一集我们将学习CSS基础，了解如何为HTML页面添加样式和布局。