千锋教育2023新版javaweb速成全套教程，零基础入门到企业项目实战
html笔记内容：
1、html简介
*什么是html?
-Hyper Text MarKup Language:超文本标记语言，网页语言。
**超文本：超出文本的范畴，使用html可以轻松实现这样的操作
**标记：html所有的操作都是通过标记实现的，标记就是标签<标签名称>
**网页语言：
*第一个html程序：
创建java 文件：.java 。**先编译，在运行。
html后缀是: .html .htm。**直接通过浏览器就可以运行。
-代码
**这是我的<font size="5" color="red">第一个html程序！</font>
*html的规范（遵循）
1、一个html文件开始标签和结束标签<html></html>
就像定义一个java方法{}
2、html包含两部分内容
（1）<head>设置相关信息</head>
（2）<body>是在页面上显示的内容</body>
3、html 的标签有开始标签，也要有结束标签
--<head></head>
4、html的代码是不区分大小写的
5、有些标签，没有结束标签，在标签内结束
--比如<br/>换行<hr/>分割线
*html的操作思想
网页中很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来
（封装起来）。
通过修改标签属性只实现标签内数据样式变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内
数据样式的变化。
html中的常用标签
<文字标签和注释标签
*文字标签：修改文字样式
—<font></font>
*属性：
size：文字的大小，取值范围1-7，超出了7的话，默认还是7。
color：文字颜色，取值范围：
**英文单词：red green blue yelllow
**使用十六进制数表示：#ffffff 例如：RGB—通过工具实现不同的
颜色。
*注释标签：
—java注释有三种：//单行注释 /*.....*/多行注释 /**....*/文档注释
—html 的注释：<!--注释-->
*标题标签
<h1></h1><h2></h2>.....<h6></h6>
—从h1到h6，大小是一次变小，同时会自动换行
*水平线标签
—<hr/>
—属性
**size：水平线的粗细
**color：水平线的颜色
*特殊字符
—想要在页面上显示：<htlm>:是网页开始；
—需要对特殊字符进行转译
*< <
*> >
*空格
*& &；
*版权符 ©；
*注册符 ®；
*双引号 "；
*列表标签
—比如现在显示这样的效果
千锋教育
财务部
学工部
人事部
**<dl></dl>:表示列表的范围
**在dl里面有<dt></dt>:上层内容
**在dt里面有<dd></dd>:下层内容
--代码
<dl>
<dt>千锋教育</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
—想要在页面上显示这样的效果：
1.财务部
2.学工部
3.人事部
a.财务部
b.学工部
c.人事部
I.财务部
II.学工部
III.人事部
—属性type：设置排列方式：1.（默认）
**<ol></ol>:有序列表的范围
**在ol标签里面<li>具体内容</li>
—想要在页面上显示这样的效果：
特殊符号（方框）财务部
特殊符号（方框）学工部
**<vl></vl>:表示无序列表的范围。
属性：type：空心圆 circle、实心方块 square、默认disc。
**在vl里面有<li></li>
*图像标签
**<img src="图片的路径"/>
—src：图片的路径
—width：图片的宽度
—height：图片的高度
—alt：图片上显示的文字；
**有些浏览器下不显示（没有效果）
6.路径介绍
*分类：两类
**绝对路径：
—c:\users\asus\Desktop\0414\day01\a.jpg
—http://www.baidu.com/b.jpg
**相对路径：
—一个文件相对于另外一个文件的位置。
—三种：
· **html文件和图片在一个路径下，可以直接写文件名称。
**在html文件中，使用img文件夹下面的a.jpg
--c:\users\asus\Desktop\0413\day01\code\4.htlm
—c:\users\asus\Desktop\0414\day01\code\img\a.jpg
***在html中使用图片4.html和img在同一路径下
img\a.jpg
图片在html的下层目录
**图片在html的上层目录
***图片和html文件是什么关系？
html文件所在目录和图片是一个目录。
—c:\users\asus\Desktop\0414\day01\code\4.html
—c:\users\asus\Desktop\0414\day01\c.png
--图片在html的所在目录的上层目录 day01
**怎么表示上层路径 ../
---/:day01
---../c.png
8.超链接标签（*****）
*链接资源
-<a href="链接到资源的路径">显示在页面上内容</a>
**href:链接的资源的地址。
**target:设置打开的方式：默认是在当前页打开
----_blank:在一个新窗口打开
---_self:当前页打开
-当超链接不需要到任何的地址在href里面加#
*定位资源（锚点）
**如果想要定位资源：定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**引入一个标签pre：原样输出。
9.表格标签
*可以对数据进行格式化，使数据显示更加清晰。
*<table></table>:表示表格的范围
属性：
--border ：表格线
--bordercolor：表格线颜色
--cellspacing：单元格之间的距离
--width：表格的宽度
--height：表格的高度
**在table里面<tr></tr>
属性：设置显示方式：align：left center right
***在tr里有<td></td>
属性：设置显示方式：align：left center right
***<th></th>也可以表示单元格
---可以实现居中加粗。
*画图分析法
-首先定义一个表格的范围使用<table></table>
-定义一行使用tr
-定义一个单元格使用td
*表格标题
<caption></caption>
*合并单元格
-rowspan:跨行
-colspan: 跨列
10.表单标签
*可以提交数据到开心网的服务器，这个过程可以使用标点标签实现
*<form></form>:定义一个表单的范围
—属性：
**action：提交到地址，默认提交到当前页面
**method:表单提交方式
-常用有两种 get和post,默认提交到当前页面
**面试题：get和post的区别
1、get请求地址栏回携带提交的数据，post不会携带（请求体里面。第七天时候讲http协议时候）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制
**enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲到文件上传）
**输入项：可以输入内容或者选择内容的部分
***输入项里必须有一个name属性
—大部分的输入项使用<input type="输入项的类型"/>
***普通输入项：<input type="text"/>
***密码输入项：<input type="password"/>
***单选输入项：<input type="radio" />
—在里面需要属性 name
—name的属性值必须要相同:sex
—必须有一个value值
**复选输入项：<input type="checkbox"/ >
—在里面需要属性 name
—name的属性值必须要相同:sex
—必须有一个value值
***文件输入项（在后面上传时候用到）：
—<input type="file"/>
***下拉输入项(不是在input 标签里面的)
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
***文本域
<textarea cols="10" rows="10"></textarea>
***隐藏项：（不会显示在在页面上，但是存在于html代码里面）
<input type="hidden"/>
***提交按钮
<input type="submit"/>
<input type="submit" value="注册"/>
**参数携带
？输入项name值=输入值&输入项name值=输入值
***使用图片进行提交
<input type="image" src="图片路径"/>
***重置按钮:回到输入项初始状态
<input type="reset"/>
***普通按钮（明天和js一起使用）
<input type="button" value=""/>
11、html中的其他常用便签的使用
b：加粗
s：删除线
u：下划线
i：斜体
pre：原样输出
sub：下标
sup：上标
p：段落标签
div：自动换行
span：在一行显示
12、html的头标签使用
*html两部分组成<head>和<body>
**在<head>里面的标签就是头标签
**<title>标签：表示在标签上显示的内容
**<meta>标签：设置页面的一些相关内容
--<meta name="keywords" content="毕姥爷，熊出没，刘翔">
<meta http-equiv="refresh" content="3;url=01-hello.html"/>
**base标签：设置超链接的基本设置
-可以统一设置超链接的打开方式
<base target="_blank"/>
**link标签：引入外部文件
**明天css，可以使用link标签引入css文件
13、框架标签的使用
*<frameset>
-rows：按照行进行划分
**<frameset rows="80,*">
-cols：按列进行划分
**<frameset cols="80,*">
*<frame>
-具体显示的页面
-<frame name="lower_left" src="b.html">
*** 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
*<frameset rows="80,*">//把页面划分成上下两个部分
<frame name="top" src="a.html">//上面页面
<frameset cols="150.*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
*如果在左边的页面超连接，想让内容显示在右边的页面中
-设置超链接里面的属性 target值设置成名称
-<a href="01-hello.html" target="right">超连接1</a>
