HTML学习笔记
HTML
软件结构
C/S架构（Client/Server，客户端/服务器模式）
- QQ，360，idea，浏览器等都是C/S架构
- 弊端：必须下载安装才能使用，更新需要重新安装
- 优点：界面效果更好，更方便将数据缓存在本地
B/S架构（Browser/Server，浏览器/服务器模式）
- 京东、淘宝等都是B/S架构
- 优点: 无需安装，只要有浏览器随时随地可以打开，更新用户可以实时看到
- 缺点：数据缓存没有cs方便
现在java开发更多的是B/S架构结构的程序。
Web标准
- 结构标准：HTML，负责页面的内容结构 – 人体
- 样式标准：CSS，负责页面的美化 – 给人化妆
- 行为标准：JavaScript，负责页面的交互 – 给人进行交互
HTML是什么
C/S架构（Client/Server，客户端/服务器模式）
- QQ，360，idea，浏览器等都是C/S架构
- 弊端：必须下载安装才能使用，更新需要重新安装
- 优点：界面效果更好，更方便将数据缓存在本地
B/S架构（Browser/Server，浏览器/服务器模式）
- 京东、淘宝等都是B/S架构
- 优点: 无需安装，只要有浏览器随时随地可以打开，更新用户可以实时看到
- 缺点：数据缓存没有cs方便
现在java开发更多的是B/S架构结构的程序。
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中的资源的路径分为：
绝对路径：就是路径本身就能定位到资源【一般开发中都用的绝对路径】
常见的绝对路径是：
1、文件系统的根路径开头；
<img src="D:\mm.gif" >
2、网络协议开头的地址
<img src="https://XXXXX">
相对路径：就是路径本身无法定位资源，必须借助参照路径
以点开头的路径：./【当前路径】 ../【上一级路径】
参照路径：当前页面的路径
绝对路径 = 参照路径 + 相对路径
参照路径: 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" 表示列表编号类型是数字类型
-->
<ol type="1">
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
</ol>
<hr >
<!--
type="square" 表示列表项的符号是方块
-->
<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标签
-->
<!--
border="1px" 表示表格和单元格边框线为1px
width 表格的宽度
cellspacing="0px" 设置单元格的外边距为0px
cellpadding="0px" 设置单元格的内边距为0px
align="center" 设置对齐方式为水平居中对齐
-->
<!--
它们都应用到表格，用于整体规划表格的行列属性。应用这两个标签的优点是，我们只要对thead、tbody标签的属性进行修改，就能对表格的整行单元格的属性进行修改，从而剩去了逐一修改单元格属性的麻烦。
thead标签的属性有：align bgcolor class dir id lang style title valign等。
-->
<table border="1px" width="300px" height="200px"
cellspacing="0px" cellpadding="0px" align="center">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</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
-->
<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" 表示被选中了，如果属性名和属性值一样，可以只写属性名
file 文件上传，文件上传的时候需要，表单中有个文件上传的控件（出现只有文件上传的时候，才会出现）
reset 重置表单内容。
h5 提供的内容：
email 邮箱
date 日期
number 数字
-->
<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" 表示是复选框，多选按钮（让多选按钮为一组，name值必须相同）
-->
<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属性必须要提供，表示提交给后台的数据。
option是子标签。
value属性是提交给后台的数据值，如果不给则提交的是option标签体的内容。
multiple属性，表示支持多选
size 可见的长度大小
-->
地址：
<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才能交互
value的值默认是on，需要我们重置value，因为不重置，后台无法区分提交来的数据是男还是女，必须要给value属性重新赋值（一般都是用0和1来表示）
hidden 隐藏域，把需要提交给后台且不需要显示出来的属性，使用隐藏域，隐藏起来。
-->
<input type="submit" value="注册"/>
<input type="reset"/>
<input type="button" value="注册1"/>
<!--
<button>注册2</button> 没有写type，默认的类型是submit
-->
<button type="button">注册2</button>
</form>
</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>