HTML（HyperText Markup Language，超文本标记语言）是用于构建网页内容的标准标记语言，通过"标签"定义内容的结构和语义。以下是HTML的核心基础知识，适合初学者快速入门：
一、HTML 文档的基本结构
每个HTML文档都需遵循固定的基础结构，确保浏览器能正确解析内容。典型结构如下：
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN"> <!-- 根元素，lang指定页面语言（中文） -->
<head> <!-- 头部：包含元信息（不显示在页面上） -->
<meta charset="UTF-8"> <!-- 字符编码（必选，防止乱码） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
<title>页面标题</title> <!-- 浏览器标签栏显示的标题 -->
</head>
<body> <!-- 主体：页面可见内容（文字、图片、按钮等） -->
<!-- 这里放置页面实际内容 -->
</body>
</html>关键说明：
<!DOCTYPE html>：HTML5的标准声明，告诉浏览器以HTML5规范解析页面。<html>：根标签，包裹整个文档内容，lang属性建议设置（如en表示英文，zh-CN表示简体中文）。<head>：包含页面元数据（如标题、字符集、样式表链接、脚本等），不直接显示在页面上。<body>：所有用户可见的内容（文本、图片、链接等）都放在这里。
二、常用基础标签
HTML通过"标签+内容"的形式定义内容，标签用<和>包裹，多数标签成对出现（开始标签+结束标签），少数为自闭合标签（如<img>）。
1. 文本相关标签
| 标签 | 作用 | 示例 |
|---|---|---|
<h1>-<h6> |
标题（重要性递减，h1最关键） |
<h1>主标题</h1> |
<p> |
段落 | <p>这是一段文字。</p> |
<br> |
换行（自闭合标签） | 第一行<br>第二行 |
<hr> |
水平分割线（自闭合标签） | <hr> |
<strong> |
强调（加粗，语义为"重要内容"） | <strong>注意！</strong> |
<em> |
斜体强调（语义为"语气强调"） | <em>这里需要重视</em> |
<u> |
下划线（纯样式，非语义化） | <u>下划线文字</u> |
<s> |
删除线（纯样式，非语义化） | <s>已删除内容</s> |
2. 列表标签
用于组织有序或无序的内容集合：
-
无序列表 （项目符号）：
<ul>包裹<li>（列表项）。<ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> </ul> -
有序列表 （数字/字母序号）：
<ol>包裹<li>。<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>
3. 链接与图片
-
超链接 （跳转到其他页面/资源）：
<a>标签，通过href属性指定目标地址。<a href="https://example.com">点击访问示例网站</a> <!-- 新窗口打开 --> <a href="https://example.com" target="_blank">新窗口打开</a> -
图片 （插入图片）：
<img>自闭合标签，需src（图片路径）和alt（替代文本，图片加载失败时显示）。<img src="logo.png" alt="网站logo" width="100" height="50"> <!-- width/height可选，建议用CSS控制尺寸 -->
4. 表格标签
用于展示结构化数据：
<table border="1"> <!-- border可选，设置边框 -->
<caption>学生成绩表</caption> <!-- 表格标题（可选） -->
<thead> <!-- 表头区域 -->
<tr> <!-- 行 -->
<th>姓名</th> <!-- 表头单元格 -->
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody> <!-- 表体区域 -->
<tr>
<td>张三</td> <!-- 普通单元格 -->
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>92</td>
</tr>
</tbody>
</table>5. 表单标签（收集用户输入）
用于与用户交互（如注册、登录）：
<form action="/submit" method="POST"> <!-- action提交地址，method请求方式 -->
<!-- 文本输入 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<!-- 密码输入 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" minlength="6">
<!-- 单选框（只能选一个） -->
<p>性别：</p>
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<!-- 复选框（可选多个） -->
<p>爱好：</p>
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>
<!-- 下拉列表 -->
<label for="city">城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<!-- 多行文本 -->
<label for="remark">备注：</label><br>
<textarea id="remark" name="remark" rows="3" cols="20"></textarea><br>
<!-- 提交按钮 -->
<button type="submit">提交</button>
<!-- 重置按钮（清空表单） -->
<button type="reset">重置</button>
</form>关键说明：
<label>：通过for属性关联输入框的id，点击标签文字可聚焦输入框（提升体验）。name属性：表单提交时的参数名（后端通过name获取值）。required：必填字段（浏览器会自动校验）。type属性：决定输入框类型（text文本、password密码、file文件上传等）。
三、语义化标签（HTML5新增）
HTML5引入了更语义化的标签，用于明确内容的功能（而非仅样式），提升SEO和可访问性：
<header>：页面/区域的头部（如网站导航）。<nav>：导航链接区域。<main>：页面主要内容（唯一）。<section>：文档中的一个独立区域（如文章章节）。<article>：可独立发布的内容（如博客文章、评论）。<aside>：侧边栏（与主内容相关但独立）。<footer>：页面/区域的底部（如版权信息）。
示例：
<header>
<h1>我的博客</h1>
<nav>
<a href="/">首页</a> | <a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<h2>HTML入门教程</h2>
<p>这是一篇讲解HTML基础的文章...</p>
</article>
</main>
<footer>
<p>版权所有 © 2025</p>
</footer>四、HTML 属性
标签可通过"属性"补充额外信息，常见属性类型：
- 通用属性 （多数标签可用）：
class：为元素指定类名（用于CSS/JS选择）。id：元素的唯一标识（全局唯一，用于CSS/JS定位）。style：内联CSS样式（如style="color: red;"）。title：鼠标悬停时显示的提示文本。
- 特定属性 （仅部分标签可用）：
<img>的src（路径）、alt（替代文本）。<a>的href（目标地址）、target（打开方式，如_blank新窗口）。<input>的type（输入类型）、value（默认值）。
五、注意事项
- 标签嵌套 ：标签需正确嵌套（如
<p><strong>文本</strong></p>合法，<strong><p>文本</p></strong>不合法）。 - 自闭合标签 ：如
<img>、<br>、<hr>、<input>无需结束标签。 - 注释 ：用
<!-- 注释内容 -->添加注释（浏览器不显示）。 - HTML5 特性 ：推荐使用HTML5标准（
<!DOCTYPE html>），支持语义化标签、多媒体（<video>、<audio>）、Canvas绘图等。
六、完整示例
以下是一个包含基础元素的HTML页面示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML页面</title>
<style>
/* 内联CSS示例 */
h1 { color: blue; }
</style>
</head>
<body>
<header>
<h1>欢迎学习HTML</h1>
<nav>
<a href="#section1">基础</a> |
<a href="#section2">表单</a>
</nav>
</header>
<main>
<section id="section1">
<h2>HTML基础</h2>
<p>这是<b>段落内容</b>，包含<a href="https://www.w3.org">W3C官网</a>链接。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<img src="https://example.com/image.jpg" alt="示例图片" width="200">
</section>
<section id="section2">
<h2>联系表单</h2>
<form>
<label>姓名：<input type="text" required></label><br>
<label>邮箱：<input type="email" required></label><br>
<button type="submit">提交</button>
</form>
</section>
</main>
<footer>
<p>© 2025 HTML学习笔记</p>
</footer>
</body>
</html>通过以上内容，你可以掌握HTML的核心基础。下一步建议通过实践（如编写简单页面）巩固，并学习CSS（样式）和JavaScript（交互）来完善网页功能。