前端(HTML ,CSS与JavaScript)

HTML

• Hyper Text Markup Language: 超文本标记语言

• 超文本: 指不仅仅是纯文本还包括字体相关和多媒体相关(图片,音频,视频)

• 作用: 负责搭建页面结构和准备页面内容, 相当于盖房子(毛坯房)

• 学习HTML主要学习的就是有哪些标签,以及标签的使用方式

文本相关标签

1. 内容标题h1-h6

特点: 独占一行, 字体加粗, 自带上下间距

2. 段落标签p

特点: 独占一行, 自带上下间距

3. 水平分割线hr

4. 换行br

5. 加粗b

6. 斜体i

7. 下划线u

8. 删除线s

列表标签

• 无序列表: ul和li

• 有序列表: ol和li

• 列表嵌套: 有序列表和无序列表可以任意无限嵌套

图片标签img

• src:资源路径

• 相对路径: 访问站内资源

• 资源和页面同级目录: 直接写文件名

• 资源在页面的上级目录: …/文件名

• 资源在页面的下级目录: 文件夹名/文件名

• 绝对路径:访问站外资源时使用, 称为图片盗链, 有找不到图片的风险

• alt:当图片不能显示时显示的文本

• title: 图片标题

• width/height: 设置宽高, 两种赋值方式: 像素和百分比, 只设置宽度时高度会自动等比例缩放

超链接a

• href: 设置资源路径 和图片标签的src属性类似

• a标签包裹文本为文本超链接, 包裹图片为图片超链接

表格标签table

• 相关标签: table , caption表格标题 ,tr表示行, td表示列, th 表示表头

• 相关属性: border边框 rowspan跨行 colspan 跨列

表单form

• 作用: 获取用户输入的各种信息并提交给服务器

• 学习form表单就是学习form表单中有哪些控件.

• 相关代码：

<!--action设置提交地址-->

<form action="http://www.tmooc.cn">

   <!--placeholder占位文本 maxlength最大字符长度

    value设置初始值 readonly只读-->

    用户名:<input type="text" maxlength="5" value="abc" readonly
               name="username" placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <!--单选框的value属性必须写 否则提交的是on
    checked设置默认选中-->
    性别:<input type="radio" checked name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" value="w" id="r2">
    <label for="r2">女</label><br>
    <!--多选框和单选框的属性通用-->
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" value="hj">喝酒
    <input type="checkbox" name="hobby" checked value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    城市:
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset">
    <!--自定义按钮-->
    <input type="button" value="自定义">

</form>

分区标签

• 分区标签可以理解为一个容器，用来装多个有相关性的标签, 对多个标签进行统一管理

• 如何对页面进行分区?

一个页面至少分为3大区: 头 体 脚 , 每个大区里面有n个小的分区

• 常见的分区标签:

• div: 块级分区标签, 特点: 独占一行

• span: 行内分区标签, 特点: 共占一行

• HTML5版本新增加的几个分区标签,作用和div一样,目的是为了提高代码可读性

• header 头

• main 主体

• footer 脚

• section 区域

• nav 导航

<div>头</div>

<div>体</div>

<div>脚</div>

<header></header>

<main></main>

<footer></footer>

CSS

• Cascading Style Sheet层叠样式表: 美化页面 (装修)

如何在html页面中添加CSS样式代码

• 三种引入方式:

• 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用

• 内部样式: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用但是只能在当前页面复用不能多页面复用

• 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用

• 工作中外部引入方式用的多,因为可以多页面复用而且可以将html代码和CSS样式代码分离开, 学习过程中内部用的多

选择器

1. 标签名选择器: 选取页面中所有同名标签

• 格式: 标签名{样式代码}

2. id选择器: 当需要选择页面中某一个元素时使用

• 格式: #id{样式代码}

3. 类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class,然后通过类选择器进行选择

• 格式: .class{样式代码}

4. 分组选择器: 将多个选择器合并成一个选择器

• 格式: h1,#id,.class{样式代码}

5. 属性选择器: 通过元素的属性选择元素

• 格式: 标签名[属性名=‘值’]{样式代码}

6. 任意元素选择器: 匹配页面中所有的元素

• 格式: *{样式代码}

7. 子孙后代选择器: 通过元素和元素之间的关系选择

• 格式: body div p{样式代码}

匹配body里面的div里面的所有p包括后代p

8. 子元素选择器: 通过元素和元素之间的关系选择

• 格式: body>div>p{样式代码}

匹配body里面的div里面的p子元素 不包含后代p

9. 伪类选择器: 此选择的是元素的状态,包括：未访问,访问过,悬停,点击

• 格式​a:link/visited/hover/active{样式代码}

颜色赋值

• 三原色: RGB Red Green Blue 红绿蓝 , 每个颜色的取值范围0-255

• 颜色赋值方式:

• 颜色单词赋值: red/yellow/pink…

• 6位16进制赋值: #ff0000

• 3位16进制赋值: #f00

• 3位10进制赋值: rgb(255,0,0)

• 4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度

背景图片

• background-image:url(“路径”); 设置背景图片

• background-size:100px 200px; 设置背景图片尺寸

• background-repeat:no-repeat; 设置禁止重复

• background-position: 横向 纵向; 设置背景图片位置

文本和字体相关的样式

• text-align: left/right/center; 水平对其方式

• text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰; 文本修饰

• line-height:20px; 设置行高, 单行可以实现垂直居中, 多行控制行间距

• text-shadow: 颜色 x偏移值 y偏移值 浓度; 设置阴影

• font-weight: bold加粗/normal去掉加粗

• font-size:20px; 设置字体大小

• font-style:italic; 设置斜体

• font-family:xxx,xxx,xxx; 设置字体

• font:20px xxx,xxx,xxx; 设置字体大小+字体

1. 刘德华 宽度100 高度30 

 绿色背景 红色字体 

 横向和纵向居中

2. 苹果和香蕉 字体大小25px 斜体  

3. 冰箱去掉加粗 蓝色阴影 

方向是左下  浓度3

4. 洗衣机添加下划线 

5. 百度去掉下划线字体加粗 

字体大小20px

元素的显示方式display

• block: 块级元素的默认值, 特点: 独占一行 可以修改元素宽高. 包括: h1-h6, p,div

• inline: 行内元素的默认值,特点: 共占一行 不能修改元素宽高, 包括:span,b,i,s,u,a

• inline-block: 行内块元素的默认值,特点:共占一行,可以修改元素宽高, 包括:input,img

• 行内元素如果需要修改宽高,可以将显示方式改成块级或行内块

盒子模型

• 盒子模型由四部分样式组成, 包括: content内容,margin外边距,border边框,padding内边距

• 通过盒子模型相关样式控制元素的显示效果

• content内容:控制元素的显示尺寸

• margin外边距:控制元素的显示位置

• border边框: 控制元素的边框效果

• padding内边距: 控制元素内容的位置

盒子模型之content(内容)

• 控制元素的显示尺寸

• 相关样式: width和height

• 赋值方式:

• 像素

• 上级元素的百分比

• 行内元素不能修改元素的宽高,如果有需求必须改,则需要先把显示方式改成块级或行内块元素

盒子模型之margin(外边距)

• 作用:控制元素的显示位置

• 赋值方式:

• margin-left/right/top/bottom:10px; 给某个方向添加外边距

• margin:10px; 四个方向添加10

• margin:10px 20px; 上下10 左右20

• margin:10px 20px 30px 40px; 上右下左顺时针赋值

• 行内元素上下外边距无效

• 上下相邻彼此添加外边距取最大值, 左右相邻两者相加

• 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决

盒子模型之border(边框)

• 赋值方式:

• border:粗细 样式 颜色;

• border-left/right/top/bottom:粗细 样式 颜色;

• border-radius:10px; 设置圆角 值越大越圆

盒子模型之padding(内边距)

• 作用: 控制元素内容的位置

• 赋值方式: 类似外边距

• padding-left/right/top/bottom:10px;

• padding:10px;

• padding:10px 20px;

• padding:10px 20px 30px 40px;

• 给元素添加内边距会影响元素的宽高

CSS的三大特性

• 继承性:指元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响, 比如超链接字体颜色

• 层叠性: 多个选择器可以选择到同一个元素, 给元素添加不同的样式则样式全部层叠生效,添加相同的样式时由优先级决定哪个生效

• 优先级: 指选择器的优先级, 作用范围越小优先级越高,

!important> id>class>标签名>继承

定位方式

• 静态定位

• 相对定位

• 绝对定位

• 固定定位

• 浮动定位

静态定位

• 静态定位又称为文档流定位

• 格式: position:static; 默认的定位方式

• 特点: 元素以左上为基准, 块级元素从上往下排列, 行内元素从左向右依次排列,通过外边距控制元素的位置. 默认无法实现层叠效果

相对定位

• 格式: position:relative;

• 特点: 元素不脱离文档流(不管元素显示到什么位置仍然占着原来的位置), 通过left/right/top/bottom让元素相对于初始位置做偏移

绝对定位

• 格式:position:absolute;

• 特点:元素脱离文档流(不占原来的位置), 通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做偏移.

固定定位

• 格式: position:fixed;

• 特点: 元素脱离文档流,通过left/right/top/bottom让元素相对于窗口做偏移,元素会固定在窗口的某个位置.

浮动定位

• 格式:float:left/right;

• 特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素或其它浮动元素时停止移动.

• 浮动元素一行装不下时会自动折行, 折行时有可能被卡主

• 当元素的所有子元素全部浮动时,自动识别的高度为0 , 后面元素会顶上来,如果元素中包含文本,文本会被挤出去, 最终导致显示异常, 通过给元素添加overflow:hidden 解决此问题

• 当需要将纵向排列的元素改成横向排列时使用浮动定位

溢出设置overflow

• visible显示(默认)

• hidden隐藏

• scroll 滚动显示

行内元素垂直对齐方式vertical-align

• top上对齐

• middle中间对齐

• bottom下对齐

• baseline基线对齐

JavaScript

● 简称JS, 作用:是给页面添加动态效果
● 语言特点:
○ 属于脚本语言, 不需要编译直接由浏览器解析执行
○ 基于面向对象
○ 弱类型语言
○ 安全性强:JS语言由于是运行在客户端电脑上的语言,所以JS语言只能访问浏览器内部的数据,浏览器以外的数据是禁止访问的.
○ 交互性强: 因为JS语言是嵌入到html页面中,最终执行在客户端电脑里面的,和用户近距离接触,所以交互性更强.
如何在html页面中添加JS代码

● 三种引入方式:
○ 内联: 在标签的事件属性中添加JS代码, 当事件触发时执行
■ 事件: 系统给提供的一些特定的时间点
■ 点击事件: 当用户点击元素时触发的时间点
○ 内部: 在html页面中的任何位置添加script标签,在标签里面写JS代码
○ 外部: 在单独的JS文件中写JS代码,然后在html页面中通过script标签的src属性引入
变量, 数据类型, 运算符,各种语句,方法,面向对象

变量

● JS语言属于弱类型语言
○ Java强类型: int x=10; String s = “abc”; x=“xxx”;报错
○ JS弱类型: let x=10; let s = “abc”; x=“xxx”;正常 不报错
● let和var声明变量的区别
○ let声明变量的作用域和Java语言类似
○ var声明变量的作用域是全局的
■ java:
for(int i=0;i<10;i++){
int j = i+1;
}
int x = j+i; //报错 j和i超出作用域
■ JS:let
for(let i=0;i<10;i++){
let j = i+1;
}
let x = j+i; //不报错但是访问不到j和i(超出了作用域)
■ JS:var
for(var i=0;i<10;i++){
var j = i+1;
}
var x = j+i; //不报错而且可以访问到j和i的值

数据类型

● JS语言中只有对象类型
● 常见的对象类型包括:
○ string字符串: 可以通过单引号或双引号修饰
○ number数值: 相当于Java中所有数值类型的总和
○ boolean布尔值: true/false
○ undefined未定义, 当变量只声明不赋值时,变量的类型为未定义
● typeof 变量; 获取变量的类型

运算符

● 算术运算符: + - * / %
○ 除法会自动根据结果转换成整数或小数
java: int x=5; int y=2; x/y=2
JS: let x=5; let y=2; x/y=2.5 x=6 x/y=3
● 关系运算符: > < >= <= != 和=
○ ==: 先统一两个变量的类型再比较值
○ ===:先比较类型, 类型相同之后再比较值
“666”==666 true “666”===666 false
● 逻辑运算符: && , || , !
● 赋值运算符: = += -= *= /= %=
● 三目运算符: 条件?值1:值2

各种语句

● if else
● while / do while
● for
● switch case

方法

● Java: public 返回值类型 方法名(参数列表){方法体}
● JS: function 方法名(参数列表){方法体}
● 声明方法的方式:
○ function 方法名(参数列表){方法体}
○ let 方法名 = function(参数列表){方法体}
○ let 方法名 = new Function(“参数1”,“参数2”,“方法体”);

和页面相关的方法

1. 通过选择器找到页面中的元素对象
   let 元素对象 = document.querySelector(“选择器”);
2. 获取或修改元素的文本内容
   元素对象.innerText 获取
   元素对象.innerText = “xxx”; 修改
3. 获取或修改控件的值
   控件对象.value 获取
   控件对象.value=“xxx”; 修改

NaN

● Not a Number 不是一个数
● isNaN(变量) 判断变量是否是NaN, true代表是NaN,false代表不是NaN
● NaN和任何数值进行任何运算结果都是NaN

JavaScript代码出错排错步骤:

● 通过浏览器F12 调出控制台, 看控制台中的错误提示, 然后点击超链接找到对应的代码

JavaScript对象分类

● 内置对象, 包括: string,boolean,number…
● DOM,Document Object Model文档对象模型, 包含和页面相关的内容
● BOM,Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容

BOM浏览器对象模型

● window: 此对象中的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.
● window中的常见方法:
○ alert(“xxx”) 弹出提示框
○ confirm(“xxx”)弹出确认框
○ prompt(“xxx”) 弹出文本框
○ isNaN(变量) 判断变量是否是NaN
○ parseInt() 将字符串或小数转成整数
○ parseFloat() 将字符串转成整数或小数
○ let timer = setInterval(方法,时间间隔) 开启定时器
○ clearInterval(timer) 停止定时器
○ setTimeout(方法,时间间隔) 开启只执行一次的定时器

window对象中的常见属性

● location 位置
○ location.href = “http://www.baidu.com”; 控制浏览器的请求地址
○ location.reload(); 刷新页面
● history 历史
○ history.length 历史页面数量
○ history.back() 返回上一页面
○ history.forward() 前往下一页面

DOM文档对象模型

● 包含和页面相关的内容

1. 通过选择器找到页面中的元素对象
   let 元素对象 = document.querySelector(“选择器”);
2. 获取或修改元素的文本内容
   元素对象.innerText 获取
   元素对象.innerText = “xxx”; 修改
3. 获取或修改控件的值
   控件对象.value 获取
   控件对象.value=“xxx”; 修改
4. 创建元素对象
   let 元素对象 = document.createElement(“标签名”);
5. 添加元素到某个元素里面
   父元素对象.append(新元素对象);
6. 获取body
   document.body

前端MVC设计模式

● MVC设计模式是将实现一个业务的所有代码划分为三部分
● M: Model 模型,指数据模型, 前端数据一般都来自于服务器
● V: View 视图, 指页面相关代码
● C: Controller 控制器, 指将数据展示到页面中的过程代码
● MVC设计模式中的C控制器部分将数据展示到页面中的过程中需要频繁进行DOM相关操作(遍历查找元素),频繁进行DOM操作浪费资源, MVVM设计模式就是为了解决此问题而诞生的

前端MVVM设计模式

● M: Model 模式,指数据模型, 前端数据一般都来自于服务器
● V: View 视图, 指页面相关代码
● VM: ViewModel 视图模型, 视图模型将页面中可能发生改变的元素和某个变量在内存中进行绑定,当需要改变页面中的元素的之后只需要从内存中找到对应的元素即可, 不需要频繁的遍历查找,从而提高了执行效率