一.HTML
1.概述
是超文本标记语言.用来完成一个静态网页.
结构:
由大量的标签组成的.
标签都是成对儿出现的
2.入门案例
<!DOCTYPE html> <!-- 文档声明 -->
<html> <!-- 根元素,标记这是一个网页文件 -->
<head><!-- 头部分 -->
<meta charset="utf-8"> <!-- 设置了编码 -->
<title>1243</title> <!-- 设置了标题 -->
</head>
<body> <!-- 体部分,指定网页要展示的内容-->
hello
</body>
</html>
3.练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 1.标题标签:加粗会自动换行 h1大~h6小 -->
<h1>残奥会，极富教育价值的“开学第一课”</h1>
<h2>残奥会，极富教育价值的“开学第一课”</h2>
<h3>残奥会，极富教育价值的“开学第一课”</h3>
<h4>残奥会，极富教育价值的“开学第一课”</h4>
<h5>残奥会，极富教育价值的“开学第一课”</h5>
<h6>残奥会，极富教育价值的“开学第一课”</h6>
<!-- 2.列表标签:有序orderlist列表ol li,无序unorderlist列表ul li -->
<ul>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ul>
<ol>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ol>
<!-- 3. 图片标签img
src属性指定图片的位置
height属性指定图片的高度 width指定宽度,单位是像素
-->
<img src="2.jpg" height="500px" width="300px"/>
<!-- 4. 超链接a
href属性用来指定跳转的网址
target属性用来指定打开方式,默认是当前窗口_self,_blank是用新窗口打开
-->
<a href="https://www.baidu.com" target="_blank">点我跳转</a>
<!-- 5. 锚定 a -->
<a name="top">我是顶部</a>
<h2>如何套取富婆的欢心</h2>
<h2>如何套取富婆的欢心</h2>
<h2>如何套取富婆的欢心</h2>
<h2>如何套取富婆的欢心</h2>
<h2>如何套取富婆的欢心</h2>
<h2>如何套取富婆的欢心</h2>
<h2>如何套取富婆的欢心</h2>
<a href="#top">点我,回到顶部</a>
<br /><br /><br /><br /><br /><br /><br />
</body>
</html>
4.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 1. input标签,输入框 -->
密码输入框:<input type="password" /> <br/>
普通输入框:<input type="text" /> <br/>
单选框:<input type="radio" />男 <br/>
多选框:<input type="checkbox" />迪丽热巴 <br/>
日历:<input type="week" /> <br/>
<input type="date" /> <br/>
数字:<input type="number" /> <br/>
邮箱:<input type="email" /> <br/>
普通按钮:<input type="button" value="点我"/>
<button >点我</button> <br/>
提交按钮:<input type="submit" value="注册"/>
<button type="submit">点我</button>
<!-- 2. table表格标签 tr是行 th是表头(加粗居中) td是列
border设置边框 width设置宽度
bgcolor设置背景颜色 cellspacing单元格间距
rowspan行合并(合并多个行) colspan列合并(合并多个列)
-->
<table border="2px" width="300px"
bgcolor="lightgreen" cellspacing="0">
<tr>
<td colspan="3"><h2>流量调查表</h2></td>
</tr>
<tr> <!-- 行 -->
<th colspan="2">11</th> <!-- 列 -->
<th>13</th>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
5.表单标签
最大的作用就是可以提交数据.
把表格里想要收集的数据可以提交给服务器.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签</title>
</head>
<body>
<!-- 1. 表单标签form:用来提交数据,默认数据是在地址栏中拼接的
提交的数据有两种方式: get post
区别:
get方式提交数据是在地址栏,默认方式,安全性低,长度受限
http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?
user=1&pwd=2&repwd=2&nick=3&mail=4@.com&sex=on&hobby=on&hobby=on&hobby=on
post方式提交数据不在地址栏,安全性高,没有上限
method属性用来设置数据的提交方式,默认是get
action属性用来指定数据即将提交给哪个程序去处理
-->
<form method="post" action="#">
<h2>注册表单</h2>
<table border="1px" bgcolor="#A9A9A9"
width="500px" cellspacing="0">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd"/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repwd"/>
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" name="nick"/>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" name="mail"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- 下拉框 -->
<select name="city">
<option value="">-请选择-</option>
<option value="bj">北京市</option>
<option value="sh">上海市</option>
<option value="gd">广东省</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<!-- 上传文件 -->
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text"/>
<img src="a.png"/>
<button>点我换一张</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>在这儿输入...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
总结
form 标签用来 把页面填写的数据提交给后台的java程序
table 标签用来 向网页中添加表格
tr标签用来表示表格里的一行
td标签表示行里的列元素
input标签用来实现输入框(text password email radio checkbox…)
select标签用来定义一个下拉框,option标签用来定义选项
textarea 标签用来表示一个大的文本框(文本域)
img 标签用来向网页中加入图片
button标签用来表示一个按钮
src属性用来指定图片的位置,type属性用来指定输入框的类型,
width属性用来指定宽度,height属性用来指定高度,bgcolor属性用来设置背景颜色
cellspacing属性用来设置单元格的间距…
提交数据
1, 必须用form标签
2, 必须有提交submit按钮
3, 必须设置name属性
4, 提交的数据都在?之后 , 多个值用&连接 ,
每个值用=连接 , user和pwd是页面上name属性的值 , 1和2是用户在浏览器输入的数据
http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?user=1&pwd=2
5,遇到的问题
–性别可以多选: 让性别的输入框name属性的值相同
–单选框和多选框提交的数据是on: 设置value属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册学生信息</title>
</head>
<body>
<!-- 添加音频 controls使用控制组件-->
<audio controls="controls">
<!-- 指定资源的位置 -->
<source src="jay.mp3"></source>
</audio>
<!-- 添加视频 controls使用控制组件-->
<video controls="controls" loop="loop">
<source src="b.mp4"></source>
</video>
<!-- form标签用来提交数据,
method属性用来指定提交数据的方式,
action属性用来指定提交到哪里
-->
<form method="post" action="#">
<table>
<tr>
<td>
<h2>学生信息管理系统MIS</h2>
</td>
</tr>
<tr>
<td>姓名:</td>
</tr>
<tr>
<td>
<input type="text" name="user" placeholder="在这里输入姓名"/>
</td>
</tr>
<tr>
<td>年龄:</td>
</tr>
<tr>
<td>
<input type="number" name="age" placeholder="在这里输入年龄"/>
</td>
</tr>
<tr>
<td>
性别:(单选框)
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
爱好:(多选)
<input type="checkbox" name="hobby" value="1" checked="checked"/>乒乓球
<input type="checkbox" name="hobby" value="2"/>爬山
<input type="checkbox" name="hobby" value="3"/>唱歌
</td>
</tr>
<tr>
<td>
学历:(下拉框)
<select name="xueli">
<option value="1">本科</option>
<option value="2">研究生</option>
<option value="3">硕士</option>
<option value="4">专科</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期:
<input type="date" name="day"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
二.CSS
1.概述
CSS全称是 层叠样式表 stylesheet , 用来修饰HTML的 .
CSS语法 : 元素的选择器{ 属性名 : 属性值 ; 属性名 : 属性值 ; 属性名 : 属性值 ; }
CSS使用的位置:
1, 行内CSS(给标签加了一个style属性)
2, 内部CSS(使用HTML提供的style标签,把CSS代码包起来)
3, 外部CSS(在网页里,引入一个外部的CSS文件)
2.测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css的入门案例</title>
<!-- 2. 内部CSS,使用HTML提供的style标签 -->
<style>
/* 语法:选择器{ css的效果 } */
h1{ /* 设置h1的文字居中 */
text-align:center;
}
</style>
</head>
<body>
<!-- 1. 行内CSS,设置style属性,尽量不用 -->
<div style="text-align:center;">我是div1</div>
<div style="text-align:center;">我是div2</div>
<h1>我是h1</h1>
<h1>我是h2</h1>
<h1>我是h3</h1>
</body>
</html>
3.选择器
CSS提供的一种方式,可以方便的选中网页中的各种元素.
常用的选择器: 简单选择器(标签名,id,类) 分组选择器 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css选择器</title>
<!-- 内部CSS -->
<style>
/* 1. 标签名选择器:选中了网页中,所有标签名字叫div的元素 */
div{ /* 选中所有div的 */
color:red; /* 文字设置成红色 */
border-style:dashed; /* 设置虚线边框 */
border-radius:15px; /* 圆角边框 */
border-color: green; /* 边框的颜色*/
}
h1{ /* 选中所有h1 */
background-color:Tomato; /* 背景颜色 */
color:white; /* 文字颜色 */
}
/* 2. */
</style>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
<h1>我是h1</h1>
<h1>我是h2</h1>
<h1>我是h3</h1>
</body>
</html>
原文链接：https://blog.csdn.net/u012932876/article/details/1200532814.模拟 服务器解析浏览器发来的数据
package cn.tedu.test2;
public class TestUrl {
public static void main(String[] args) {
//1,接受用户发来的数据
String url = "http://127.0.0.1:8848/cgb2107/student.html?user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03";
//按照?切割字符串
String[] a = url.split("\\?");
//[http://127.0.0.1:8848/cgb2107/student.html,
//user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03]
//只获取数组里的第二部分
String data = a[1];
//继续切,用&切
String[] b = data.split("&");
//[user=jack,age=18,sex=1,hobby=1,hobby=2,hobby=3,xueli=2,day=2021-09-03]
//循环b数组
for(String s : b){//获取到每一组数据user=jack,age=18
String[] c = s.split("=");//把每组数据按照=切割 [age,18]
String datas = c[1];//只取=后面的数据c[1]
System.out.println(datas);
}
}
}
5.CSS选择器
5.1概述
CSS提供的一种方式,可以方便的选中网页中的各种元素.
常用的选择器: 简单选择器(标签名,id,类) 分组选择器 属性选择器
5.2简单的选择器测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 CSS的选择器</title>
<style>
/* 1.标签名选择器:按照标签的名字 选中元素 */
h1{/* 给h1设置字的颜色 */
color: #00FFFF;
}
/* 2.类选择器:按照class属性的值 选中元素
先给元素加class属性 + 通过.获取class的值
*/
.a{ /* 选中网页中class=a的元素 */
font-family: "黑体"; /* 字体 */
font-style: oblique; /* 字体倾斜 */
font-size: 30px; /* 字号 */
}
.b{/* 选中网页中class=b的元素 */
/* 文字阴影 水平阴影 垂直阴影 模糊程度 阴影颜色 */
text-shadow: 2px 2px 5px red;
}
/* 3. id选择器:按照id属性的值(唯一) 选中元素
先给元素加id属性 + 通过# 获取id的值
*/
#div1{
opacity: 0.5;/* 设置不透明度,0~1,越小越透明 */
}
</style>
</head>
<body>
<div>我是div2</div>
<div class="a">我是div3</div>
<div id="div1">我是div4</div>
<span>我是span1</span>
<span class="b a">我是span2</span>
<span>我是span3</span>
<h1>我是h1</h1>
<h1>我是h2</h1>
<h1>我是h3</h1>
</body>
</html>
6.分组选择器 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的 高级选择器</title>
<style>
/*1.分组选择器:选中一批元素分成一组,统一设置样式 */
div,span{/* 把所有div和span设置字体颜色 */
color:red; /* 字的颜色 */
font-family: "微软雅黑"; /* 字体*/
font-size: 20px; /* 字号*/
background-color: #00FFFF; /* 背景色 */
}
/* 2. 属性选择器: 通过标签的属性选中元素 */
a[href]{ /* 选中有href属性的a标签*/
color: #008000; /* 字的颜色*/
}
/* 选中type=text的input设置背景色 */
input[type="text"]{
background-color: #008000;
}
.m{
color: red;
}
.n{
color: green;
text-indent: 200px; /* 首行缩进*/
}
</style>
</head>
<body>
<p class="m n">123</p>
<input type="button" value="按钮"/>
<input type="text" />
<input type="number" />
<input type="password" />
<a href="#">点我一下1</a>
<a>点我一下2</a>
<a>点我一下3</a>
<div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span1</span>
</body>
</html>
7.综合练习
7.1盒子模型
CSS把网页里的每个元素都当做一个盒子来看.
外边距: 盒子间的距离margin
内边距: 一个盒子里, 内容和边框的距离padding
宽width/高height/边框border: 一个盒子里的
<!--margin设置外边距-->
<input type="radio" name="sex" value="1" style="margin-left:30px;"/>男2
<input type="radio" name="sex" value="1" style="margin-right:30px;"/>男3
<input type="radio" name="sex" value="1" style="margin-top:30px;"/>男4
<input type="radio" name="sex" value="1" style="margin-bottom:30px;"/>男5
<!--padding设置内边距padding-left左边距 padding-top上边距 padding-bottom下边距-->
<input type="text" placeholder="你好0" style="padding:20px;"/>
<input type="text" placeholder="你好1" style="padding-left:20px;"/>
<input type="text" placeholder="你好2" style="padding-top:20px;"/>
<input type="text" placeholder="你好3" style="padding-bottom:20px;"/>
7.2用户注册练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 用户注册</title>
<style>
/* 1.修饰输入框 */
.a{
padding:10px;/* 内边距 */
width: 300px;/* 宽度 */
height:30px;/* 高度 */
font-size:20px;/* 文字大小 */
}
/* 2.修饰提示文字 */
.b{
font-size:8px;/* 字号 */
color: #999999;/* 字的颜色 */
padding: 10px;/* 内边距 */
}
/* 3.修饰 我已阅读 */
#c{
margin: 10px; /*外边距 */
text-indent:40px ;/* 首行缩进 */
font-size: 8px;/* 文字变小 */
}
/* 4.修饰 立即注册按钮 */
input[type="submit"]{
width: 320px;/* 宽度 */
height: 50px;/* 高度 */
background-color: tomato;/* 背景色 */
border-color:tomato ;/* 边框颜色 */
color: white;/* 文字颜色 */
font-size: 25px;/* 字体大小 */
text-align: center;/* 文字居中 */
}
/* 修饰用户注册居中 */
h2{
text-indent:100px;/* 文本缩进 */
}
</style>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>
<h2>用户注册</h2>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用户名" name="user"/>
</td>
</tr>
<tr>
<td class="b" >支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="设置密码" name="pwd"/>
</td>
</tr>
<tr>
<td class="b" >建议使用数字、字母和符号两种以上的组合，6-20个字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="确认密码" name="repwd"/>
</td>
</tr>
<tr>
<td class="b" >两次密码输入不一致</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="验证手机" name="tel"/>
或 <a href="#">验证邮箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="c"/>
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<input type="submit" value="立即注册"/>
</td>
</tr>
</table>
</form>
</body>
</html>
7.3优化HTML CSS
创建CSS文件
/* 1.修饰输入框 */
.a{
padding:10px;/* 内边距 */
width: 300px;/* 宽度 */
height:30px;/* 高度 */
font-size:20px;/* 文字大小 */
}
/* 2.修饰提示文字 */
.b{
font-size:8px;/* 字号 */
color: #999999;/* 字的颜色 */
padding: 10px;/* 内边距 */
}
/* 3.修饰 我已阅读 */
#c{
margin: 10px; /*外边距 */
text-indent:40px ;/* 首行缩进 */
font-size: 8px;/* 文字变小 */
}
/* 4.修饰 立即注册按钮 */
input[type="submit"]{
width: 320px;/* 宽度 */
height: 50px;/* 高度 */
background-color: tomato;/* 背景色 */
border-color:tomato ;/* 边框颜色 */
color: white;/* 文字颜色 */
font-size: 25px;/* 字体大小 */
text-align: center;/* 文字居中 */
}
/* 修饰用户注册居中 */
h2{
text-indent:100px;/* 文本缩进 */
}
修改HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 用户注册</title>
<!-- 引入外部的css文件
href属性用来指定文件的位置
rel属性用来指定文件的类型
-->
<link href="1.css" rel="stylesheet"/>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>
<h2>用户注册</h2>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用户名" name="user"/>
</td>
</tr>
<tr>
<td class="b" >支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="设置密码" name="pwd"/>
</td>
</tr>
<tr>
<td class="b" >建议使用数字、字母和符号两种以上的组合，6-20个字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="确认密码" name="repwd"/>
</td>
</tr>
<tr>
<td class="b" >两次密码输入不一致</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="验证手机" name="tel"/>
或 <a href="#">验证邮箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="c"/>
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<input type="submit" value="立即注册"/>
</td>
</tr>
</table>
</form>
</body>
</html>
169万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
