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静态网页相关推荐
- JAVAWeb ——静态网页
Web Javaweb 使用Java语言开发基于互联网的项目 软件架构 C/S Client/Server 客户端/服务器端 ...
- JavaWeb—静态网页HTML
文章目录 一.Web概念 软件架构 C/S(客户端/服务器端) B/S(浏览器/服务器端) 网络通信三要素 二. B/S架构详解 资源分类 1.静态资源 HTML(超文本标记语言) 2. 动态资源 三 ...
- Javaweb实验：静态网页制作
Javaweb实验: 1.静态网页制作 目录 Javaweb实验: 前言 一.实验目的 二.实验原理 三.实验内容 四.实验步骤 五.实验结果 六.实验内容 七.实验步骤 八.实验结果 九.思考 1. ...
- JavaWeb开发---B/S和C/S模式 tomcat服务器 Tomcat项目部署和发布 静态网页和动态网页 tomcat对web项目的目录要求 使用idea开发工具创建web项目 设置默认首页
目录 1. B/S和C/S模式 1.1 C/S模式 1.2 B/S模式 1.3 B/S和C/S区别 2.服务器 3.web 服务器 3.1.IIS 3.2.Tomcat 3.3.Zeus 3.4.Ng ...
- 静态网页和动态网页的区别（转载）
以下内容转载自:点击打开链接 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Re ...
- JavaWeb动态网页的方法和代码
JavaWeb动态网页的方法和代码 1.getOutputStream与getWriter方法 •getOutputStream方法用于返回Servlet引擎创建的字节输出流对象,Servlet程序可 ...
- 静态网页HTMLCSS
今日内容 1. web概念概述 2. HTML web概念概述 * JavaWeb:* 使用Java语言开发基于互联网的项目 * 软件架构:1. C/S: Client/Server 客户端/服务 ...
- 只需三分钟您就可以用nodejs搭建静态网页服务器（配置静态网页访问目录）
Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- AWS攻略——使用CodeBuild进行自动化构建和部署静态网页
首先声明下,使用"CodeBuild"部署并不是"正统"的方案,因为AWS提供了"CodeDeploy".如果不希望引入太多基础设施,可以考 ...
- AWS攻略——使用S3托管静态网页
在AWS上有很多部署静态网页的方式,比如使用EC2或者Lightsail.但是不管使用上述哪种方案,都需要预先部署如Nignx或者Apache等Http服务.这对纯前端同学来说可能有点复杂,而AWS提 ...
最新文章
- opensuse安装nginx
- python连接oracle批量写入_oracle大数据量python导入实践-1w/s
- android 日期弹出框,Android 日期选择框 简洁常用
- C语言入门题-求阶乘序列前N项和
- docker搜索镜像
- vue项目登录及token验证 vue-ant
- Linux加密框架 crypto 哈希算法举例 MD5
- Docker Redis部署_04
- Java开发者必备：超全的Java问题排查工具单
- 【报告分享】2020全球网络趋势报告.pdf（附下载链接）
- 三十五、 rsync工具介绍、rsync常用选项、rsync通过ssh同步
- android计时器代码百度网盘下载,计时器flash_求几个简单Flash计时器，可以自己设定时间的，百度云...
- mysql语法 join on 表示什么
- 安卓修改电池容量教程_手机电池校正 - 安卓最精确的电量校正方法 - iTeknical
- MATLABSTM32CubeMX联合开发系列——不用手写一行代码就能实现CAN通讯
- 导入excel,excel中带有图片,记录一下
- java实现花呗分3、6、12期计算用户每期手续费及每期总费用
- 此计算机将网络限制为,解决win7无法连接wifi提示“此计算机当前已将连接限制为...”的方法...
- warmup_csaw_2016
- ICMP详解和实例分析