day 45

时间  2019-11-14
标签 day 繁體版
原文   原文链接

目录css

form表单(**************)

可以获取用户输入(输入，选择，上传的文件)html

参数

action

控制数据提交的地址后端

三种书写方式post

1.不写 默认就是朝当前页面所在的地址提交数据spa

2.写全路径(https://www.baidu.com)code

3.只写路径后缀(/index/)orm

method

控制数据提交的方式htm

get from表单默认是get请求事件

postip

==一般状况下input须要结合label一块儿使用==

绑定id值，以后点击label标签内任何的位置均可以自动选中input框

根据type参数的不一样，展现不一样的功能

text    普通文本
password    输入的内容，会变成密文
date    日期
radis   单选圆圈
checkbox    多选 打钩
hidden  隐藏
file    传文件

button  普通按钮，没有任何意义，然而是用的最多的，能够绑定js事件
reset   重置按钮
submit  提交按钮，可以自动触发form表单提交数据的动做

select标签 下拉框

一个个的option标签就是一个个的选项

默认为单选

能够给select标签加一个multipe参数，就能够将单选变成多选

textarea标签

可获取大段文本

input标签能够加disable属性，禁用该input框
input标签能够叫value属性，设置默认值
选择的标签   如何默认选中
    redio
    checkbox
        checked='checked'
        当属性名和属性值相同的时候，能够只写属性名(******)
可以触发form表单提交数据的动做有两个标签能够(******)
    input标签 type=submit
    button标签

全部获取用户输入的标签，都应该有name属性(******)
    name属性就相似于字典的key
    input框获取到的用户输入都会放到input框的value属性中

针对选择框，传到后端的数据，有value属性决定

form表单若是要提交文件数据，必须修改如下参数
    enctype="multipart/form-data"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>恰猪肉哟</title>
</head>
<body>
<h1>注册界面</h1>
<form action="https://127.0.0.1:8848/index/" method="post" enctype="multipart/form-data">
    <p>
    <label for="d1">
        用户名:<input type="text" id="d1" value="水箱" name="username">
    </label>
</p>
<p>密码:<input type="password"></p>
<p>生日:<input type="date"></p>
<p>性别:男:<input type="radio" name="gender" value="male">
女:<input type="radio" name="gender" value="female"></p>
<p>爱好:唱:<input type="checkbox" name="hobby" value="sing">
跳:<input type="checkbox" name="hobby" value="dump">
篮球:<input type="checkbox" name="hobby" value="basketball"></p>
<p>省份:
<select name="province" id="">
    <option value="SH">上海</option>
    <option value="BJ">北京</option>
    <option value="CQ">重庆</option>
</select></p>
<p>自我介绍
    <textarea name="info" id="" cols="200" rows="10"></textarea>
</p>
<p>
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <button>俺只是一个button标签</button>
</p>


</form>

</body>
</html>

CSS

层叠样式表

用来控制html标签样式的

注释

/*单行注释*/

/*
多行注释1
多行注释2
*/

一般在写css的时候，都会单独写一个css文件，里面只有css代码

/*某某网址首页的css样式文件*/

/*通用样式*/

/*导航条样式*/

/*轮播图样式*/

css的语法结构

选择器{属性：属性值}

属性和属性值之间用冒号（==:==）隔开，定义多个属性时，属性之间用英文输入法下的分号（==;==）隔开，最后一条属性能够不加分号

css的三种引入方式

1.经过link标签引入外部的css文件(最正规的方法)

​

2.直接在html页面上的head内经过style标签直接书写css代码

<style>
        h1{
            color: green;
        }
    </style>

3.行内式(直接在标签内部经过style属性直接书写)，不推荐使用

<h1 style="color: orange">我是Coach</h1>

css查找(重要)

只要学会了css的查找，以后js、jQurey的标签查找都是一个原理

基本选择器

元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就这样吧</title>
</head>
<body>

<style>
    /*标签选择器，直接写标签名字*/
    span {
        color: darkred;
    }
</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>span</span>
    <span>span</span>
</div>

<p>p
    <span>
        <span>span</span>
    </span>
</p>

</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就这样吧</title>
</head>
<body>

<style>

    /*id选择器 id必须是惟一的    #+id值*/
    #d1 {
        color: greenyellow;
    }

</style>


<span id="d1">span</span>
<span id="d2">span</span>
<span>span</span>
<span>span</span>

<div id="d3">div
    <span>span</span>
    <span>span</span>
</div>

<p>p
    <span>
        <span>span</span>
    </span>
</p>


</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就这样吧</title>
</head>
<body>

<style>
    /*类选择器 .+类值*/
    .c1 {
        color: purple;
    }
</style>


<span class="c1">span</span>
<span class="c2">span</span>
<span>span</span>
<span>span</span>

<div class="c1">div
    <span>span</span>
    <span>span</span>
</div>

<p class="c3">p
    <span>
        <span>span</span>
    </span>
</p>


</body>
</html>

通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>就这样吧</title>
</head>
<body>

<style>
   /*通用选择器  *表明所有*/    
   * {
       color: orange
   }
   
   
</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
   <span>span</span>
   <span>span</span>
</div>

<p>p
   <span>
       <span>span</span>
   </span>
</p>


</body>
</html>

组合选择器

div span(后代选择器)

只要在div这个标签内都属于div的后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就这样吧</title>
</head>
<body>

<style>
    /*后代选择器     空格表明后代*/
    div span {
        color: red;
    }

</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div内的span</span>
</div>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

div>span(儿子选择器)

大于号表明儿子(子代/儿砸)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就这样吧</title>
</head>
<body>

<style>
    /*子代选择器  '>'表明子代*/
    div>span {
        color: blue;
    }


</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div内的span</span>
        <p>
            div内p中的span
        </p>
</div>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

div~span(兄弟选择器)

~表明同级别下面全部的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就这样吧</title>
</head>
<body>

<style>
    /*兄弟选择器  '~'表明兄弟*/
    div~span {
        color: hotpink;
    }
    
</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div内的span</span>
        <p>
            div内p中的span
        </p>
</div>
<span>span</span>
<span>span</span>
<span>span</span>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

div+span(毗邻选择器)

紧挨着同级别的下面的那一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就这样吧</title>
</head>
<body>

<style>
    /*毗邻选择器*/
    div+span {
        color: yellow;
    }

</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div内的span</span>
        <p>
            div内p中的span
        </p>
</div>
<span>span</span>
<span>span</span>
<span>span</span>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

属性选择器

任何的标签都有本身默认的属性 id class

标签还支持自定义任何更多的属性(也就意味着可让标签帮用户携带一些额外的数据)(***************)

伪类选择器

a标签有四种状态

​ 1.没有被点击过

​ 2.鼠标悬浮在其上面

​ 3.点击以后不松手

​ 4.点击以后，再返回

​ 将input框用鼠标点进去以后的那个状态叫作 input获取焦点

鼠标移出去以后的状态，叫作input失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    a:link {
        color: red;
    }
    a:hover {
        color: hotpink;
    }
    a:active {
        color: yellow;
    }
    a:visited {
        color: greenyellow;
    }

    input:focus {
        background-color: darkred;
    }

    span:hover {
        background-color: aqua;
    }


</style>

<a href="https://www.sogo.com">click me</a>
<input type="text">
<span>span</span>

</body>
</html>

伪元素选择器

（清除浮动带来的负面影响）

能够经过css添加文本内容

选择器优先级

1.选择器相同的状况下，引入方式不一样

​ 遵循就近原则，谁离标签更近，就听谁的

2.选择器不一样的状况下

​ 行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程