admin管理员组文章数量:1607999
目录
基本介绍
软件架构
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静态网页 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1726186031a1059531.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论