JavaWeb静态网页

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 超文本标记语言

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言：

1. 由标签构成的语言 <标签名称>
2. 标记语言不是编程语言

语法

标签 文件标签文档标签图片标签列表标签链接标签其他标签语义化标签表格标签表单标签表单项标签

特殊字符集

CSS

Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效。

好处：

1. 功能强大
2. 将内容展示和样式控制分离

        * 降低耦合度。解耦
        * 让分工协作更容易
        * 提高开发效率

CSS与html结合方式 内联样式概述：在标签内使用style属性指定css代码如：hello css内部样式概述：在head标签内定义style标签，style标签的标签体内容就是css代码如：
     
          div{
                color:blue;
          }
     
     hello css外部样式

概述：

1. 定义css资源文件
2. 在head标签内，定义link标签，引入外部的资源文件

如：
        a.css文件：
        div{
            color:green;
        }
       
        hello css
        hello css注意1、2、3种方式，css作用范围越来越大
1方式不常用，后期常用2、3
外部样式格式可以写为：
       
            @import "css/a.css";
       

语法格式

选择器 {
            属性名1: 属性值1;
            属性名2: 属性值2;
            ...
            }

注释：

注意：每一对属性需要使用；隔开，最后一对属性可以不加。

选择器

概述：筛选具有相似特征的元素。

基础选择器扩展选择器

属性

案例：注册页面

    
    

    
        
        * {
            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;
        }

        
        #d_left > p:first-child {
            color: #FFD026;
            font-size: 20px;
        }

        
        #d_left > p:last-child {
            color: #A6A6A6;
            font-size: 20px;
        }

        
        #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;
        }

    




    
        
新用户注册
        
USER REGISTER
    

    
        
        
    

    
        
已有账号？立即登录
    

实现效果：

---