【2019.10.17】JavaWeb(一)HTML和CSS基本介绍与用法

痛定思痛。 2023-06-08 06:46 14阅读 0赞

## web概念概述 ##

*  JavaWeb：
    
     *  使用Java语言开发基于互联网的项目
 *  软件架构
    
    1.  C/S: Client/Server 客户端/服务端
        
         *  在用户本地有一个客户端程序，在远程有一个服务端程序
         *  优点：
            
             *  用户体验好
         *  缺点：
            
            1.  开发、安装，部署、维护、麻烦
    2.  B/S: Brower/Server 浏览器/服务器
        
         *  只需要一个浏览器，用户通过不同的url，访问不同的服务器端程序
         *  优点：开发、安装、部署，维护 简单
         *  缺点：如果应用过大，用户的体验可能会受到影响。
 *  B/S 架构详解
    
     *  资源分类：
        
        1.  静态资源
            
             *  使用静态网页开发技术发布的资源
             *  特点：
                
                 *  所有用户访问，等到的结果一样
                 *  HTML，CSS， JavaScript
                 *  如果用户请求的是静态资源，服务器会之间将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
        2.  动态资源
            
             *  所有用户访问，得到的结果可能会不一样
             *  如 jsp、servlet，php，asp
             *  如果用户请求的是动态资源，那么服务器会执行动态资源，转换位静态资源，再发送给浏览器

## HTML ##

1.  概念：最基础的网页开发语言
    
     *  超文本标记语言
     *  标记语言
        
         *  由标签构成的语言 html，xml
         *  标记语言不是编程语言

超文本标记语言  
\* 注释 <!-- 注释 – >

**加粗  
 *斜体***

*  color 颜色
 *  size 大小
 *  face 字体
 *  属性定义
    
     *  color：
        
         *  英文单词：red green blue
         *  rgb（x,y,z）值的范围 （如rgb（0,0，255））
         *  \#值1值2值3：值的范围： 00-FF之间。如：\#FF00FF
     *  width：
        
        1.  数值： width=“20”，数值的单位 ps(像素)
        2.  数值%， 占比
     *  center：
        
         *  居中

#### 标签 ####

# 1、 HTML标签：表单标签 #

*  表单： 用于采集用户输入的数据
    
     *  form：用于定义表单。可以顶一个一个范围，范围代表采集用户数据的范围
        
         *  属性
            
             *  action：指定提交数据的url
                
                 *  method：指定提交方式
                    
                     *  分类：一共7种，2种比较常用
                        
                         *  get：
                            
                            1.  请求参数会在地址栏中显示
                            2.  请求参数大小是有限制的
                            3.  不太安全
                         *  post
                            
                            1.  请求参数不会在地址栏中显示。会封装在请求体中
         *  表单项中的数据要想被提交，必须指定其name属性

*  表单项标签
    
     *  input：可以通过type属性值，改变元素展示的样式
        
         *  type属性：
            
             *  placeholder 指定默认显示的字符
             *  username
             *  password
             *  radio：单选框，
                
                1.  要想让多个单选框实现单选的结果，则这多个单选框的name属性必须相同
                2.  一般会给每一个单选框提供value属性，
                3.  checked属性，可以指定默认值
             *  checkbox：复选框
             *  file： 文件选择框
             *  hidden：用于提交一些数据
             *  按钮
                
                 *  submit 提交按钮
                 *  button 普通按钮
                 *  image 图片提交按钮
         *  label：指定输入项下的文字描述信息
         *  label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点
     *  select：下拉列表
        
         *  子元素 option指定列表项
     *  textarea：文本域
        
         *  cols 指定列数，每一行有多少个字符
         *  rows 默认多少行

<!DOCTYPE html>
    <html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
    </head>
    <body>
    
    白日依山尽，<br>
    黄河入海流。<br>
    
    
        Paulson 很帅
        <h1>Paulson 很帅</h1>
        <h2>Paulson 很帅</h2>
        <h3>Paulson 很帅</h3>
        <h4>Paulson 很帅</h4>
        <h5>Paulson 很帅</h5>
        <h6>Paulson 很帅</h6>
    
    
        <p>因为公司组织架构调整，测试室整体裁撤，所以找工作。期望薪资23k
        <p>我叫魏元宝，2018年毕业北京信息科技大学，专业计算机科学与技术，
    
    
    <hr color="red" width="200" size="10" align="left">
    
    白日依山尽<br>
    <b>白日依山尽</b> <br>
    <i>白日依山尽</i> <br>
    
    
    <font color="red" size="5" face="楷体">白日依山尽</font> <hr>
    <font color="#FF00FF" size="5" face="楷体">白日依山尽</font>
    
    <hr width="50%">
    
    <center>
        <font color="#FF00FF" size="5" face="楷体">白日依山尽</font>
    </center>
        <form action="#" method="get">
    
            用户名: <input name="username" placeholder="请输入用户名"><br>
            密码: <input type="password" name="password" placeholder="请输入密码"><br>
            性别: <input type="radio" name="gender" value="male" checked> 男
                  <input type="radio" name="gender" value="female"> 女
            <br>
            爱好: <input type="checkbox" name="hobby" value="shopping"> 逛街
            <input type="checkbox" name="hobby" value="java" checked> Java
            <input type="checkbox" name="hobby" value="python"> Python
            <br>
            图片: <input type="file" name="file"><br>
            隐藏域: <input type="hidden" name="id", value="hidden"> <br>
            取色器: <input type="color" name="color"> <br>
            生日: <input type="date" name="birthday"> <br>
            生日: <input type="datetime-local" name="birthday"> <br>
            邮箱: <input type="email" name="email"> <br>
    
            省份: <select name="province">
                <option>--请选择--</option>
                <option value="1">北京</option>
                <option value="2" selected>上海</option>
                <option value="3">陕西</option>
        </select><br>
            自我描述: <textarea cols="20", role="10" name="desc"></textarea>
    
    
    
            <input type="submit" value="登录"><br>
        </form>
    
    
    </body>
    </html>

###### 案例（注册页面） ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    </head>
    <body>
        <form action="#" method="get">
            <table border="1" align="center" width="500">
                <tr>
                    <td><label for="username">用户名</label></td>
                    <td><input type="text" id="username" name="username"></td>
                </tr>
    
                <tr>
                    <td><label for="password">密码</label></td>
                    <td><input type="password" id="password" name="password"></td>
                </tr>
    
                <tr>
                    <td><label for="email">邮箱</label></td>
                    <td><input type="email" id="email" name="email"></td>
                </tr>
    
                <tr>
                    <td><label for="name">姓名</label></td>
                    <td><input type="text" id="name" name="name"></td>
                </tr>
    
                <tr>
                    <td><label for="tel">手机号</label></td>
                    <td><input type="text" id="tel" name="tel"></td>
                </tr>
    
                <tr>
                    <td><label >性别</label></td>
                    <td><input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female">女</td>
                </tr>
    
                <tr>
                    <td><label for="birthday">出生日期</label></td>
                    <td><input type="date" id="birthday" name="birthday"></td>
                </tr>
    
                <tr>
                    <td><label for="checkcode">验证码</label></td>
                    <td>
                        <input type="text" id="checkcode" name="checkcode">
                        <img src="">
                    </td>
                </tr>
    
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="注册"></td>
                </tr>
    
    
            </table>
        </form>
    
    </body>
    </html>

# 2、 CSS： #

1.  概念： Cascading Style Sheets 层叠样式表
    
     *  层叠：多个样式可以作用在同一个html的元素上，同时生效
2.  好处
    
    1.  功能强大
    2.  将内容展示和样式控制分离
        
         *  降低耦合度。解耦
         *  让分工协作更容易
         *  提高开发效率
3.  CSS的使用：CSS与HTML结合方式
    
    1.  内联样式
        
        1.  在标签内使用style指定css代码
    2.  内部样式
        
        1.  在head标签内定义style标签，stype标签的标签体内容就是css代码
    3.  外部样式
        
        1.  将css代码抽取到外部
        2.  在head标签，定义link标签，引入外部的资源
    
     *  1,2,3种方式，css的范围越来越大
     *  1不常用，常用2,3

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS与HTML</title>
        <style> div{ color: blue; } </style>
    
        <link rel="stylesheet" href="css/a.css">
    </head>
    <body>
    
    <div style="color: darkgreen">Hello1 CSS & HTML</div>
    
    <div>Hello1 CSS & HTML</div>
    
    <div>Hello1 CSS & HTML</div>
    </body>
    </html>

1.  CSS语法
    
     *  格式：  
        选择器\{  
        属性名1：属性值1；  
        属性名2：属性值2；  
        属性名3：属性值3；  
        \}
     *  选择器：筛选具有相似特征的元素
     *  注意
        
         *  每一对属性需要使用；隔开，最后一对可以不使用
2.  选择器

*  分类
    
    1.  基本选择器
        
        1.  id选择器 \#id属性值\{\}
        2.  元素选择器 标签名称\{\}
        3.  类选择器 .class
    2.  扩展选择器
        
        1.  选择所有元素 \*
        2.  并集选择器 ：选择器1，选择器2
        3.  子选择器：选择器1 选择器2
        4.  父选择器：选择器1>选择器2

1.  属性
    
     *  盒子模型：控制布局
        
         *  margin ：外边距
         *  padding: 内边距
            
             *  默认情况下内边距会影响这个盒子的带下
             *  box-sizeing：border-box；设置盒子的属性，让width和height就是最终盒子的大小
     *  float 浮动
        
         *  left
         *  right

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> div{ border: 1px solid red; width: 100px; } .div1{ width: 100px; height: 100px; /*margin-left: 50px; 外边距*/ } .div2{ width: 200px; height: 200px; padding: 50px; /* 设置盒子的属性，让width和height就是最终盒子的大小 */ box-sizing: border-box; } .div3{ float: left; } .div4{ float: left; } .div5{ float: left; } </style>
    </head>
    <body>
        <div class="div2">
            <div class="div1"></div>
        </div>
        <div class="div3">aaa</div>
        <div class="div4">bbb</div>
        <div class="div5">ccc</div>
    </body>
    </html>

# CSS注册页面 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/backround.png") no-repeat center; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /* 让div居中*/ margin:auto; padding: 15px; margin-top: 15px; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left p:first-child{ color: #FFD026; font-size: 20px; } .rg_left p:last-child{ color: #A6A6A6; font-size: 20px; } .rg_center{ /*border: 1px solid red;*/ float: left; width: 450px; } .rg_right{ /*border: 1px solid red;*/ float: right; } .rg_right p:first-child{ font-size: 15px; margin: 15px; } .rg_right p a{ color: pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px; } #username, #password, #email, #name, #tel, #birthday, #checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6; /* 设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } </style>
    </head>
    <body>
        <div class="rg_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>
    
            <div class="rg_center">
                <div class="rg_form">
                    <form action="#" method="get">
                        <table >
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right"><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right"><input type="password" id="password" name="password" placeholder="请输入密码"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="email">邮箱</label></td>
                                <td class="td_right"><input type="email" id="email" name="email" placeholder="请输入邮箱"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" id="name" name="name" placeholder="请输入姓名"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="tel">手机号</label></td>
                                <td class="td_right"><input type="text" id="tel" name="tel" placeholder="请输入手机号"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label >性别</label></td>
                                <td class="td_right"><input type="radio" name="gender" value="male"> 男
                                    <input type="radio" name="gender" value="female">女</td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" id="birthday" name="birthday" ></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="checkcode">验证码</label></td>
                                <td class="td_right">
                                    <input type="text" id="checkcode" name="checkcode" placeholder="请输入验证码">
                                    <img src="">
                                </td>
                            </tr>
    
                            <tr>
                                <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
                            </tr>
    
    
                        </table>
                    </form>
                </div>
    
            </div>
    
            <div class="rg_right">
                <p>已有账号？<a href="#">立即登录</a></p>
            </div>
        </div>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70]: /images/20230531/8adbc5d4298d401597d97cfbfda38e90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 1]: /images/20230531/4289f8a603b34814a8d0e2339616fc56.png