网页设计教程：从零开始学习 HTML

第一章：初识 HTML

1 什么是 HTML？

HTML 的全称是 HyperText Markup Language，即超文本标记语言。

网页设计教程html
（图片来源网络，侵删）
  • 标记语言：它不是一种编程语言（如 Python 或 Java），因为它没有逻辑、循环或条件判断，它使用一系列 来“标记”内容的结构和含义。
  • 超文本：意味着它不仅仅是纯文本，还可以包含图片、链接、音频、视频等其他元素，并且可以通过链接跳转到其他页面。

HTML 就是搭建网页骨架的语言，它定义了网页的结构，比如哪里是标题，哪里是段落，哪里是图片。

2 HTML 是如何工作的？

HTML 文件是一个纯文本文件，通常以 .html 或 .htm 作为后缀，你可以用任何文本编辑器（如 VS Code, Sublime Text, 甚至记事本）来创建和编辑它。

当你用浏览器（如 Chrome, Firefox, Edge）打开一个 HTML 文件时，浏览器会读取文件中的标签，然后根据这些标签将内容渲染成我们看到的、有样式的网页。

3 你的第一个 HTML 页面

让我们创建一个最简单的 HTML 文件，看看它的样子。

  1. 打开你的文本编辑器（强烈推荐 Visual Studio Code）。
  2. 输入以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是一个段落。</p>
</body>
</html>
  1. 将文件保存为 index.html。
  2. 用浏览器打开这个 index.html 文件，你应该会看到一个标题“你好，世界！”和一个段落“这是一个段落。”。

恭喜！你已经创建了你的第一个网页！

第二章：HTML 基础结构详解

让我们来分解一下上面那个简单的 HTML 文件。

1 <!DOCTYPE html>

这是文档类型声明，它告诉浏览器，这个文件使用的是 HTML5 标准，这是现代网页的必需品。

2 <html>

这是根元素，所有其他 HTML 标签都应该放在 <html> 和 </html> 之间。lang="zh-CN" 属性用于指定页面的语言，有助于搜索引擎和屏幕阅读器。

3 <head>

<head> 是头部，它包含了页面的元数据（metadata），即关于页面的信息，这些信息不会直接显示在页面上。

  • <meta charset="UTF-8">: 声明了文档的字符编码为 UTF-8，这可以确保浏览器能正确显示中文、英文等各种语言。
  • <meta name="viewport" ...>: 这是一个非常重要的标签，用于响应式网页设计，确保在移动设备上能正确显示。
  • <title>: 定义了浏览器标签页上显示的标题，这对搜索引擎优化（SEO）和用户体验非常重要。

4 <body>

<body> 是主体，包含了所有在浏览器窗口中可见的内容，比如标题、段落、图片、链接等。

第三章：常用 HTML 标签

HTML 的核心就是各种标签，下面我们学习一些最常用、最重要的标签。

1 标题标签

用于定义不同级别的标题,从 <h1>（最重要）到 <h6>（最不重要）。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
...
<h6>六级标题</h6>

最佳实践：一个页面中只应有一个 <h1>，它通常用于页面的主标题。

2 段落和换行

  • <p>: 定义一个段落，浏览器会自动在段落前后添加一些空白。
  • <br>: 换行标签，这是一个自闭合标签，意味着它没有闭合标签，写成 <br /> 或 <br> 都可以，它用于强制文本换行。
<p>这是第一段，这是第一段的延续。</p>
<p>这是第二段。</p>
<p>这是第三段，<br>这里强制换行了。</p>

3 文本格式化

  • <strong> 或 <b>: 加粗。<strong> 表示强调，语义更强，推荐使用。
  • <em> 或 <i>: 斜体。<em> 表示语气强调，语义更强，推荐使用。
  • <u>: 下划线。
  • <del>: 删除线。
  • <mark>: 高亮。
<p>这是<strong>粗体</strong>文字。</p>
<p>这是<em>斜体</em>文字。</p>
<p>这是<u>带下划线</u>的文字。</p>
<p>这是<del>被删除</del>的文字。</p>
<p>这是<mark>高亮</mark>的文字。</p>

4 列表

HTML 有三种列表：

  1. 无序列表：项目符号列表，使用 <ul> 和 <li>。
  2. 有序列表：数字或字母排序的列表，使用 <ol> 和 <li>。
  3. 定义列表：用于定义术语，使用 <dl>, <dt> (术语), <dd> (描述)。
<!-- 无序列表 -->
<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>

5 链接

使用 <a> 标签创建超链接。

  • href 属性：指定链接的目标地址。
  • target 属性：指定链接在何处打开。_blank 表示在新标签页中打开。
<a href="https://www.google.com">访问 Google</a>
<br>
<a href="https://www.baidu.com" target="_blank">在新标签页访问百度</a>

6 图片

使用 <img> 标签在网页中显示图片，它也是一个自闭合标签。

  • src 属性：图片的源路径（可以是本地文件或网络 URL）。
  • alt 属性：替代文本，如果图片无法加载，会显示这段文字，对于屏幕阅读器（视障人士使用）至关重要，强烈建议始终使用。
<img src="https://via.placeholder.com/150" alt="一个占位图片">

7 容器标签

这些标签没有特定的语义,它们只是用来包裹其他元素，以便于应用样式或进行布局。

  • <div>: 块级容器，默认情况下会占据一整行。
  • <span>: 器，默认情况下不会换行，用于包裹文本的一部分。
<div style="border: 1px solid black; padding: 10px;">
    <p>这个 div 包含了一个段落。</p>
</div>
<p>这是一段文本，<span style="color: red;">这部分文字是红色的</span>。</p>

第四章：HTML 语义化

这是一个非常重要的概念。语义化 HTML 指的是使用有意义的标签来构建网页。

  • 为什么重要？
    • SEO（搜索引擎优化）：搜索引擎能更好地理解你的页面内容，从而提高排名。
    • 可访问性：屏幕阅读器能更好地为视障用户解析页面结构。
    • 可维护性：代码更清晰，其他开发者（或未来的你）更容易阅读和维护。

1 新的语义化标签（HTML5）

HTML5 引入了许多新的语义化标签来替代无脑的 <div>。

  • <header>: 页面或区域的头部，通常包含导航、Logo 等。
  • <footer>: 页面或区域的底部，通常包含版权信息、联系方式等。
  • <nav>: 导航链接的区域。
  • <main>: 页面的主要内容，一个页面中只应有一个 <main>。
  • <article>: 独立的内容单元，比如一篇博客文章、一则新闻。
  • <section>: 页面中的一个独立区域，通常包含一个主题。
  • <aside>: 侧边栏或与主要内容相关但独立的内容，比如广告、相关链接。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">语义化页面示例</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">lt;/a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的一段内容...</p>
        </article>
        <aside>
            <h3>相关链接</h3>
            <ul>
                <li><a href="#">链接 1</a></li>
                <li><a href="#">链接 2</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>
</html>

第五章：HTML 表单

表单是网页与用户交互的重要方式,用于收集用户输入。

1 基本结构

使用 <form> 标签创建一个表单。

  • action 属性：表单数据提交后要处理的 URL。
  • method 属性：提交数据的方式，通常是 GET（数据在 URL 中可见）或 POST（数据在 HTTP 请求体中，更安全，常用于登录、注册等）。

2 常用表单元素

  • <input>: 最 versatile 的输入元素。

    • type 属性决定了输入框的类型：
      • text: 单行文本输入框。
      • password: 密码输入框（显示为点）。
      • email: 电子邮件输入框（浏览器会自动验证格式）。
      • number: 数字输入框。
      • checkbox: 复选框。
      • radio: 单选按钮。
      • submit: 提交按钮。
      • button: 普通按钮。
    • name 属性：提交数据时的键名。
    • value 属性：输入框的默认值或按钮的显示文本。
    • placeholder 属性：输入框为空时显示的提示文本。
    • required 属性：表示该字段为必填。

  • <label>: 为表单元素提供标签。for 属性关联到对应输入框的 id，点击标签可以聚焦到输入框。

  • <textarea>: 多行文本输入框。

  • <select> 和 <option>: 下拉列表。

  • <button>: 按钮元素，比 <input type="button"> 更灵活。

示例：

<form action="/submit-form" method="POST">
    <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" required>
    </div>
    <br>
    <div>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
    </div>
    <br>
    <div>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email">
    </div>
    <br>
    <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>
    <br>
    <div>
        <label>爱好:</label>
        <input type="checkbox" id="coding" name="hobbies" value="coding">
        <label for="coding">编程</label>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">阅读</label>
    </div>
    <br>
    <div>
        <label for="message">留言:</label>
        <textarea id="message" name="message" rows="4" cols="30"></textarea>
    </div>
    <br>
    <div>
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="uk">英国</option>
        </select>
    </div>
    <br>
    <button type="submit">提交</button>
</form>

第六章：HTML5 新增特性

HTML5 带来了许多激动人心的新功能，让网页更加强大和易用。

1 多媒体

  • <video>: 嵌入视频。

    • src: 视频源。
    • controls: 显示播放控件。
    • width, height: 设置尺寸。
    • <source>: 提供多种视频格式以兼容不同浏览器。
    <video width="320" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

  • <audio>: 嵌入音频。

    • controls: 显示播放控件。
    <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
</audio>

2 图形

  • <canvas>: 通过 JavaScript 在网页上绘制图形（2D/3D）。
  • <svg>: 可缩放矢量图形，用 XML 格式定义图形，可以直接嵌入 HTML，并且可以无限缩放而不失真。

SVG 简单示例：

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

3 其他重要特性

  • Web 存储 (localStorage, sessionStorage): 在客户端存储数据，比 Cookie 更强大、更安全。
  • 地理定位 (Geolocation API): 获取用户的地理位置（需用户授权）。
  • 拖放 API (Drag and Drop API): 实现元素的拖放功能。

第七章：最佳实践与进阶

1 代码风格

  • 缩进和格式化：使用 2 或 4 个空格进行缩进，使代码层次清晰。
  • 注释：使用 <!-- 这是一个注释 --> 来解释复杂的代码逻辑。
  • 小写标签：虽然 HTML 不区分大小写，但现代 Web 标准推荐使用小写。

2 可访问性 (Accessibility, a11y)

  • 始终使用 alt 属性：为所有图片提供替代文本。
  • 使用语义化标签：让页面结构清晰。
  • 确保颜色对比度：确保文本和背景颜色有足够的对比度，方便视力不佳的用户阅读。
  • 为表单元素添加 label：让屏幕阅读器能正确读取。

3 下一步：CSS 和 JavaScript

HTML 只负责结构，一个真正美观、交互丰富的网页还需要：

  1. CSS (Cascading Style Sheets)：层叠样式表，它负责网页的表现，即样式，比如颜色、字体、布局、动画等，HTML 和 CSS 的关系就像骨架和皮肤。
  2. JavaScript：一种编程语言，它负责网页的行为，比如响应用户点击、动态更新内容、创建动画等，HTML, CSS 和 JavaScript 的关系就像骨架、皮肤和神经系统。

总结与资源

恭喜你！你已经掌握了 HTML 的核心知识，足以构建任何静态网页的结构。

推荐学习资源：

  • MDN Web Docs (Mozilla Developer Network): https://developer.mozilla.org/zh-CN/docs/Web/HTML

    这是学习 Web 技术最权威、最全面的文档，没有之一，强烈建议将其作为你的首选参考。

  • W3Schools: https://www.w3schools.com/html/

    一个非常友好的在线教程和参考网站,适合初学者快速查阅。

  • 练习平台:
    • Codecademy / freeCodeCamp: 提供互动式的 HTML 课程。
    • Codewars / LeetCode: 解决一些与前端相关的编程挑战。

你已经为成为一名前端开发者打下了坚实的基础,去学习 CSS，让你的网页变得漂亮起来吧！