综述由AI生成Java Web 前端开发中的 HTML 基础知识。内容包括 HTML 文档基本结构、常用标签（文本、链接、图像、列表、表格、表单）、HTML5 新增特性（语义化、媒体标签）以及学习资源推荐。重点讲解了标签语法、属性使用及表单提交方式，旨在帮助初学者掌握网页结构构建的核心技能。
一个标准的 HTML 文档结构如下：
<!DOCTYPE html>
<!--文档类型声明标签 -->
<html lang="zh-CN">
<!-- 定义语言的种类 en 为 English zh-CN 为中文 -->
<head>
<meta charset="UTF-8">
<!-- 用于保存文字，不写会乱码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 基础标签</title>
</head>
<body>
<!-- 页面内容 -->
<!DOCTYPE html>：声明文档类型为 HTML5<html>：根元素，包含整个 HTML 文档<head>：包含文档的元数据（如字符集、标题等）<body>：包含网页的可见内容<p></p><img>、<input>、<br><h1>-<h6>：标题标签，h1 级别最高，h6 级别最低<p>：段落标签<strong>/<b>：加粗文本，strong 有语义强调<em>/<i>：斜体文本，em 有语义强调<br>：换行标签<hr>：水平线标签<span>：行内元素，用于包裹部分文本，一行可以放多个 span<del>/<s>：删除线标签，推荐用 del<ins>/<u>：下划线标签，推荐用 ins ：空格符号示例：
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落，这里强制换行<br/>包含<strong>加粗文本</strong>和<em>斜体文本</em></p>
<hr/>
试验空 格
<hr/>
<!--<del>和<s>都为删除标签 推荐用<del>-->
我是<del>删除线</del>
我是<s>删除线</s>
<!--<ins>和<u>都为下划线标签 推荐用<ins>-->
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>
显示效果：
<a>：链接标签，href 属性指定跳转目标，target 属性指定打开方式（_self 当前窗口，_blank 新窗口）<img>：图像标签，src 属性指定路径，alt 提供替代文本，title 设置提示文本，width/height 设定尺寸示例：
<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>
1234
<a href="#life">生活介绍</a>
<p>大家好我是<br/>林晓然</p>
<p>这是一个<strong>段落</strong>标签，加粗的<b>文字</b></p>
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
<div>我是一个 div 标签，我一个人单独占一行</div>
<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="E:\WebTest\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/>
试验空 格和<大于小于>符号
<h3 id="life">这是林晓然的生活简介，噼里啪啦一大堆省略。。。</h3>
<a href="#top">返回顶部</a>
</body>
</html>
显示效果：
<ul>：无序列表<ol>：有序列表<li>：列表项示例：
<ul>
<li>项目 1</li>
<li>项目 2</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
显示效果：
<table>：表格容器<tr>：表格行<td>：表格单元格<th>：表头单元格<thead>、<tbody>、<tfoot>：表格结构分区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>
显示效果：
<form>：表单容器，提交范围元素给服务器核心属性：
action：提交 URL 地址method：提交方式（get/post），get 暴露于 URL，post 在请求体中type 常用属性值：
| type 属性值 | 说明/功能 | 典型应用场景 | 关键属性示例 |
|---|---|---|---|
| text | 单行文本输入 | 用户名、姓名 | placeholder="请输入用户名" |
| password | 密码输入 | 密码、验证码 | minlength="6" |
| number | 仅允许数字 | 年龄、数量 | min="0" max="120" |
| radio | 单选按钮 | 性别、单选题 | name="gender" checked |
| checkbox | 复选框 | 爱好、兴趣 | name="hobby" value="reading" |
| date | 日期选择器 | 生日、预约 | —— |
| file | 文件上传 | 头像、文档 | accept="image/*" |
| 邮箱格式输入 | 邮箱地址 | placeholder="[email protected]" | |
| submit | 提交按钮 | 提交数据 | value="提交" |
| reset | 重置按钮 | 清空内容 | value="重置" |
| select | 下拉选择框 | 城市、学历 | size="1" |
| textarea | 多行文本 | 个人简介 | rows="5" cols="30" |
| button | 普通按钮 | 结合 JS 脚本 | value="获取验证码" |
注意：
示例：
<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/>
<label for="man">男士</label><input type="radio" id="man"/><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"/>阳光<input type="checkbox" name="personality" value="阳光"/><br/>
<input type="button" value="获取验证码"/><br/>
上传头像：<input type="file"/><br/>
籍贯：<select><option>山东</option><option>北京</option><option>天津</option><option selected="selected">广东</option><option>福建</option></select><br/>
反馈留言：<textarea rows="3" cols="20">我知道这个反馈留言是用 textarea 来做的</textarea><br/>
<input type="submit" value="火箭提交"/><input type="reset"/>
</form>
显示效果：
HTML5 带来了许多新特性，增强了网页的功能和语义化：
<header>：页面头部<nav>：导航栏<main>：主要内容<article>：独立文章内容<section>：内容区块<aside>：侧边栏<footer>：页脚优势：提高代码可读性，有利于 SEO 优化，方便辅助技术解析。
<video>：视频播放<audio>：音频播放示例：
<audio src="../music/audio.mp3" controls width="400"></audio>
显示效果：
微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online