HTML 入门教程

HTML 是什么

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言。它通过一系列标签（Tag）来定义网页的结构，比如标题、段落、图片、链接等。

浏览器负责读取 HTML 文件并把标签"翻译"成你看到的网页。HTML 不是编程语言，它没有逻辑判断，只负责描述内容的结构。

一个最小页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个页面</title>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>这是我的第一个网页。</p>
</body>
</html>

把上面代码保存为 index.html，双击用浏览器打开，你就写出了第一个网页。

常用标签

HTML 的标签成对出现：<开始标签> 与 </结束标签>，中间是内容。下面是最常用的几组：

标签	作用	示例
<h1>~<h6>	标题，从大到小	<h1>大标题</h1>
<p>	段落	<p>一段文字</p>
<a>	超链接	<a href="https://example.com">点我</a>
<img>	图片（自闭合）	<img src="logo.png" alt="Logo">
<ul>/<li>	无序列表	<ul><li>苹果</li></ul>
<strong>	加粗强调	<strong>重点</strong>

综合示例

<h2>我的学习清单</h2>
<ul>
  <li>学习 <a href="https://developer.mozilla.org/zh-CN/">HTML</a></li>
  <li>学习 <strong>CSS</strong></li>
  <li>学习 JavaScript</li>
</ul>
<img src="mountain.jpg" alt="山景" width="400">

属性（Attribute）

标签可以携带属性来提供额外信息，写法是 属性名="值"，写在开始标签内。

属性	适用标签	作用
href	<a>	链接目标地址
src	<img>、<script>	资源来源
alt	<img>	图片无法显示时的替代文字
class	所有标签	CSS 样式钩子，可重复
id	所有标签	唯一标识，页面内只能出现一次
target	<a>	打开方式，如 _blank 新窗口

<!-- 新窗口打开外链 -->
<a href="https://github.com" target="_blank">GitHub</a>

<!-- 图片加描述与宽高 -->
<img src="cat.png" alt="一只猫" width="200" height="150">

表格与表单

表格

<table>
  <tr>
    <th>姓名</th> <th>城市</th>
  </tr>
  <tr>
    <td>小明</td> <td>北京</td>
  </tr>
</table>

表单

表单用于收集用户输入，配合 <input>、<textarea>、<select> 使用：

<form action="/register" method="post">
  <label>用户名：<input type="text" name="username" required></label>

  <label>密码：<input type="password" name="pwd"></label>

  <label><input type="checkbox" name="agree"> 同意条款</label>

  <button type="submit">注册</button>
</form>

常见 type：text、password、email、number、checkbox、radio、file、date。

语义化与 HTML5

HTML5 引入了语义化标签，让代码结构清晰，也利于 SEO 与无障碍访问：

标签	含义
<header>	页头区域
<nav>	导航区域
<main>	主体内容（一页一个）
<section>	章节区块
<article>	独立文章/卡片
<aside>	侧边栏
<footer>	页脚区域

<header>网站标题</header>
<nav>导航链接</nav>
<main>
  <section>
    <h2>第一节</h2>
    <p>内容……</p>
  </section>
</main>
<footer>版权信息</footer>

本章小结

• HTML 用标签描述网页结构，属性补充细节。
• 一个标准页面包含 <!DOCTYPE html>、<html>、<head>、<body> 四要素。
• 常用标签：标题、段落、链接、图片、列表、表格、表单。
• HTML5 语义化标签让结构更清晰，推荐优先使用。
• 下一步：学习 CSS 给页面添加样式。