这里提供四个基本的 HTML 实例，帮助你更好地理解 HTML 的基础知识。每个实例都涵盖了不同的 HTML 标签及其功能。

实例 1：基本网页结构

这是一个最简单的 HTML 页面，展示了一个网页的基本结构，包括标题、段落和一个超链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本网页结构</title>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是一个简单的网页结构示例。</p>
    <a href="https://www.example.com" target="_blank">访问示例网站</a>
</body>
</html>

解释：

  • <!DOCTYPE html>：声明这是一个 HTML5 文档。
  • <html>：定义整个网页的根元素。
  • <head>：包含网页的元数据（如字符集、视口设置、标题等）。
  • <body>：网页的主体部分，包含实际显示的内容。
  • <h1>：主标题，网页上最重要的标题。
  • <p>：段落标签，用于定义一段文本。
  • <a>：超链接标签，href 属性指定链接地址，target="_blank" 指定新标签页打开链接。

实例 2：图片和列表

这个实例展示了如何嵌入图片和创建无序列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片和列表</title>
</head>
<body>
    <h1>我的照片和兴趣爱好</h1>
    
    <img src="image.jpg" alt="我的照片" width="300">
    
    <h2>我的兴趣爱好：</h2>
    <ul>
        <li>旅行</li>
        <li>编程</li>
        <li>阅读</li>
    </ul>
</body>
</html>

解释：

  • <img>：用于嵌入图片，src 属性指定图片路径，alt 属性提供图片的替代文本，width 属性设置图片宽度。
  • <ul>：无序列表，包含多个列表项 <li>。

实例 3：表格

这个实例展示了如何创建一个简单的 HTML 表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单表格</title>
</head>
<body>
    <h1>学生成绩表</h1>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>80</td>
            <td>88</td>
        </tr>
    </table>
</body>
</html>

解释：

  • <table>：定义表格。
  • <tr>：定义表格行。
  • <th>：定义表格头部单元格，通常用于描述列的标题。
  • <td>：定义表格数据单元格。

实例 4：表单

这个实例展示了一个简单的 HTML 表单，包括文本框、按钮和下拉菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单表单</title>
</head>
<body>
    <h1>注册表单</h1>
    <form action="/submit" method="POST">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">电子邮件：</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="gender">性别：</label>
        <select id="gender" name="gender">
            <option value="male">男</option>
            <option value="female">女</option>
        </select><br><br>
        
        <input type="submit" value="提交">
    </form>
</body>
</html>

解释：

  • <form>：定义表单，action 属性指定表单提交的目标 URL，method 属性指定表单提交的 HTTP 方法。
  • <label>：定义标签，关联输入字段。
  • <input type="text">：文本输入框，required 表示必填项。
  • <select>：定义下拉菜单，<option> 用于定义选项。

总结

这四个实例展示了 HTML 的一些基本功能和常见标签：

  1. 实例 1：网页结构、标题、段落和链接。
  2. 实例 2：嵌入图片和无序列表。
  3. 实例 3：创建表格。
  4. 实例 4：表单和输入控件。

通过这些基础的例子，你可以理解 HTML 文档的基本构成和常用标签的功能。如果你有任何问题或想要更深入的了解，随时告诉我！