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

Web 前端基础:HTML 核心语法与常用标签

HTML 是构建网页结构的核心语言,掌握其基础语法与常用标签是前端开发的必经之路。涵盖文档骨架、文本排版、图像链接、列表表格及表单交互等关键知识点,通过规范的结构化代码示例,帮助开发者快速理解语义化标签的使用场景与最佳实践,为后续学习 CSS 与 JavaScript 打下坚实基础。

RustyLab发布于 2026/4/8更新于 2026/5/2210 浏览

HTML 简介

HTML(HyperText Markup Language)即超文本标记语言,是构建网页结构的基础。它通过一系列标签来定义内容的语义和布局。

HTML 文档骨架

一个标准的 HTML5 文档包含以下基本结构:

<!DOCTYPE html>
<html lang="zh-CN">
<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,确保浏览器正确渲染。
  • <html>:根元素,lang 属性指定页面语言。
  • <head>:存放配置信息(如编码、视口),不直接显示在页面上。
    • <meta charset="UTF-8">:设置字符编码,防止中文乱码。
    • <meta name="viewport">:移动端适配关键,控制视口宽度与缩放比例。
  • <body>:包含用户可见的页面内容。

标签语法

结构与嵌套

标签通常成对出现(双标签),如 <p></p>;部分标签无需闭合(单标签),如 <br>。

嵌套关系:

  • 父子关系:子标签需换行并缩进,体现层级。
  • 兄弟关系:同级标签应换行并对齐。

注释与调试: 使用 <!-- 注释内容 --> 添加说明。调试时可通过浏览器开发者工具(F12)查看代码结构与样式。

文本排版标签

标题与段落

  • 标题 (h1~h6):h1 权重最高,建议页面中仅使用一次。文字加粗且独占一行。
  • 段落 (p):独占一行,段间距由浏览器默认样式决定。

换行与分割

  • <br>:强制换行。
  • <hr>:水平分割线,常用于区分内容区块。

文本格式化

标签作用语义说明
<strong>重要文本语义强调,利于 SEO
<em>强调文本语义强调
<b> / <i>粗体/斜体仅样式,无额外语义
<mark>高亮标记重点
<sub> / <sup>下标/上标化学式或数学公式

注意:优先使用 <strong> 和 <em>,它们具有语义价值,有助于搜索引擎优化和屏幕阅读器识别。

块级与行内元素

  • <div>:块级元素,独占一行,用于构建页面布局框架。
  • <span>:行内元素,不换行,用于包裹文本片段进行样式修饰。

图像与路径

路径类型

  • 绝对路径:从根目录或完整 URL 开始,定位准确但移植性差。
  • 相对路径:基于当前文件位置,灵活且易于维护。
    • ./:当前文件夹
    • ../:上级文件夹
    • 文件夹名/:子文件夹

图像标签

<img src="图片地址" alt="描述文字" width="宽度" height="高度">
  • src:必填,图片资源地址。
  • alt:图片加载失败时的替代文本,提升无障碍访问体验。

超链接

使用 <a> 标签创建跳转链接:

<a href="URL" target="_blank" rel="noopener noreferrer">链接文本</a>
  • href:目标地址。
  • target="_blank":新窗口打开。
  • rel="noopener noreferrer":安全建议,防止新页面通过 window.opener 访问原页面。

列表

无序列表 (ul li)

适用于不需要特定顺序的内容,默认显示圆点。

有序列表 (ol li)

适用于需要编号的顺序内容,默认显示数字。

定义列表 (dl dt dd)

  • dt:术语或标题。
  • dd:术语的描述或详情。

表格

基本结构

  • <table>:容器。
  • <tr>:行。
  • <td>:单元格。
  • <th>:表头单元格(加粗居中)。

语义化分组

  • <thead>:表头组。
  • <tbody>:表体组。
  • <tfoot>:表尾组。

合并单元格

  • colspan:横向合并列。
  • rowspan:纵向合并行。

注意:合并后需删除被占用的其他单元格,避免结构错误。

表单

表单用于收集用户输入,核心标签为 <form>。

Input 类型

<input type="..."> 支持多种交互控件:

  • text:单行文本。
  • password:密码框。
  • radio:单选框(同 name 互斥)。
  • checkbox:复选框(同 name 多选)。
  • submit:提交按钮。
  • file:文件上传。
  • email / tel / number:带校验的输入类型。

下拉菜单 (select)

<select name="选项">
    <option value="值">显示文本</option>
</select>

文本域 (textarea)

用于多行文本输入,可设置 rows 和 cols。

Label 与按钮

  • Label:关联表单控件,点击文字即可聚焦输入框。
    • 隐式:<label><input></label>
    • 显式:<label for="id"></label> + <input id="id">
  • Button:
    • type="submit":提交表单。
    • type="reset":重置表单。
    • type="button":自定义行为。

实战示例

以下是一个纯 HTML 结构的个人博客页面示例,展示了导航、内容区、表单及页脚的组合:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人博客示例</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <h1>我的博客</h1>
    </header>

    <!-- 主体 -->
    <main>
        <!-- 导航 -->
        <nav>
            <a href="#intro">简介</a>
            <a href="#contact">联系</a>
        </nav>

        <!-- 内容 -->
        <section id="intro">
            <img src="./avatar.png" alt="头像" width="200">
            <p>这里是个人简介...</p>
        </section>

        <!-- 留言表单 -->
        <section id="contact">
            <form>
                <label>姓名:<input type="text" name="name"></label><br>
                <label>邮箱:<input type="email" name="email"></label><br>
                <label>留言:<textarea name="message"></textarea></label><br>
                <button type="submit">提交</button>
            </form>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 版权所有</p>
    </footer>
</body>
</html>

此示例涵盖了页面骨架、语义化标签、表单交互及基础布局,可作为后续学习 CSS 样式的起点。

目录

  1. HTML 简介
  2. HTML 文档骨架
  3. 标签语法
  4. 结构与嵌套
  5. 文本排版标签
  6. 标题与段落
  7. 换行与分割
  8. 文本格式化
  9. 块级与行内元素
  10. 图像与路径
  11. 路径类型
  12. 图像标签
  13. 超链接
  14. 列表
  15. 无序列表 (ul li)
  16. 有序列表 (ol li)
  17. 定义列表 (dl dt dd)
  18. 表格
  19. 基本结构
  20. 语义化分组
  21. 合并单元格
  22. 表单
  23. Input 类型
  24. 下拉菜单 (select)
  25. 文本域 (textarea)
  26. Label 与按钮
  27. 实战示例
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • JavaScript 浮点数精度丢失与金额分摊解决方案
  • 人工智能常见面试题与核心原理解析
  • VS Code 前端开发必备 10 款插件及配置指南
  • Draw.io 官方 MCP Server 配置与使用指南
  • C++ 基于哈希表封装 unordered_map 和 unordered_set
  • 大模型应用中提升 RAG 检索增强生成能力的实践方法
  • Python Playwright 与 Selenium 动态页面反爬实战:特征隐藏与行为模拟
  • Windows 本地部署 Ollama 与 OpenClaw 实现 AI 自动化任务
  • C++ 入门:发展历史、命名空间与输入输出详解
  • Axure 实现 AI 对话机器人原型,支持自动回复与打字效果
  • KingbaseES 内核级 SQL 防火墙:白名单机制与误报控制
  • C++ unordered_set 和 unordered_map 无序容器深度解析
  • 30 行 Python 脚本:将公开接口封面图链接转为本地图库
  • OpenClaw 集成飞书机器人实战指南
  • 腾讯混元图像 3.0 图生图模型开源,LMArena 评测跻身全球第一梯队
  • 攻防世界 Web 题解:反序列化与代码审计实战
  • 麒麟 Wine 助手:利用 AI 自动配置 Windows 应用
  • Java 调用国内主流 AI 大语言模型实战指南
  • Ollama 模型下载慢?国内 HuggingFace 镜像与 LLama-Factory 微调方案
  • Docker Compose 实践:简单拓扑、数据库代理与 WordPress 部署

相关免费在线工具

  • 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