一、文档结构标签
1. <!DOCTYPE html>
作用：声明文档为 HTML5 类型
位置：文档最开头
<!DOCTYPE html>
运行 HTML
2. <html>
作用：根元素，包裹整个页面内容
结构：包含
<head>和<body>
<html> <!-- 页面内容 --> </html>
运行 HTML
3. <head>
作用：存放元数据（标题、字符集、CSS/JS 链接）
常用子标签：
<title>：页面标题
<meta>：字符集声明（必须）
<link>：引入 CSS
<script>：引入 JS
<head> <meta charset="UTF-8"> <title>我的网页</title> <link rel="stylesheet" href="style.css"> </head>
运行 HTML
4. <body>
作用：存放所有可见内容
<body> <h1>欢迎！</h1> <p>这是我的第一个网页</p> </body>
运行 HTML
二、文本内容标签
1. 标题 <h1>-<h6>
层级：h1（最大）→ h6（最小）
<h1>主标题</h1> <h2>子标题</h2>
运行 HTML
2. 段落 <p>
<p>这是一个段落。</p>
运行 HTML
3. 换行 <br>
特点：单标签，无段落间距
第一行<br> 第二行
运行 HTML
4. 分隔线 <hr>
<p>第一部分</p> <hr> <p>第二部分</p>
运行 HTML
5. 强调文本
<strong>：加粗（语义更重）<em>：斜体（语气强调）
<strong>警告！</strong> 这是<em>重要</em>内容。
运行 HTML
三、多媒体与链接
1. 图片 <img>
属性：
src：图片路径
alt：替代文本（必写）
<img src="cat.jpg" alt="一只橘猫">
运行 HTML
2. 超链接 <a>
属性：
href：链接地址（支持邮件链接）
target="_blank"：新窗口打开
<a href="https://example.com">示例网站</a> <a href="mailto:contact@example.com">联系我们</a>
运行 HTML
四、列表
1. 无序列表 <ul>
<ul> <li>苹果</li> <li>香蕉</li> </ul>
运行 HTML
2. 有序列表 <ol>
<ol> <li>第一步</li> <li>第二步</li> </ol>
运行 HTML
3. 描述列表 <dl>
<dl> <dt>HTML</dt> <dd>网页结构标记语言</dd> </dl>
运行 HTML
五、表格
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
运行 HTML
<tr>：表格行<th>：表头（自动加粗居中）<td>：单元格
六、表单
1. 表单容器 <form>
<form action="/submit" method="post"> <!-- 表单元素 --> </form>
运行 HTML
2. 输入控件 <input>
| 类型 | 说明 | 代码示例 |
|---|---|---|
| 文本框 | 单行文本输入 | <input type="text" name="user"> |
| 密码框 | 隐藏输入内容 | <input type="password"> |
| 单选按钮 | 单选选项 | <input type="radio" name="sex"> |
| 复选框 | 多选选项 | <input type="checkbox"> |
| 提交按钮 | 提交表单 | <input type="submit" value="提交"> |
3. 关联标签 <label>
提升表单可访问性
<label for="email">邮箱：</label> <input type="email" id="email">
运行 HTML
4. 按钮 <button>
<button type="submit">保存</button>
运行 HTML
七、学习建议
所有标签建议小写书写
必须闭合标签（如
<p>...</p>，单标签如<br>需写为<br>）优先使用语义化标签（如用
<strong>代替<b>）通过实际写代码练习巩固记忆
示例完整页面结构：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学习笔记示例</title> </head> <body> <h1>HTML 练习</h1> <p>开始你的第一个网页吧！</p> </body> </html>