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

Java Web 学习：前端 HTML 基础与常用标签

是 Java Web 系列第一篇，重点讲解前端 HTML 基础知识。涵盖 HTML 文档结构、常用标签（文本、链接、图像、列表、表格、表单）、HTML5 新增特性（语义化、媒体标签）等内容。通过代码示例演示了标签用法及属性配置，旨在帮助开发者掌握网页构建基础。

山野诗人发布于 2026/4/5更新于 2026/7/2458 浏览
Java Web 学习：前端 HTML 基础与常用标签

Java Web 学习：前端 HTML 基础与常用标签

Java Web 概览

HTML 核心知识点总结

一、HTML 基础概念

1.1 HTML 文档基本结构

一个标准的 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>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
  • <!DOCTYPE html>：声明文档类型为 HTML5
  • <html>：根元素，包含整个 HTML 文档
  • <head>：包含文档的元数据（如字符集、标题等）
  • <body>：包含网页的可见内容
1.2 HTML 标签特点
  • 大多数标签成对出现，如 <p></p>
  • 部分标签是自闭合的，如 <img>、<input>、<br>
  • 标签可以嵌套，但不能交叉嵌套
  • 标签名不区分大小写，但推荐使用小写

二、常用 HTML 标签

2.1 文本标签
  • <h1>~<h6>：标题标签，h1 级别最高，h6 级别最低
  • <p>：段落标签
  • <strong>/<b>：加粗文本，strong 有语义强调
  • <em>/<i>：斜体文本，em 有语义强调
  • <br>：换行标签
  • <hr>：水平线标签
  • <span>：行内元素，用于包裹部分文本，一行可以放多个 span
  • <del>/<s>：删除线标签，推荐用 del
  • <ins>/<u>：下划线标签，推荐用 ins
  • &nbsp;：空格符号

    • 示例：

    <body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落，这里强制换行<br>包含<strong>加粗文本</strong>和<em>斜体文本</em></p>
<hr>试验空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <hr>
<!--<del>和<s>都为删除标签 推荐用<del>-->
我是<del>删除线</del> 我是<s>删除线</s>
<!--<ins>和<u>都为下划线标签 推荐用<ins>-->
我是<ins>下划线</ins> 我是<u>下划线</u>
</body>
    2.2 链接与图像
    • <a>：链接标签，href 属性指定跳转目标地址，target 属性指定窗口打开方式（默认为 _self 当前窗口，_blank 新窗口）
    • <img>：图像标签，src 属性指定图像路径，alt 属性提供替代文本，title 属性为提示文本，width/height 设定尺寸，border 设定边框

    示例：

    <a href="#" target="_blank">访问外部网站</a>
<img src="../picture/background.jpg" alt="图片描述" title="提示文字" width="600" border="0"/>
    综合示例
    <!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>
</head>
<body>
<h1 id="top">标题标签</h1>
<h2>二级标题</h2>
1234
<!--锚点链接 (href 属性设置为 #名字 的形式)，点击后快速跳转到对应的 id 标记位置-->
<a href="#life">生活介绍</a>
<br/>
<p>大家好<br/>我是林晓然</p>
<p>这是一个<strong>段落</strong>标签，加粗的<b>文字</b></p>
我是<em>倾斜</em>的文字 我是<i>倾斜</i>的文字
我是<del>删除线</del> 我是<s>删除线</s>
我是<ins>下划线</ins> 我是<u>下划线</u>
<div>我是一个 div 标签，我一个人单独占一行</div>
123 <div>我是一个 div 标签，我一个人单独占一行</div>
<span>我是一个 span 标签</span><span>百度</span><span>新浪</span><span>微博</span>
<h2>图像标签的使用</h2>
<img src="img1.jpg" alt="替换文字" title="提示文字" width="350" border="100"/>
<br/>
<img src="img2.jpg" alt="替换文字" title="你好"/>
<!--相对路径-->
<img src="picture/img1.jpg" height="100"/>
<!--绝对路径（不推荐）-->
<img src="./img1.jpg" height="100"/>
<!--网络上图片的绝对路径-->
<img src="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line/glitch.png"/>
<h4>外部超链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<h4>内部超链接</h4>
<a href="web2/web2.html" target="_blank">内部跳转</a>
<a href="#" target="_blank">公司地址</a>
<a href="img1.zip">下载链接</a>
<a href="http://baidu.com" target="_blank"><img src="img1.jpg" width="100"/></a>
<br/>
试验空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格和&lt;大于小于&gt;符号
<h3 id="life">这是生活简介，噼里啪啦一大堆省略。。。</h3>
<a href="#top">返回顶部</a>
</body>
</html>
    2.3 列表标签
    • <ul>：无序列表
    • <ol>：有序列表
    • <li>：列表项

    示例：

    <ul>
<li>项目 1</li>
<li>项目 2</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
    2.4 表格标签
    • <table>：表格容器
    • <tr>：表格行 (table row)
    • <td>：表格单元格 (table data)
    • <th>：表头单元格 (table head)
    • <thead>、<tbody>、<tfoot>：表格结构分区
    • cellpadding 属性规定单元边沿与其内容之间的空白，默认 1 像素
    • cellspacing 属性规定单元格之间的空白，默认 2 像素
    • border 属性表示表格边框的厚度
    • align 表示整个表格的排放位置：left 靠左，center 居中，right 靠右

    示例：

    <table align="left" border="10" cellpadding="20" cellspacing="0" width="300" height="50">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>立夏</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>肖奈</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
    2.5 表单标签
    • <form>：表单容器，会把它范围内的表单元素提交给服务器

    其核心属性说明：

    • action：指定表单数据提交的 URL 地址
    • method：提交方式，主要有 get 和 post 两种：
      • get：数据会显示在 URL 中，会暴露信息，适合简单查询（有长度限制）；
      • post：数据在请求体中传输，适合提交敏感信息或大量数据

    type 的常用属性值：

    type 属性值说明/功能典型应用场景关键属性示例
    text单行文本输入（默认类型）用户名、姓名等普通文本输入placeholder="请输入用户名"
    password密码输入（内容加密显示）密码、验证码输入minlength="6"
    number仅允许输入数字年龄、数量、身高体重等数值输入min="0" max="120" step="1"
    radio单选按钮（同组 name 值需相同）性别、单选题等互斥选项选择name="gender" checked
    checkbox复选框（可多选）爱好、兴趣等多选项选择name="hobby" value="reading"
    date日期选择器（年/月/日）生日、预约日期等日期输入——
    file文件上传控件头像、文档等文件上传accept="image/*" multiple
    email邮箱格式输入（自带格式验证）邮箱地址输入placeholder="[email protected]"
    submit表单提交按钮提交表单数据value="提交"
    reset表单重置按钮清空表单内容value="重置"
    select下拉选择框（需配合 option 使用）城市、学历等固定选项选择size="1" multiple
    textarea多行文本输入个人简介、备注等长文本输入rows="5" cols="30" maxlength="500"
    button普通按钮一般是结合 JavaScript 启动脚本value="获取验证码"

    注意：

    1. 选择类控件（radio/checkbox）需设置 value 值，提交时会将选中项的 value 发送到后端
    2. 同一组单选按钮 name 值必须相同，才能实现互斥效果；复选框要设置相同 name，提交时会以数组形式传递勾选的数据。

    示例：

    <form action="/submit" method="get" name="name1">
<!-- text 文本框 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="7"/><br/>
<!-- label 标签用于绑定一个表单元素 -->
<label for="aaa">用户名 2</label><input type="text" id="aaa"/>
<label for="man">男士</label><input type="radio" id="man"/><br/>
<!-- password 密码框 -->
密码：<input type="password"/><br/>
<!-- radio 单选框 -->
男<input type="radio" name="sex" value="男" checked="checked"/> 女<input type="radio" name="sex" value="女"/><br/>
<!-- checkbox 复选框 -->
性格：活泼<input type="checkbox" name="personality" value="活泼"/> 开朗<input type="checkbox" name="personality" value="开朗" checked="checked"/>阳光<input type="checkbox" name="personality" value="阳光"/><br/>
<!-- 普通按钮 button -->
<input type="button" value="获取验证码"/><br/>
<!-- file 实现选择文件上传功能 -->
上传头像：<input type="file"/><br/>
<!-- select 为下拉列表 -->
籍贯： <select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">广东</option>
<option>福建</option>
</select><br/>
<!-- textarea 标签 -->
反馈留言： <textarea rows="3" cols="20">我知道这个反馈留言是用 textarea 来做的</textarea><br/>
<!-- submit 提交按钮 -->
<input type="submit" value="火箭提交"/>
<!-- reset 重置按钮 -->
<input type="reset"/>
</form>

    三、HTML5 新增特性

    HTML5 带来了许多新特性，增强了网页的功能和语义化：

    3.1 语义化标签
    • <header>：页面头部
    • <nav>：导航栏
    • <main>：主要内容
    • <article>：独立文章内容
    • <section>：内容区块
    • <aside>：侧边栏
    • <footer>：页脚

    语义化标签的优势：

    • 提高代码可读性
    • 有利于 SEO 优化
    • 方便屏幕阅读器等辅助技术解析
    3.2 媒体标签
    • <video>：视频播放
    • <audio>：音频播放

    示例：

    <audio src="../music/music.mp3" controls width="400"></audio>
    3.3 其他新增特性
    • 本地存储（localStorage、sessionStorage）
    • Canvas 绘图
    • 地理定位
    • 拖放 API
    • 新的表单类型（如 date、time、number 等）

    四、学习资源推荐

    1. MDN Web Docs - 最权威的 HTML 参考文档
    2. W3Schools - 包含丰富的示例和在线编辑器

    目录

    1. Java Web 学习：前端 HTML 基础与常用标签
    2. Java Web 概览
    3. HTML 核心知识点总结
    4. 一、HTML 基础概念
    5. 1.1 HTML 文档基本结构
    6. 1.2 HTML 标签特点
    7. 二、常用 HTML 标签
    8. 2.1 文本标签
    9. 2.2 链接与图像
    10. 综合示例
    11. 2.3 列表标签
    12. 2.4 表格标签
    13. 2.5 表单标签
    14. 三、HTML5 新增特性
    15. 3.1 语义化标签
    16. 3.2 媒体标签
    17. 3.3 其他新增特性
    18. 四、学习资源推荐
    • 免费图片AI生成工具免费生成了解详情
    • Magick API 一键接入全球大模型注册送1000万token查看
    • 免费图片视频在线生成30秒，将你的创意变成现实开始设计
    • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
    • 100+免费在线小游戏爽一把
    极客日志微信公众号二维码

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

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

    更多推荐文章

    查看全部
    • Spring Cloud Tencent 适配 Spring Boot 3 及 Java 17 升级指南
    • DeepSeek 时代，前端开发的变革与实战路径
    • 利用 Claw Cloud Run 免费部署前端网页
    • 【CS创世SD NAND征文】为无人机打造可靠数据仓：工业级存储芯片CSNP32GCR01-AOW在飞控系统中的应用实践
    • 基于 Shoelace 的零构建前端开发实践
    • 前端内存泄露检测与排查方法
    • OpenClaw 接入 QQ 机器人完整指南
    • Spring Boot 电影院后台管理系统设计与实现
    • 国内如何付费升级 GitHub Copilot 专业版
    • Python 高性能编程：绕开 Threading 陷阱的 3 种并发方案
    • Windows 7 系统运行最新 Python 版本的解决方案
    • MCP 模型上下文协议详解及在 IDE 与 Spring AI 中的应用
    • 2026 年主流 AI 大模型实测排名与选型建议
    • Qwen-Image-2512 免费本地部署实战：ComfyUI 全流程指南
    • 基于 MCP 协议的图片素描风格转换工具使用指南
    • JSP 与 JavaScript 的区别对比
    • 数据结构初阶：顺序表的概念与初始化
    • Tabular Editor 2.x 使用指南：Power BI 模型高效管理工具
    • C语言标准库与工具链：string.h、stdio.h、stdlib.h及CMake构建
    • Spring IoC 与依赖注入核心原理

    相关免费在线工具

    • Keycode 信息

      查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

    • Escape 与 Native 编解码

      JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

    • JavaScript / HTML 格式化

      使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

    • JavaScript 压缩与混淆

      Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

    • Base64 字符串编码/解码

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

    • Base64 文件转换器

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