form表單(**************)
- 引數
  - action
  - method
- select標簽下拉框
- textarea標簽
CSS
- 注釋
- css的語法結構
- css的三種引入方式
- css查找(重要)
基本選擇器
- 元素選擇器
- id選擇器
- 類選擇器
- 通用選擇器
組合選擇器
- div span(后代選擇器)
- div>span(兒子選擇器)
- div~span(兄弟選擇器)
- div+span(毗鄰選擇器)
屬性選擇器
偽類選擇器
偽元素選擇器
選擇器優先級

form表單(**************)

能夠獲取用戶輸入(輸入，選擇，上傳的檔案)

引數

action

控制資料提交的地址

三種書寫方式

1.不寫默認就是朝當前頁面所在的地址提交資料

2.寫全路徑(https://www.baidu.com)

3.只寫路徑后綴(/index/)

method

控制資料提交的方式

get from表單默認是get請求

post

通常情況下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="https://www.cnblogs.com/colacheng0930/p/水箱" name="username">
    </label>
</p>
<p>密碼:<input type="password"></p>
<p>生日:<input type="date"></p>
<p>性別:男:<input type="radio" name="gender" value="https://www.cnblogs.com/colacheng0930/p/male">
女:<input type="radio" name="gender" value="https://www.cnblogs.com/colacheng0930/p/female"></p>
<p>愛好:唱:<input type="checkbox" name="hobby" value="https://www.cnblogs.com/colacheng0930/p/sing">
跳:<input type="checkbox" name="hobby" value="https://www.cnblogs.com/colacheng0930/p/dump">
籃球:<input type="checkbox" name="hobby" value="https://www.cnblogs.com/colacheng0930/p/basketball"></p>
<p>省份:
<select name="province" id="">
    <option value="https://www.cnblogs.com/colacheng0930/p/SH">上海</option>
    <option value="https://www.cnblogs.com/colacheng0930/p/BJ">北京</option>
    <option value="https://www.cnblogs.com/colacheng0930/p/CQ">重慶</option>
</select></p>
<p>自我介紹
    <textarea name="info" id="" cols="200" rows="10"></textarea>
</p>
<p>
    <input type="button" value="https://www.cnblogs.com/colacheng0930/p/按鈕">
    <input type="reset" value="https://www.cnblogs.com/colacheng0930/p/重置">
    <input type="submit" value="https://www.cnblogs.com/colacheng0930/p/提交">
    <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 >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>

通用選擇器

<!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選擇器(其次) > 類選擇器(使用最頻繁) > 元素選擇器

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106453.html

標籤：Html/Css

上一篇：CSS3 新增選擇器

下一篇：JavaWeb第二天--CSS

day 45