s20day12課上筆記

時間 2019-11-24

標籤 s20day12 day 課上筆記简体版

原文原文鏈接

day12css

前端內容：
1. HTML
2. CSS
3. JavaScript

學習計劃：
1. HTML + CSS
2. JavaScript
3. jQuery和Bootstrap(Vue)

html

1. HTML

C/S --> B/S (基於瀏覽器作業務)

FTP: "PUT|sexart.avi|2014" ---> 同理瀏覽器做爲一個客戶端和服務端通訊也要遵循一個協議（HTTP）

HTML本質上就是一個規則。

學習HTML主要學習標籤。

HTML標籤的分類：
1. 塊兒級標籤默認獨佔一行（整個瀏覽器的寬度）能夠設置長和高
2. 行內標籤（內聯標籤）長度由本身的內容來決定的。沒法設置長和高

HTML嵌套的規則：
1. 塊兒級標籤能夠嵌套行內標籤（div標籤能夠嵌套div標籤）
2. p標籤不能嵌套div標籤

form表單系列：
注意事項：
1. form 不是 from
2. input標籤必需要帶一個name屬性
3. 若是form裏面有文件提交的話必須加一個屬性：enctype="multipart/form-data"，同時使用post方式提交
4. 提交按鈕必須是 <input type="submit">

input標籤
1. text
2. password
3. submit
4. radio
5. checkbox
6. file

select下拉框
1. 普通下拉框
2. 多選下拉框 multiple
3. 分組的下拉框 optgroup

textarea (大段文本)
前端

form表單示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>form表單系列</title>
</head>
<body>

<form novalidate autocomplete="off" action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data">   <!--form屬性-->   
    <p>
        <label for="i1">用戶名：</label>
        <input id="i1" disabled name="username" type="text">     <!--label與input結合,點這個label，就至關於點這個input--> 
    </p>
    <p>
        密碼：
        <input name="password" type="password">
    </p>
    <p>郵箱：
        <input name="email" type="email">
    </p>
    <p>日期：
        <input name="join_date" type="date">
    </p>
    <p>
        <label for="r1">男</label>
        <input id="r1" name="gender" type="radio" value="1">

        <label>女
            <input name="gender" type="radio" value="0">
        </label>

        <input checked name="gender" type="radio" value="2">保密     <!--value值是要上傳的-->
    </p>
    <p>愛好：
        <input name="hobby" type="checkbox" value="basketball">籃球
        <input name="hobby" type="checkbox" value="football">足球
        <input checked name="hobby" type="checkbox" value="doublecolorball">雙色球
    </p>
    
<!---------------下面是select--------------->    
    
    <p>從哪兒來：
        <select name="addr" multiple> 
            <option value="010">北京</option>
            <option value="021">上海</option>
            <option selected value="0631">威海</option>
        </select>
        
        
        <select name="addr2">
            <!--select分組形式-->
            <optgroup label="北京市">
                <option value="">朝陽區</option>
                <option value="">海淀區</option>
                <option value="">昌平區</option>
            </optgroup>
            <option value="021">上海</option>
            <option value="0631">威海</option>
        </select>
    </p>
    
    <p>上傳頭像：
        <input name="head_img" type="file">
    </p>
    <p>我的簡介：
        <textarea name="memo" cols="30" rows="10">

        </textarea>

    </p>
    <p>
        <input type="submit" value="提交">

        <input type="reset" value="清空">
        <input type="hidden" value="隱藏的按鈕">
        <input type="button" value="普通按鈕">      <!--不生效-->
        <button>普通按鈕</button>                  <!--生效，會和form屬性action呼應-->
    </p>

    <!--{"username": "alex", "password": "alexdasgabi", "gender": 1, "hobby": ["basketball", "football"]}-->
</form>
</body>
</html>

2. CSS（改變網頁的外觀效果）

0. 前提
如何在HTML文件中使用（引入）CSS？
瀏覽器

三種方式
1. 直接在標籤裏經過style屬性來定義CSS樣式
2. 在head標籤中經過 style來定義
3. 把樣式（CSS）文件單獨寫在一個.css文件中，而後經過 link標籤來與HTML文件創建聯繫

CSS語法：
選擇器 {
樣式1：值1;
樣式2：值2;
...
}post

1. 找標籤
CSS選擇器
學習

1. 基本查找
1. 標籤選擇器（改全部/設置默認樣式）
2. ID選擇器（針對某一個特定的標籤修改樣式）
3. 類選擇器 (根據需求修改某一類標籤的樣式)
字體

2. 通用（全選）
1. *
網站

3. 組合選擇器(HTML標籤的層級關係)
1. 後代選擇器（從x的子子孫孫找y標籤）--> x y
2. 兒子選擇器 (x的兒子y標籤) --> x>y
ui

3. 毗鄰選擇器 (緊挨在x下面的y標籤) --> x+yspa

4. 弟弟選擇器 (下面全部的xx標籤) --> x~y

↑上面經常使用

4. 屬性選擇器
更多用於找input[type="text"]

5. 分組和嵌套
1. 分組（減小重複的CSS樣式代碼）逗號分隔的兩個選擇器
2. 上面的選擇器都支持混搭使用

6. 僞類選擇器
1. div:hover { color: red;}

7. 僞元素選擇器
1. p:before {} 在內容前面加
2. p:after {} 在內容後面加

CSS選擇器的優先級：
0. 繼承的優先級最低
1. 當選擇器相同的時候，誰靠近標籤誰樣式生效
2. 當選擇器不一樣的時候，咱們按照權重計算公式來判斷哪一個樣式生效
（內聯樣式1000>ID選擇器100>類選擇器10>元素選擇器1）

不經常使用也不推薦使用的 !import

2. 改樣式(CSS屬性) 1. 字體相關 1. color 修改字體顏色 2. font-size 字體大小 2. 文本 1. color 字體顏色 2. text-align 對齊方式 3. text-decoration 文字裝飾 (去掉a標籤的下劃線 text-decoration: none;) 3. 背景相關屬性 1. background-color 2. bakground-image 1. 把不少小圖片合併成一張大圖片 2. 鼠標滾動背景不動（姑娘一直在看着你） 4. 邊框 1. border: 1px solid red; 2. 畫圓：border-radius=寬/高的一半 5. display 1. block 顯示成塊級標籤 2. inline 顯示成行內標籤 3. inline-block 既有塊兒標籤右有行內標籤的特色 4. none 隱藏 6. CSS盒子模型由內到外： 1. content 內容 2. padding 內填充（用於調整內容和邊框之間的距離，撐大標籤） 3. border 邊框 4. margin 外邊距（用於調整標籤和標籤之間的距離） 7. float 浮動（失去原來的位置） 1. left 往左浮 2. right 往右浮 3. none 不浮（默認值）浮動的規則： 1. 不管什麼標籤一旦浮動就變成了塊兒級標籤（能夠設置寬高） 2. 浮動的標籤老是浮向前一個浮動的標籤，若是擺不下就挪到下一行開始 8. 清除浮動 clear --> 指的是清除浮動帶來的負面效果 1. left 個人左邊不能有浮動元素 2. right 個人右邊不能有浮動元素 3. both 個人兩邊不能有浮動元素最多見應用： .clearfix { content: ""; display: "block"; clear："both" } 9. 定位 1. 相對定位 relative （至關於標籤原來所在的位置來定位） 2. 絕對定位 absolute (相對於已經定位過的祖先標籤來定位) 失去原來的位置 3. 固定定位 fixed （固定在屏幕的某個位置) 失去原來的位置本週做業： 1. 把上課的Blog的頁面本身獨立寫一遍 2. 嘗試把小米商城的頁面寫完圖片生成的網站：https://dummyimage.com/1200x500/F00/fff.png 寫做業注意： 1. 把HTMl文件的結構先寫出來，分紅不少小塊。（很重要，幫助理解HTML的結構） 2. 用CSS依次調整每一塊的樣式 3. 不知道用什麼標籤的時候，塊兒級就用div，行內就用span

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。