JavaWeb_Html_学习笔记
1、html的简介：
什么是html?
-HyperText Markup Language :超文本标记语言，网页语言
**超文本：超出文本的范畴，使用html可以轻松实现这样的操作
**标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
**网页语言：所有的内容都是要通过网页展现出来的
第一个html程序：
-创建一个java文件.java
-创建一个html文件.html或者 文件.htm
-如何运行html文件？直接通过浏览器就可以运行。
-代码：
<font size="5" color="red">这是我的第一个htmlc程序!</font>
- 那么要学什么？
学标签，学习查询，记住常用的标签
html的规范（重要）
1、一个html文件开始标签和结束的标签：<html> </html>类似java方法的{ }
2、html包含两部分内容：（1）、<head>设置相关信息</head>
3、html的标签有开始标签和结束标签（2）、<body>显示在页面的相关信息都写在body里面</body>
4、html的代码 不区分大小写的-<head></head>
5、有些标签 没有结束标签-比如 换行标签，<br>没有</br>,必须在标签内结束:<br/>
-又如：<hr/>一条水平线
6. 举例：
<html> <head> <title>这是一个标题</title> </head> <body> <font size="5" color="red">这是我的第一个htmlc程序!</font><br/><hr/> 这是我的第一个html程序2 </body> </html>
html的操作思想（重点理解）
网页中有很多的数据，不同的数据可能需要不同的显示效果，这个时候就需要使用标签把要操作的数据包起来，通过修改标签的属性值来改变标签内的数据的样式变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
2、html中常用的标签：文字标签和注释标签
a、 文字标签：修改文字的样式
- <font></font>
- 属性：
size：文字的大小，取值1-7，超出7默认就是7（最大）
color:文字的颜色
-两种表示方式：
**英文单词：red green blue black white yellow gray......
**使用十六进制数来表示：#ffffff,每两位表示一个颜色：RGB三原色
-通过工具来实现不同的颜色 #66cc66
b、注释标签
-html的注释：<!-- 这是一个注释 -->不会显示在页面上的。注：!是英文的!
3、标题标签、水平线标签和特殊字符
*标题标签<h1></h1> <h2></h2> <h3></h3> ....... <h6></h6>
从h1到h6，大小依次变小，同时会自动换行
*水平线标签
-<hr/>
-属性：
**size：大小，取值1-7；
**color:颜色
-代码：<hr size="5" color="blue"/>
*特殊字符：
-想要在页面上显示：<html>:是网页的开始！
-需要对特殊字符进行转义：
<: <
>: >
空格：
&:&
代码示例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标签、水平线标签和特殊字符</title> </head> <body> <!--演示标题标签--> <h1>标题一</h1> <h2>标题二</h2> <h3>标题三</h3> <h6>标题一</h6> <!--演示水平线标签--> <hr size="5" color="blue"/> <!--演示特殊字符--> < html >:是 网页的开始！ </body> </html>
4、列表标签
-比如现在显示这样的效果：
重庆大学
财务处
人事部
后勤部
**<dl></dl>:表示列表的范围
**在dl里面 <dt></dt>:上层内容
**在dl里面 <dd></dd>:下层内容
-代码：
<dl>
<dt>重庆大学</dt>
<dd>财务部</dd>
<dd>人事部</dd>
<dd>后勤部</dd>
</dl>
-想要在页面上显示：
1.财务处
2.人事部
3.后勤部
a.财务处
b.人事部
c.后勤部
i.财务处
ii.人事部
iii.后勤部
**<ol></ol>: 有序列表的范围
-属性 type：设置排序的方式：1（默认） a i
**在ol标签里面<li>具体内容</li>
-代码：
<ol>
<li>财务处</li>
<li>人事部</li>
<li>后勤部</li>
</ol>
-想要在页面上显示：
特殊符号（方框）财务部
特殊符号（方框）人事部
**<ul></ul>:无序列表范围
属性：type:空心圆circle、实心圆disc（默认）、实心方块square
在ul标签里面 <li> </li>
-代码：
<ul>
<li>财务处</li>
<li>人事部</li>
<li>后勤部</li>
</ul>
重庆大学
财务处
人事部
后勤部
**<dl></dl>:表示列表的范围
**在dl里面 <dt></dt>:上层内容
**在dl里面 <dd></dd>:下层内容
-代码：
<dl>
<dt>重庆大学</dt>
<dd>财务部</dd>
<dd>人事部</dd>
<dd>后勤部</dd>
</dl>
-想要在页面上显示：
1.财务处
2.人事部
3.后勤部
a.财务处
b.人事部
c.后勤部
i.财务处
ii.人事部
iii.后勤部
**<ol></ol>: 有序列表的范围
-属性 type：设置排序的方式：1（默认） a i
**在ol标签里面<li>具体内容</li>
-代码：
<ol>
<li>财务处</li>
<li>人事部</li>
<li>后勤部</li>
</ol>
-想要在页面上显示：
特殊符号（方框）财务部
特殊符号（方框）人事部
**<ul></ul>:无序列表范围
属性：type:空心圆circle、实心圆disc（默认）、实心方块square
在ul标签里面 <li> </li>
-代码：
<ul>
<li>财务处</li>
<li>人事部</li>
<li>后勤部</li>
</ul>
代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--列表标签--> <dl> <dt>重庆大学</dt> <dd>财务部</dd> <dd>人事部</dd> <dd>后勤部</dd> </dl> <hr/> <!--有序列表--> <ol type="a"> <li>财务处</li> <li>人事部</li> <li>后勤部</li> </ol> <hr/> <!--无序列表--> <ul type="circle"> <li>财务处</li> <li>人事部</li> <li>后勤部</li> </ul> </body> </html>
5、图像标签(****)
*<img src="图片路径">
-属性：
src:图片的路径
width:图片的宽度
height:图片的宽度
alt：图片上显示的文字。把鼠标移动到图片上，停留片刻显示内容
注：这个alt属性不常用，因为有些浏览器不支持（没有效果）
-属性：
src:图片的路径
width:图片的宽度
height:图片的宽度
alt：图片上显示的文字。把鼠标移动到图片上，停留片刻显示内容
注：这个alt属性不常用，因为有些浏览器不支持（没有效果）
代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <img src="事务.jpg"width="400"height="300"alt="这是图片的文字"> </body> </html>
6、路径的介绍
*分类：两类
**绝对路径：E:\java\传智播客_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day01_html\JavaWeb视频教程_day1\07-路径的介绍.avi
**相对的路径： 一个文件相对于另外一个文件的位置
三种：
1、html文件和图片文件在同一个目录下：直接写文件名称
2、图片在html的下层目录
E:\OneDrive\java\五、javaWeb\1、html\ Html_Note.html
E:\OneDrive\java\五、javaWeb\1、html\ img\事务.jpg
在html中使用图片, Html_Note.html和img在一个路径下
即：img\事务.jpg
3、图片在html的上层目录
E:\OneDrive\java\五、javaWeb\ 1、html\Html_Note.html
E:\OneDrive\java\五、javaWeb\ 事务.jpg
html所在的目录和图片是一个目录
-图片和html文件是什么关系？
-图片在html的所在目录的上层目录：五、javaWeb
-怎么表示这种上层路径？../
../就表示：五、javaWeb 这个目录
../ 事务.jpg 这就是在html中用图片的路径表示方法。
-表示上层的上层：../../
**绝对路径：E:\java\传智播客_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day01_html\JavaWeb视频教程_day1\07-路径的介绍.avi
**相对的路径： 一个文件相对于另外一个文件的位置
三种：
1、html文件和图片文件在同一个目录下：直接写文件名称
2、图片在html的下层目录
E:\OneDrive\java\五、javaWeb\1、html\ Html_Note.html
E:\OneDrive\java\五、javaWeb\1、html\ img\事务.jpg
在html中使用图片, Html_Note.html和img在一个路径下
即：img\事务.jpg
3、图片在html的上层目录
E:\OneDrive\java\五、javaWeb\ 1、html\Html_Note.html
E:\OneDrive\java\五、javaWeb\ 事务.jpg
html所在的目录和图片是一个目录
-图片和html文件是什么关系？
-图片在html的所在目录的上层目录：五、javaWeb
-怎么表示这种上层路径？../
../就表示：五、javaWeb 这个目录
../ 事务.jpg 这就是在html中用图片的路径表示方法。
-表示上层的上层：../../
代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路径的介绍</title> </head> <body> <!--第一种在同一个目录--> <img src="事务.jpg"width="400"height="300"> <!--第二种图片在下层目录--> <img src="img\事务.jpg"width="400"height="300"> <!--第三种图片在上层目录--> <img src="../事务.jpg "width="400"height="300"> </body> </html>
7、案列一：列表标签的使用
注意：标签里面可以嵌套标签，所以简单的实现一个页面。
代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--添加一张图片--> <img src="images/list_header.jpg"width="1500"height="700"><br/> <!--添加图片和文字组合形成的列表，标签可以嵌套--> <dl> <dt><img src="images/列表图片1.jpg"width="200"height="50"><dt> <dd><font size="5">包裹与文件的取件和派送服务。</font><dd> </dl> <hr/> <dl> <dt><img src="images/列表图片2.jpg"width="200"height="50"><dt> <dd><font size="5">国际空运、国际海运、公路运输和铁路货运。</font><dd> </dl> <hr/> <dl> <dt><img src="images/列表图片3.jpg"width="200"height="50"><dt> <dd><font size="5">利用我们的全球网络和对当地的洞察提供全面的服务，为您的整个供应链创造价值。</font><dd> </dl> <hr/> </body> </html>
8、超链接标签(*****)
超链接
*连接资源(****)
<a href="连接到资源的路径">显示在页面上的内容</a>
属性：
href：连接到资源的路径
target：设置打开的方式，默认是在当前页打开网页
_blank:在新窗口打开
_self:在当前页打开
当超链接不需要打开任何的地址，在href里面加#
<a href="#">这是一个超链接2</a>
*连接资源(****)
<a href="连接到资源的路径">显示在页面上的内容</a>
属性：
href：连接到资源的路径
target：设置打开的方式，默认是在当前页打开网页
_blank:在新窗口打开
_self:在当前页打开
当超链接不需要打开任何的地址，在href里面加#
<a href="#">这是一个超链接2</a>
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超链接标签</title> </head> <body> <!--演示超链接标签——连接资源--> <a href="hello.html" target="_blank">这是一个超连接</a><br/> <a href="#">这是一个超链接2</a> </body> </html>*定位资源
**如果想要定位资源：定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>
**引入一个标签 pre:原样输出
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超链接标签二</title> </head> <body> <!--演示定位资源--> <a name="top">顶部</a> <pre> 长恨歌 唐代：白居易 汉皇重色思倾国，御宇多年求不得。 杨家有女初长成，养在深闺人未识。 天生丽质难自弃，一朝选在君王侧。 回眸一笑百媚生，六宫粉黛无颜色。 春寒赐浴华清池，温泉水滑洗凝脂。 侍儿扶起娇无力，始是新承恩泽时。 云鬓花颜金步摇，芙蓉帐暖度春宵。 春宵苦短日高起，从此君王不早朝。 承欢侍宴无闲暇，春从春游夜专夜。 后宫佳丽三千人，三千宠爱在一身。 金屋妆成娇侍夜，玉楼宴罢醉和春。 姊妹弟兄皆列土，可怜光彩生门户。 遂令天下父母心，不重生男重生女。 骊宫高处入青云，仙乐风飘处处闻。 缓歌慢舞凝丝竹，尽日君王看不足。 渔阳鼙鼓动地来，惊破霓裳羽衣曲。 九重城阙烟尘生，千乘万骑西南行。 翠华摇摇行复止，西出都门百余里。 六军不发无奈何，宛转蛾眉马前死。 花钿委地无人收，翠翘金雀玉搔头。 君王掩面救不得，回看血泪相和流。 黄埃散漫风萧索，云栈萦纡登剑阁。 峨嵋山下少人行，旌旗无光日色薄。 蜀江水碧蜀山青，圣主朝朝暮暮情。 行宫见月伤心色，夜雨闻铃肠断声。 天旋地转回龙驭，到此踌躇不能去。 马嵬坡下泥土中，不见玉颜空死处。 君臣相顾尽沾衣，东望都门信马归。 归来池苑皆依旧，太液芙蓉未央柳。 芙蓉如面柳如眉，对此如何不泪垂。 春风桃李花开日，秋雨梧桐叶落时。 西宫南内多秋草，落叶满阶红不扫。 梨园弟子白发新，椒房阿监青娥老。 夕殿萤飞思悄然，孤灯挑尽未成眠。 迟迟钟鼓初长夜，耿耿星河欲曙天。 鸳鸯瓦冷霜华重，翡翠衾寒谁与共。 悠悠生死别经年，魂魄不曾来入梦。 临邛道士鸿都客，能以精诚致魂魄。 为感君王辗转思，遂教方士殷勤觅。 排空驭气奔如电，升天入地求之遍。 上穷碧落下黄泉，两处茫茫皆不见。 忽闻海上有仙山，山在虚无缥渺间。 楼阁玲珑五云起，其中绰约多仙子。 中有一人字太真，雪肤花貌参差是。 金阙西厢叩玉扃，转教小玉报双成。 闻道汉家天子使，九华帐里梦魂惊。 揽衣推枕起徘徊，珠箔银屏迤逦开。 云鬓半偏新睡觉，花冠不整下堂来。 风吹仙袂飘飘举，犹似霓裳羽衣舞。 玉容寂寞泪阑干，梨花一枝春带雨。(阑 通：栏；飘飘 一作：飘飖) 含情凝睇谢君王，一别音容两渺茫。 昭阳殿里恩爱绝，蓬莱宫中日月长。 回头下望人寰处，不见长安见尘雾。 惟将旧物表深情，钿合金钗寄将去。 钗留一股合一扇，钗擘黄金合分钿。 但教心似金钿坚，天上人间会相见。 临别殷勤重寄词，词中有誓两心知。 七月七日长生殿，夜半无人私语时。 在天愿作比翼鸟，在地愿为连理枝。 天长地久有时尽，此恨绵绵无绝期。 </pre> <a href="#top">回到顶部</a> </body> </html>
9、表格标签(*****很重要的标签)
-可以对数据进行格式化，是数据显示更加清晰-表示表格的范围：<table></table>
-属性： 1、border:表格的线的粗细
2、bordercolor:线的颜色
3、cellspacing:单元格之间的距离
4、width:表格的宽度
5、height:表格的高度
-表格里表示每一行：<tr></tr>
-每一行里表示每一个单元格：<td></td>(普通)、<th></th>(自动居中和加粗)
表格和单元格都有的属性：align:设置一行或者单元格内容的位置left center right
-表格的标题：<caption></caption>
操作技巧：
-先看多少行写多少个<tr></tr>
-数每行有多少个单元格写多少个<td></td>
练习：写一个三行四列的表格：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8" />
<title>table标签及属性</title>
</head>
<body>
<body>
<!--基本语法和属性-->
<table border="1" bordercolor="red" cellspacing="0"
width="400" height="200" align="center">
<caption>人员信息</caption>
<tr align="center">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr align="center">
<td>李四</td>
<td>男</td>
<td>34</td>
</tr>
<tr>
<td align="right">赵琪</td>
<td align="right">女</td>
<td align="right">25</td>
</tr>
</table>
</body>
</html>
-合并单元格：
-rowspan
跨行合并单元格：1、看多少行2、看每行多少个单元格
练习写这样一个表格：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8" />
<title>跨行合并单元格</title>
</head>
<body>
<!--跨行合并单元格-->
<table border="1" bordercolor="green" cellspacing="0"
width="400" height="100" align="center">
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>zhangsan</td>
<td>b</td>
<td rowspan="3">25</td>
</tr>
<tr>
<td>lisi</td>
<td>b</td>
</tr>
<tr>
<td>zhaoqi</td>
<td>g</td>
</tr>
</table>
</body>
</html>
-colspan
跨列合并单元格：1、看多少行2、看每行多少个单元格
练习写这样一个表格：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8" />
<title>跨列合并单元格</title>
</head>
<body>
<!--跨列合并单元格-->
<table border="1" bordercolor="green" cellspacing="0"
width="400" height="100" align="center">
<tr>
<th colspan="3">人员信息</th>
</tr>
<tr>
<td>zhangsan</td>
<td>b</td>
<td>30</td>
</tr>
<tr>
<td>lisi</td>
<td>b</td>
<td>45</td>
</tr>
<tr>
<td>zhaoqi</td>
<td>g</td>
<td>24</td>
</tr>
</table>
</body>
</html>
其实，-rowspan和-colspan都是指一个单元格跨越了多少行或者多少列
在哪一行去跨列，就在那行的第一列这个单元格上去跨行
在哪一列去跨行，就在那列的第一行这个单元格上去跨列
10、表单标签(****最最重要的标签****)
* 可以提交数据到服务器，这个过程可以使用表单标签来实现
一、定义表单范围以及属性
<form action="">定义一个表单的范围</form>
<form></form>的属性：
**action:提交到的地址，默认是提交到当前页面
**method:表单提交的方式
-常用的两种 get和post,默认是get请求
**enctype:一般的请求不需要这个属性，做文件上传的时候需要设置这个属性（在讲文件上传的时候会讲到）
**关于表单提交的面试题：get和post的区别
1、get请求地址栏会携带提交的数据，post不会携带（在请求体里面。在httpp协议中将会讲到）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post 没有限制
二、输入项：可以输入内容或者选择内容的部分
*大部分的输入项使用<input type="输入项的类型" name="">
*注意输入项里都要有一个name属性
**普通输入项：<input type="text" name="">
**密码输入项：<input type="password" name="" >
**单选输入项：<input type="radio" name="" value="">
**复选输入项：<input type="checkbox" name="" value="">
***单选和复选的特点：
1、在里面需要有属性name
2、name的属性值必须相同
3、必须有一个value值
属性：checked="checked"实现默认选中的属性
**文件输入项：<input type="file" name="" id="">
在后面讲上传的时候用到
**下拉输入项（不是input输入项）：
<select name="birth" id="">
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
</select>
默认选择：selected="selected"
**文本域：<textarea name="" id="" cols="30" rows="10"></textarea>
**隐藏项（不会显示在页面上，但是存在于html代码里面）：<input type="hidden" name="">
**提交按钮：
<input type="submit" value="注册">
注意提交的参数形式类似于map集合key是标签的name属性值，value是输入的值
**使用图片提交<input type="image" src="图片的路径" alt="">
**重置按钮：回到输入项的初始状态<input type="reset" value="">
**普通按钮：（和js一起使用讲解）
<input type="button" value="">
**
使用表单标签实现简单的注册页面：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单标签</title>
</head>
<body>
<font size="5" color="green" align="center">欢迎注册生活网!</font><br>
<form action="hello.html" method="post" >
手机号码：<input type="text" name="text" id=""><br>
创建密码：<input type="password" name="password" value=""><br>
性别：<input type="radio" name="gender" value="1" checked="checked">男<input type="radio" name="gender" value="1">女<br>
爱好：<input type="checkbox" name="hoby" value="2" id="" checked="checked">羽毛球<input type="checkbox" name="hoby" value="2" id="">乒乓球<input type="checkbox" name="hoby" value="2" id="">网球<br>
文件：<input type="file" name="" id=""><br>
出生年：<select name="birth" id="">
<option value="0">请选择</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
</select><br><br>
自我描述：<textarea name="textarea" id="" cols="30" rows="10">
</textarea><br>
隐藏项：<input type="hidden" name=""><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" name="button" value="普通按钮"><br><br>
<input type="image" src="submitimg.jpg" alt="">
</form>
</body>
</html>
使用表格标签加表单标签实现较整齐的注册页面：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册</title>
</head>
<body>
<form action="hello.html" method="post">
<table width="400" height="500">
<tr>
<th colspan="2"><h2>注册账号</h2></th>
</tr>
<tr>
<td align="right">邮箱：</td>
<td><input type="text" name="text"></td>
</tr>
<tr>
<td> </td>
<td>你可以使用<a href="#">账号</a>注册或者使用<a href="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">创建密码：</td>
<td><input type="password" name="psd" ></td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td><input type="text" name="realname" ></td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="gender" value="woman">女<input type="radio" name="gender" value="man">男
</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="0">请选择</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
</select> 年 <select name="month">
<option value="0">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 月 <select name="day">
<option value="0">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> 日
</td>
</tr>
<tr>
<td align="right">我现在：</td>
<td>
<select name="now">
<option value="0">请选择</option>
<option value="work">已经工作</option>
<option value="study">还在上学</option>
<option value="sports">想打羽毛球</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><img src="checkimg.jpg"><a href="#">看不清换一张?</a></td>
</tr>
<tr>
<td align="right">验证码：</td>
<td><input type="text" name="text" id=""></td>
</tr>
<tr>
<td> </td>
<td><input type="image" src="submitimg.jpg" ></td>
</tr>
</table>
</form>
</body>
</html>
11、html中的其他常用标签
b:加粗
s:删除
u:下划线
i:斜体
pre:原样输出
sub:下标
sup:上标
p:段落标签 比br标签多一行
====css一直使用的标签
div:自动换行
span：在一行显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<b>我是粗体</b><br>
<s>我是删除线</s><br>
<u>我是下划线</u><br>
<i>我是斜体</i><br>
<hr>
<pre>
原样输出
public static void main(String[] args)
{
System.out.println("hello");
}
</pre>
<hr>
2<sub>3</sub>
<br>
2<sup>3</sup>
<hr>
<p>我是段落</p>
我是段落<br>
<hr>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<hr>
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
</body>
</html>
12、html的头标签的使用
html分head和body标签head就是头标签
*title标签：表示在浏览器窗口显示的内容
*meta标签：设置页面的一些相关内容
<meta name="keywords" content="计算机">
<meta http-equiv="refresh" content="4,url=hello.html">
*base标签:设置超链接的基本设置
-可以统一设置超链接的打开方式
<base target="_blank">
*link标签：引入外部的文件
在将css的时候可以使用link标签来引入css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--早期可以通过关键字来获取该页面的内容-->
<meta name="keywords" content="计算机">
<!--设置页面自动跳转：<meta http-equiv="refresh" content="4,url=hello.html">-->
<!--将该页面所有的超链接的打开方式都设置为在锌窗口打开-->
<base target="_blank">
<title>头标签的使用</title>
</head>
<body>
<a href="hello.html">超链接1新窗口打开</a>
<a href="hello.html">超链接2新窗口打开</a>
<a href="hello.html">超链接3新窗口打开</a>
</body>
</html>
13、框架标签的使用
* <frameset>
-cols：按照列进行划分
** <frameset cols="80,*">//把页面划分成两列，第一列宽度80
-rows：按照行进行划分
** <frameset rows="80,*">//把页面划分成两行，第一行高度80
*<frame>
_具体的显示页面
-<frame name="" src="">
***注意：使用框架标签的时候不能写在body里面，使用了框架标签需要把body标签删除
解析：
<frameset rows="80,*"> 将页面分成两行
<frame name="top" src="hello.html"> 第一行显示页面hello.html
<frameset cols="300,*"> 将第二行划分成两列
<frame name="left" src="a.html">将左边的列显示a.html
<frame name="right" > 将右边的列的名字设置为right
</frameset>
</frameset>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<frameset rows="80,*">
<frame name="top" src="hello.html">
<frameset cols="300,*">
<frame name="left" src="a.html">
<frame name="right" >
</frameset>
</frameset>
</html>
a.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<h1>超链接目录</h1><br>
<a href="10-1table.html" target="right">人员信息</a><br>
<a href="10-2table.html" target="right">跨列表格</a><br>
<a href="10-3table.html" target="right">跨行表格</a><br>
</body>
</html>
效果：
