前端-HTML
HTML文件不需要编译,直接由浏览器进行解析执行
HTML的标签说明
- HTML标签用两个尖括号"<>"括起来
- HTML标签一般是双标签,如
<b>和/<b/>
前一个标签是起始标签,后一个标签为结束标签 - 两个标签之间的文本是html元素的内容
- 某些标签称为"单标签"",因为它只需单独使用就能完整地表达意思,如
<br/> <hr/>
- HTML元素指的是从开始标签到结束标签的所有代码。
HTML标签使用细节
- 标签不能交叉嵌套
- 标签必须正确关闭
- 注释不能嵌套
- html语法不严谨。有时候标签不闭合,属性值不带""也不报错
常用的标签
字体标签
- color属性修改颜色
- face属性修改字体
- size 属性修改文本大小
<font color="#dc143c" size="7" face="宋体">北京</font>
字符实体
常用的特殊字符:
5. < : <
6. > : >
7. 空格:
标签标题
- h1 - h6都是标题标签 h1 :最大h6 :最小
- align:属性是对齐属性
- left:左对齐(默认)
- center :居中
- right : 右对齐
超链接标题
- a标签是超链接
- href属性设置连接的地址
- target属性设置哪个目标进行跳转
- _self :表示当前页面(默认值) 即使用当前页替换跳转页
- _blank :表示打开新页面来进行跳转
- 在跳转时,如果触发了事件或函数,返回的是false就会放弃跳转
无序列表
ul/li基本语法
<body>
<!--
ul :表示无序列表
li :列表项
type属性:指定列表项前的符号
-->
<ul type="属性值">
<li><列表内容</li>
<li><列表内容</li>
......
</ul>
</body>
有序列表
ol/li基本语法
<body>
<!--
ol :表示有序列表
li :列表项
type属性:指定列表项前排序方式
type设定数目款式,其值有五种,默认为start="1”
i可以取以下值中的任意一个:
1 阿拉伯数字1,2,3,...
a 小写字母a,b,C,.….
A 大写字母A,B,C,...
i 小写罗马数字i, ii, iii, ...
I 大写罗马数字Ⅰ,II,III, ...
-->
<ol type="属性值">
<li></li>
<li></li>
......
</ol>
</body>
图像标签
<body>
<!--
img:标签是图片标签,用来显示图片
src:属性可以设置图片的路径
width:属性设置图片的宽度
height:属性设置图片的高度
border:属性设置图片边框大小
alt:属性设置当指定路径找不到图片时,用来代替显示的文本内容
-->
<img src="图片路径" width="100"></br>
表格标签
<body>
<!--
说明:
table: 标签是表格标签
border: 设置表格标签(表格线粗度)
bordercolor: 表格线颜色
cellspacing: 设置单元格间距
bgcolor: 背景颜色
align: 设置表格相对于页面的对齐方式
width: 设置表格宽度
height: 设置表格高度
tr: 是行标签 th: 是表头标签 td: 是单元格标签
align: 设置单元格文本对齐方式 b: 是加粗标签
px: 表示像素
-->
<table border="1" cellspacing="1" bgcolor="#f0f8ff" bordercolor="blue">
<tr>
<th>表头1</th>
<th>表头2</th>
...
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
...
</tr>
<tr>
...
</tr>
</table>
</body>
跨行跨列标签
<body>
<!--
说明:
合并列: colspan="列数"
合并行: rowspan="行数"
cellspacing :指定单元格间的空隙大小:0表示没有空隙
bordercolor:指定表格边框的演示
border:表格边框
width:表格的宽度
-->
<table>
<tr>
<!--合并前3列-->
<td colspan="3">第1行第1列</td>
</tr>
<tr>
<!--合并前2行-->
<td rowspan="2">第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
表单标签
- action属性设置提交的服务器地址
- method属性设置提交的方式GET(默认值)或POST
- 表单提交的时候,数据没有发送给服务器的三种情况:
(1)表单项没有name属性值
(2)单选、复选(下拉列表中的option标签)都需要添加 value属性,以便发送给服务器
(3)表单项不在提交的form标签中
Get 和Post 的区别简述
- Get请求数据是显示在浏览器地址栏
- Get请求不安全的,而且数据是有长度限制的,建议有重要信息,不要使用Get
- Post请求数据是和http传输的,在http体中,相对安全
- Post传输的数据长度理论上没有限制,但是在实际的应用中,也不能太大
注意
- 表单所有标签必须带上name属性,否则后端接收不到提交的数据
radio、checkbox、select
提交的数据是 value 属性text、password
提交的数据是 value 属性,可以通过 value 属性 设置 默认值submit、reset
提交的数据是 value 属性,可以通过 value 属性 设置 按钮文本textarea
不用设置 value 属性- 单选:
request.getParameter("name属性");
返回 字符串 - 多选:
request.getParameterValues("name属性");
返回 字符串数组
- 输入框
<input type="text" name="username" >
输入的内容保存在value中 - 密码框
<input type="password" name="pwd">
输入的内容保存在value中 - 单选框
<input type="radio" name="gender" value="male">
- 多选框
<input type="checkbox" name="sport" value="lq">
5.下拉列表框 <select name="city">
<option>--请选中--</option>
<option value="wh">武汉</option>
</select>
- 多行文本输入框
<textarea name="comment" rows="4" cols="25">
- 文件上传按钮
<input type="file" name="myfile>
- 隐藏域
<input type="hidden"name="add " value="hoge@hoge.jp">
- 提交按钮
<input type="submit" value="登录>
不管是submit还是button,如果触发了事件或函数,返回的是false就会放弃提交 - 重置按钮
<input type="reset" value="重新填写">
<!--
<body>
<!--
1. form表示表单
2. action:提交到哪个页面
3. method:提交方式 ,常用get 和 post
4. input type=text 输入框
5. input type=password 密码框
6. input type=submit 提交按钮
7. input type=reset 重置按钮
为了个汉字对齐,输入全角的空格即可
多说一句: method 不写默认是get
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">
用户名:<input type="text" name="username"> <br/>
<!--把输入法切换成全角,然后中间打空格,就可以对齐-->
密 码:<input type="password" name="password"> <br/>
<input type="submit" value="登录">
<input type="reset" value="重新填写">
</form>
</body>
-->
- 一定要给input元素设置name属性,否则,数据提交不到服务器
- 注意: checkbox是复选框,如果希望是同一组,保证name属性一致
- 注意: radio是单选框,如果希望是用一组,保证name属性一致
- 注意:在checkbox select radio提交数据的时候是value属性的值
<!--
form标签就是表单
input type=text : 是文本输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked" 表示默认选中input
type=checkbox是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域
当我们要发送某些信息,而这些信息,不需要用户参与,
就可以使用隐藏域(提交的时候同时发送给服务器)
-->
<!--
select标签是下拉列表框
option标签是下拉列表框中的选项
selected="selected"设置默认选中
textarea表示多行文本输入框(起始标签和结束标签中的内容是默认值)
rows属性设置可以显示几行的高度
cols属性设置每行可以显示几个字符宽度
-->
<select name="city">
<option>--请选中--</option>
<option value="wh">武汉</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gg">广州</option>
</select><br/>
自我介绍
<textarea name="comment" rows="4" cols="25"></textarea><br/>
div标签
<!--
1. <div>标签可以把文档分割为独立的、不同的部分
2. <div>是一个块级元素。它的内容自动地开始一个新行,不需要写<br/>
style :样式
在实际的前端开发中,会存在很多div标签,div标签包含div标签
-->
hello wrold
<div>
<h3 style="color: blue"> this is a h3</h3>
<a href="http://www.baidu.com">goto baidu</a>
</div>
p标签
<body>
<!--
1.<p>标签定义段落
2. p元素会自动在其前后创建一些空白
-->
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
span标签
<!--
1. span标签是内联元素,不像块级元素(如: div标签、p标签等)有换行的效果。
2.如果不对span应用样式,span标签没有任何的显示效果
3.语法:<span>内容</span>
(1) span标签是内联元素(内嵌元素,行内元素),没有换行效果
(2)如果不对span应用样式,span标签没有任何的显示效果
(3)往往是为了单独的去控制某个关键的内容
-->
您的购物车有<span style="color: crimson;font-size: 40px" >10</span>件商品
网页的组成
浏览器访问http://localhost/hello.html 通过 http请求向后端访问,后端接收到请求后,将请求到的html文件发送回浏览器,浏览器此时解析html文件,才能判断返回的html文件是否存在问题
后端不会解析前端文件,对于后端来说,前端文件只是一个文件,后端是无法检测前端文件是对是错,并且对后端来说前端文件是对是错都无所谓
创建
HTML快捷键
项目 | Value |
---|
HTML文档类型说明
HTML常用标签
HTML标签说明
HTML标签使用细节
字体标签
<body>
<!--字体标签
应用实例1:在网页上显示北京,并修改字体为微软雅黑,颜色为蓝色。
font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
(1)color属性修改颜色
(2)face 属性修改字体
(3)size属性修改文本大小
-->
<font color="#dc143c" size="7" face="宋体">北京</font>
</body>
字符实体
在网页上显示一些特殊的符号,称为字符实体(也叫符号实体)。
<!--特殊字符应用实例;
把<hr/>变成文本 显示在页面上
常用的特殊字符:
< : <
> : >空格:
-->
<hr/>
<hr/>
zyy
</body>
标签标题
标题使用<h1> - <h6>标签进行定义。
<h1>定义最大的标题。<h6>定义最小的标题
<body>
<!--标题标签-->
<!--应用实例;演示标题 1 到标题 6 的-->
<!--h1 - h6都是标题标签h1 :最大h6 :最小-->
<!--align:属性是对齐属性-->
<!--left:左对齐(默认)-->
<!--center :居中-->
<!--right : 右对齐-->
<h1>Java</h1>
<h1 align="left">Java</h1>
<h1 align="center">Java</h1>
<h6 align="right">Java</h6>
<h6>Web</h6>
</body>
超链接标签
超链接是指从一个网页指向一个目标的链接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
<body>
<!--a标签是超链接-->
<!--href属性设置连接的地址-->
<!--target属性设置哪个目标进行跳转-->
<!--_self :表示当前页面(默认值) 即使用当前页替换跳转页-->
<!--_blank :表示打开新页面来进行跳转-->
<a href="http://bilibili.com">bilibili</a>
<br/>
<a href="http://bilibili.com" target="_self">bilibili</a>
<br/>
<a href="http://bilibili.com" target="_blank">哔哩哔哩</a>
<br/>
<!--发送邮件-->
<a href="mailto:1412634436@qq.com">联系管理员</a>
</body>
无序列表
<body>
<!--
ul :表示无序列表
li :列表项
type属性:指定列表项前的符号
-->
<ul type="circle">
<li><a href="http://www.bilibili.com">张飞</a></li>
<li>关羽</li>
<li>刘备</li>
<li>曹操</li>
<li>赵云</li>
</ul>
</body>
有序列表
<body>
<!--
ol :表示有序列表
li :列表项
type属性:指定列表项前排序方式
type设定数目款式,其值有五种,默认为start="1”
i可以取以下值中的任意一个:
1 阿拉伯数字1,2,3,...
a 小写字母a,b,C,.….
A 大写字母A,B,C,...
i 小写罗马数字i, ii, iii, ...
I 大写罗马数字Ⅰ,II,III, ...
-->
<ol type="a">
<li><a href="http://www.bilibili.com">张飞</a></li>
<li>关羽</li>
<li>刘备</li>
<li>曹操</li>
<li>赵云</li>
</ol>
</body>
图像标签
img标签可以在html页面上显示图片
<body>
<!--
img:标签是图片标签,用来显示图片
src:属性可以设置图片的路径
width:属性设置图片的宽度
height:属性设置图片的高度
border:属性设置图片边框大小
alt:属性设置当指定路径找不到图片时,用来代替显示的文本内容
相对路径:从工程名开始算
绝对路径:盘符:目录文件名
在web 中路径分为相对路径和绝对路径两种
相对路径: . 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名∶表示当前文件所在目录的文件,相当于./文件名./可以省略
绝对路径:正确格式是: http://IP地址:port/工程名/资源路径
错误格式是:盘符:/目录文件名
-->
<h1>图片标签</h1>
<!--./imgs/1.png表示当前路径下的imgs文件夹下的1.png-->
<!--在进行图片缩放时,建议指定 width 或者 height即可,浏览器会按照比例显示-->
<img src="./imgs/1.png"></br>
<img src="./imgs/1.png" width="100"></br>
<img src="./imgs/1.png" height="50" border="10"></br>
<img src="./imgs/2.png" alt="图片不见了"></br>
</body>
http://localhost:63342/html/imgs/1.png
表格标签
<body>
<!--
说明:
table: 标签是表格标签
border: 设置表格标签
width: 设置表格宽度
height: 设置表格高度
align: 设置表格相对于页面的对齐方式
cellspacing: 设置单元格间距
tr: 是行标签 th: 是表头标签 td: 是单元格标签
align: 设置单元格文本对齐方式 b: 是加粗标签
px: 表示像素
-->
<h1 align="center">表格标签</h1>
<!--不指定高度和宽度,会根据内容自适应-->
<table width="500" border="1" align="center">
<tr>
<th align="left">姓名</th>
<th>电话</th>
<th>住址</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
</body>
跨行跨列标签
<body>
<!--
说明:
合并列: colspan="列数"
合并行: rowspan="行数"
cellspacing :指定单元格间的空隙大小:0表示没有空隙
bordercolor:指定表格边框的演示
border:表格边框
width:表格的宽度
思路:
1,先把整个表格的完整的行和列,展示出来5*3
2.在使用合并的技术,来处理
3.如果是16进制的颜色,前面#
-->
<table border="1" cellspacing="0" bordercolor="#E87EFA" height="200" width="500">
<tr>
<td colspan="3" align="center">第1行第1列</td>
</tr>
<tr>
<td rowspan="2">第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<tr>
<td rowspan="2">第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
<tr>
<td>第5行第2列<img src="./imgs/2.png" height="70"></td>
<td>第5行第3列</td>
</tr>
</table>
</body>
表单标签
url: 表示定位一个web资源的路径
method 主要有两种 post和get
基本使用
<body>
<!--
1. form表示表单
2. action:提交到哪个页面
3. method:提交方式 ,常用get 和 post
4. input type=text 输入框
5. input type=password 密码框
6. input type=submit 提交按钮
7. input type=reset 重置按钮
为了个汉字对齐,输入全角的空格即可
多说一句: method 不写默认是get
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">
用户名:<input type="text" name="username"> <br/>
<!--把输入法切换成全角,然后中间打空格,就可以对齐-->
密 码:<input type="password" name="password"> <br/>
<input type="submit" value="登录">
<input type="reset" value="重新填写">
</form>
</body>
<body>
<h1 align="center">登录成功</h1>
</body>
Input标签
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建用户</title>
</head>
<body>
<!--
form标签就是表单
input type=text : 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked" 表示默认选中input
type=checkbox是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域
当我们要发送某些信息,而这些信息,不需要用户参与,
就可以使用隐藏域(提交的时候同时发送给服务器)
select标签是下拉列表框
option标签是下拉列表框中的选项
selected="selected"设置默认选中
textarea表示多行文本输入框(起始标签和结束标签中的内容是默认值)
rows属性设置可以显示几行的高度
cols属性设置每行可以显示几个字符宽度
一定要给input元素设置name属性,否则,数据提交不到服务器
注意: checkbox是复选框,如果希望是同一组保证name属性一致
注意:在checkbox select radio提交数据的时候是value属性的值
-->
<form action="ok.html" method="get">
<h3>1.请完成如下界面</h3>
<h5>用户注册信息</h5>
用户名称: <input type="text" name="username" value="默认值"><br/>
用户密码: <input type="password" name="pwd1"><br/>
确认密码: <input type="password" name="pwd2"><br/>
请选中你喜欢的运动项目:
<input type="checkbox" name="sport" value="lq">篮球<br/>
<input type="checkbox" name="sport" value="zq" checked>足球<br/>
<input type="checkbox" name="sport" value="sq" checked>手球<br/>
请选中你的性别
<input type="radio" name="gender" value="male">男<br/>
<input type="radio" name="gender" value="female" checked>女<br/>
请选中你喜欢的城市:
<select name="city">
<option>--请选中--</option>
<option value="wh">武汉</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gg">广州</option>
</select><br/>
自我介绍
<textarea name="comment" rows="4" cols="25"></textarea><br/>
请选中你喜欢的文件<input type="file" name="myfile"><br/>
<input type="submit" value="登录">
<input type="reset" value="重新填写">
</form>
</body>
</html>
表单格式化
把各个选项填入到一个表中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单格式化</title>
</head>
<body>
<!--
form标签就是表单
input type=text : 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked" 表示默认选中input
type=checkbox是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域
当我们要发送某些信息,而这些信息,不需要用户参与,
就可以使用隐藏域(提交的时候同时发送给服务器)
select标签是下拉列表框
option标签是下拉列表框中的选项
selected="selected"设置默认选中
textarea表示多行文本输入框(起始标签和结束标签中的内容是默认值)
rows属性设置可以显示几行的高度
cols属性设置每行可以显示几个字符宽度
一定要给input元素设置name属性,否则,数据提交不到服务器
注意: checkbox是复选框,如果希望是同一组保证name属性一致
注意:在checkbox select radio提交数据的时候是value属性的值
-->
<form>
<h1>用户注册信息</h1>
<table>
<tr>
<td>用户名称: </td>
<td><input type="text" name="username" value="默认值"></td>
</tr>
<tr>
<td>用户密码: </td>
<td><input type="password" pwd="pwd1"></td>
</tr>
<tr>
<td>确认密码: </td>
<td><input type="password" pwd="pwd2"></td>
</tr>
<tr>
<td>请选中你喜欢的运动项目:</td>
<td><input type="checkbox" name="sport" value="lq">篮球 <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq" checked>手球</td>
</tr>
<tr>
<td>请选中你的性别</td>
<td><input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女</td>
</tr>
<tr>
<td>请选中你喜欢的城市:</td>
<td><select name="city">
<option>--请选中--</option>
<option value="wh">武汉</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gg">广州</option>
</select></td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea name="comment" rows="4" cols="25"></textarea></td>
</tr>
<tr>
<td>请选中你喜欢的文件</td>
<td><input type="file"><br/></td>
</tr>
<tr>
<td><input type="submit" value="登录"> </td>
<td><input type="reset" value="重新填写"></td>
</tr>
</table>
</form>
</body>
</html>
表单提交注意事项
-
action表示将form表单的数据提交给哪个url,即服务器的哪个资源(servlet)
-
method表示提交的方式主要是get / post,默认是get
-
如果form表单的元素,没有写name属性,则数据不会提交
-
对应select checkbox radio标签,提交的数据是value指定的值
-
对应checkbox 复选框,可以提交多个字,但是name是统一的,都是sport sprot=xx&sport=yy
-
提交的数据,一定要放在form标签内,否则数据不会提交
POST藏在请求体里面
Get 和Post 的区别简述- Get请求数据是显示在浏览器地址栏
- Get请求不安全的,而且数据是有长度限制的,建议有重要信息,不要使用Get
- Post请求数据是和http传输的,在http体中,相对安全
- Post传输的数据长度理论上没有限制,但是在实际的应用中,也不能太大
div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. <div>标签可以把文档分割为独立的、不同的部分
2. <div>是一个块级元素。它的内容自动地开始一个新行,不需要写<br/>
style :样式
在实际的前端开发中,会存在很多div标签,div标签包含div标签
-->
hello wrold
<div>
<h3 style="color: blue"> this is a h3</h3>
<a href="http://www.baidu.com">goto baidu</a>
</div>
</body>
</html>
p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.<p>标签定义段落
2. p元素会自动在其前后创建一些空白
-->
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>
span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. span标签是内联元素,不像块级元素(如: div标签、p标签等)有换行的效果。
2.如果不对span应用样式,span标签没有任何的显示效果
3.语法:<span>内容</span>
(1) span标签是内联元素(内嵌元素,行内元素),没有换行效果
(2)如果不对span应用样式,span标签没有任何的显示效果
(3)往往是为了单独的去控制某个关键的内容
-->
您的购物车有<span style="color: crimson;font-size: 40px" >10</span>件商品
</body>
</html>