web概念概述
-
JavaWeb：
- 使用Java语言开发基于互联网的项目
-
软件架构
- C/S: Client/Server 客户端/服务端
- 在用户本地有一个客户端程序，在远程有一个服务端程序
- 优点：
- 用户体验好
- 缺点：
- 开发、安装，部署、维护、麻烦
- B/S: Brower/Server 浏览器/服务器
- 只需要一个浏览器，用户通过不同的url，访问不同的服务器端程序
- 优点：开发、安装、部署，维护 简单
- 缺点：如果应用过大，用户的体验可能会受到影响。
- C/S: Client/Server 客户端/服务端
-
B/S 架构详解
- 资源分类：
- 静态资源
- 使用静态网页开发技术发布的资源
- 特点：
- 所有用户访问，等到的结果一样
- HTML，CSS， JavaScript
- 如果用户请求的是静态资源，服务器会之间将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
- 动态资源
- 所有用户访问，得到的结果可能会不一样
- 如 jsp、servlet，php，asp
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换位静态资源，再发送给浏览器
- 静态资源
- 资源分类：
HTML
- 概念：最基础的网页开发语言
- 超文本标记语言
- 标记语言
- 由标签构成的语言 html，xml
- 标记语言不是编程语言
超文本标记语言
* 注释 <!-- 注释 – >
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!-- 这是一个注释 -->
白日依山尽，<br>
黄河入海流。<br>
<!--h1 --- h6 标题标签 主键递减-->
Paulson 很帅
<h1>Paulson 很帅</h1>
<h2>Paulson 很帅</h2>
<h3>Paulson 很帅</h3>
<h4>Paulson 很帅</h4>
<h5>Paulson 很帅</h5>
<h6>Paulson 很帅</h6>
<!--段落标签-->
<p>我
<p>我
<p>我
<!--显示水平线-->
<hr color="red" width="200" size="10" align="left">
</body>
</html>
加粗
斜体
-
color 颜色
-
size 大小
-
face 字体
-
属性定义
-
color：
- 英文单词：red green blue
- rgb（x,y,z）值的范围 （如rgb（0,0，255））
- #值1值2值3：值的范围： 00-FF之间。如：#FF00FF
-
width：
- 数值： width=“20”，数值的单位 ps(像素)
- 数值%， 占比
-
center：
- 居中
-
标签
1、 HTML标签：表单标签
- 表单： 用于采集用户输入的数据
- form：用于定义表单。可以顶一个一个范围，范围代表采集用户数据的范围
- 属性
- action：指定提交数据的url
- method：指定提交方式
- 分类：一共7种，2种比较常用
- get：
- 请求参数会在地址栏中显示
- 请求参数大小是有限制的
- 不太安全
- post
- 请求参数不会在地址栏中显示。会封装在请求体中
- get：
- 分类：一共7种，2种比较常用
- method：指定提交方式
- action：指定提交数据的url
- 表单项中的数据要想被提交，必须指定其name属性
- 属性
- form：用于定义表单。可以顶一个一个范围，范围代表采集用户数据的范围
<form action="#" method="get">
用户名: <input name="username"><br>
密码: <input name="password"><br>
登录 <input type="submit" value="登录">
</form>
- 表单项标签
-
input：可以通过type属性值，改变元素展示的样式
-
type属性：
- placeholder 指定默认显示的字符
- username
- password
- radio：单选框，
- 要想让多个单选框实现单选的结果，则这多个单选框的name属性必须相同
- 一般会给每一个单选框提供value属性，
- checked属性，可以指定默认值
- checkbox：复选框
- file： 文件选择框
- hidden：用于提交一些数据
- 按钮
- submit 提交按钮
- button 普通按钮
- image 图片提交按钮
-
label：指定输入项下的文字描述信息
-
label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点
-
-
select：下拉列表
- 子元素 option指定列表项
-
textarea：文本域
- cols 指定列数，每一行有多少个字符
- rows 默认多少行
-
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!-- 这是一个注释 -->
白日依山尽，<br>
黄河入海流。<br>
<!--h1 --- h6 标题标签 主键递减-->
Paulson 很帅
<h1>Paulson 很帅</h1>
<h2>Paulson 很帅</h2>
<h3>Paulson 很帅</h3>
<h4>Paulson 很帅</h4>
<h5>Paulson 很帅</h5>
<h6>Paulson 很帅</h6>
<!--段落标签-->
<p>因为公司组织架构调整，测试室整体裁撤，所以找工作。期望薪资23k
<p>我叫魏元宝，2018年毕业北京信息科技大学，专业计算机科学与技术，
<!--显示水平线-->
<hr color="red" width="200" size="10" align="left">
<!--加粗-->
白日依山尽<br>
<b>白日依山尽</b> <br>
<i>白日依山尽</i> <br>
<!--字体标签，淘汰-->
<font color="red" size="5" face="楷体">白日依山尽</font> <hr>
<font color="#FF00FF" size="5" face="楷体">白日依山尽</font>
<hr width="50%">
<center>
<font color="#FF00FF" size="5" face="楷体">白日依山尽</font>
</center>
<form action="#" method="get">
用户名: <input name="username" placeholder="请输入用户名"><br>
密码: <input type="password" name="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
<br>
爱好: <input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="python"> Python
<br>
图片: <input type="file" name="file"><br>
隐藏域: <input type="hidden" name="id", value="hidden"> <br>
取色器: <input type="color" name="color"> <br>
生日: <input type="date" name="birthday"> <br>
生日: <input type="datetime-local" name="birthday"> <br>
邮箱: <input type="email" name="email"> <br>
省份: <select name="province">
<option>--请选择--</option>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">陕西</option>
</select><br>
自我描述: <textarea cols="20", role="10" name="desc"></textarea>
<input type="submit" value="登录"><br>
</form>
</body>
</html>
案例（注册页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="#" method="get">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td><label for="email">邮箱</label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" id="name" name="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" id="tel" name="tel"></td>
</tr>
<tr>
<td><label >性别</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female">女</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" id="birthday" name="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td>
<input type="text" id="checkcode" name="checkcode">
<img src="">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
2、 CSS：
-
概念： Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
-
好处
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
-
CSS的使用：CSS与HTML结合方式
- 内联样式
- 在标签内使用style指定css代码
- 内部样式
- 在head标签内定义style标签，stype标签的标签体内容就是css代码
- 外部样式
- 将css代码抽取到外部
- 在head标签，定义link标签，引入外部的资源
- 1,2,3种方式，css的范围越来越大
- 1不常用，常用2,3
- 内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS与HTML</title>
<style>
div{
color: blue;
}
</style>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<!--1. 内联样式-->
<div style="color: darkgreen">Hello1 CSS & HTML</div>
<!--2. 内部样式-->
<div>Hello1 CSS & HTML</div>
<!--3. 外部样式-->
<div>Hello1 CSS & HTML</div>
</body>
</html>
-
CSS语法
- 格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；
} - 选择器：筛选具有相似特征的元素
- 注意
- 每一对属性需要使用；隔开，最后一对可以不使用
- 格式：
-
选择器
- 分类
-
基本选择器
- id选择器 #id属性值{}
- 元素选择器 标签名称{}
- 类选择器 .class
-
扩展选择器
- 选择所有元素 *
- 并集选择器 ：选择器1，选择器2
- 子选择器：选择器1 选择器2
- 父选择器：选择器1>选择器2
-
-
属性
-
盒子模型：控制布局
- margin ：外边距
- padding: 内边距
- 默认情况下内边距会影响这个盒子的带下
- box-sizeing：border-box；设置盒子的属性，让width和height就是最终盒子的大小
-
float 浮动
- left
- right
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*margin-left: 50px; 外边距*/
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
/* 设置盒子的属性，让width和height就是最终盒子的大小
*/
box-sizing: border-box;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: left;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>
</body>
</html>
CSS注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/backround.png") no-repeat center;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/* 让div居中*/
margin:auto;
padding: 15px;
margin-top: 15px;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left p:first-child{
color: #FFD026;
font-size: 20px;
}
.rg_left p:last-child{
color: #A6A6A6;
font-size: 20px;
}
.rg_center{
/*border: 1px solid red;*/
float: left;
width: 450px;
}
.rg_right{
/*border: 1px solid red;*/
float: right;
}
.rg_right p:first-child{
font-size: 15px;
margin: 15px;
}
.rg_right p a{
color: pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/* 设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="get">
<table >
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" id="password" name="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">邮箱</label></td>
<td class="td_right"><input type="email" id="email" name="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" id="name" name="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" id="tel" name="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label >性别</label></td>
<td class="td_right"><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female">女</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" id="birthday" name="birthday" ></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right">
<input type="text" id="checkcode" name="checkcode" placeholder="请输入验证码">
<img src="">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号？<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
扫一扫
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
