这篇博客主要介绍了HTML的基础知识，包括HTML的定义、规范和操作思想。重点讲解了常用标签，如文字标签、注释标签、标题、列表、图像、超链接和表格。特别是表格和表单标签，表单是HTML中非常重要的部分，用于数据提交到服务器。此外，还提到了路径的使用和头标签的功能。
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>
（2）、<body>显示在页面的相关信息都写在body里面</body>
3、html的标签有开始标签和结束标签
- <head></head>
4、html的代码不区分大小写的
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>
代码：
<!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属性不常用，因为有些浏览器不支持（没有效果）
代码：
<!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中用图片的路径表示方法。
-表示上层的上层：../../
代码：
<!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>
<!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>效果：
内容总结：
扫一扫
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
