跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端

前端入门:HTML 基础与开发环境搭建

前端负责用户界面的呈现,涵盖 Web、PC 及移动端应用。本文讲解 HTML 基础语法、VS Code 环境配置及常用标签用法,包括文档结构、文本格式化、图片链接与表格布局,帮助初学者快速建立前端开发认知并上手实践。

松间照月发布于 2026/4/12更新于 2026/10/2179 浏览

什么是前端?

前端,又称 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 实现交互功能。动手编写几个示例页面,是巩固知识的关键。

    目录

    1. 什么是前端?
    2. 开发环境搭建
    3. HTML 基础结构
    4. 常用标签详解
    5. 文本与排版
    6. 格式化标签
    7. 图片与链接
    8. 表格布局
    9. 总结

    更多推荐文章

    查看全部
    • 基于 YOLO 标注格式的无人机航拍人员搜救检测数据集
    • Z-Image-Turbo WebUI 本地部署与使用指南
    • 基于宝塔 Linux 与 Nginx 部署智能协同云图库实战
    • WebGIS 实战:WKT 转 GeoJSON 方案及 Leaflet 集成指南
    • Kafka 核心架构与分布式存储详解
    • 鸿蒙金融理财全栈项目:生态合作、用户运营与数据变现
    • AI 数据标注工具实战:效率提升与流程优化
    • OpenClaw 与企业即时通讯平台集成架构研究
    • Chrome 开发者工具(DevTools)快速入门
    • Android 离线语音识别实践:基于 Whisper 与 TensorFlow Lite 实现本地转录
    • Python、NumPy、Pandas 与 Matplotlib 版本兼容指南
    • OpenClaw Memory 本地模式配置:Ubuntu+CUDA+cuDNN+llama.cpp
    • Win11 本地部署 OpenClaw:集成 Telegram 机器人与网页搜索功能
    • Python 数学建模基础语法与常用库应用指南
    • AI Skills:前端开发的新效率工具
    • OpenClaw 16 款 AI Agent 选型指南
    • 云边端一体化解析:概念、原理与AI基础设施实践
    • AI 四大核心技术详解:LLM、Agent、RAG 与 Skill
    • 基于 LangChain 实现的知识库问答工具
    • Stable Diffusion 训练实战:损失函数调优指南

    相关免费在线工具

    • Base64 字符串编码/解码

      将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

    • Base64 文件转换器

      将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

    • Markdown转HTML

      将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online

    • HTML转Markdown

      将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online

    • JSON 压缩

      通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online

    • JSON美化和格式化

      将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online