HTML 教程

HTML（超文本标记语言，HyperText Markup Language）是构建网页的基础语言。它通过标记（tags）结构化网页内容。HTML 文件的基本结构包括文档类型声明、根元素 <html>、头部元素 <head> 和主体内容 <body>。

HTML 基本结构

一个基本的 HTML 文档结构如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 基本示例</title>
</head>
<body>
    <h1>欢迎使用 HTML!</h1>
    <p>这是一个 HTML 示例。</p>
</body>
</html>

各个部分的解释：

  1. <!DOCTYPE html>：声明文档类型，告知浏览器该页面使用 HTML5 标准。
  2. <html lang="en">：HTML 根元素，lang="en" 属性声明页面的语言为英文。
  3. <head>：包含页面的元数据，如字符集、视口设置、标题等。
  4. <meta charset="UTF-8">：设置字符集为 UTF-8，这是现代网页的标准编码方式。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">：确保页面在移动设备上正确显示。
  6. <title>：设置网页标题（显示在浏览器标签栏）。
  7. <body>：页面的主体部分，包含所有实际显示的内容。

常用的 HTML 标签

1. 标题标签

HTML 中有六个级别的标题标签，从 <h1> 到 <h6>，用于表示不同层级的标题。<h1> 是最高级别的标题，<h6>是最低级别的标题。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

2. 段落和文本格式化标签

  • <p>：定义段落。
  • <b>：加粗文本。
  • <i>：斜体文本。
  • <u>：下划线文本。
  • <strong>：强调文本（通常是加粗）。
  • <em>：强调文本（通常是斜体）。
<p>这是一个段落。</p>
<p><b>加粗文本</b> 和 <i>斜体文本</i></p>
<p><strong>重要信息</strong> 和 <em>强调文本</em></p>

3. 链接标签

  • <a>：用于创建超链接。
<a href="https://www.example.com">访问示例网站</a>

href 属性指定了链接的目标 URL。

4. 图像标签

  • <img>：用于在网页中插入图片。需要指定 src 属性（图片源）和 alt 属性（替代文本）。
<img src="image.jpg" alt="示例图片" width="300" height="200">

5. 列表标签

  • 无序列表：使用 <ul> 标签，列表项用 <li> 标签表示。
  • 有序列表：使用 <ol> 标签，列表项用 <li> 标签表示。
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

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

6. 表格标签

  • <table>：定义表格。
  • <tr>：定义表格行。
  • <td>：定义表格单元格。
  • <th>：定义表格头单元格。
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

7. 表单标签

  • <form>：定义表单。
  • <input>：用户输入字段。
  • <label>：为表单控件定义标签。
  • <textarea>：多行文本输入框。
<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email">
    <br>
    <input type="submit" value="提交">
</form>

HTML5 新特性

HTML5 引入了一些新的元素和特性，改善了网页的结构化和功能性：

1. 新的语义标签

  • <header>：定义文档的页头。
  • <footer>：定义文档的页脚。
  • <article>：表示独立的内容块，如博客文章或新闻报道。
  • <section>：定义文档中的章节或区域。
  • <nav>：定义导航链接。
  • <aside>：表示与主要内容略有关系的内容，如侧边栏。
<header>
    <h1>我的网站</h1>
</header>

<main>
    <section>
        <h2>关于我们</h2>
        <p>这里是关于我们内容。</p>
    </section>
</main>

<footer>
    <p>版权所有 © 2025</p>
</footer>

2. 嵌入多媒体

  • <audio>：用于在网页中嵌入音频文件。
  • <video>：用于在网页中嵌入视频文件。
<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    你的浏览器不支持音频标签。
</audio>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    你的浏览器不支持视频标签。
</video>

小结

HTML 是构建网页的基础语言，掌握 HTML 是前端开发的第一步。通过合理使用 HTML 标签，你可以创建具有丰富内容和结构的网页。进一步学习 CSS 和 JavaScript，将使你的网页更具交互性和美观性。

如果你对某个标签或概念有更深入的问题，或者需要具体的代码示例，随时告诉我！