s20day12课上笔记

day12

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

学习计划：
1. HTML + CSS
2. JavaScript
3. jQuery和Bootstrap(Vue)

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;
...
}

1. 找标签
CSS选择器

1. 基本查找
1. 标签选择器（改所有/设置默认样式）
2. ID选择器（针对某一个特定的标签修改样式）
3. 类选择器 (根据需求修改某一类标签的样式)

2. 通用（全选）
1. *

3. 组合选择器(HTML标签的层级关系)
1. 后代选择器（从x的子子孙孙找y标签）--> x y
2. 儿子选择器 (x的儿子y标签) --> x>y

3. 毗邻选择器 (紧挨在x下面的y标签) --> x+y

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