好的，我们将开始「前端基础」系列的第一部分，专注于 HTML 的基础知识和核心概念。HTML 是构建网页的骨架，定义了网页的内容结构。
一、HTML 基础概念
HTML 是什么？ HTML（HyperText Markup Language）即超文本标记语言，用于创建和描述网页的结构。它使用一系列标签来定义页面中的不同元素（如标题、段落、图片等）。
HTML 文档结构 一个基本的 HTML 文档包含以下核心结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!– 页面内容在此编写 –>
</body>
</html>
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <html>：根元素，lang 属性指定语言（如 zh-CN 表示简体中文）。
- <head>：包含元数据（如字符集、标题、引入外部资源）。
- <body>：包含用户可见的内容。
二、常用 HTML 标签详解
1. 文本与标题
<h1>一级标题</h1> <!– 重要级别最高 –>
<h2>二级标题</h2>
<p>这是一个段落。</p>
<span>行内文本容器</span>
<strong>加粗强调</strong>
<em>斜体强调</em>
2. 列表
<!– 有序列表 –>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<!– 无序列表 –>
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>
3. 链接与图片
<a href="https://example.com" target="_blank">访问示例网站</a>
<img src="image.jpg" alt="图片描述">
- href：链接目标地址。
- target="_blank"：在新标签页打开链接。
- alt：图片无法显示时的替代文本（对无障碍访问至关重要）。
4. 语义化标签（HTML5 新增）
<header>页眉</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立内容（如博客文章）</article>
<section>内容区块</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
5. 表格
<table>
<tr> <!– 表格行 –>
<th>表头单元格</th> <!– 加粗居中 –>
<th>姓名</th>
</tr>
<tr>
<td>数据单元格</td>
<td>张三</td>
</tr>
</table>
6. 表单（用户输入）
<form action="/submit" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="username" placeholder="输入姓名">
<label for="email">邮箱：</label>
<input type="email" id="email" name="useremail" required>
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password">
<button type="submit">提交</button>
</form>
- action：表单提交的服务器地址。
- method：提交方式（GET/POST）。
- required：表示必填字段。
三、实践建议
<h2>区块标题</h2>
<p>这是内容…</p> <!– 重要说明 –>
</section>
下一步学习建议：掌握基础后，尝试用 HTML 构建一个包含标题、段落、列表、图片和简单联系表单的静态页面。后续我们将深入探讨 CSS 样式设计。
