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

Java Web 学习：前端 HTML 核心知识点总结

综述由AI生成总结了 Java Web 学习中的前端 HTML 核心知识点。内容包括 HTML 文档基本结构、常用标签（文本、链接、图像、列表、表格、表单）、HTML5 新增特性（语义化标签、媒体标签、本地存储等）。文章提供了详细的代码示例和属性说明，帮助初学者快速掌握 HTML 基础语法与开发规范。

路由之心发布于 2026/4/5更新于 2026/5/2331 浏览
Java Web 学习：前端 HTML 核心知识点总结

Java Web 学习：前端 HTML 核心知识点总结

HTML 核心知识点总结

一、HTML 基础概念

HTML（HyperText Markup Language）是超文本标记语言，通过标签描述页面结构。

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>：行内元素，用于包裹部分文本
  • <del>/<s>：删除线标签，推荐用 del
  • <ins>/<u>：下划线标签，推荐用 ins
  • &nbsp;：空格符号

示例：

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落，这里强制换行<br>包含<strong>加粗文本</strong>和<em>斜体文本</em></p>
<hr>
试验空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<hr>
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>

显示效果：

在这里插入图片描述

2.2 链接与图像
  • <a>：链接标签，href 属性指定跳转目标，target 属性控制打开方式（_self 当前窗口，_blank 新窗口）
  • <img>：图像标签，src 属性指定路径，alt 提供替代文本，title 为提示文本，width/height 设定尺寸

示例：

<a href="#" target="_blank">访问示例网站</a>
<img src="../picture/背景 2.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>
<a href="#life">生活介绍</a>
<p>大家好我是<br/>林晓然</p>
<p>这是一个<strong>段落</strong>标签，加粗的<b>文字</b></p>
<div>我是一个 div 标签，我一个人单独占一行</div>
<span>我是一个 span 标签</span><span>百度</span>
<h2>图像标签的使用</h2>
<img src="img1.jpg" alt="这是图片无法正常显示的替换文字" title="这是好看的风景" width="350" border="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>
<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>：表格行
  • <td>：表格单元格
  • <th>：表头单元格
  • cellpadding：单元边沿与其内容之间的空白
  • cellspacing：单元格之间的空白
  • 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）
type 属性值说明/功能典型应用场景
text单行文本输入用户名、姓名
password密码输入密码、验证码
number仅允许数字年龄、数量
radio单选按钮性别、单选题
checkbox复选框爱好、兴趣
date日期选择器生日、预约
file文件上传头像、文档
email邮箱格式输入邮箱地址
submit提交按钮提交表单
reset重置按钮清空表单
select下拉选择框城市、学历
textarea多行文本输入个人简介
button普通按钮结合脚本

注意：

  1. 选择类控件需设置 value 值
  2. 同一组单选按钮 name 值必须相同

示例：

<form action="/submit" method="get" name="name1">
用户名：<input type="text" name="username" value="请输入用户名" maxlength="7"/><br/>
<label for="aaa">用户名 2</label><input type="text" id="aaa"/><br/>
密码：<input type="password"/><br/>
男<input type="radio" name="sex" value="男" checked="checked"/> 女<input type="radio" name="sex" value="女"/><br/>
性格：活泼<input type="checkbox" name="personality" value="活泼"/> 开朗<input type="checkbox" name="personality" value="开朗" checked="checked"/><br/>
<input type="button" value="获取验证码"/><br/>
上传头像：<input type="file"/><br/>
籍贯：<select><option>山东</option><option selected="selected">广东</option></select><br/>
反馈留言：<textarea rows="3" cols="20">我知道这个反馈留言是用 textarea 来做的</textarea><br/>
<input type="submit" value="火箭提交"/>
<input type="reset"/>
</form>

显示效果：

在这里插入图片描述

三、HTML5 新增特性

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

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

优势：提高代码可读性，有利于 SEO 优化。

3.2 媒体标签
  • <video>：视频播放
  • <audio>：音频播放

示例：

<audio src="music/邓壬鑫 - 这一秒只想在爱里沉溺.mp3" controls width="400"></audio>

显示效果：

在这里插入图片描述

3.3 其他新增特性
  • 本地存储（localStorage、sessionStorage）
  • Canvas 绘图
  • 地理定位
  • 拖放 API
  • 新的表单类型

四、学习资源推荐

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

目录

  1. Java Web 学习：前端 HTML 核心知识点总结
  2. HTML 核心知识点总结
  3. 一、HTML 基础概念
  4. 1.1 HTML 文档基本结构
  5. 1.2 HTML 标签特点
  6. 二、常用 HTML 标签
  7. 2.1 文本标签
  8. 2.2 链接与图像
  9. 综合示例
  10. 2.3 列表标签
  11. 2.4 表格标签
  12. 2.5 表单标签
  13. 三、HTML5 新增特性
  14. 3.1 语义化标签
  15. 3.2 媒体标签
  16. 3.3 其他新增特性
  17. 四、学习资源推荐
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

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

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

更多推荐文章

查看全部
  • Web 端 IM 聊天信息加密的三种实现方案
  • OpenCode 结合 GitHub Copilot 实现 Claude Code 替代方案
  • 双指针算法专题：有效三角形与多数之和
  • C++ 命名空间（namespace）详解与实战指南
  • Python 遍历字典的 8 种常用方法
  • Java 核心面试知识点汇总：集合、多线程、JVM 及锁机制
  • RTK 免像控验证：无人机摄影测量精度对比与代码实现
  • Git 入门指南：安装配置与分支管理
  • 技术人职业规划：如何在变化中抓住趋势并持续深耕
  • AI 产品经理行业现状与职业发展路径分析
  • VS Code配置C++多文件项目：解决自定义头文件报错的关键步骤
  • 基于 rocketmq-client-python 构建高效 RocketMQ 消息系统
  • VSCode 中彻底关闭 GitHub Copilot 的两种方法
  • OpenClaw 安装与飞书机器人接入实战
  • VSCode Copilot 接入 OpenAI 兼容自定义模型方案
  • 2024 年国内漏洞众测平台与 SRC 安全响应中心汇总
  • 多模态 RAG 在企业数智化场景中的设计与优化
  • Spring IOC 注解进阶：@Bean 管理第三方 Bean、@Import 拆分配置与@Value 注入
  • PyCharm 2025.2 安装教程与版本更新详解
  • 智能仿真无人机平台多线程实现：任务分配与碰撞规避

相关免费在线工具

  • 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