Java Web 概览
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>：行内元素，用于包裹部分文本，一行可以放多个 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>
2.2 链接与图像
<a>：链接标签，href 属性指定跳转目标地址，target 属性指定窗口打开方式（默认为_self当前窗口，_blank新窗口）<img>：图像标签，src 属性指定图像路径，alt 属性提供替代文本，title 属性为提示文本，width/height 设定尺寸，border 设定边框
示例：
<a href="https://example.com" 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/>为强制换行标签（break）只会简单另起一行，不会有间隙-->
<!--段落标签存在间隙（段落与段落）-->
<p>大家好我是<br/>开发者</p>
<!--<strong>或<b>标签为加粗 更推荐用<strong>标签-->
<p>这是一个<strong>段落</strong>标签，加粗的<b>文字</b></p>
<!-- <em>与<i>都为倾斜标签 推荐用<em>-->
我是<em>倾斜</em>的文字
我是倾斜的文字
我是<i>倾斜</i>的文字
<!--<del>和<s>都为删除标签 推荐用<del>-->
我是<del>删除线</del>
我是<s>删除线</s>
<!--<ins>和<u>都为下划线标签 推荐用<ins>-->
我是<ins>下划线</ins>
我是<u>下划线</u>
<!--<div>标签来布局，就是一个大盒子，独占一行，每行只能放一个<div>-->
<div>我是一个 div 标签，我一个人单独占一行</div>
123
<div>我是一个 div 标签，我一个人单独占一行</div>
<!--<span>标签用来布局 (division)，一行可以放多个<span>,小盒字 (span-->跨度)-->
<span>我是一个 span 标签</span>
<span>百度</span>
<span>新浪</span>
<span>微博</span>
<h2>图像标签的使用</h2>
<!--<img>标签 (单标签) 用于定义 HTML 页面中的图像 src 是<img>标签的必须属性，用于指定图像文件的路径和文件名 alt 图片不能正常显示时的替换文本 (alternative) title 为提示文本，鼠标放到图标上的文字 width 为图像设定宽度 height 为图像设定高度 border 为图像设定边框-->
<img src="img1.jpg" alt="这是图片无法正常显示的替换文字" title="这是好看的风景" width="350" border="100"/>
<br/>
<img src="img2.jpg" alt="这是图片无法正常显示的替换文字" title="你好"/>
<!--图片在相对 html 文件所在位置的下一级目录 若为上一级目录则用../-->
<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"/>
<!--超链接标签<a herf="跳转目标的地址 target="目标窗口的弹出方式"(默认为_self 当前窗口打开页面 _blank 新窗口打开页面)>(双标签)-->
<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>
<!--下载连接 如果 href 里面的地址是一个文件或者压缩包，会下载这个文件-->
<a href="img1.zip">下载链接</a>
<!--其他网页元素也可以进行超链接-->
<a href="http://baidu.com" target="_blank"><img src="img1.jpg" width="100"/></a>
<br/>
<!--空格符号 小于号< 大于号>--> 试验空 格和<大于小于>符号
<!--锚点连接 使用 id 进行标记-->
<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 值需相同）属性 checked(属性值只能为 checked)，作用为一打开界面就默认选中某个表单元素 | 性别、单选题等互斥选项选择 | name="gender" checked |
| checkbox | 复选框（可多选）属性 checked(属性值只能为 checked)，作用为一打开界面就默认选中某个表单元素 | 爱好、兴趣等多选项选择 | name="hobby" value="reading" |
| date | 日期选择器（年/月/日） | 生日、预约日期等日期输入 | —— |
| file | 文件上传控件 | 头像、文档等文件上传 | accept="image/*" multiple |
| 邮箱格式输入（自带格式验证） | 邮箱地址输入 | placeholder="[email protected]" | |
| submit | 表单提交按钮 | 提交表单数据 | value="提交" |
| reset | 表单重置按钮 | 清空表单内容 | value="重置" |
| select | 下拉选择框（需配合 option 使用） | 城市、学历等固定选项选择 | size="1" multiple |
| textarea | 多行文本输入（当输入内容可能过多时，就改 text 为 textarea） | 个人简介、备注等长文本输入 | rows="5" cols="30" maxlength="500" |
| button | 普通按钮 | 一般是结合 JavaScript 启动脚本 | value="获取验证码" |
注意：
- 选择类控件（radio/checkbox）需设置 value 值，提交时会将选中项的 value 发送到后端
- 同一组单选按钮 name 值必须相同，才能实现互斥效果；复选框要设置相同 name，提交时会以数组形式传递勾选的数据。
示例：
<form action="/submit" method="get" name="name1">
<!-- text 文本框，可以输入任何文字 此处的 value 值为 input 元素的初始默认值，会出现在文本框中 maxlength 为文本框可输入的最大长度-->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="7"/><br/>
<!-- label 标签用于绑定一个表单元素，当点击<label>标签绑定的文本时，浏览器会自动将光标转到或者选择到对应的表单元素上，来增加用户体验 --><!-- label 里用 for="..."来指向对应的标签，而标签的创建则用 id="。。。" --> 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 单选框（圆形），注意 name(表单元素的名字) 的值要设置为一样的才可实现单选 --><!-- 此处的 value 并不会出现在页面中，主要作用是用户勾选并提交后将用户勾选的结果发送到后台 --><!-- 还有属性 checked(属性值只能为 checked)，它针对单选按钮和复选框，作用为一打开界面就默认选中某个表单元素 -->
男<input type="radio" name="sex" value="男" checked="checked"/> 女<input type="radio" name="sex" value="女"/><br/>
<!-- checkbox 复选框 (正方形，可以单个用)，注意 name 的值也要设置为一样 -->
性格：活泼<input type="checkbox" name="personality" value="活泼"/> 开朗<input type="checkbox" name="personality" value="开朗" checked="checked"/>阳光<input type="checkbox" name="personality" value="阳光"/><br/>
<!-- 普通按钮 button，一般是结合 javaScript 启动脚本-->
<input type="button" value="获取验证码"/><br/>
<!-- file 实现选择文件上传功能 -->
上传头像：<input type="file"/><br/>
<!-- <select>为下拉列表 其至少包含一对<option> 在<option>中定义 selected="selected"是，当前项即为默认选项 -->
籍贯： <select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">广东</option>
<option>福建</option>
</select><br/>
<!-- textarea 标签是用于定义多行文本输入的控件，当输入内容可能过多时，就改 text 为 textarea --><!-- rows="初始显示的行数" cols="每行中的字符数" 了解即可，在实际开发中不会使用，都是用 CSS 来改变大小-->
反馈留言： <textarea rows="3" cols="20">我知道这个反馈留言是用 textarea 来做的</textarea><br/>
<!-- 当点击提交按钮 (submit 的默认显示文字为提交，可通过 value 更改显示的文字) 时，会把表单数据发送到服务端 -->
<input type="submit" value="火箭提交"/>
<!-- reset 重置按钮 (默认显示文字为 重置，也可通过 value 修改、) -->
<input type="reset"/>
</form>
三、HTML5 新增特性
HTML5 带来了许多新特性，增强了网页的功能和语义化：
3.1 语义化标签
<header>：页面头部<nav>：导航栏<main>：主要内容<article>：独立文章内容<section>：内容区块<aside>：侧边栏<footer>：页脚
语义化标签的优势：
- 提高代码可读性
- 有利于 SEO 优化
- 方便屏幕阅读器等辅助技术解析
3.2 媒体标签
<video>：视频播放<audio>：音频播放
示例：
<audio src="..\music\song.mp3" controls width="400"></audio>
3.3 其他新增特性
- 本地存储（localStorage、sessionStorage）
- Canvas 绘图
- 地理定位
- 拖放 API
- 新的表单类型（如 date、time、number 等）
四、学习资源推荐
- MDN Web Docs - 最权威的 HTML 参考文档
- W3Schools - 包含丰富的示例和在线编辑器
