阶段五-前端知识-Day01

前言

前端与后端

前端: 为用户使用的,和用户进行交互,是指负责开发并处理用户前台交互的数据

后端:为前端做支撑,是指软件中负责处理逻辑运算,数据存储,数据库等相关操作的部分

前端与后端是彼此之间相互依存的

B/S架构与C/S架构

1.B/S架构

Browser浏览器/Server,也就是浏览器/服务器模式,可以直接通过浏览器实现对服务器的访问

2.C/S架构

Client客户端/Server服务器,也就是客户端/服务器模式,需要安装客户端软件才能对服务器进行访问

一. HTML回顾

1.Html(HyperText Markup Language) 超文本标记语言

超指的是超链接,可以实现从当前网页跳转到另一个网页

文本指的是数字,字母,中文,符号等

标记就是里面的各种标签及标签的属性

HTML不区分大小写,一般都是小写

注释:

2.Html标签

标签可以有0到多个属性

标签支持嵌套

           
           
 

标签的分类
        1.行级标签：可以和文本,行级标签一行展示,宽和高为内荣的宽和高,没有内荣没有宽和高

        不可以设置宽和高
        2.块级标签：独占一行,宽度为父标签的宽度,高度内容的高度,没有内容,没有高度

1.标题标签: 

h1~h2数字越大字体越小

2.段落标签: 

3.换行: 

4.水平线: 

---

5.图片标签:

6.超链接:      

 target：      _self(默认)当前页打开
                     _blank 新的标签页打开
                     自定义值

7.列表: 

有序列表

  无序列表

8.表格

 

           
           
               
                   
               
           
           
           
               
                   
               
           
       

属性:

table属性：
                1.border：边框
                2.height：表格的高度
                3.width：表格的宽度
                4.bgcolor：表格的背景颜色
                5.align：表格的水平对齐方式（左 中 右）
                6.cellpadding：内边距（内容和单元格边框的距离）
                7.cellspacing：外边距（单元格边框和表格边框的距离）

 tr属性：
                1.height：行的高度
                2.bgcolor：行的背景颜色
                3.align：行中内容的水平对齐方式（左 中 右）

  td|th属性：
                1.width：列的宽度
                2.bgcolor：列的背景颜色
                3.align：列中内容的水平对齐方式（左 中 右）

9.实体   空格： 

10. 表单（form）

   1.介绍: 标识着一个整体,提交时可以将表单元素中的值提交到后端

    2.form标签的属性

        1.action: 提交的后端路径

        2.method: 提交方式

                get：地址栏拼接参数，有大小的限制，只能进行url编码，不安全

                post：请求体中传递参数，没有大小的限制，可以使用其他方式编码，安全

        3.entype: 参数格式的处理,只有post请求时才有效

                      1.application/x-www-form-urlencoded：普通的参数（post请求默认）
                      2.multipart/form-data：普通参数和文件（有文件上传时必须指定）

 3.表单元素：
            1.文本框：
            2.密码框：
            3.日期框：
            4.文件域：
            5.单选按钮：
                     
                     
                     注意事项：
                        1.name属性值相同的为一组单选按钮
                        2.name属性值相同才能有单选效果
                        3.提交时将value中的属性值提交到后端
                        4.出现多组单选按钮
                        5.checked默认选中
            6.复选框：
                   
                   
                    注意事项：
                        1.name属性值相同的为一组复选框
                        2.提交时将value中的属性值提交到后端
                        3.出现多组单选按钮
                        4.checked默认选中
            7.下拉列表：
                   
                       
                   
                    注意事项：
                        1.提交时将选中的option中value属性值提交到后端
                        2.selected默认选中
            8.文本域:
                   
            9.按钮：
                1.提交按钮：具有提交功能
                   
                    按钮中提示的文字

                2.重置按钮：具有重置功能
                   
                   

按钮中提示的文字

                3.普通按钮：没有功能
                   
                   

按钮中提示的文字

 

                 4.表单元素的属性
                                1.placeholder：提示信息(文本框自带的提示信息)
                                2.autofocus：自动获得焦点
                                3.minlength | maxlength：最小|最大长度
                                4.readonly：只读
                                5.disabled：禁用

11.内联框架

 

一般与a标签配合使用,a标签跳转的资源在iframe中打开
           

12.常用布局标签
        div：块级元素（标签）
        span：行级元素（标签）

二.CSS回顾

1.CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。层叠指的是可以使用多种方式对同一个标签设置样式。用来给 HTML 标签及内容设置样式的。

2.CSS引入方式

1.行内式: 在标签中添加style属性，通过style属性值设置样式

 

 2.内部式：head标签中的style标签中设置样式

       
 

 3.外部式：样式编写在单独的.css文件中，需要使用该样式的页面引入外部的.css文件

 
               
 

优先级: 行内式>内部式|外部式

3. 选择器

单个选择器

1.id选择器: #id属性值

2.class选择器: .class属性值

3.标签选择器:  标签名

优先级: id选择器 > class选择器 > 标签选择器

多个选择器

4. 并集选择器 : 选择器,选择器

5. 后代选择器:  选择器(空格)选择器

6. 子选择器:  选择器  > 选择器

7. 兄弟选择器:

        选择器+选择器: 后边的第一个兄弟

        选择器~选择器: 后边的所有兄弟

4. float浮动

• left: 左浮动

• right: 右浮动

• none: 不浮动

 浮动元素不会占用空间，不浮动元素占空间。

• 如果先出现浮动元素，后出现不浮动元素，会出现两个元素重叠效果。

• 如果先出现不浮动元素，后出现浮动元素，浮动元素不会和不浮动元素重叠。

• 当浮动元素和文字同时存在时，文字会环绕浮动元素，不会和浮动元素重叠。英文以空格区分单词，中文一个字是一部分。

1.行级元素浮动：可以去除空格
2.块级元素浮动：可以在一行展示
        注意事项：浮动后让出空间

5. 盒子模型

 组成：
        1.内容(content)实际的宽和高
        2.内边距(padding)（内容和边框的距离）
        3.边框(border)
        4.外边距(margin)（边框到其他标签的距离）

内容区、内边距、边框会影响盒子的大小。外边距不会影响盒子大小,但会影响盒子的位置。

内容区(content)

• width：元素的宽度

• height：元素的高度

• 块级元素默认宽度是父元素的百分之百，高度由内容撑起来。

• 行内元素默认宽度和高度都是由内容撑起来的。

• 块级元素可以设置宽度和高度；行内元素设置宽度和高度不生效。(img 标签是个特例，它其实属于行内块元素)]

边框(border)

• 边框的宽度(border-width)

  • 单独设置每个边框的宽度，使用 border-xxx-width。xxx 是 top、right、bottom、left（不推荐使用，太麻烦）。

  • border-width:数值1 数值2 数值3 数值4; 表示上边框是数值1，右边框是数值2，下边框是数值3，左边框是数值4。

  • border-width:数值1 数值2 数值3; 表示上边框是数值1，左右边框是数值2，下边框是数值3。

  • border-width:数值1 数值2; 表示上下边框宽度是数值1，左右边框的宽度是数值2。

  • border-width:数值；表示4个边框的宽度都是这个值。

• 边框的颜色(border-color)

  • 使用 border-color 或者 border-xxx-color。结合上面的规律使用。

• 边框的样式(border-style)

  • 使用 border-style 或者 border-xxx-style。结合上面的规律使用。

    • solid 实线

    • dashed 虚线

    • dotted 点线

    • double 双实线

    • none：没有

• 边框的圆角样式(border-radius)：

  • 使用 border-radius 或者 border-xxx-xxx-radius。

  • border-radius：数值; 左上右上右下左下

  • border-radius：数值 数值; 左上右下 右上左下

  • border-radius：数值 数值 数值 数值; 左上 右上 右下 左下

        边框的简写

• border-xxx: width style color; 比如 xxx 是 top

内边距(padding)

• 内边距有4个：

  • padding-top：上内边距

  • padding-right：右内边距

  • padding-bottom：下内边距

  • padding-left：左内边距

• 内边距都是 padding-xxx 的形式，所以可以简写为：

  • padding：value; 4个方向的内边距都一样

  • padding：value1 value2; 上下 左右

  • padding：value1 value2 value3; 上 左右 下

  • padding：value1 value2 value3 value4; 上 右 下 左

外边距(margin)

• 一个元素有4个方向，所以margin外边距也有4个：

  • margin-top：上外边距

  • margin-right：右外边距

  • margin-bottom：下外边距

  • margin-left：左外边距

• 外边距也可以简写：

  • margin: value; 4个方向外边距

  • margin: value1 value2; 上下 左右

  • margin: value1 value2 value3; 上 左右 下

  • margin: value1 value2 value3 value4; 上 右 下 左

display属性 

1.none：隐藏该元素
2.inline：将元素变为内联元素，特殊的行级元素，行级元素不可以设置高和宽该元素为内联元素
3.block：将元素变为块级元素，变为块级元素后具备了块级元素的特点
4.inline-block：将元素变为内联块元素，内联块元素可以设置高和宽，可以和其它行级元素或内容一行展示

6.字体相关属性：

    1.color：字体颜色
    2.font-size：字体大小
    3.font-weight：字体加粗
    4.font-style：字体（宋体，楷体，微软雅黑，...）
    5.line-height：行高（内容的垂直方向的展示位置），特殊用法：行高和父元素高度相同实现内          容垂直居中

7.文本属性

text-align

text-align 属性可以设置元素中内容的水平对齐方式。

• left：左对齐

• center：居中对齐

• right：右对齐

text-decoration

text-decoration：文本装饰的意思，可以给文本内容设置下划线、上划线、删除线等等。

• none：默认，就是普通的文本

• underline：给文本加下划线

• overline：给文本加上划线

• line-through：给文本加删除线

• 该属性最重要的一个用法就是去掉超链接默认的下划线。

8.伪类：

    元素获取的伪类，改变元素的样式，失去伪类，恢复为原有样式
    1.鼠标悬浮伪类：选择器:hover{}
    2.获得焦点伪类：选择器:focus{}

9.定位：position

  left right bottom top z-index(优先级)
   

1. 静态定位

position:static; 静态定位（默认值）。

在这种定位下top、bottom、left、right、z-index属性都无效。

2. 绝对定位

position:absolute; 绝对定位。

以最近非默认定位的祖先元素定位。 如果，祖先元素为默认定位或者没有祖先，它将使用文档主体（body）进行定位

1. 如果祖先元素是没有定位(默认定位)，会以body为参照进行定位。

2. 如果祖先元素有定位（可以是相对定位， 绝对定位， 固定定位），会以最近的祖先元素为参照进行定位。

3. 具有定位的元素重叠后可以控制显示顺序

   可以通过z-index:无单位整数;来设置元素的层叠顺序。数字越大显示时越在上面。只要数字大就显示在上面，大多少都无所谓。

注意： 对于没有设置定位的元素z-index属性是无效果的。

3.相对定位

position:relative; 相对定位。相对于自身没有设置定位时的位置进行移动。不需要考虑父元素。

相对定位因为是相对自身元素的位置进行移动。所以配合的top、left、right、bottom可以取值为正数或负数。

4. 固定定位

position:fixed; 相对于浏览器的定位，无论怎么移动滚动条，都是在当前窗口固定位置。

注意：
        1.绝对定位：让出定位之前所占的空间
        2.相对定位：不会让出定位之前所占的空间

10.背景属性：
    background-color：颜色;    背景颜色
    background-image：url("图片路径");  背景图片
    background-repeat：是否平铺
        * repeat    背景图像将向垂直和水平方向重复。默认值。
        * repeat-x    只有水平位置会重复背景图像。
        * repeat-y    只有垂直位置会重复背景图像。
        * no-repeat    背景图像不会重复。
    background-size：值px 值px;
    background-attachment：否固定或者随页面滚动
        * scroll    背景图片随着页面的滚动而滚动，这是默认的。
        * fixed        背景图片不会随着页面的滚动而滚动。

三. JavaScript

1.JS简介

JavaScript 简称 JS，是一种脚本语言、弱类型的语言。 客户端脚本语言，可以使页面和用户产生交互的行为。

JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。

2.JS的组成

ECMAScript（ES）：提供了js的核心语法
    BOM：浏览器对象模型
    DOM：文档对象模型

3. 输出

1.输出到浏览器控制台：console.log(xxx);
2.输出到页面中：document.write(xxx);
3.弹框输出：alert(xxx);

4.引入方式

1.内部式:将js脚本写在script标签中     

 

2.外部式

将js脚本写在单独的.js文件中,需要使用js脚本的页面引入外部.js文件.

5.注释

// 单行注释 /**/多行注释

6.标识符

java中标识符: 包名,类名,方法名,变量名,...

js中的标识符: 类名,方法名,变量名,...

语法规则: 数字,字母,下划线,不能以数字开头,不能为关键字和保留字

语法要求:

        类名: 大驼峰命名法

        方法名: 小驼峰命名法

        变量名: 小驼峰命名法

7.数据类型

 1.数值类型(整数和浮点数) : number

 2.字符串类型:string

 3.布尔类型: boolean

 4.null 空值

 5. "" 空串

 6.特殊类型

  not a number

 7.对象类型

 8.var可以存储所有数据类型

8.变量

    1.先声明，后赋值
        var i;
        i = 1;

        var a,b,c;
        a = 1;
        b = "a";
        c = true;
    2.声明同时完成赋值
        var a = 1;

9.常量

const PI = 3.14;

10.js中的运算符

 1.算数运算符: + - * / % ++ --

 2.赋值运算符: = += -= *= /+ %=

 3.比较运算符: > >= < <= == === != !==

 == : 两侧数据类型不一致, 转换为数字类型进行比较

 === :  数据类型不一致直接返回false, 两侧数据类型相等才进行比较

 != : 两侧数据类型不一致, 转换为数字类型进行比较

 !== : 数据类型不一致直接返回false, 两侧数据类型相等才进行比较

4.逻辑运算符: ||  &&  !

5.三元运算符:  条件  ?  值 1 : 值  2;

6. 类型运算符:

        1.type  of : 判断存储值的实际类型

        2.instanceof :  是否为对象

11. 流程控制语句

  1.顺序执行结构: 按照顺序依次执行

   2.分支结构:

         1.if系列：if   if else   if else if else
        2.switch

  3.循环结构

       1.for循环
        2.while循环
        3.do while循环
        4.循环控制语句：
            break：终止循环
            continue：终止本次循环，进入下次循环
                for使用continue，终止本次循环，执行迭代因子
                while do while使用continue，终止本次循环，执行boolean表达式（容易造成死循环）

12.自定义函数

       1. 无参数,无返回值

          function  函数名(){}

          var 函数名 = function(){}
        2.有参数，无返回值
            function 函数名(参数, ...){}
            var 函数名 = function(参数, ...){}

        3.无参数，有返回值
            function 函数名(){
                return 值;
            }
            var 函数名 = function (){
                return 值;
            }

        4.有参数，有返回值
            function 函数名(参数, ...){
                return 值;
            }
            var 函数名 = function (参数, ...){
                return 值;
            }

  2.内置函数（JS对象中提供的函数）

1.Array 对象中的函数

 2.Date 对象中的函数

3.Global  全局对象中的函数(直接使用)

 eval():  将字符串中的内容变为可执行的js脚本

 isNaN: 是否不是一个数字

 parseFloat(): 转换为浮点类型

 parseInt() : 转换成整数类型

 Number : 转换为数字类型

4.Math  对象中的函数

5. Number 对象中的函数

6. String 对象中的函数

13.数组

  1.创建
        var arr = [元素,元素,...];
        var arr = new Array(数组长度);

 2.操作数组

   1.添加| 修改元素 : 数组名[索引] = 值

   2.获取元素 : var 元素名 = 数组名[索引]

 3.数组的遍历

   1.普通for 循环

  for (var i = 0; i< 数组名.length;i++){

        数组名[i](获取数组中每一个元素)

}

2. 增强for循环

 for(var i in 数组名){

        数组名[i](获取数组中每一个元素)

}

14. 事件（事件驱动）

1. 介绍

        元素绑定事件, 监听到元素触发使劲按,驱动函数执行

2. 常用事件:

        onclick：单击事件
        onmouseover：鼠标移入事件
        onmousemove：鼠标移动事件
        onmouseout：鼠标移出事件
        onsubmit：form表单提交事件
        onfocus：获得焦点事件
        onblur：失去焦点事件
        onchange：改变事件（通常用在下拉列表中）
        onload：页面加载完成的事件

3. 事件使用

        1.方式一:

                       直接给元素绑定事件

                

xxx  

        2.方式二:

                通过js获取标签,再绑定事件

                 xxx
                 

15.BOM与DOM

 1.BOM（浏览器对象模型，window使用时可以省略）：使用js操作浏览器

        1.属性:

                history:

                        history.back():回到上一个历史页面

                        history.forward():回到下一个历史页面

                        history.go(数字): 回退到指定个数的历史, 负数

                                                        前进到指定个数的历史,正数

                location：
                location.reload()：刷新页面
                location.href：获取地址栏的url
                location.href = "url"：访问指定的url，当前标签页中打开

         2.函数：
                    1.弹框
                        1.警告框（只有确认按钮）：alter(xxx)
                        2.提示框（确认按钮和取消按钮）：confirm(xxx)
                                                     var b = confirm(xxx);
                        3.对话框（输入内容，确认按钮，取消按钮）prompt(xxx)
                                                     var b = prompt(xxx);
                    2.访问指定的资源
                        open(url)， 打开指定的url，新的标签页中打开
                    3.setInterval()：周期性执行，循环执行
                    4.setTimeout()：延时执行，只执行1次

2.DOM（文档对象模型，document对象）
        1.获取元素节点：
            1.根据id属性值获取，返回唯一元素节点对象
                document.getElementById("id属性值");
            2.根据class属性值获取，返回元素节点对象的数组
                document.getElementsByClassName("class属性值");

            3.根据标签名获取，返回元素节点对象的数组
                document.getElementsByTagName("标签名");

            4.根据name属性值获取，返回元素节点对象的数组
                document.getElementsByName("name属性值");

  2.操作文本节点：
            1.操作纯文本
                获取元素节点中的文本内容
                    var val = 元素节点对象.innerText;
                将新的内容添加到元素节点中，覆盖元素节点中之前的内容
                    元素节点对象.innerText = "内容";
            2.操作文本或html
                获取元素节点中的html和文本内容
                    var val = 元素节点对象.innerHTML;
                将新的内容添加到元素节点中，覆盖元素节点中之前的内容
                    元素节点对象.innerHTML = "html + 内容";(直接写标签)

        3.操作属性节点：
            1.获取元素节点的属性节点值
                var val = 元素节点对象.属性名;
                var val = 元素节点对象.getAttribute("属性名");

            2.修改元素节点的属性节点值
                元素节点对象.属性名 = "值";
                元素节点对象.setAttribute("属性名", "值");

        4.操作css样式：
            1.方式一：修改style属性值
                var val = 元素节点对象.style.样式名; 获取样式值
                元素节点对象.style.样式名 = "值";    修改样式值

            2.方式二：修改class属性值
                var val = 元素节点对象.className;  获取class属性值
                元素节点对象.className = "值"       修改class属性值