黑马JavaWeb就业课自用笔记day02_css

卡米亚や

已于 2022-04-26 12:00:10 修改

阅读量147

点赞数 2

分类专栏： JavaWeb 文章标签：前端 css

于 2022-04-13 14:42:49 首次发布

本文链接：https://blog.csdn.net/m0_46940416/article/details/124147651

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 
            表单标签：
                作用，客户端浏览器可以让用户进行输入
                form标签
                属性：action="属性值" 表示用户输入的内容，被发送到服务端的路径
                    表单中所有填写的内容，发送到指定的服务器上

                属性：method="表单数据的发送方式"，提交方式：GET POST


            输入标签：input

                文本框输入：属性type="text"
                            value="文本框的默认值"
                            placeholder="请输入用户名"
                            name="文本框定义名字"
                
                密码输入框：属性type="password"
                            placeholder="请输入密码"
                            name="密码框定义名字"
                
                单选按钮：属性type="radio"
                            name="定义名字" 同名的单元按钮可以单选
                            checked="checked" 默认选中属性
                        注意：属性很特别，属性名和属性值一样，固定写法

                复选按钮：属性type="checkbox"
                            checked="checked" 默认选中属性

                文件域：属性type="file"
                    文件上传服务器

                按钮：
                    普通按钮：属性type="button"
                            value="按钮上显示的文本"
                            配合后面的JavaScript技术
                    
                    重置按钮：属性type="reset"

                    提交按钮：表单数据发送至服务器
                        提交按钮：属性type="submit"
                        图片按钮：属性type="image"
                    
                    下拉菜单：标签select
                    菜单中，多个菜单项，标签：option
                    属性：实现多项选择 multiple="mutiple" 固定写法，配合ctrl键使用

                    多行文本域：textarea
                        cols 列数
                        rows 行数

         -->
         <form action="#" method="get">
             用户名<input type="text" placeholder="请输入用户名" name="user"/><br />
             密&nbsp码<input type="password" placeholder="请输入密码"/><br />
             性&nbsp别<input type="radio" name="gender" checked="checked"/>男
             <input type="radio" name="gender"/>女<br />

             爱好<input type="checkbox" checked="checked"/>抽烟
             <input type="checkbox"/>喝酒
             <input type="checkbox"/>烫头<br />
             上传头像<input type="file"/><br />

             <input type="button" value="注册"/><input type="reset"/><input type="submit" value="注册"/><br />
             <input type="image" src="1.jpg" width="200"/><br />
             
             <select multiple="mutiple">
                 <option>北京</option>
                 <option>上海</option>
                 <option>广州</option>
                 <option>深圳</option>
                 <option>湖北</option>
             </select><br />

             <textarea cols="50" rows="5"></textarea>
         </form>
    </body>

</html>

服务器提交方式get和post的区别

get:

表单提交的参数，放在浏览器地址栏

数据的格式k=v多个键值对使用&分割

服务器获取提交的数据，依靠的是键

缺点：暴露敏感数据

浏览器的地址栏数据有限，不适合提交过大的数据

post：

表单提交的参数，不会显示在地址栏上

不会暴露敏感信息

没有数据大小的限制

http协议区别：

get：参数放在请求行

post：参数放在请求体

div和span

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*css注释*/
            h3{
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- 
            div标签：
                div 块级元素标签
                标展屏幕的一行
                就是页面中的一行
                配合css样式表

            span标签：
                span行级标签
                不会霸占屏幕一行

            css 层叠样式表
                美化页面作用
                HTML显示数据，css美化效果
                语法结构{
                    属性名:属性值;
                    属性名:属性值
                }
                选择器:对HTML的哪个标签起作用
                属性名:如何设置


         -->

         <div>123</div>4
         <span>我是span标签</span>4
         <h3>h3标题</h3>
         <h6>h6标题</h6>
         
    </body>

</html>

样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h3{
                color: chocolate;
            }
        </style>
    </head>
    <body>
        <!-- 
            css的引入方式---
            行内样式:
                在HTML标签，添加属性style="属性:属性值"
                作用域最小，作用当前标签
                行内样式优先级最高

            内部样式:
                在HTML页面里面写css
                标签style，一般写在head中
                属性:type="text/css"
                作用是当前整个页面有效
         -->

         <h3 style="color: red;">h3标题</h3>
         <h3>哈哈</h6>
         
    </body>

</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="1.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <!-- 
            css的引入方式---
            行内样式:
                在HTML标签，添加属性style="属性:属性值"
                作用域最小，作用当前标签
                行内样式优先级最高

            内部样式:
                在HTML页面里面写css
                标签style，一般写在head中
                属性:type="text/css"
                作用是当前整个页面有效

            外部样式:
                css样式定义在另一个文件中，后缀名.css（文本文件）
                在HTML页面中，引入样式表
                标签link 写在head中
                属性: href="css"
                    type="text/css"
                    rel="引入的文件和当前页面是什么关系"
                    属性值: stylesheet

                作用范围最大，哪个页面引入，哪个有效
         -->

         <h3>h3标题</h3>
         <h3>哈哈</h3>
         
    </body>

</html>

选择器

基本选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /* 标签元素选择器，选择器名字和标签相同 */
            h1{
                color: red;
            }

            /* ID选择器 */
            #one{
                color: blue;
            }

            /* class选择器 */
            .two{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <!-- 
            CSS基本选择器：
                选择器就是对HTML标签的作用
                标签元素选择器
                    同名标签有效

                ID选择器
                    选择器名字前面加#
                    标签上，添加属性id="选择器名"

                class选择器，类选择器
                    选择器名字前面加
                    标签上，添加属性class="选择器名"

                注意：
                    尽量不要使用ID选择器，如果需要使用ID选择器
                    保证：ID的属性值具有唯一性
                        JavaScript：对象document，方法getFlementById("id属性值")
                    标签变成对象，只要找到，就不找了

                        id属性和class谁的优先级高，id优先级高于class


         -->

         <h1>123</h1>
         <h1>456</h1>

         <h2 id="one">789</h2>
         <h2 id="one" class="two">789</h2>

         <h2 class="two">789</h2>
         
    </body>

</html>

属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input[type="text"]{
                color: red;
            }
            input[type="password"]{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <!-- 
            CSS中的属性选择器
            选择器[属性名="属性值"]

         -->

         用户名<input type="text"/><br />
         密码<input type="password"/>
         
    </body>

</html>

包含选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div span{
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- 
            CSS中的包含选择器
            选择器 选择器{}
            div span div的后代子标签span
            
         -->

         <div>哈哈</div>
         <div>
             <span>div中的span</span>
         </div>

         <span>就是span</span>
         
    </body>

</html>

伪元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /* 没点过 */
            a:link{color: #333333; text-decoration: none;}
            /* 点过 */
            a:visited{color: #333333; text-decoration: none;}
            /* 鼠标悬浮 */
            a:hover{color: red; text-decoration: none;}
            /* 激活 */
            a:active{color: green; text-decoration: none;}
        </style>
        
    </head>
    <body>
        <!-- 
            伪元素选择器：超链接
            四个状态：没点过，点过，鼠标悬浮，激活
            样式：固定顺序 l-v-h-a
            
         -->

         <a href="http://www.itheima.com">黑马</a>
         <a href="http://www.baidu.com">百度</a>
        
         
    </body>

</html>

属性

边框属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                /* 设置边框，粗细，颜色，样式(实线，虚线，点划线，双实线) */
                /* border-right: 5px yellow dotted; */
                border: 10px solid blue ;
            }
        </style>
        
    </head>
    <body>
        <!-- 
            CSS边框属性
            border
            border-top,left,bottom,right
            
         -->

         <div>ssss</div>
         
         
    </body>

</html>

转换属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
        </style>
        
    </head>
    <body>
        <!-- 
            转换属性：display
            属性值：none(不显示)
            属性值：inline(行元素显示)
            
         -->
        
         <div style="display: none;">我是div</div>
         <span style="display: block;">我是span</span>

         <br />
         <div style="display: inline;">哈哈</div>456
         
    </body>

</html>

css字体属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                font-family: 华文彩云;
                font-size: 16px;
                color: red;
                /* 加粗，建议直接用加粗标签 */
                /* font-weight: bold; */
            }
        </style>
        
    </head>
    <body>
        <!-- 
            CSS字体属性
            font-size：文本大小（默认16px）
            font-family：字体
            
         -->
        
         <div>文字</div>
         
    </body>

</html>

css背景属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /* body{
                background-color: red;
            } */
            div{
                width: 200px;
                height: 200px;
                background-color: blue;
                background-image: url(1.jpg);
            }
        </style>
        
    </head>
    <body>
        <!-- 
            CSS背景属性
            background-color 背景色
            background-image 背景图
            有背景图时只添加背景图
            
         -->
        
         <div>文字</div>
         
    </body>

</html>

css浮动属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
        </style>
        
    </head>
    <body>
        <!-- 
            CSS浮动属性
            float：两个div在同一行出现
                div1漂浮起来
            清除浮动：clear 不会跟随上一个元素浮动
         -->
        
         <div>
            <div style="float: left;">div1</div>
            <div style="float: left;">div2</div>
            <div style="clear: both;">div3</div>
         </div>
         
    </body>

</html>

盒子模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                /* margin-top: 50px;
                margin-left: 100px;
                padding-top: 5px;
                padding-left: 10px; */
                /* margin: 50px; */
                /* margin: 10px 50px; 上下10 左右50 */
                /* margin: 10px 20px 30px; 上10 左右20 下30 */
                /* margin: 10px 20px 30px 40px; 顺时针 上右下左 */
                margin: 0 auto;
            }
        </style>
        
    </head>
    <body>
        <!-- 
            盒子模型：处理边距的
         -->
        
         <div>
            我是div
         </div>
         
    </body>

</html>

注册界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background-image: url(1.jpg);
            }
            .form{
                width: 550px;
                height: 400px;
                border: 1px solid black;
                background-color: white;
                margin: 0 auto;
                margin-top: 100px;
            }
            .form span{
                color: blue;
                font-size: 22px;
                margin-left: 100px;
            }
        </style>
        
    </head>
    <body>
        <!-- 
            注册
         -->
        
         <div class="form">
             <br />
             <br />
            <span>用户注册</span><b> USERREGISTER</b>
         

         <form action="#" method="post">
            <table align="center">
                <tr>
                    <td>用户名</td>
                    <td><input type="text"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="radio" name="gender">男<input type="radio" name="gender">女</td>
                    <td></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td><input type="text"></td>
                    <td><img src="2.jpg" width="50px"></td>
                </tr>
                <tr>
                    <td align="center" colspan="3"><input type="image" src="3.jpg" width="50px"></td>
                </tr>
            </table>
        </form>

        </div>
         
    </body>

</html>

卡米亚や

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马JavaWeb就业课自用笔记day02_css

css<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 表单标签：作用，客户端浏览器可以让用户进行输入 form标签
复制链接

扫一扫