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