Skip to main content

HTML 详解

HTML（超文本标记语言）是构建网页的基础语言。本指南将从基础结构讲起，逐步介绍 HTML 中各个部分的用法，包括常用组件、插入样式和脚本等内容。

📑 HTML 基本结构​

以下是最基础的 HTML 页面结构：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
点击展开结构说明
  • <!DOCTYPE html>：声明 HTML5 文档类型。
  • <html>：根节点。
  • <head>：页面元信息，不会直接显示。
  • <body>：页面主要可视内容。

🔤 常用文本标签​

<h1>一级标题</h1>
<p>这是一个段落。</p>
<strong>加粗</strong> 和 <em>斜体</em>

🔗 超链接与图片​

<a href="https://www.example.com">访问示例站点</a>

<img src="https://via.placeholder.com/150" alt="示例图像" />
tip

<a> 标签可以跳转页面或链接资源，<img> 标签用于嵌入图像。

🔘 表单元素​

<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>

📦 插入 CSS 的几种方式​

<p style="color: red;">这是一段红色文本</p>

⚙️ 插入 JavaScript 的几种方式​

<button onclick="alert('你好，世界！')">点击我</button>

🧩 常用组件示例​

<ul>
  <li>无序列表项 1</li>
  <li>无序列表项 2</li>
</ul>

<ol>
  <li>有序列表项 A</li>
  <li>有序列表项 B</li>
</ol>

<table border="1">
  <tr>
    <th>名称</th>
    <th>值</th>
  </tr>
  <tr>
    <td>年龄</td>
    <td>25</td>
  </tr>
</table>
点击展开：多媒体组件
<video controls width="300">
  <source src="video.mp4" type="video/mp4" />
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mp3" />
</audio>

✍️ 示例：完整页面​

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
    <style>
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这里是 HTML 学习示例</p>
    <button onclick="alert('已点击')">点击按钮</button>
  </body>
</html>

✅ 总结​

  • HTML 页面由 <head> 与 <body> 两大结构构成；
  • 使用 <p> <a> <img> 等构建网页内容；
  • CSS 用于美化样式，JavaScript 增强交互性；
  • 推荐使用外部 CSS 和 JS 文件维护大型项目结构。

📚 推荐链接​