Java Web 概览
HTML 核心知识点总结
一、HTML 基础概念
1.1 HTML 文档基本结构
一个标准的 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>
<!-- 页面内容 -->
</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 设定尺寸
示例：
<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>
显示效果：
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>：表头单元格<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>
显示效果：
2.5 表单标签
<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="获取验证码" |
注意：
- 选择类控件需设置 value 值，提交时发送选中项 value
- 同一组单选按钮 name 值必须相同；复选框设置相同 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/>
<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 新增特性
HTML5 带来了许多新特性，增强了网页的功能和语义化：
3.1 语义化标签
<header>：页面头部<nav>：导航栏<main>：主要内容<article>：独立文章内容<section>：内容区块<aside>：侧边栏<footer>：页脚
优势：提高代码可读性，有利于 SEO 优化，方便辅助技术解析。
3.2 媒体标签
<video>：视频播放<audio>：音频播放
示例：
<audio src="../music/audio.mp3" controls width="400"></audio>
显示效果：
3.3 其他新增特性
- 本地存储（localStorage、sessionStorage）
- Canvas 绘图
- 地理定位
- 拖放 API
- 新的表单类型（如 date、time、number 等）
四、学习资源推荐
- MDN Web Docs - 最权威的 HTML 参考文档
- W3Schools - 包含丰富的示例和在线编辑器