JavaWeb静态网页
目录
基本介绍
软件架构
Client/Server 客户端/服务器端 (C/S)
Browser/Server 浏览器/服务器端 (B/S)
静态资源
HTML
语法
标签
特殊字符集
CSS
CSS与html结合方式
语法格式
选择器
属性
案例：注册页面
基本介绍
JavaWeb：使用Java语言开发基于互联网的项目。
软件架构
Client/Server 客户端/服务器端 (C/S)
概述：在用户本地有一个客户端程序，在远程有一个服务器端程序。如：QQ、迅雷...
优点：用户体验好。
缺点：开发、安装，部署，维护 麻烦。
Browser/Server 浏览器/服务器端 (B/S)
概述：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序。
优点：开发、安装，部署，维护 简单。
缺点：
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高
资源分类：
| 静态资源 | 概述：使用静态网页开发技术发布的资源 如：文本，图片，音频、视频，HTML，CSS，JavaScript |
| 特点： 1. 所有用户访问，得到的结果是一样的 2. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器 浏览器中内置了静态资源的解析引擎，可以展示静态资源 |
| HTML：用于搭建基础网页，展示页面的内容 CSS：用于美化页面，布局页面 JavaScript：控制页面的元素，让页面有一些动态的效果 |
| 动态资源 | 概述：使用动态网页技术发布的资源 如：jsp/servlet，php，asp... |
| 特点： 1. 所有用户访问，得到的结果可能不一样 2. 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器 |
静态资源
HTML
概述：是最基础的网页开发语言。
Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法，将各种不同空间的文字信组织在一起的网状文本。
标记语言：
由标签构成的语言 <标签名称>标记语言不是编程语言
语法
标签
| 文件标签 | |
| 文档标签 | |
| 图片标签 | |
| 列表标签 | |
| 链接标签 | |
| 其他标签 | |
| 语义化标签 | |
| 表格标签 | |
| 表单标签 | |
| 表单项标签 | |
特殊字符集
CSS
Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效。
好处：
功能强大将内容展示和样式控制分离
* 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率
CSS与html结合方式
| 内联样式 | 概述：在标签内使用style属性指定css代码 |
| 如：<div style="color:red;">hello css</div> |
| 内部样式 | 概述：在head标签内定义style标签，style标签的标签体内容就是css代码 |
| 如： <style> div{ color:blue; } </style> <div>hello css</div> |
| 外部样式 | 概述： 1. 定义css资源文件 2. 在head标签内，定义link标签，引入外部的资源文件 |
| 如： a.css文件： div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div> |
| 注意 | 1、2、3种方式，css作用范围越来越大 1方式不常用，后期常用2、3 外部样式格式可以写为： <style> @import "css/a.css"; </style> |
语法格式
选择器 { 属性名1: 属性值1; 属性名2: 属性值2; ... }
注释：/* 注释信 */
注意：每一对属性需要使用；隔开，最后一对属性可以不加。
选择器
概述：筛选具有相似特征的元素。
属性
案例：注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
/*初始化*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*设置背景图居中且不重复*/
body {
background: url("../img/register_bg.png") no-repeat center;
}
/*最大的盒子*/
#d_layout {
width: 65%;
height: 560px;
background-color: white;
border: 8px solid #EEEEEE;
margin: 40px auto;
}
/*左边的盒子*/
#d_left {
float: left;
margin: 20px;
}
/*中间的盒子*/
#d_center {
float: left;
width: 55%;
margin: 40px auto 0 55px;
}
/*右边的盒子*/
#d_right {
float: right;
margin: 20px;
}
/*选中左边盒子中的第一个p标签*/
#d_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
/*选中左边盒子中的最后一个p标签*/
#d_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
/*选中右边盒子中的p标签*/
#d_right > p:first-child {
font-size: 10px;
}
/*子选择器*/
#d_right p a {
color: pink;
}
/*左边单元格*/
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
/*右边单元格*/
.td_right {
padding-left: 40px;
}
/*并集选择器*/
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
/*验证码*/
#checkcode {
width: 110px;
}
/*图片*/
#img_check {
height: 32px;
margin-left: 10px;
vertical-align: middle;
}
/*按钮*/
#btn_submit {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="d_layout">
<div id="d_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div id="d_center">
<!--定义表单-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="username" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right"><input type="radio" name="gender" checked="checked" value="男">男
<input type="radio" name="gender" value="女">女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="tel" id="birthday"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="tel" id="checkcode">
<img id="img_check" src="../img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" id="btn_submit" value="注册">
</td>
</tr>
</table>
</form>
</div>
<div id="d_right">
<p>已有账号？<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
实现效果：
本文标签：
静态网页javaweb
发表评论