JavaWEB
<< 上一篇
个人整理非商业用途，欢迎探讨与指正！！
文章目录
1.HTML
超文本标记语言,用于网页制作
单纯的标记语言,语法:
双标签:
<标签名></标签名>
单标签:
<标签名/>
HTML可以为两个大的方向的语法:HTML4和HTML5
HTML5不是HTML4的升级
准备工作
浏览器:开发时推荐使用谷歌,火狐,edge
开发工具:HBuilderX,HBuilder,记事本
1.1HTML中的三大基本标签
扩展名为:.html 或者 .htm
注释:
html的注释是不支持嵌套的
html
<html>
<head>
<!--头标签,负责当前页面的配置-->
</head>
<body>
<!--体标签,一个页面的主体-->
</body>
</html>
html
<!-- 当前页面的声明,可以省略,给浏览器看的,声明如下则是提示浏览器使用HTML5的形式进行解析页面 -->
<!DOCTYPE html>
<html>
<head>
<!-- 元标签,声明当前页面的编码格式 -->
<meta charset="utf-8">
<title>我是标题,嘿嘿</title>
</head>
<body>
helloworld
你好世界
</body>
</html>1.2显示标签
1.2.1文本标签
标签的组成:标签名 + 属性
例如:
html
<body>
<!-- ctrl+/ 注释一行 -->
<!-- c+tab 生成一个注释 -->
<!--
html4中文本标签
font标签 属性 color:颜色 可以使用基本的英文单词
face:字体 安全字体,默认可以使用计算机中安装的
size:字号 1~7的 依次增大 默认大小为3
-->
<!-- 可以使用标签名+tab自动生成一个标签 -->
<!-- font*3 + tab -->
<font color="red" face="微软雅黑" size="7">helloworld</font>
<font color="green" face="宋体" size="1">helloworld</font>
<font color="yellowgreen" face="黑体" size="3">helloworld</font>
<!--
html5中文本标签
h5是不推荐使用font了,使用label进行代替
label没有样式属性
for属性可以和其他标签进行绑定,文字绑定
-->
<label for="">我是h5中字体标签</label>
</body>1.2.2表单标签
与用户做交互使用
表单中多数标签为input,是根据不同的type显示不同的状态
1.2.2.1input标签
html
<body>
<!-- html中不能使用换行符,页面中换行使用<br>标签 -->
文本框:
<input type="text"><br>
密码框:
<input type="password"><br>
单选按钮:(使用name属性将多个单选按钮进行绑定)
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
复选按钮:(和单选按钮类似)
<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">篮球
<br>
文件域:(可以显示当前系统下的文件)
<input type="file"><br>
按钮标签:
<input type="button" value="点我啊!!!"><!-- 普通按钮 -->
<input type="reset"><!-- 重置按钮,可以重置表单上的内容 -->
<input type="submit"><!-- 提交按钮,可以将表单提交 -->
<input type="image" src="img/2.jpg" width="200" height="50"><!-- 图片按钮,功能和submit一样 -->
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</body>
html
<body>
<!-- h5中新增input标签,移动端支持,谷歌浏览器/edge浏览器可以查看部分 -->
<input type="number"><br>
<input type="color"><br>
<input type="date"><br>
<input type="datetime"><br><!-- 年月日 浏览器不能查看 -->
<input type="datetime-local"><br><!-- 年月日 时分秒-->
<input type="email"><br><!-- 调用英文键盘 -->
<input type="tel"><br><!-- 调用数字键盘 -->
<input type="search">
</body>
html
<body>
<!-- 文字绑定input标签,label中的for绑定input的id属性 -->
性别:
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
<br>
爱好:
<input type="checkbox" name="hobby" id="c"><label for="c">唱</label>
<input type="checkbox" name="hobby" id="t"><label for="t">跳</label>
<input type="checkbox" name="hobby" id="r"><label for="r">rap</label>
<input type="checkbox" name="hobby" id="l"><label for="l">篮球</label>
</body>1.2.2.2下拉框
html
<body>
<!--
select:下拉框标签
size属性,列表的可见数
multiple属性,单属性(属性名和属性值相同,那么属性值可以省略),需要配合ctil键一起使用
-->
<label for="">部门名</label>
<select name="">
<option value="">技术部</option>
<option value="">行政部</option>
<option value="">外派部</option>
<option value="">财务部</option>
</select>
<label for="">员工名</label>
<select name="" size="8">
<option value="">王成輝</option>
<option value="">陈则宇</option>
<option value="">于龙祥</option>
<option value="">大佐</option>
</select>
</body>1.2.2.3多行文本
html
<body>
<!--
cols:每行可以写的字符个数
rows:可以显示的行数
-->
<textarea name="" id="" cols="30" rows="10"></textarea><button>发表</button>
</body>1.2.2.4表单标签的通用属性
id属性:是一个标签的唯一标识,所有标签都有的属性,可以确保当前页面中的标签的唯一性,便于取值/定位使用
name属性:后端取值时的key
value属性:后端取值时的value,前端使用时显示的值,内置值
在向后端发送数据时,使用name=value形成的键值对,发送数据
placeholder属性:h5新增属性,内容提示功能,用户输入内容后,提示消失
readronly属性:只读,只显示,不能修改
disabled属性:禁用,不能使用
html
<body>
<form action="test.html">
<input type="text" value="helloworld" name="username">
<!-- 值1可以发送到后端 和name一起使用 -->
<input type="radio" value="1" name="gender">
<input type="text" placeholder="USERNAME">
<!-- textarea没有value属性,内容就是value -->
<textarea id="" cols="30" rows="10" name="info" placeholder="这家伙很懒什么都没有留下..."></textarea>
<br>
<input type="text" value="专打茄子的好腿" name="name" readonly><button type="button">充钱改名</button>
<input type="text" value="专打茄子的好腿1" name="name1" disabled>
<input type="submit">
</form>
</body>1.2.2.5form标签
html
<body>
<!--
form是所有表单标签的父标签,可以嵌套给所有的表单元素
1.作用:当提交按钮点击时(1.input type=submit 2.button type=submit 3.button的默认形式)
会将表单提交到 action属性指定的位置(.html .jsp Servlet)
2.提交时的数据会以name=value的形式进行传输
3.method属性:表单的提交方式
get方式:
默认情况,提交的数据会附着在url之后,不安全的,效率高,对中文的支持较差,传递的数据上限为4k左右
例如:http://127.0.0.1:8848/01-HTML/welcome.html?username=admin&password=123&yzm=123
post方式:
隐式提交,但对于HBuilderX内部的服务器而言,不支持post请求
将信息存在于请求头内,安全的,效率低,对中文支持良好,数据无上限
4.重置按钮:回到表单的原始状态
5.提交按钮:将表单进行提交
-->
<form action="welcome.html" method="post">
username:<input type="text" name="username"/><br>
password:<input type="password" name="password"/><br>
<input type="text" placeholder="请输入验证码" name="yzm"/>假装有验证码图片<br>
<input type="submit">
<button>提交</button>
<button type="submit">提交</button>
<input type="reset">
</form>
</body>1.2.2.6h5中form的新特性
html
<body>
<!--
提交表单可以写在form标签之外,需要通过form属性的id进行页面跳转的绑定
-->
<form id="UserForm">
<input type="text" placeholder="请输入用户名" name="user"><br>
<input type="password" placeholder="请输入密码" name="pwd"><br>
</form>
<!-- 提交标签可以写到form之外,使用formaction属性进行不同页面的跳转(指定不同的url) -->
<input type="submit" value="用户登录" form="UserForm" formaction="index.html">
<input type="submit" value="管理员登录" form="UserForm" formaction="admin.html">
<input type="submit" value="VIP用户" form="UserForm" formaction="VIP.html" disabled>
</body>1.3布局标签
可以对网页视图进行排版
1.3.1标题标签
h标签,共有6个,h1~h6的,标题大小依次减小
属性:align 文字的对齐方式;有left center right三个值
默认换行的
html
<body>
<!-- h${内容}*6 $从1开始自增的值 {表示内容}-->
<h1 align="left">标题内容h1</h1>
<h2 align="center">标题内容h2</h2>
<h3 align="right">标题内容h3</h3>
<h4>标题内容h4</h4>
<h5>标题内容h5</h5>
<h6>标题内容h6</h6>
</body>1.3.2段落标签
p标签,段落文字
hr标签,水平线,单标签
br标签,换行标签,单标签
html
<body>
<p>段落内容0001<br>段落内容0001</p>
<p>段落内容0002</p>
<hr>
<p align="left">段落内容0003</p>
<p align="center">段落内容0004</p>
<p align="right">段落内容0005</p>
<p>段落内容0006</p>
</body>1.3.3列表标签
以列表的形式展示内容
html
<body>
<!-- ol>li*6 >表示子标签-->
<!-- ol属性 type=1 a A I i -->
<h2>JDBC的连接步骤</h2>
<ol type="i">
<li>加载驱动</li>
<li>创建连接</li>
<li>获取语句对象</li>
<li>执行SQL语句</li>
<li>处理结果</li>
<li>关闭连接</li>
</ol>
</body>
html
<body>
<h2>白酒的类别</h2>
<!-- ul属性 type=disc实心圆(默认) circle空心圆 square实心的方块 -->
<ul type="square">
<li>飞天茅台</li>
<li>五粮液</li>
<li>二锅头</li>
<li>老烧郭</li>
<li>江小白</li>
<li>梦之蓝</li>
</ul>
</body>
html
<body>
<!-- dl>dt+dl*4 +表示兄弟标签-->
<dl>
<dt><h2>四大名著</h2></dt>
<dl>水浒传</dl>
<dl>西游记</dl>
<dl>红楼梦</dl>
<dl>三国演义</dl>
</dl>
</body>1.3.4表格标签
以表格的形式显示页面,以前多用于布局,现在多用于展示数据
html
<body>
<!--
table:表格
属性:
border:边框线,1设置边框线,0去除边框线(默认为0),>1的值是外部边框线的粗细
cellspacing:内外边线之间的距离
cellpadding:内容和内边线之间的距离
align:针对父标签(body)的对齐方式
tr:行
属性和table类似
align:内容的水平对齐方式 left center right
valign:内容的垂直对齐方式 top middle bottom
td:单元格
和tr类似
-->
<!-- table>tr*4>td*5 -->
<table border="1" cellspacing="0" cellpadding="10" width="500" height="400" bgcolor="pink" bordercolor="blue" background="img/1.jpg" >
<tr align="center">
<td>用户编号</td>
<td>用户姓名</td>
<td>用户性别</td>
<td>用户生日</td>
<td>用户年龄</td>
</tr>
<tr align="right" valign="bottom">
<td>1</td>
<td>zs</td>
<td>男</td>
<td>1990-01-23</td>
<td>35</td>
</tr>
<tr>
<td align="right">2</td>
<td valign="top">zs</td>
<td>男</td>
<td>1990-01-23</td>
<td>35</td>
</tr>
<tr>
<td>3</td>
<td>zs</td>
<td>男</td>
<td>1990-01-23</td>
<td>35</td>
</tr>
</table>
</body>
html
<body>
<!--
td的属性
colspan:横向合并单元格
rowspan:纵向合并单元格
th:表格的表头单元格,默认居中且加粗的 和td一样
thead和tbody:将表格分为头和主体,一般可以省略,添加的话可以严格的区分头和体的内容
-->
<table border="1" cellspacing="0" cellpadding="10" width="400">
<thead>
<tr>
<th colspan="4">xxx系统的数据显示</th>
</tr>
</thead>
<tbody>
<tr>
<td>编号</td>
<td>姓名</td>
<td rowspan="2">性别</td>
<td rowspan="2">爱好</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
</tbody>
</table>
</body>1.3.5div和span
div和span是常用的布局标签,可以css配合使用
div:一个块级的盒子
span:一个内联的盒子
盒子的分类:
块级:换行,可以通过css设计宽高,例如:hn,p,table,form,div等
内联:不换行,不可以通过css设置宽高,例如:label,a,b,i,u,span等
内联块:不换行,可以通过css设计宽高,例如:input,img等
```html
<head>
<meta charset="utf-8">
<title></title>
<style>
/* css样式表 */
div {
width: 200px;
height: 200px;
border: 1px solid pink;
}
span {
width: 200px;
height: 200px;
border: 1px solid pink;
}
input {
width: 200px;
height: 200px;
border: 1px solid pink;
}
</style>
</head>
<body>
<!-- 默认换行的,可以设置宽高 -->
<div>div的内容</div>
<div>div的内容</div>
<div>div的内容</div>
<!-- 默认在一行的,不可以设置宽高 -->
<span>span的内容</span><span>span的内容</span><span>span的内容</span>
<!-- 默认在一行的,可以设置宽高 -->
<input type="text"><input type="text">
</body>
1.3.5表单布局标签
fieldset:一个表单容器,默认有边框有内边距
legend:fieldset子标签,设置容器的局部内容
html
<body>
<fieldset style="width: 200px;height: 200px;">
<legend>xxxx管理平台登录页面</legend>
<form action="xxx.html">
<p>username:<input type="text"/></p>
<p>password:<input type="password"/></p>
<p><input type="submit" value="登录"></p>
</form>
</fieldset>
</body>1.4功能标签
在页面中没有特别的效果,但有功能特点
form:表单,可以用于和用户之间进行交互
img:图片,可以显示图片
a:超链接,点击时可以进行指定页面的跳转
html
<body>
<!--
a:href属性可以指定跳转的位置
-->
<a href="VIP.html">VIP功能</a>
<a href="https://www.baidu.com">百度</a>
<a href="javascript:alert('helloworld');">js脚本</a>
<!-- img标签 -->
<!-- img:src属性是路径的位置,路径类似于java中file的路径表示 alt属性为百度等搜索引擎时使用 -->
<img src="img/1.jpg" alt="" width="200" height="200">
<img src="img/2.jpg" alt="" width="200" height="200">
<img src="img/3.jpg" alt="" width="200" height="200">
<!-- 图片连接 -->
<a href="index.html"><img src="img/2.jpg" alt="">该商品售价xxx元</a>
</body>
html
<body>
<!-- 使用锚链接可以用于跳转到指定位置
使用#指向标签的id或者name属性
-->
<hr>
<div style="position: fixed;bottom: 0px;left: 0px;">
<span><a href="#div1">位置1</a></span>
<span><a href="#div2">位置2</a></span>
<span><a href="#div3">位置3</a></span>
<span><a href="#div4">位置4</a></span>
</div>
<hr>
<div id="div1" style="height: 1500px;background: #0cc;">商品展示区1</div>
<div id="div2" style="height: 1500px;background: orange;">商品展示区2</div>
<div id="div3" style="height: 1500px;background: gray;">商品展示区3</div>
<div id="div4" style="height: 1500px;background: pink;">商品展示区4</div>
</body>1.5框架标签
1.5.1内嵌浮动框架
可以在当前页面引入其他页面
html
<body>
<table width="100%">
<tr>
<td align="left"><span>欢迎使用xxx管理平台</span></td>
<td align="right">尊敬<font color="pink">李昊阳</font>用户欢迎您【<a href="">退出</a>】</td>
</tr>
<tr>
<td valign="top">
<ul>
<li><a href="emp.html" target="main">员工管理</a></li>
<li><a href="dept.html" target="main">部门管理</a></li>
<li><a href="meeting.html" target="main">会议管理</a></li>
</ul>
</td>
<td>
<!-- src页面连接 name属性为当前的iframe定义名字,可以使用a的target进行配置 -->
<iframe src="emp.html" frameborder="1" name="main" width="800" height="1000"></iframe>
</td>
</tr>
</table>
</body>1.6其他标签
1.6.1文本修饰
html
<body>
<!-- h4 -->
<b>加粗,文字加粗</b>
<i>斜体</i>
<u>下划线</u>
<!-- h5 -->
<del>删除线</del>
<strong>加粗,语气加粗</strong>
<em>斜体</em>
<small>小号文字</small>
<hr>
<h1>震惊!xxx公司,5楼出现xxxxx<small>本台记着:zcx为您报道</small></h1>
<!-- 空格 -->
<small><del>$998</del></small> ￥9.8
<hr>
H<sub>2</sub>O
<br>
x<sup>3</sup>
</body>1.6.2输出和引用标签
html
<body>
<code>System.out.println("helloworld");</code>
<kbd>ctr+a</kbd>全选
<var>变量</var><var>int a = 10;</var>
<!-- 预格式化,在html中空格和回车符都是没有效果的 -->
public static void main(){
System.out.println("helloworld");
}
<!-- pre和textarea都有预格式化的效果 -->
<pre>
public static void main(){
System.out.println("helloworld");
}
</pre>
<textarea name="" id="" cols="30" rows="10">public static void main(){
System.out.println("helloworld");
}
</textarea>
<hr>
JDBC学习<abbr title="Java DataBase Connectivity">JDBC</abbr>网址为
<address>xx省xx市xx区xx街道904号</address>
</body>