什么是前端？
前端，又称 Web 前端，是直接面向用户展示网页的层。一个完整的软件通常由后端逻辑与前端界面共同构成。常见的应用场景包括 Web 页面、PC 端应用程序以及移动端 APP 界面。掌握前端开发后，你将能够独立构建基础的 Web 页面。
开发环境搭建
推荐使用 VS Code 作为开发工具，它是目前企业级前端开发的主流选择。安装后建议添加以下插件以提升效率：
- Auto Rename Tag：修改标签名时自动同步闭合标签。
- View In Browser：在编辑器内直接预览浏览器效果。
- Live Server：保存文件后浏览器自动刷新，实时查看更改。
HTML 基础结构
HTML 是超文本标记语言，通过标签组合来呈现文本、图片、视频等多种数据。所有 HTML 页面最终都在浏览器中运行。
创建一个 .html 文件，核心结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!-- 页面可见内容 -->
</body>
</html>
html：根标签。head：存放页面属性，如编码、标题等，不直接显示内容。title：定义浏览器标签页显示的标题。body：包含页面实际展示的信息。
这些标签构成了 DOM 树结构，每个标签都是一个对象，可通过代码进行增删查改。
在 VS Code 中输入 ! 然后按回车，可快速生成上述标准模板。其中 lang 指定语言，charset 设置字符编码，viewport 用于移动端适配。
常用标签详解
文本与排版
- 注释：使用
<!-- 内容 -->，浏览器不会渲染。 - 标题：
h1到h6，数字越大字体越小。 - 段落：
<p>内容</p>，段落间有默认间距。 - 换行：
<br>，单标签，无需闭合。注意规范写法是<br>而非</br>。
格式化标签
- 加粗：
<strong>语义化更强，<b>仅视觉加粗。 - 倾斜：
<em>语义强调，<i>仅视觉倾斜。 - 删除：
<del>或<s>。 - 下划线：
<ins>或<u>。
图片与链接
- 图片：
<img src="路径" alt="描述" title="提示">。src：必填，支持绝对路径或相对路径（如./img/xxx.png）。alt：图片加载失败时显示的替代文本。width/height：控制尺寸，建议只设一个以保持比例。
- 超链接：
<a href="目标" target="_blank">文本</a>。href：跳转地址。target：_self当前页打开，_blank新标签页打开。
表格布局
表格由 table、tr（行）、td（单元格）、th（表头）组成。thead 和 tbody 用于区分头部与主体区域。
<table border="1">
<thead>
<tr><th>姓名</th><th>性别</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td rowspan="2">男</td></tr>
<tr><td>李四</td><td>女</td></tr>
</tbody>
</table>
rowspan：合并行。colspan：合并列。 虽然表格属性可设置边框和对齐，但生产环境中通常建议使用 CSS 样式来控制外观。
总结
前端开发始于对 HTML 结构的理解。通过合理运用标签与属性，可以构建出清晰、规范的页面骨架。后续学习中将结合 CSS 美化样式，利用 JavaScript 实现交互功能。动手编写几个示例页面，是巩固知识的关键。
