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代码
如:<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="男">男&nbsp;
                        <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>

实现效果:


本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
https://www.bootcss.com/

)">
下一篇>>