目錄

• MySQL資料庫
• 一、多表查詢
  • 1.方式一：連表查詢
  • 2.方式二：子查詢
• 二、python操作資料庫
  • 1.python操作資料庫的基本操作
  • 2.pymysql的中方法
• 三、MySQL中的理論
  • 1.sql注入問題
    • （1）現象一：輸對使用者名稱即可登入
    • （2）現象二：不需要對的使用者名稱和密碼也可以登陸成功
    • （3）解決SQL注入
  • 2.檢視
  • 3.觸發器trigger
    • （1）觸發器的語法
    • （2）臨時修改sql語句的結束符
  • 4.事務Transaction
    • （1）事務的四大特性ACID
    • （2）資料庫操作
    • （3）事務相關關鍵字
    • （4）隔離級別
  • 5.儲存過程procedure
  • 6.MySQL中的內建函式
  • 7.流程控制
  • 8.索引
  • （1）索引的所用
  • （2）索引資料結構
    • （1）樹的型別
      • 1）B+樹
      • 2）B*樹
• 前端
• 一、web前端開發三大技術組成部分
• 二、HTTP協議
  • 1.http協議的四大特性
  • 2.資料格式
    • （1）請求格式
    • （2）響應格式
  • 3.響應狀態碼的含義和常見狀態碼
• 三、HTML超文字標記語言
  • 1.HTML的特點
  • 2.HTML的操作
    • （1）註釋語法
    • （2）html文件
    • （3）html標籤的分類
      • 1.按照書寫的形式來分
        • 1）單標籤（自閉和標籤）
        • 2）雙標籤
      • 2.按照佔據內容的大小類分
        • （1）行內標籤
        • （2）塊級標籤
  • 3.標籤的屬性
    • （1）預設屬性：標籤自帶
      • 1）a標籤
      • 2）img標籤
    • （2）自定義屬性
  • 4.常見符號對應的html程式碼
• 四、head內常見標籤
  • 1.title網頁標題
  • 2.meta配置資訊
  • 3.style支援編寫css程式碼
  • 4.link標籤引入外部css檔案
  • 5.script標籤支援寫js程式碼
• 五、body內基本標籤
  • 1.標籤的行內標籤和塊級標籤的巢狀
  • 2.標題內基本標籤h1至h6
  • 3.段落標籤
  • 4.其他標籤
  • 5.換行與分割線
• 六、body內其他重要的標籤
  • 1.無序列表
  • 2.有序列表
  • 3.標題列表
  • 4.表格標籤
  • 5.表單標籤
    • 1.表單標籤簡介
    • 2.基於form表單傳送資料
• 前端2:css
• -html標籤的兩大重要屬性
  • 1.class屬性
  • 2.id屬性
• 一、CSS語法結構
  • 1.語法結構
  • 2.CSS註釋語法
  • 3.引入CSS的多種方式
    • （1）嵌入式
    • （2）外鏈式
    • （3）內聯樣式（行內式）
• 二、CSS選擇器
  • 1.CSS基本選擇器
  • 2.CSS組合選擇器
  • 3.選擇器的分組與巢狀
    • （1）合併查詢
    • （2）混合使用
  • 4.屬性選擇器
  • 5.偽類選擇器
  • 6.偽元素選擇器
• 三、選擇器優先順序
  • 1.選擇器相同，匯入方式不同
  • 2.選擇器不同，匯入方式不同
  • 3.打破選擇器優先順序
• 四、CSS的屬性
  • 1.字型樣式
  • 2.背景屬性
  • 3.邊框樣式
  • 4.display屬性
• 五、盒子模型
• 五、浮動
  • 1.浮動簡介
  • 2.浮動造成的塌陷現象
  • 3.通過clear屬性來避免浮動
• 六、 overflow溢位屬性
• 七、定位
  • 1.定位為四種狀態
  • 2.z-index

MySQL資料庫

---

一、多表查詢

笛卡爾積這種兩張表直積的方式，將兩張表中的記錄混亂連線的方式，所形成的虛擬表，並非我們想要的方式，所以mysql中涉及多表查詢有兩張方式

1.方式一：連表查詢

關鍵字

inner join  內連線 可以簡寫成join
left join 左連線
right join 右連線
union 全連線

• inner join

  將兩張表按照某種連線條件連線起來

select * from emp join dep on dep.id=emp.dep_id;

+----+--------+--------+------+--------+-----+--------------+
| id | name   | sex    | age  | dep_id | id  | name         |
+----+--------+--------+------+--------+-----+--------------+
|  1 | jason  | male   |   18 |    200 | 200 | 技術         |
|  2 | dragon | female |   48 |    201 | 201 | 人力資源     |
|  3 | kevin  | male   |   18 |    201 | 201 | 人力資源     |
|  4 | nick   | male   |   28 |    202 | 202 | 銷售         |
|  5 | owen   | male   |   18 |    203 | 203 | 運營         |
+----+--------+--------+------+--------+-----+--------------+

預設按join左表為基準，不顯示兩張表沒有關聯的資料

• left join

  以左表為基準，左表中的資料與右表中沒有關聯的也會顯示

select * from dep left join emp on emp.dep_id=dep.id;

+-----+--------------+------+--------+--------+------+--------+
| id  | name         | id   | name   | sex    | age  | dep_id |
+-----+--------------+------+--------+--------+------+--------+
| 200 | 技術         |    1 | jason  | male   |   18 |    200 |
| 201 | 人力資源     |    2 | dragon | female |   48 |    201 |
| 201 | 人力資源     |    3 | kevin  | male   |   18 |    201 |
| 202 | 銷售         |    4 | nick   | male   |   28 |    202 |
| 203 | 運營         |    5 | owen   | male   |   18 |    203 |
| 205 | 財務         | NULL | NULL   | NULL   | NULL |   NULL |
+-----+--------------+------+--------+--------+------+--------+

• right join

  以右表為基準，有表中沒有的資料也會顯示

select * from dep right join emp on dep.id=emp.dep_id;

+------+--------------+----+--------+--------+------+--------+
| id   | name         | id | name   | sex    | age  | dep_id |
+------+--------------+----+--------+--------+------+--------+
|  200 | 技術         |  1 | jason  | male   |   18 |    200 |
|  201 | 人力資源     |  2 | dragon | female |   48 |    201 |
|  201 | 人力資源     |  3 | kevin  | male   |   18 |    201 |
|  202 | 銷售         |  4 | nick   | male   |   28 |    202 |
|  203 | 運營         |  5 | owen   | male   |   18 |    203 |
| NULL | NULL         |  6 | jerry  | female |   18 |    204 |
+------+--------------+----+--------+--------+------+--------+

• union

  將兩張表聯合起來，兩張表中沒有連線的資料，都會顯示出來

select * from dep right join emp on dep.id=emp.dep_id
union
select * from dep left join emp on dep.id=emp.dep_id;

+------+--------------+------+--------+--------+------+--------+
| id   | name         | id   | name   | sex    | age  | dep_id |
+------+--------------+------+--------+--------+------+--------+
|  200 | 技術         |    1 | jason  | male   |   18 |    200 |
|  201 | 人力資源     |    2 | dragon | female |   48 |    201 |
|  201 | 人力資源     |    3 | kevin  | male   |   18 |    201 |
|  202 | 銷售         |    4 | nick   | male   |   28 |    202 |
|  203 | 運營         |    5 | owen   | male   |   18 |    203 |
| NULL | NULL         |    6 | jerry  | female |   18 |    204 |
|  205 | 財務         | NULL | NULL   | NULL   | NULL |   NULL |
+------+--------------+------+--------+--------+------+--------+

2.方式二：子查詢

子查詢：將一條sql語句查詢的結果，當成另外一條sql語句的查詢條件，所需結論來自於一張表的欄位，則可以使用子查詢

• 例：查詢名為kevin的員工的部門名稱

1.查詢kevin的部門編號
select dep_id from emp where name='kevin';
2.根據部門編號查詢名稱
select name from dep where id in (select dep_id from emp where name='kevin');

+--------------+
| name         |
+--------------+
| 人力資源      |
+--------------+

• 子查詢中可以與運算子或者關鍵字連線，表示不同的含義

關鍵字	含義
in	成員運算，in()後面的是結果集的虛擬表或者直接的結果
not in	in 的取反結果
any	用來比較與子查詢資料集中的任意值的結果。any必須和其他的比較運算子共同使用，而且any必須將比較運算子放在any
some	與any同義，用法一致
all	與any相似，但是意思不同，all表示所有，any表示任意一個
exists	exists sql 1 exists sql 2判斷sql2是否有結果，有結果則執行sql1

二、python操作資料庫

1.python操作資料庫的基本操作

import pymysql

# 1 連線mysql connect中進行配置
conn = pymysql.connect(
    host='127.0.0.1',
    port=3306,
    user='root',
    passwd='root123',
    database='day43',
    charset='utf8',
    autocommit=True
)
# 2 產生遊標物件，由遊標物件來對資料表中的資料進行操作
cursor = conn.cursor()
""" 
cursor = conn.cursor(pymysql.cursors.DictCursor)
中的pymysql.cursors.DictCursor引數可以將
cursor返回的資料以列表中套元組的形式，轉換成列表中套字典
"""


# 3 編寫sql語句
sql = 'show databases'  # 在python中sql語句編寫

# 4 傳送sql語句
# execute方法的返回值是sql語句執行後影響的行數
affect_rows = cursor.execute(sql)

# 5 獲取sql語句執行的結果
res = cursor.fetchall()
print(res)
"""
(('information_schema',), ('day43',), 
('db1129',), ('db3',), ('dbday43',), 
('empdb',), ('kerdidb',), ('mysql',), 
('performance_schema',), ('sys',))
"""

2.pymysql的中方法

方法	作用
fetchall()	獲取所有的結果
fetchone()	獲取結果集的第一個資料
fetchmany()	獲取指定數量的結果集

三、MySQL中的理論

1.sql注入問題

通過sql語句的中輸入特殊符號，從而避開正常的業務邏輯，成為漏洞

（1）現象一：輸對使用者名稱即可登入

• 當我們輸入使用者名稱

# 輸入
jason' --  234123dwsf 

• 我們可以檢視，待執行的sql語句

select * from register where name='jason' --  234123dwsf' and pwd=''

• 當我們手動輸入'來補全字元的拼接，然後輸入--將後面密碼的輸入註釋掉，這種注入方式，

（2）現象二：不需要對的使用者名稱和密碼也可以登陸成功

• 當我們輸入使用者名稱

# 輸入
xyz ' or 1=1 -- asdfa

• 我們可以檢視，待執行的sql語句

select * from register where name='xyz ' or 1=1 -- asdfa' and pwd=''

• 當我們的輸入包含' or 1=1 --之後，where後面條件是 name='xxxx' or 1=1則1=1是一定成立的，所以不需要知道使用者名稱就可以直接登入

（3）解決SQL注入

針對上述的SQL注入問題，核心在於手動拼接了關鍵資料

所以，我們不應該手動拼接SQL語句，應該交給execute來處理，execute底層已經幫我們做好了過濾特殊符號組合產生的特殊含義的問題

2.檢視

（1）檢視：檢視是我們通過查詢得到的一張虛擬表，這張表存於記憶體中，當我們下次需要的時候，我們可以直接使用，這張表只有表結構，沒有表資料。檢視主要用於優化查詢

（2）關於檢視的操作

• 建立檢視

create view 檢視名 as 虛擬表操作;

檢視的名稱應該見名知意，表名中包含資料來源的表

• 查詢檢視

select * from 檢視名;

• 修改檢視

alter view 檢視名 as 新的查詢語句;
-- 可以修改檢視的來源表

• 刪除檢視

drop view 檢視;

3.觸發器trigger

在mysql中，針對虛擬表進行insert、刪除delete、修改update的操作能夠自動觸發我們之前設定的sql語句，這樣的情況叫做觸發器

（1）觸發器的語法

create trigger 觸發器的名字 before/after insert/update/delete on 表名 for each row
begin
	sql語句
end
# 當sql語句的時候觸發

（2）臨時修改sql語句的結束符

​ 由於有些操作中需要使用分號，這個時候就需要用關鍵字delimiter修改結束符分號

# 語法
delimiter 臨時宣告結束符

4.事務Transaction

在關係資料庫中，一個事務可以是一條SQL語句，一組SQL語句或整個程式。

（1）事務的四大特性ACID

A：atomicity原子性，一個事務是一個不可分割的工作單位，要麼同時成功，要麼同時失敗

C：consistency一致性，事務必須是使資料庫從一個一致性狀態變到另一個一致性狀態。一致性與原子性是密切相關的。

I：isolation隔離性，一個事務的執行不能被其他事務干擾。即一個事務內部的操作及使用的資料對併發的其他事務是隔離的，併發執行的各個事務之間不能互相干擾。

D：durability永續性，永續性也稱永久性（permanence），指一個事務一旦提交，它對資料庫中資料的改變就應該是永久性的。接下來的其他操作或故障不應該對其有任何影響

（2）資料庫操作

mysql是完整事務，執行rollback或者commit標誌著事務結束

（3）事務相關關鍵字

關鍵字	含義
start transaction	開始事務
rollback	回滾到上一個狀態
commit	執行commit操作，資料重新整理到硬碟
savepoint	節點，部分事務，類似遊戲中的存檔點

（4）隔離級別

在SQL標準中定義了四種隔離級別，每一種級別都規定了一個事務中所做的修改
InnoDB支援所有隔離級別

設定隔離級別

	set transaction isolation level 級別

（1）未提交讀-髒讀read uncommitted

事務中的修改即使沒有提交，對其他事務也都是可見的，事務可以讀取未提交的資料，這一現象也稱之為"髒讀"

（2）提交讀-不可重複度 read committed

大多數資料庫系統預設的隔離級別

一個事務從開始直到提交之前所作的任何修改對其他事務都是不可見的，這種級別也叫做"不可重複讀"

（3）可重複讀repeatable read

MySQL預設隔離級別

能夠解決"髒讀"問題，但是無法解決"幻讀"

所謂幻讀指的是當某個事務在讀取某個範圍內的記錄時另外一個事務又在該範圍內插入了新的記錄，當之前的事務再次讀取該範圍的記錄會產生幻行，InnoDB和XtraDB通過多版本併發控制(MVCC)及間隙鎖策略解決該問題。

（4）可序列讀serializable

​ 強制事務序列執行，很少使用該級別

5.儲存過程procedure

儲存過程包含了一系列可以執行的SQL語句，儲存過程存放於MySQL中，通過呼叫它的名字可以執行其內部的SQL語句，可以看成是python中的自定義函式

（1）無參函式

delimiter $$
create procedure p1()
begin
	select * from cmd;
end $$
delimiter ;

# 呼叫
call p1()

（2）有參函式

delimiter $$
create procedure p2(
    in m int,  # in表示這個引數必須只能是傳入不能被返回出去
    in n int,  
    out res int  # out表示這個引數可以被返回出去，還有一個inout表示即可以傳入也可以被返回出去
)
begin
    select * from cmd where id > m and id < n;
    set res=0;  # 用來標誌儲存過程是否執行
end $$
delimiter ;

# 針對res需要先提前定義
set @res=10;  定義
select @res;  檢視 -- res=10
call p2(1,5,@res)  呼叫  -- 展示id為2，3，4的資料，並重制@res
select @res  檢視 -- @res=0

（3）關於儲存過程的操作

• 檢視儲存過程具體資訊

show create procedure pro1;

• 檢視所有儲存過程

show procedure status;

• 刪除儲存過程

drop procedure pro1;

6.MySQL中的內建函式

注意與儲存過程的區別，mysql內建的函式只能在sql語句中使用，可以看成python中的內建函式

函式名	作用
Trim ltrim rtrim	移除指定字元
lower`` upper	大小寫轉換
Left right	獲取左右起始指定個數字元
soundex	匹配發音類似的記錄
date_format	日期格式

7.流程控制

（1）if條件語句

delimiter //
CREATE PROCEDURE proc_if ()
BEGIN
    
    declare i int default 0;
    if i = 1 THEN
        SELECT 1;
    ELSEIF i = 2 THEN
        SELECT 2;
    ELSE
        SELECT 7;
    END IF;

END //
delimiter ;

（2）while迴圈

delimiter //
CREATE PROCEDURE proc_while ()
BEGIN

    DECLARE num INT ;
    SET num = 0 ;
    WHILE num < 10 DO
        SELECT
            num ;
        SET num = num + 1 ;
    END WHILE ;

END //
delimiter ;

8.索引

（1）索引的所用

1）索引就好比一本書的目錄，它能讓你更快的找到自己想要的內容。
2）讓獲取的資料更有目的性，從而提高資料庫檢索資料的效能。

（2）索引資料結構

索引底層其實是樹結構：樹是計算機底層的資料結構

（1）樹的型別

• 二叉樹、b樹、b+樹、b*樹

二叉樹：二叉樹裡面還可以細分成很多領域，

• b+樹/b*樹

只有葉子結點才會存放真實資料，

輔助索引的葉子結點存放的是資料的主鍵值，找到主鍵值再去聚焦索引裡拿到真實資料

1）B+樹

只有葉子結點存放真實資料，根和樹枝節點存的僅僅是虛擬資料

查詢次數由樹的層級決定，層級越低次數越少

一個磁碟塊兒的大小是一定的，那也就意味著能存的資料量是一定的。如何保證樹的層級最低呢？一個磁碟塊兒存放佔用空間比較小的資料項

思考我們應該給我們一張表裡面的什麼欄位欄位建立索引能夠降低樹的層級高度>>> 主鍵id欄位

2）B*樹

前端

---

一、web前端開發三大技術組成部分

直接和使用者互動的介面，都可以稱為前端、頁面、前端介面

而不和使用者直接打交道，負責真正內部的業務邏輯的執行的，稱之為後端

前端開發中的三大技術：HTML、CSS、JaveScript

名稱	作用
HTML超文字標記語言	網頁的內容
CSS層疊樣式表	網頁的樣式
JavaScript網頁尾步語言	網頁的動態

二、HTTP協議

1.http協議的四大特性

特性	描述
基於請求響應	每一次客戶端發出請求，服務端才返回響應
基於TCP、IP協議	HTTP協議是應用層協議，基於TCP傳輸層協議以及IP網路層協議，進行資料的傳輸
無連線	客戶端和服務端之間不會保持連線
無狀態	服務端不會儲存客戶端的狀態

2.資料格式

（1）請求格式

• 請求體（包括了請求方式、協議的版本）
• 請求頭（包括一大堆的K:V鍵值對）
• 換行符號\r\n
• 請求體（存放隱私敏感資訊）

（2）響應格式

• 響應體（響應狀態碼、協議版本）
• 響應頭（一大堆K:V鍵值對）
• 換行符號\r\n
• 響應體（存放給瀏覽器展示的資料）

3.響應狀態碼的含義和常見狀態碼

由3位數字組成，用數字來表達一些意義，第1位數字反應了響應的類別

• 1XX

  表示服務端已經接收到了客戶端的請求，客戶端可以繼續傳送或者等待

• 2XX

  200 OK表示成功，服務端已經發送了響應 （但是這個響應可能是客戶端想要的或者是不想要的，但是傳送了響應）

• 3XX

  302 臨時重定向 ；304 永久重定向 （重定向的含義是跳轉到某個頁面）

• 4XX

  客戶端發生了錯誤 403 許可權不夠；404 請求的資源不存在

• 5XX

  服務端發生了錯誤

在公司中也會自定義狀態響應碼，一般是10000起步

三、HTML超文字標記語言

1.HTML的特點

所見即所得，沒有任何邏輯，寫什麼就顯示什麼

2.HTML的操作

（1）註釋語法

<!--單行註釋-->
/*多行註釋*/

（2）html文件

<html> html的固定格式，包裹html的內容
    <head>主要放給網頁的配置</head>
    <body>主要放網頁的內容</body> 
</html>  

（3）html標籤的分類

1.按照書寫的形式來分

1）單標籤（自閉和標籤）

<img src="" alt="">
<input type="text">

2）雙標籤

<p></p>
<div></div>

2.按照佔據內容的大小類分

（1）行內標籤

內部文字顯示出來多大，就會佔據多大，不會換行顯示

（2）塊級標籤

一個文字佔據一行，沒有內容不佔據內容，有內容則獨佔一行

3.標籤的屬性

（1）預設屬性：標籤自帶

• 常見標籤內的屬性

1）a標籤

• href=""

    1）填寫網址        有跳轉功能
    2）填寫頁面內id值   具備錨點功能
  

• target

  預設是_self原網頁跳轉，改成_blank為新建網頁跳轉

2）img標籤

• src=""
  （1）圖片地址（本地地址/網頁地址）
  （2）填寫路由
• title
  滑鼠懸浮圖片上，顯示title內填寫的資料
• alt
  新增圖片載入失敗後顯示的內容
• width與height
  圖片的尺寸 兩者調整一個即可 等比例縮放

（2）自定義屬性

使用者自定義，編寫不會有提示甚至會飄顏色

4.常見符號對應的html程式碼

程式碼	對應內容
 	空格
>	>
&lt;	<
&amp;	&
&yen;	¥
&copy;	版權
&reg;	註冊

四、head內常見標籤

1.title網頁標題

title包裹的是網頁的標題

2.meta配置資訊

meta內包裹網頁源資訊

<meta name="keywords" content="查詢關鍵字">
<meta name="description" content="網頁簡介">

<meta charset="UTF-8">

3.style支援編寫css程式碼

style標籤內部可以通過選擇器來編寫css程式碼

4.link標籤引入外部css檔案

+ css檔案中

div {
    font-size: 48px;
    color: indianred;
}

• html檔案中

<head>
    <link rel="stylesheet" href="html的css.css">
</head>

5.script標籤支援寫js程式碼

• 通過prompt製作彈窗

<script>
     prompt('週末休息','也要吃早飯')
</script>

• 通過script的src屬性外連結js檔案

prompt('把學習任務完成','可以打羽毛球')

五、body內基本標籤

1.標籤的行內標籤和塊級標籤的巢狀

頁面的內容主要由div行內標籤和span塊級標籤組成，標籤之間的巢狀可以組合出不同的內容層級關係，從而可以劃分出不同的板塊組成整個網頁

但是標籤之間的巢狀關係是有限制的

• 塊級標籤內部可以巢狀塊級標籤和行內標籤

• 行內標籤內部只能巢狀行內標籤

p標籤是塊級標籤，但是p標籤內部也不能巢狀塊級標籤

2.標題內基本標籤h1至h6

<body>
    <h1>一級標籤</h1>
    <h2>二級標籤</h2>
    <h3>三級標籤</h3>
    <h4>四級標籤</h4>
    <h5>五級標籤</h5>
    <h6>六級標籤</h6>
</body>

3.段落標籤

標籤	作用
<p>	包裹段落內容

<body>
    <p>一體</p>
    <p>二體</p>
    <p>三體</p>
    <p>四體</p>
    <p>五體</p>
</body>  

4.其他標籤

標籤	內容
<u>下劃線</u>	下劃線
<i>斜體</i>	斜體
<s>刪除線</s>	刪除線
<b>加粗</b>	加粗

<body>
    <u>下劃線</u>
    <i>斜體</i>
    <s>刪除線</s>
    <b>加粗</b>
</body>  

相同的效果可能是不同的標籤來實現的，標籤不是固定的

5.換行與分割線

標籤	內容
<br>	換行
<hr>	分割線

        <p>一體</p>
        <p>二體</p>
    <br>
        <p>一體</p>
        <p>二體</p>
        <p>三體</p>
    <hr>
        <p>四體</p>
        <p>五體</p>

六、body內其他重要的標籤

1.無序列表

頁面上所有的規則排列的橫向或者豎向的

• 語法：ul 套 li

<body>
    <ul>
        <li>上午</li>
        <li>中午</li>
        <li>下午</li>
    </ul>
</body>

2.有序列表

ol 套 li

<body>
    <ol type="A">  
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
</body>

3.標題列表

d1 套 dt-大標題 套 dd-小標題

<dl>
    <dt>大標題</dt>
    <dd>小標題1</dd>
    <dd>小標題2</dd>    
</dl>

4.表格標籤

<table  border="4">
    <thead>
        <tr>  
            <th>編號</th>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>jason</td>
            <td>18</td>
        <tr>
    </tbody>
</table>

5.表單標籤

可以獲取使用者的資料，併發送給服務端

1.表單標籤簡介

• form標籤

  action 控制資料的提交地址

  method 控制資料的提交方法

• input標籤

  type型別	作用
  text	普通文字
  password	密文展示
  date	日期選項
  email	郵箱格式
  radio	單選
  checkbox	多選
  file	檔案
  submit	觸發提交動作
  reset	重置表單內容
  button	自定義功能

input標籤應該有name屬性

這樣，在接受資料的時候，name屬性相當於字典的鍵，input標籤獲得到使用者資料相當於字典的值。

• select標籤

  option標籤 一個個選項

• textarea標籤 形成大段的文字框，獲取大段文字

2.基於form表單傳送資料

（1）用於獲取使用者資料的標籤應含有name屬性，name屬性相當於字典的鍵

--如
<p>使用者名稱：
    <input type="text" name="username">
</p>

使用者輸入的的資料會儲存到標籤的value屬性中，value相當於字典的值

（2）如果使用者僅需要選擇，不需要填寫資料，那麼我們需要自己先在選擇的標籤中填寫value值

如果標籤中沒有name屬性，form表單會直接忽略，不會發送

<input type="radio" name="gender" value="male">男

當用戶選擇性別後會儲存
"gender" : "male"

（3）input標籤理論上應該搭配label標籤使用，但是也可以不寫

如：b站的投訴表單中

• input標籤放在 label標籤內使用

<label for="d1">使用者名稱：
     <input type="text" id="d1" placeholder="請輸入使用者名稱" maxlength="30" name="username">
</label>            

• input標籤緊貼著label標籤使用

<label for="d1">使用者名稱：</label>
<input type="text" id="d1" placeholder="請輸入使用者名稱" maxlength="30" name="username">

（4）標籤的屬性如果和值相等，可以不寫值

<input type="file" multiple="multiple">

等價於

<input type="file" multiple>

（5）針對選擇型別的標籤可以提前設定預設選項

checked
        <input type="checkbox" checked="checked">11   
         <option value="" selected="selected">22</option>  
selected
         <option value="" selected="selected">111</option>  
         <option value="" selected>222</option> 

（6）一些選擇性的標籤可以用multiple屬性從單選改為複選

<input type="file" multiple>
<select name="" id="" multiple>

前端2:css

---

-html標籤的兩大重要屬性

標籤的兩大重要屬性的作用：用來區分標籤

1.class屬性

• 將標籤分門別類，主要用於批量查詢

2.id屬性

• 精確查詢標籤，主要用於點對點

• 每個標籤都可以設定唯一一個id

一、CSS語法結構

1.語法結構

**css語法：

① 選擇器 ②宣告（屬性：值）

選擇器{
    屬性1:樣式值1,
    屬性2:樣式值2,
    ...
}

2.CSS註釋語法

註釋語法支援：單行、多行

/*註釋語法*/

3.引入CSS的多種方式

（1）嵌入式

在html 的 head標籤內 style標籤內部寫

<style> 
    h {
        color: cornflowerblue;
    }
</style>

（2）外鏈式

html內通過link標籤引入外部css檔案

<link rel="stylesheet" href="mycss.css">

• myscss.css檔案

h1 {
    color: cornflowerblue;
}

（3）內聯樣式（行內式）

在標籤內部通過style屬性直接編寫

   <h1 style="color: cornflowerblue">天天開心</h1>

不推薦使用，增加了耦合，拓展性較差

二、CSS選擇器

1.CSS基本選擇器

css基本選擇器	用法	作用
標籤選擇器	標籤名稱 { 屬性名:屬性值 }	直接按照標籤名查詢標籤，進行範圍查詢/批量查詢
類選擇器	.class值 { 屬性名:屬性值 }	按照標籤的class值，查詢標籤
id選擇器	#id值 { 屬性名:屬性值 }	按照標籤的id值，精準查詢
通用選擇器	* { 屬性名:屬性值 }	直接選擇頁面所有的標籤

2.CSS組合選擇器

對於標籤的上下層級以及巢狀關係稱呼：

祖先標籤、父標籤、後代標籤、子標籤、哥哥標籤、弟弟標籤、...

css基本選擇器	用法	作用
後代選擇器	父標籤 後代標籤{ 屬性名:屬性值 }	找到 標籤 的 指定的所有後代標籤
子標籤選擇器	父標籤>子標籤 { 屬性名:屬性值; }	找到指定標籤所有的指定的兒子標籤(只指定兒子標籤，不會查詢其他巢狀的標籤)**
毗鄰選擇器	標籤1 + 標籤1同級別下面緊挨著的標籤 { 屬性名:屬性值 }	選擇同級別下面緊挨著的標籤
弟弟選擇器	標籤1>標籤1的所有弟弟標籤 { 屬性名:屬性值 }	查詢同級別下面所有的弟弟標籤

3.選擇器的分組與巢狀

（1）合併查詢

多個選擇器合併查詢

• 語法

選擇器1,選擇器2,選擇器3 {
    屬性名:屬性值;  
}

（2）混合使用

選擇器混合使用

• 查詢class的值為c2的 div標籤

div.c2 {
    color: red;
}        

• 查詢id是d1的p標籤

p#d1 {
    color: red;
}

• 查詢含有c1樣式值（樣式類）裡面p標籤中含有c2樣式值的標籤

.c1 p .c2{
           color: red;
       }

4.屬性選擇器

• 按照屬性名查詢

[name]

• 按照屬性名=屬性值查詢

[name="duoduo"] 

• 查詢name為duoduo的所有div標籤

div[name="duoduo"] 

• 查詢name以duoduo為開頭的所有div標籤

div[name^="duoduo"] 

• 查詢name以duoduo為結尾的所有div標籤

div[name$="duoduo"] 

• 查詢name中包含duoduo的所有div標籤

div[name*="duoduo"] 

5.偽類選擇器

（1）a標籤

a標籤中，沒有跳轉過網址的a標籤預設是藍色，點選過的則為紫色

a標籤	代表的狀態
a:link	未被訪問過的初始狀態
a:hover	滑鼠懸浮在該目標時的狀態
a:active	滑鼠按下時的狀態
a:visited	以及被訪問過的狀態

（2）input標籤

獲取焦點、失去焦點，焦點代指滑鼠

input獲取焦點（被點選）之後採用的樣式

6.偽元素選擇器

通過css來渲染文字

before和after用於清除浮動現象

標籤	作用
p:first-letter	選擇首字母進行CSS渲染
p:before	選擇在文字開頭CSS渲染
p:after	在文字末尾CSS渲染

css新增文字，在html中無法正常選中

三、選擇器優先順序

1.選擇器相同，匯入方式不同

就近原則，那個選擇器靠下，使用那個選擇器

2.選擇器不同，匯入方式不同

內聯樣式 > id選擇器 > 類選擇器 > 標籤選擇器

3.打破選擇器優先順序

!important 提升優先順序

四、CSS的屬性

1.字型樣式

• 調整字型font_family

  多個字型，從前往後匹配，如果沒有第一種字型，則使用後面的字型

font_family:"微軟雅黑","仿宋"

• 字型大小font_size

font_size:48px;

• 字型粗細font_weight

font_weight:lighter;

• 字型顏色color

# 直接填寫
color:red;    
# 編號
color:#3d3d3d;
# rgb編碼
color:rgb(0,0,0)
      rgba(0,0,0,0) 最後一位填寫透明度

取色器工具

• 文字位置text-align

text-align:center;

• 文字裝飾text-decoration

text-decoration:none
主要用於取消a標籤的下劃線

• 文字縮排text-indent

頁邊距大小

text-indent:32px;

2.背景屬性

• 寬度/長度：以畫素為單位

width:800px;
height:800px;

• 背景顏色background-color

background-color: orange;

• 新增背景圖片

  url(網頁連結/本地連線)

  圖片如果超出指定畫素大小，會自動擷取或者自動鋪滿指定範圍

background-image: url("網頁連結");

background-image: url("本地連結");

• 背景重複background-repeat

 background-repeat:repeat(預設):背景圖片平鋪排滿整個網頁
 background-repeat:repeat-x：背景圖片只在水平方向上平鋪
 background-repeat:repeat-y：背景圖片只在垂直方向上平鋪
 background-repeat:no-repeat：背景圖片不平鋪

• 背景位置background-position

background-position: center center

當屬性名相同時，可以採用便捷寫法

background:  url("連結") blue no-repeat center center;

• 背景附著background-attachment

屬性值	含義
fixed	背景影象相對於窗體固定。任憑頁面內容滾動，背景影象始終靜止不動
scroll	背景影象相對於元素固定。當窗體的內容滾動時，窗體的背景影象會跟著移動；當一般元素的內容滾動時，背景影象不會跟著移動，因為背景影象總是要跟著元素本身，但會隨元素的祖先元素或窗體一起移動
local	背景影象相對於元素的內容固定。當元素的內容滾動時，背景影象總是要跟著內容一起移動

3.邊框樣式

• 邊框寬度width 邊框顏色color

  left right top bottom 指定方向

border-left-width: 5px;
border-left-color: #ff0000;

• 邊框樣式style

值	作用
none	無邊框
dotted	點狀虛線邊框
dashed	矩形虛線邊框
solid	實線邊框

• 畫圓radius

.c1{
  width: 150px;
     height: 150px;
     border:4px dashed dodgerblue;
     border-radius: 100%;

 }
 .c2 {
     width: 180px;
     height: 40px;
     border:4px dotted red;
     border-radius: 50%;
 }
 .c3 {
     width: 180px;
     height: 36px;
     border: 4px solid pink;
     border-radius: 20px;
 }

4.display屬性

值	意義
display:"none"	HTML文件中元素存在，但是在瀏覽器中不顯示，並且不佔空間。一般用於配合JavaScript程式碼使用。
display:"block"	設定成 塊級標籤預設佔滿整個頁面寬度，如果設定了指定寬度，則會用margin填充剩下的部分。
display:"inline"	設定成 行內標籤，此時再設定元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。
display:"inline-block"	設定成 行內塊級標籤，使元素同時具有行內元素和塊級元素的特點。

• 將標籤隱藏起來

  頁面上不會顯示，也不會保留標籤的位置

display: none

visibility屬性也可以隱藏，但是會保留標籤的位置

    <div>1111</div>
    <div style="visibility: hidden">2222</div>
    <div>3333</div>

五、盒子模型

我們可以將標籤看成是一個快遞盒，主要指div標籤

• 快遞盒子裡面有什麼？

1.快遞盒子中有實際物品----content內容

2.物體與內部盒子牆之間的距離----padding內邊距、內填充

3.快遞盒的厚度----border邊框

4.兩個盒子之間的距離----margin外邊距

• padding

padding屬性值的順序：上 右 下 左

padding-left: 50px;
padding-top: 60px;
padding-right: 10px;
padding-bottom: 60px; 

• margin

div {
        border:4px solid dodgerblue;
        margin-top: 20px;
        /* margin:引數順序 */
    }

五、浮動

1.浮動簡介

浮動：使得標籤內容脫離了正常的平面

2.浮動造成的塌陷現象

浮動的元素是脫離正常文件流的，會造成父標籤塌陷

讓父標籤不塌陷，則需要一個c4來讓兩個子div顯示上還在父標籤內

3.通過clear屬性來避免浮動

• clear屬性

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	預設值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起作用，而不會影響其他元素。

.c4 {
    clear:left;
    border:2px solid dodgerblue;
    }
clear:left 左側（包含地面、天空）不允許出現浮動的元素

• 解決浮動帶來的塌陷影響

  可以通過clear屬性和偽元素器選擇器，定義一個clearfix的屬性，誰塌了給誰裝上這個選擇器

 # 新建類clearfix，並指明再標籤末尾新增空白內容，並指定其為塊級標籤，且通過clear屬性指定兩邊不允許出現浮動       
.clearfix:after {
    content:'';
    display: block;
    clear: both;
    }

#  為父標籤裝上classfix
<div class="c1 clearfix" id="d1">

瀏覽器會優先展示文字內容，如果內容被擋住了會自動展示文字

六、 overflow溢位屬性

• overflow（水平和垂直均設定）
• overflow-x（設定水平方向）
• overflow-y（設定垂直方向）

值	描述
visible	預設值，內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其餘內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

七、定位

標籤在預設情況下都是static靜態的，無法通過定位的引數來移動

1.定位為四種狀態

狀態	現象
static靜態	標籤預設的狀態
relative相對定位	基於標籤原來的位置
absolute絕對定位	基於某個定位過的父標籤做定位
fixed固定定位	基於瀏覽器視窗固定不動

2.z-index

選擇器中的z-index屬性，可以控制三維座標對z軸的距離