HTML 教程¶

什么是 HTML？¶

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准语言。它使用标签（Tag） 来定义网页的结构和内容，是 Web 开发的基石。

HTML 文件由浏览器解析渲染，呈现为可视化的网页界面。它与 CSS（样式）和 JavaScript（行为）共同构成 Web 三大核心技术。

基本文档结构¶

<!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>
</body>
</html>

结构说明： - <!DOCTYPE html>：声明文档类型为 HTML5 - <html>：根元素，lang 属性指定页面语言 - <head>：头部，包含元数据（字符编码、标题、样式引用等） - <body>：主体，包含所有可见内容

常用标签¶

文本标签¶

标签	说明	示例
`<h1>`~`<h6>`	标题（1 级最大，6 级最小）	`<h1>一级标题</h1>`
`<p>`	段落	`<p>这是一个段落</p>`
`<strong>`	加粗（强调）	`<strong>重要内容</strong>`
`<em>`	斜体（强调）	`<em>斜体文本</em>`
`<br>`	换行	`第一行<br>第二行`
`<hr>`	水平分割线	`<hr>`

链接与图片¶

<!-- 超链接 -->
<a href="https://example.com" target="_blank">在新标签页打开</a>
<a href="#section2">跳转到页面内锚点</a>

<!-- 图片 -->
<img src="images/photo.jpg" alt="图片描述" width="400" height="300">

属性说明： - href：链接目标 URL - target="_blank"：在新标签页打开 - alt：图片加载失败时的替代文字（无障碍访问必备）

列表¶

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步：打开编辑器</li>
    <li>第二步：编写代码</li>
    <li>第三步：保存文件</li>
</ol>

<!-- 自定义列表 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

表格¶

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>95</td>
            <td>88</td>
            <td>92</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>88</td>
            <td>96</td>
            <td>90</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">共计 2 名学生</td>
        </tr>
    </tfoot>
</table>

表格标签： - <thead>：表头 - <tbody>：表体 - <tfoot>：表尾 - colspan：跨列合并 - rowspan：跨行合并

表单¶

表单用于收集用户输入，是网页交互的重要组成部分。

<form action="/submit" method="POST">
    <!-- 文本输入 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" required>
    <br>

    <!-- 密码输入 -->
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    <br>

    <!-- 单选按钮 -->
    <span>性别：</span>
    <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>
    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="agree" name="agree" required>
    <label for="agree">我同意服务条款</label>
    <br>

    <!-- 下拉选择 -->
    <label for="city">城市：</label>
    <select id="city" name="city">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>
    <br>

    <!-- 文本域 -->
    <label for="message">留言：</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    <br>

    <!-- 提交按钮 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

常用输入类型： | type | 用途 | |------|------| | text | 文本输入 | | password | 密码输入 | | email | 邮箱输入（自动校验格式） | | number | 数字输入 | | date | 日期选择 | | file | 文件上传 | | checkbox | 复选框 | | radio | 单选按钮 | | submit | 提交按钮 |

HTML5 语义化标签¶

HTML5 引入了语义化标签，使页面结构更清晰，对搜索引擎和辅助设备更友好。

<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于</a></li>
                <li><a href="/contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>文章标题</h2>
            <section>
                <h3>第一节</h3>
                <p>内容...</p>
            </section>
            <section>
                <h3>第二节</h3>
                <p>内容...</p>
            </section>
        </article>

        <aside>
            <h3>侧边栏</h3>
            <p>相关链接...</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 信奥编程小栈</p>
    </footer>
</body>

语义化标签： | 标签 | 含义 | |------|------| | <header> | 页眉/头部 | | <nav> | 导航栏 | | <main> | 页面主要内容 | | <article> | 独立文章 | | <section> | 内容区块 | | <aside> | 侧边栏/附注 | | <footer> | 页脚 | | <figure> | 插图/图表 |

多媒体嵌入¶

<!-- 音频 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放
</audio>

<!-- 视频 -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持视频播放
</video>

<!-- 嵌入外部页面 -->
<iframe src="https://example.com" width="800" height="600" title="示例页面"></iframe>

综合练习¶

动手实践

创建一个个人介绍页面，要求包含： 1. 语义化的 HTML5 结构（header、nav、main、footer） 2. 一个标题、一段个人介绍 3. 一张图片 4. 一个表格（如：技能掌握表） 5. 一个联系表单（姓名、邮箱、留言） 6. 一个外部链接跳转

学习建议¶

多用开发者工具（F12）查看网页的 HTML 结构
手写代码：不要依赖可视化编辑器，手写能加深理解
参考文档：MDN Web Docs 是最权威的 HTML 参考资料