HTML
软件结构
C/S架构（Client/Server，客户端/服务器模式）
QQ，360，idea，浏览器等都是C/S架构
弊端：必须下载安装才能使用，更新需要重新安装
优点：界面效果更好，更方便将数据缓存在本地
B/S架构（Browser/Server，浏览器/服务器模式）
京东、淘宝等都是B/S架构
优点: 无需安装，只要有浏览器随时随地可以打开，更新用户可以实时看到
缺点：数据缓存没有cs方便
C/S架构（Client/Server，客户端/服务器模式）
QQ，360，idea，浏览器等都是C/S架构
弊端：必须下载安装才能使用，更新需要重新安装
优点：界面效果更好，更方便将数据缓存在本地
B/S架构（Browser/Server，浏览器/服务器模式）
京东、淘宝等都是B/S架构
优点: 无需安装，只要有浏览器随时随地可以打开，更新用户可以实时看到
缺点：数据缓存没有cs方便
现在java开发更多的是B/S架构结构的程序。
Web标准
- 结构标准：HTML，负责页面的内容结构 – 人体
- 样式标准：CSS，负责页面的美化 – 给人化妆
- 行为标准：JavaScript，负责页面的交互 – 给人进行交互
HTML是什么
HTML（Hyper Text Markup Language-EndFragment）: 超文本标记语言
文本：只能是字符串内容
超文本：不仅仅是文本，还可以是音频、视频、图片
标记语言：就是使用标签来表示语义，html中的标签都是内置好的，表达什么语义就使用什么标签
超文本也是文本，所以使用所有的文本软件都可以打开和编辑。那么音频、视频、图片用文本是怎么打开的呢？？？
注意：音频、视频、图片并不是真的将音频、视频、图片的数据添加进文本，而是使用表示音频、视频、图片的语义标签来引入音频、视频、图片的地址。
所以学习HTML就是学习它的语义标签。
html文件的扩展名是：.html或者.htm
HTML骨架
<!DOCTYPE html>
<!-- !DOCTYPE html HTML5的文档声明 -->
<!--
html 只能有且只有一个根标签html
-->
<html>
<!--
head是html页面的头
head是双标签
-->
<head>
<!-- meta 元数据标签
meta单标签
-->
<meta charset="utf-8">
<!-- 页面的关键字信息： 这是给搜索引擎使用 -->
<meta name="keywords" content="java,c,php" />
<meta name="description" content="动力节点专业IT培训机构,一家只教java的培训机构">
<!-- 页面的标题 -->
<title>百度一下，以后啥也不知道</title>
</head>
<!--
身体：主体部分
页面的内容就编写在该标签中
-->
<body>
你干啥呢
</body>
</html><!DOCTYPE html>
<!-- !DOCTYPE html HTML5的文档声明 -->
<!--
html 只能有且只有一个根标签html
-->
<html>
<!--
head是html页面的头
head是双标签
-->
<head>
<!-- meta 元数据标签
meta单标签
-->
<meta charset="utf-8">
<!-- 页面的关键字信息： 这是给搜索引擎使用 -->
<meta name="keywords" content="java,c,php" />
<meta name="description" content="动力节点专业IT培训机构,一家只教java的培训机构">
<!-- 页面的标题 -->
<title>百度一下，以后啥也不知道</title>
</head>
<!--
身体：主体部分
页面的内容就编写在该标签中
bgcolor 背景颜色属性
-->
<body bgcolor="skyblue">
你干啥呢
</body>
</html>
br和hr标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>br和hr标签</title>
</head>
<body>
<!--
在html表达什么意思需要使用标签
br 换行标签
-->
床前明月光，<br/>
疑是地上霜。<br/>
举头望明月，<br/>
低头思故乡。<br/>
<!-- hr标签表示水平线 -->
<hr >
</body>
</html>
h1到h6的标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>h1到h6的标题标签</title>
</head>
<body>
<!--
h1到h6的标题标签 是body中内容的标题标签
文字大小和粗体是样式负责的，属于css的范畴。
但是h1到h6的标题标签自带默认样式，但是这些自带的样式都可以被css修改
所以h1到h6的标题标签的主要重要是标签的语义表示的权重不一样
h1的权重最大；h6的权重最小
权重是给搜索引擎使用的。
一个页面最多一个h1标签，网站的logo需要使用h1
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
p段落标签和pre标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p段落标签和pre标签</title>
</head>
<body>
<!--
p标签是段落标签，段落是英文格式的
-->
<p>
党的十八大以来，以习近平同志为核心的党中央，先后部署开展了党的群众路线教育实践活动、“三严三实”专题教育、“两学一做”学习教育、“不忘初心、牢记使命”主题教育、党史学习教育等5次党内集中学习教育，频度之密、力度之大、成效之显著，放眼百年党史都不多见。
</p>
<p>
习近平总书记指出：“党的十八大以来，我们先后开展一系列集中学习教育，一个重要目的就是教育引导全党牢记中国共产党是什么、要干什么这个根本问题，始终保持党同人民的血肉联系。”
</p>
<hr >
<!--
pre 是预格式标签，保留内容中的空格、换行等符号
-->
<pre>
public static void main(String[] args){
System.out.println(1234);
}
</pre>
</body>
</html>
格式标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式标签</title>
</head>
<body>
<!--
b标签是文字粗体标签，但是文字粗体根据web标准是属于css的范畴
所以文字粗体应该由css来控制。
所以在开发中b标签用来作为css的钩子使用
-->
<b>我爱你，中国</b>
<br>
<!--
i标签是文字斜体标签，但是文字斜体根据web标准是属于css的范畴
所以文字斜体应该由css来控制。
所以在开发中i标签用来作为css的钩子使用
-->
<i>我爱你，中国</i>
<br>
<!--
u标签是文字下划线标签，但是文字下划线根据web标准是属于css的范畴
所以文字下划线应该由css来控制。
所以在开发中u标签用来作为css的钩子使用
-->
<u>我爱你，中国</u>
<br>
<!--
strong也是粗体标签，但是比b的权重更大，语义的主要作用是表示强调
-->
<strong>我爱你，中国</strong>
<br>
<!--
em也是斜体标签，但是比i的权重更大，语义的主要作用是表示强调
-->
<em>我爱你，中国</em>
<br>
<!--
del表示删除线，同样css可以控制
-->
<del>我爱你，中国</del>
<br>
<!--
sup 标签：定义上标文本。
-->
<!-- (a-b)²=a²-2ab+b² -->
(a-b)<sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup>
<br>
<!--
sub 标签：定义下标文本。
-->
log<sub>2</sub>8
</body>
</html>
img图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img图像标签</title>
</head>
<body>
<!--
img 图片标签
src属性表示图片的地址
html中的资源的路径分为：
绝对路径：就是路径本身就能定位到资源
常见的绝对路径是： 文件系统的根路径开头、网络协议开头的地址
<img src="D:\mm.gif" >
相对路径：就是路径本身无法定位资源，必须借助参照路径
参照路径：当前页面的路径
绝对路径 = 参照路径 + 相对路径
参照路径: D:/course/03_Web/HTML/code/HtmlDemo/html/
相对路径: mv.webp
绝对路径: D:/course/03_Web/HTML/code/HtmlDemo/image/mm01.webp
注意： 相对路径要求在同一个项目中的资源才能使用
开发中需要使用相对路径
-->
<!--
width="300px" 表示图片宽度为300像素
宽度和高度设置一个即可，另一个会按照比例缩放
width="50%" 表示图片宽度是页面宽度的50%
title属性是鼠标停留在图片上显示的文字信息
alt属性是图片加载失败后显示的信息
-->
<img src="../mvxx.webp" width="300px" title="这是哪个美女" alt="美女图片">
<br>
<img src="../image/mm01.webp" width="50%">
</body>
</html>
a超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a超链接标签</title>
</head>
<body>
<!--
a标签表示超链接
href属性就是超链接需要链接的地址
target 表示超链接打开的方式
target="_self" 表示在当前标签页打开
target="_blank" 表示在一个新的空白标签页中打开
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.126.com" target="_blank">126</a>
<!-- 这里的#仅仅是占位的，超链接点击后还是在当前页面 -->
<a href="#">超链接</a>
</body>
</html>
使用a标签完成锚点功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用a标签完成锚点功能</title>
</head>
<body>
<p id="p1">段落1</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="p2">段落2</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>段落3</p>
<br><br><br><br><br>
<!--
给标签设置id,然后在a标签中使用#id就可以跳转到指定id的位置
这就是锚点功能
-->
<a href="#p1">跳转到段落1</a>
<a href="#p2">跳转到段落2</a>
</body>
</html>
span标签和div标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span标签和div标签</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
我爱你，祖国
<br>
<!--
文本内容使用span标签后，视觉效果没有任何的变化
span在这里仅仅是一个文本标签，主要是用来充当css的钩子
-->
<span>我爱你，祖国</span>
<br>
<!--
div标签的作用是将整个页面分区
分区的作用是为了给不同的区域做不同的美化效果
-->
<div>
div
</div>
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!--
html中的列表分为有序列表、无序列表、定义列表
有序列表：ordered list 简写为 ol标签
无序列表：unordered list 简写为 ul标签
列表项： list item 简写为 li标签
-->
<!--
type="1" 表示列表编号类型是数字类型(默认类型)
还能设置为 A,a,I,i
-->
<ol type="1">
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
</ol>
<hr >
<!--
type="默认值是实心圆" 表示列表项的符号
square：表示符号黑色方块
circle：空心圆
-->
<ul type="square">
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
</ul>
<hr >
<!--
定义列表： definition list 简写为dl标签
定义列表由dl dt dd 组成
dt definition title
dd definition data
一个dl可以有多个dt
一个dt可以有多个dd
-->
<dl>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>绵阳市</dd>
<dd>自贡市</dd>
<dt>云南省</dt>
<dd>昆明市</dd>
<dd>玉溪市</dd>
<dd>昭通市</dd>
</dl>
</body>
</html>
table表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table表格标签</title>
</head>
<body>
<!--
table标签表示表格
表格的行 table row 简写成 tr标签
表头 table head 简写成 th标签
表格的数据 table data 简写成 td标签
caption 子标签， 表示 表格的标题
-->
<!--
border="1px" 表示表格和单元格边框线为1px
width 表格的宽度
cellspacing="0px" 设置单元格的外边距为0px
cellpadding="0px" 设置单元格的内边距为0px
align="center" 设置对齐方式为水平居中对齐
-->
<!--
理解内容： thead ，tbody ，tfoot 套上这些标签以后和存放他们的位置无关，
thead 用于显示在头部
tfoot 用远显示在底部
-->
<table border="1px" width="300px" height="200px"
cellspacing="0px" cellpadding="0px" align="center">
<caption> 这是表格的标题</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1001</td>
<td>zhangsan</td>
<td>22</td>
<td>male</td>
</tr>
<tr align="center">
<td>1002</td>
<td>lisi</td>
<td>22</td>
<td>male</td>
</tr>
<tr align="center">
<td>1003</td>
<td>wangwu</td>
<td>22</td>
<td>male</td>
</tr>
</table>
</body>
</html>
表格合并行和列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>合并行和列</title>
</head>
<body>
<!--
html页面默认是从上到下，从左到右显示的
-->
<table border="1px" cellspacing="0px" cellpadding="20px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<!--
rowspan="2" 表示合并两行，也就是该单元格占据两行的位置
-->
<td rowspan="2">4</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<!--
colspan="2" 表示合并2列，也就是该单元格占据两列的空间
-->
<td colspan="2">33</td>
</tr>
</table>
</body>
</html>
表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--
form表示表示表单标签
表单的作用就是用来收集用户信息，然后将信息提交到指定路径
action="" 该属性就是提交信息的路径地址
method="get" 表示数据提交的方式是 get/post
get方式：参数 是展现在地址栏中的
post方式：参数 是在请求体中的
enctype 数据传递给后台的数据编码方式
application/x-www-form-urlencoded 默认是这种编码 (urlencoded) , 大多数表单提交都是采用这种编码
multipart/form-data 把数据转换成流 (只有一种场景会使用，文件上传的时候)
text/plain 提交的表单数据 ，不做任何的处理 (不使用)
-->
<!--
type 输入框的类型，总结：
1.submit 提交请求的按钮 ,点击 提交按钮，就会把表单中的数据提交给 action 中的地址对应服务器
2.text 普通文本 ，（明文显示）
3.password 密码 （密文显示）
4.radio 单选按钮 （让单选有效果，name 的值必须相同，value的值 默认是on，需要我们重置value
因为不重置，后台无法区分提交来的数据是男还是女）必须要给value 属性重新赋值 (一般都是用0和1表示)
5.checked 属性 ，表示选中
6.checkbox 多选按钮 (让多选按钮为一组，name 的值必须相同，由于value 的默认值为on
，所以 也要重置value的值，让后台进行区分)
7.hidden 隐藏域,把需要提交给后台且不需要显示出来的属性，使用隐藏域 ，隐藏起来
8.file 文件上传 ，文件上传的时候需要 ，表单中有个文件上传的控件 (出现只有文件上传的时候 ，才会出现)
reset 重置 表单内容
h5 提供的 类型
email 邮箱
number 数字
date 日期
注意：在type中 name 必须要设置的，它的作用是 提交表单中的数据的key 如果不给，数据提交不到后台
-->
<form action="#" method="post">
<!--
for="标签的id号"，此时点击该标签就会关联到id对应的元素上
-->
<label for="uid">账号：</label>
<!--
type="text" 表示类型是明文的文本
placeholder="请输入账号" 占位符，也就是没有输入内容的时候显示的信息
name属性是提交数据到指定路径时的参数名称
比如之前我们学习的jdbc的url
jdbc:mysql:///db01?username=root&password=123456
这里的username和password就是参数名称，也就是这里name属性的值
-->
<input type="text" id="uid" name="username" placeholder="请输入账号"/>
<br>
<br>
<label for="pwdId">密码：</label>
<input type="password" name="pwd" id="pwdId"/>
<br>
<br>
电话：
<input type="text" name="tel"/>
<br>
<br>
生日：
<input type="date" name="birth"/>
<br>
<br>
性别：
<!--
type="radio" 表示单选按钮，单选按钮必须互斥
checked="checked" 表示被选中了，如果属性名和属性值一样，可以
只写属性名
-->
<input type="radio" name="sex" checked value="male"/>男
<input type="radio" name="sex" value="female" />女
<br>
<br>
头像：
<input type="file" name="userimg" />
<br>
<br>
爱好：
<!--
type="checkbox" 表示是复选框
-->
<input type="checkbox" name="hobbies" value="0"/>抽烟
<input type="checkbox" name="hobbies" value="1"/>喝酒
<input type="checkbox" name="hobbies" value="2"/>烫头
<br>
<br>
地址：
<select name="province">
<option>四川省</option>
<option>云南省</option>
<option>贵州省</option>
</select>
<select name="city">
<option>成都市</option>
<option>宜宾市</option>
<option>昆明市</option>
</select>
<select name="area">
<option>锦江区</option>
<option>武侯区</option>
<option>青羊区</option>
</select>
<br>
<br>
备注：
<!--
textarea 文本域，特点是内容可以换行
-->
<textarea rows="10" cols="30">
</textarea>
<br>
<br>
<!--
submit和reset类型的按钮，自带监听，也就说不需要使用js就可以点击交互
submit点击后默认行为就是提交数据
reset点击后默认行为就是清空数据
button类型的按钮必须配合js才能交互
-->
<input type="submit" value="注册"/>
<input type="reset"/>
<input type="button" value="注册1"/>
<!--
<button>注册2</button> 默认的类型是submit
-->
<button type="button">注册2</button>
</form>
<!--select 下拉选， name 属性必须要提供，表示提交给后台的数据
multiple 属性 表示 支持多选
size 可见的长度大小
option 是子标签
value 属性是提交给后台的数据值, 如果不给则提交的是 option标签体的内容-->
常住地：<select name="place" multiple size="3">
<option value="bj">北京</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
<option value="dg">东莞</option>
</select> <br/>
</body>
</html>
框架和实体字符
frameset框架集
frameset标签可定义一个框架集，在同一个浏览器窗口中被用来组织多个窗口（框架），每个窗口（框架）存有独立的HTML文档。在使用frameset时，不可以同时存在body标签，它和body标签是同级的。
在HTML5当中，为了推进新的web前端开发模式，frameset布局将不再被推荐，但是使用它做为企业后台界面开发的还是非常多。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架集</title>
</head>
<!--
frameset不能和body同时存在
noresize="noresize" 不允许改变大小
-->
<frameset rows="10%,*" noresize="noresize">
<frame src="top.html" >
<frameset cols="20%,*">
<frame src="left.html" >
<frame name="content" >
</frameset>
</frameset>
</html>
top.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>动力学生管理系统</h2>
</body>
</html>
left.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
target="frame的name" 表示页面在指定的frame中打开
-->
<a href="studentManagment.html" target="content">学员管理</a>
<br>
<br>
<a href="10-列表标签.html" target="content">成绩管理</a>
<br>
<br>
<a href="13-表单标签.html" target="content">班级管理</a>
<br>
<br>
</body>
</html>
内联框架-iframe
iframe元素会创建包含另外一个文档的内联框架（即行内框架），用于一个网页中局域显示另外网页。
iframe是属于内联框架，它是body的子级，和body是父子关系。
iframe作为一个普通元素放在body里，而frameset是代替了body元素。
scrolling=”yes/no” 规定是否在框架中显示滚动条。
iframe标签属性：
width 可设置内联框架的宽
height 可设置内联框架的高
name 设置框架名称
src 设置页面的路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联框架-iframe</title>
</head>
<body>
<iframe src="10-列表标签.html" width="40%" height="800px"></iframe>
<iframe src="10-列表标签.html" width="40%" height="800px"></iframe>
</body>
</html>
实体字符
HTML 中的预留字符必须被替换为字符实体，在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实体字符</title>
</head>
<body>
我们今天学习了<p>标签
<br>
你 好
</body>
</html>
