day 45

時間 2019-11-14

標籤 day 简体版

原文原文鏈接

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>