HTML部分
笔记是为了方便以后自己复习所记录
笔记内容是根据尚硅谷javaweb教程来的
1、HTML简介
- Hyper Text Markup Language(超文本标记语言) 简写：HTML
- HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等。
2、创建HTML
<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="zh_CN"> <!--heml标签表示html的开始 lang=“zh_CN"表示中文 html标签中一般分为两个部分，分别是：head和body -->
<head>
<meta charset="UTF-8"><!--表示当前页使用UTF -->
<title>标题</title>
</head>
<body>
hello
</body>
</html>
==注：==java文件需要先编译，再由java虚拟机跑起来。但HTML文件它不需要编译，直接由浏览器进行解析执行
3、HTML文件的书写规范
<html> 表示整个html页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body是页面的主体内容
页面主体内容
</body>
</html> 表示整个html页面的结束
html中的注释：
4、HTML标签介绍
-
标签的格式：
- <标签名>封装的数据</标签名>
-
标签名大小写不敏感(大写小写都行)
-
标签拥有自己的属性
- 分为基本属性 ：bgcolor=“red” 可以修改简单的样式效果
- 事件属性：οnclick=“alert(‘你好’)”； 可以直接设置事件响应后的代码
-
标签又分为，单标签和双标签
-
单标签格式：<标签名/>
-
常见的单标签 <br/> 换行标签 <hr/> 水平线 -
双标签格式：<标签名> …封装的数据…</标签名>
-
5、标签的语法
一下部分即使这样写，交给浏览器之后，显示的页面是和正常语法一样的
为什么呢？
是因为浏览器帮你解决了语法问题,帮你修复标签中的错误，但是语法不仅仅只要浏览器看得懂就行了，还得让别人理解，你以后看自己的代码能理解，所以规范格式
<!--标签不能交叉嵌套 -->
正确：<div><span>早安，世界</span></div>
错误<div><span>晚安，中国/div></span>
<!--标签必须正确关闭-->
正确：<div>你好/div>
错误：<div>我不好，好困啊！
正确：<br/>
错误：<br>
<!--属性必须有值，属性值必须加引号-->
正确：<font color="blue">认真、努力、刻苦</font>
错误：<font color=blue>认真、努力、刻苦</font>
误：<font color>认真、努力、刻苦</font>
<!--注释不能嵌套-->
错误<!--nihao<!-- aaa-->-->
6.一些常用标签
6.1Font字体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 字体标签
需求：在网页上显示“现在每一个想要坚持下去的念头，都是未来向你的求救” ，并修改字体为宋体，颜色是红色
Font标签是字体标签，它可以用来修改文本的字体、颜色、大小(尺寸)
color属性修改颜色
face属性修改字体
size属性修改文本大小
-->
<font face="宋体" color="red" size="18">现在每一个想要坚持下去的念头，都是未来向你的求救</font>
</body>
</html>
6.2特殊字符
三个常用的特殊字符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--特殊字符
需求：把<br>换行标签 变成文本 转化成字符显示在页面上
常用的特殊字符：
< : <
> : >
空格 :
-->
换行标签是<br>
中间 有5个空格啊！
</body>
</html>
6.3标题标签
h1到h6都是标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签
h1-h6都是标题标签
align属性：对齐属性
left 左对齐(默认情况下)
right 右对齐
center 居中
-->
<h1 align="left">标题1</h1> <!-- 标题标签默认的左对齐-->
<h2 align="center">标题2</h2> <!--标签在中间-->
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
6.4超链接（重点中的重点)
在网页中所有点击之后可以跳转的都是超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- a标签是超链接
href属性：设置超链接的地址
target属性：设置新页面出现的方式
_self 表示在当前页面跳转到超链接中的地址
——blank 表示新建一个页面跳转到超链接中的地址
-->
<a href="www.baidu.com">百度</a> <br/>
<a href="www.baidu.com" target="_blank">百度</a><br/>
<a href="Dem01HelloWord.html" target="_self">hello world</a> <br/>
<a href="Dem01HelloWord.html" target="_blank">hello world</a> <br/>
<a href="Dem01HelloWord.html" target="_top">hello world</a> <br/>
<a href="Dem01HelloWord.html" target="_parent">parent</a> <br/>
</body>
</html>
6.5列表标签
无序列表(Unordered list)标签：ul
列表项(list item):li
有序列表(order list):ol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--列表标签
ul无序列表中有type属性
当<ul type="none"></ul>时可以去掉无序列表前面的点(除非浏览器不兼容这个功能
-->
<ul type="none">
<li>湖北</li>
<li>武汉市</li>
<li>洪山区</li>
<li>南李路</li>
<li>狮子街道</li>
</ul>
<ol>
<li>湖北</li>
<li>武汉市</li>
<li>洪山区</li>
<li>南李路</li>
<li>狮子街道</li>
</ol>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>湖北</li>
<li>武汉市</li>
<li>洪山区</li>
<li>南李路</li>
<li>狮子街道</li>
</ul>
<ol>
<li>湖北</li>
<li>武汉市</li>
<li>洪山区</li>
<li>南李路</li>
<li>狮子街道</li>
</ol>
</body>
</html>
6.6img标签
- img标签时图片标签，用来显示图片
- src属性可以设置图片的路径
- width设置图片的宽度
- height设置图片的高度
- border设置图片的边框
- alt属性，用来设置当指定路径找不到图片是，用来代替显示的文本内容
- 在javaSE中路径也分为相对路径和绝对路径
- 相对路径：从工程名喀什算
- 绝对路径：盘:/目录/文件名
- 在web中路径分为相对路径和绝对路径两种
- 相对路径：
- . 表示当前文件所在的目录
- … 表示当前文件所在的上一级目录
- 文件名 表示当前文件所在目录的文件，相当于./文件名 ./可以省略
- 绝对路径：
- 正确格式是：http://ip:port/工程名/资源路径
- 错误格式是：盘符:/目录/文件名
- 相对路径：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- img标签时图片标签，用来显示图片 src属性可以设置图片的路径 width设置图片的宽度 height设置图片的高度 border设置图片的边框 alt属性，用来设置当指定路径找不到图片是，用来代替显示的文本内容 --> <img src="../image/千反田.png" width="400" height="500" border="1"> <img src="../imag/千反田.png" width="400" height="500" alt="千反田爱瑠"> <img src="../image/千反田.png" width="400" height="500"> <img src="../image/千反田.png" width="400" height="500"> <img src="../image/千反田.png" width="400" height="500"> <img src="../image/千反田.png" width="400" height="500"></body></html>
6.7table标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<!--
需求：做一个代表头、三行、三列的表格，并且显示边框
修改表格的宽度、高度、表格的对齐方式，单元格间距
html中是行tr和单元格td
table 表格标签
border属性表格的边框(参数表示表格边框的“厚度”，几个像素点)
width表格的宽度
height表格的高度
align 设置表格相对页面的位置
cellspacing 设置单元格之间的间距 注：当cellspacing的值为0时，不是指单元格山上的线完全重合，而是间距为0，紧挨着的两条线
tr（table row）行标签
th（table head）表头标签
td 单元格标签
align设置单元格文本对其方式
b 是加粗标签
-->
<table align="center" border="1" width="300" height="400" cellspacing="0">
<tr>
<td align="center">1</td>
<th>2</th>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
6.8表格跨行跨列
编写html，写出这样的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>colspanrowspan</title>
</head>
<body>
<table width="400" height="500" cellspace="0" border="1">
<tr>
<td colspan="2">1和2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">6和11</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</body>
</html>
6.9iframe框架标签(内嵌窗口)
- iframe是双标签
- 属性src的值是具体页面的路径
- width、height设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
好好学习，坚持就是胜利，别碰手机，自制力！不明白吗？<br/>
<br/>hfasfho
<!--iframe标签可以在页面上开辟一小个区域显示单独的页面-->
<iframe src="./Demo02font.html" width="600" height="500" name="hahahah"></iframe>
<ul type="none">
<li><a href="../image/千反田.png" target="hahahah" width="600" height="500">千反田啊！</a></li>
<li><a href="Demo02font.html" target="hahahah">Demo02Font</a></li>
</ul>
</body>
</html>
6.10form表单
form标签就是表单
-
input是单标签
-
input type=text 是文本输入框 value属性设置文本默认值 文本框的长度可以依据代码限制也可以根据属性length限制
-
input type=password 是密码输入框
-
input type=radio 是单选框 添加name属性构成分组，从而实现单选 checkec=checked表示默认选项
-
input type=checkbox 多选框
-
input type=reset 重置按钮
-
input type=submit 提交按钮
-
input type=file 文件上传域
-
input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与就可以使用隐藏域(提交的同时交给服务器)
-
select 标签是下拉列表框(select是双标签)
-
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
-
textarea 表示多行文本输入框 rows 显示行 cols每行几个 （起始标签和结束标签中的内容是默认值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<table align="center">
<form>
<h1 align="center">用户注册</h1>
<tr>
<td> username:</td>
<td><input type="text" value="默认值"/></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" vlue="abc"/></td>
</tr>
<tr>
<td>confirm password:</td>
<td> <input type="password" vlue="abc"/></td>
</tr>
<tr>
<td>sex:</td>
<td><input type="radio" name="1" checked="checked"/>男 <input type="radio" name="1"/>女</td>
</tr>
<tr>
<td> 兴趣爱好:</td>
<td> <input type="checkbox" "/>c++ <input type="checkbox" />java <input type="checkbox" />python</td>
</tr>
<tr>
<td>国籍:</td>
<td> <select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
<option>英国</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td> <textarea cols="20" rows="10" >我的默认值在这里啊！</textarea></td>
</tr>
<tr>
<td><input type="reset"></td>
<td><input type="submit"></td>
</tr>
</form>
</table>
<!--<!– <input type="button" value="我是一个按钮"/><br/>–>-->
<!-- <input type="file" hidden="hidden"/>-->
<!-- <input type="hidden" value="safasdf"/>-->
</html>
实现截图：
6.11form表单的提交
- action属性设置提交的服务器地址
- method属性设置提交的方式GET(默认值)或POST
基于6.10的表单,当
<form action="localhost:8080" method="get"></form>
时，提交表单
显示的url是：
http://localhost:8080/ 服务器地址
? 分隔符
sex=on 请求参数（表单的信息）
表单提交的时候，数据没有发送发送给服务武器的三种情况：
- 表单项没有name属性值（很明显对针对我6.10中的html代码除了sex命名了，其余一概没有，由于他不浏览器不知道我要提交的东西叫什么，他就没提交，所以，每个需要提交的表单项都需要命名）
- 单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
- 表单项不在提交的form标签中
当我在每个会提交的表单项中都添加了name属性之后
url变为
http://localhost:8080/
?username=name&confirm=psd&sex=on&hobby=on&hobby=on&country=%E4%B8%AD%E5%9B%BD&desc=asfhalskj
//貌似，我password漏了，如何sex是on???hobby也是on？country是？
- 当我在单选项和多选项的每个表单项都添加了value值
username=yh
&password=psd
&confirm=psd
&sex=%E7%94%B7
&hobby=java&hobby=python
&country=%E4%B8%AD%E5%9B%BD
&desc=%E7%88%B1%E5%AD%A6%E4%B9%A0%E7%9A%84%E5%A5%BD%E5%AD%A9%E7%BA%B8
我发现，中文都被转义了？
method属性的方法
-
get请求的特点：
-
浏览器地址栏中的地址是：action属性(即提交的地址url)[+？+请求参数],请求参数的格式是：name=value&name=vlaue
-
不安全
-
他有数据的长度限制
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zIzfpu8q-1622127446058)(…/AppData/Roaming/Typora/typora-user-images/image-20210527194616049.png)]
- post请求的特点：
- 浏览器地址栏中只有action属性值
- 相对于get请求要安全
- 理论上没有数据长度的限制
6.12other
其他标签
- div标签 默认独占一行
- span标签 它的长度是封装数据的长度
- p段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不再空)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>other</title>
</head>
<body>
<div>div标签1 </div>
<div>div标签2 </div>
<span>span标签3 </span>
<span>span标签4</span>
<p>p标签1</p>
<p>p标签2</p>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ADveYnwM-1622127446059)(../AppData/Roaming/Typora/typora-user-images/image-20210527195507135.png)]](https://img-blog.csdnimg.cn/20210527230315433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjMyNDE0,size_16,color_FFFFFF,t_70)
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
