Web前端基础

HTML: 学习如何搭建页面 (盖房子,毛坯房)
CSS: 学习如何美化页面 (装修)
JavaScript: 学习如何给页面添加动态效果

HTML

Hypertext Markup Language: 超文本标记语言

标记语言的格式:

<开始标签 属性名="属性值" 属性名="属性值">标签体</结束标签>

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

常用快捷键

Alt+Insert 新建文件
Ctrl+D 复制整行并粘贴到下一行
Shift+回车切换到下一行
Ctrl+Alt+L 代码格式化
Ctrl+X 剪切 (可以用做删除)
Ctrl+Z 撤销
Ctrl+Shift+Z 恢复
Ctrl+Shift+/ 注释

文本相关标签

内容标题h1-h6

字体加粗, 独占一行, 自带上下的间距
水平分割线 hr
段落标签 p

独占一行, 自带上下间距
换行br
加粗b
斜体i
下划线u
删除线s
无序列表: ul和li
有序列表: ol和li
列表嵌套: 有序和无序列表可以任意无限嵌套

图片标签img

src设置资源路径:
            相对路径:访问站内资源时使用
                1. 资源和页面在同级目录:  直接写图片名
                2. 资源在页面的上级目录:  ../图片名
                3. 资源在页面的下级目录:  文件夹名/图片名
            绝对路径:访问站外资源时使用,称为图片盗链, 有找不到图片的风险
alt:当图片不能正常显示时显示的文本
title: 鼠标悬停时显示的文本
width/height:设置宽高  两种赋值方式:1.像素 2.百分比
            只设置宽度 高度会自动等比例缩放

超链接a

href: 设置请求的资源路径,作用类似图片标签的src属性
图片超链接: 用a标签包裹文本为文本超链接, 包裹图片为图片超链接
页面内部跳转: 在目的地元素里面添加id属性, 然后在超链接href="#id",这样就能跳转到指定元素的位置

表格标签table

相关标签: table tr表示行 td表示列 th表头 caption表格标题
相关属性: border边框 colspan跨列 rowspan跨行

表单form

作用: 获取用户输入的各种信息并提交给服务器
学习form表单就是学习有哪些控件, 控件包括: 文本框,密码框,单选,多选,下拉选等

<!--action设置请求地址 -->
<form action="http://www.tmooc.cn">
  <!--文本框, name属性是所有控件必须添加的属性 否则提交时不会传递此内容 placeholder占位文本
  maxlength设置最大字符长度  value设置默认值  readonly只读 -->
  <input type="text" name="username" maxlength="5" value="abc" readonly placeholder="用户名"><br>
  <!--密码框-->
  <input type="password" name="password" placeholder="密码"><br>
  <!--value设置提交的内容,如果不设置提交的是on checked设置默认选中 -->
  性别:
  <input type="radio" name="gender" value="m" id="r1"><label for="r1">男</label>
  <input type="radio" name="gender" value="w" checked 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" value="tt" checked>烫头<br>
  所在地:
  <select name="city">
    <option value="bj">北京</option>
    <option value="sh" selected>上海</option>
    <option value="gz">广州</option>
  </select><br>
  靓照:
  <input type="file" name="pic"><br>
  生日:
  <input type="date" name="birthday"><br>
  <!--提交按钮-->
  <input type="submit" value="注册">
  <input type="reset">
  <input type="button" value="自定义">
  <hr>
  <button type="submit">注册</button>
  <button type="reset">重置</button>
  <button type="button">自定义</button>

</form>

分区标签

分区标签可以理解为一个容器, 将多个有相关性的标签添加到一个分区标签里面, 便于统一管理
常见的分区标签:
- div: 独占一行
- span: 共占一行
HTML5.0版本增加的分区标签 ,这些标签的作用和div 一样, 为了提高代码的可读性
- header 头
- footer 脚
- main 主体
- nav 导航
- section 区域

CSS 层叠样式表

作用: 负责美化页面 (相当于装修)

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

三种引入方式:
- 内联: 在标签的style属性中添加样式代码, 不能复用
- 内部: 在head标签里面添加style标签, 在标签体内添加样式代码, 可以当前页面复用不能多页面复用
- 外部: 在单独css文件中添加样式代码, 在html页面中的head标签里面添加link标签把css引入到html页面中

CSS选择器

作用: 用来查找页面中的元素

标签名选择器: 匹配页面中所有同名标签

格式: 标签名{样式代码}
id选择器: 当需要选择页面中某一个标签时使用

格式: #id{样式代码}
类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class值划分为同一类

格式: .class{样式代码}
分组选择器: 将多个选择器划分为同一组进行统一管理

格式: div,#id,.class{样式代码}
属性选择器: 通过元素的属性匹配元素

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

综合练习:

通过内部样式实现以下效果:
1. 把张学友改成绿色
2. 把刘德华和悟空改成蓝色
3. 修改取经 3 人和刘备的
   背景为黄色
4. 修改提交按钮的背景为红色, 
   自定义按钮的字为粉色
5. 给所有元素添加绿色的边框

选择器(续)

后代选择器: 通过元素和元素之间的层级关系元素元素,选择的范围更广

格式: body div div p{样式代码} 匹配的是body里面的div里面的div里面的所有p(包含)
子元素选择器: 通过元素和元素之间的层级关系元素元素, 选择的范围更精准

格式: body>div>div>p{样式代码} 匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)
伪类选择器: 选择元素的状态包括: 未访问/访问过/悬停/激活

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

颜色赋值方式

三原色: RGB Red Green Blue , 每一种颜色的取值范围0-255
五种赋值方式:
- 颜色单词赋值: red/blue/yellow/green....
- 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:200px 300px; 设置背景图片尺寸
background-repeat:no-repeat; 禁止重复
background-position: 100px 200px; 设置背景图片的位置
background-position: 50% 50%; 设置背景图片的位置

文本和字体相关样式

text-align:right/center; 水平对齐方式
text-decoration:overline上划线/underline下划线/line-through删除线/none去掉修饰
line-height:20px; 设置行高, 单行可以实现垂直居中, 多行可以控制行间距
text-shadow:颜色 x偏移值 y偏移值浓度(值越小越清晰);
font-size:20px; 字体大小
font-weight:bold加粗/normal去掉加粗;
font-style:italic; 设置斜体
font-family:xxxx,xxx,xxx; 设置字体
font: 20px xxx,xxx,xxx; 设置字体大小+字体

元素的显示方式display

block: 块级元素的默认值, 显示特点: 独占一行,可以修改元素的宽高. 包括: h1-h6,p,div
inline: 行内元素的默认值, 显示特点: 共占一行, 不能修改元素的宽高. 包括: span,b,i,s,u,a
inline-block: 行内块元素的默认值, 显示特点: 共占一行, 并且可以修改元素宽高. 包括: input,img
none: 隐藏元素

盒子模型

通过盒子模型相关的样式控制元素的显示效果
盒子模型包括: content内容+border边框+margin外边距+padding内边距
content内容:用来控制元素的显示大小
border边框: 用来控制边框的效果
margin外边距: 用来控制元素的显示位置
padding内边距: 用来控制元素内容的位置

盒子模型之Content内容

控制元素的显示大小
相关样式: width/height 赋值方式:1. 像素 2. 上级元素的百分比
行内元素是不能修改宽高的, 如果必须要修改, 需要将元素的显示方式改成块级block或行内块inline-block

盒子模型之margin外边距

控制元素的显示位置
赋值方式:
- margin-left/right/top/bottom:10px; 单独某一个方向赋值
- margin:10px; 四个方向赋值
- margin:10px 20px; 上下10 左右20
- margin:10px 20px 30px 40px; 上右下左赋值顺时针
行内元素上下外边距无效
左右相邻彼此添加外边距两者相加
外边距塌陷:
- 兄弟元素上下相邻, 彼此添加外边距取最大值
- 父子元素上边缘重叠时, 添加外边距取最大值,会导致父子元素粘连在一起,给父元素添加overflow:hidden样式解决.

盒子模型之边框border

赋值方式:
- border-left/right/top/bottom:粗细样式颜色; 单独某一个方向添加边框
- border:粗细样式颜色; 四个方向添加边框
border-radius:10px ; 设置圆角值越大越圆

盒子模型之内边距padding

控制元素内容的位置
赋值方式: 和外边距类似
- padding-left/right/top/bottom:10px; 单独某一个方向添加
- padding:10px; 四个方向添加
- padding: 10px 20px; 上下10 左右20
- padding: 10px 20px 30px 40px; 上右下左顺时针赋值
给元素添加内边距默认情况下会影响元素的显示范围,给元素添加box-sizing:border-box; 后则不再影响

部分标签会带盒子模型中的某些样式

body 自带8个像素的外边距
段落标签p, 列表标签和内容标题h1-h6 自带上下的外边距
文本框自带边框和内边距
列表标签自带外边距和内边距

1. 刘德华 宽度 100 高度 30
绿色背景红色字体 横向和纵向居中
2. 苹果和香蕉 字体大小 25px 斜体
3. 冰箱去掉加粗 蓝色阴影 
   方向是左下 浓度 3
4. 洗衣机添加下划线
5. 百度去掉下划线字体加粗 
字体大小 20px

CSS三大特性

继承性: 指元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响, 比如超链接的字体颜色
层叠性: 指一个元素可以层叠很多不同的样式, 多个选择器有可能选择到同一个元素, 如果添加的样式不同,则样式全部层叠生效,如果添加的样式相同则由选择器的优先级决定哪个生效
优先级: 作用范围越小优先级越高. !important>id>class>标签名>继承(属于间接选中)

居中相关

元素自身居中:
- 块级元素: 通过外边距 margin:0 auto;
- 行内或行内块元素: 在上级元素中添加text-align:center;
元素内容居中: 只能通过text-align:center;

定位

静态定位
相对定位
绝对定位
固定定位
浮动定位

静态定位

position:static;
默认的定位方式,又称为文档流定位
特点: 块级元素从上往下依次排列, 行内元素从左向右依次排列,通过外边距控制元素的位置.
默认情况下无法实现元素层叠效果

相对定位

position:relative;
特点: 元素不脱离文档流(不管元素显示到什么位置,仍然占着原来的位置,后面的元素不会顶上来),元素通过left/right/top/bottom样式相对于初始位置做偏移.
应用场景: 当元素需要层叠显示时, 静态定位是无法实现的, 通过相对于定位可以实现层叠, 当需要对某一个元素的显示位置进行微调时使用.

绝对定位

position:absolute;
特点: 元素脱离文档流(不占原来的位置, 后面的元素会顶上来), 通过left/right/top/bottom相对于窗口(默认)或某一个上级元素做偏移.
应用场景: 当需要层叠显示,并且需要让元素相对于某个上级元素做位置偏移时使用

绝对定位练习提示:
div 宽300   背景颜色 黑色透明度0.3 内边距10
文本框: 去掉边框 border:0;   内边距上下10左右20
图片使用绝对定位,以div做参照物
p 字体大小12 红色

固定定位

position:fixed;
特点: 元素脱离文档流, 通过left/right/top/bottom相对于窗口做位置偏移.
应用场景: 当需要将元素固定在窗口的某个位置时使用

浮动定位

float:left/right
特点: 元素脱离文档流, 从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止.
多个浮动元素一行装不下时会自动折行, 折行时有可能被卡主
当元素的所有子元素全部浮动时, 自动识别的内容高度为0, 会导致后面的元素顶上来出现显示异常, 给元素添加overflow:hidden 解决此问题.
应用场景: 将纵向排列的多个元素改成横向排列时使用.

表设计面试题

2021年过年时小明在这些天都收到了许多亲戚\朋友还有同事的红包,也发出了一些红包,有的是微信,有的是支付宝也有现金,请参考下面的题目帮小明设计表格保存红包的信息

设计表保存红包信息 (至少包含一张流水表)

列出需要保存的数据有哪些:

人物关系,红包金额,红包类型,时间,性别,名字

流水表: id,金额,时间,红包类型,人物id

CREATE DATABASE mydb CHARSET=UTF8;
USE mydb;
CREATE TABLE trade(id INT PRIMARY KEY AUTO_iNCREMENT,money INT,time DATE,type VARCHAR(10),p_id INT);

人物表:id,名字,性别,关系

CREATE TABLE person(id INT PRIMARY KEY AUTO_iNCREMENT,name VARCHAR(20),gender CHAR(1),rel VARCHAR(10));

插入数据:

INSERT INTO person VALUES(NULL,'刘德华','男','亲戚'),
(NULL,'杨幂','女','亲戚'),(NULL,'马云','男','同事'),(NULL,'特朗普','男','朋友'),(NULL,'貂蝉','女','朋友');
INSERT INTO trade VALUES(NULL,1000,'2021-3-20','微信',1),
(NULL,500,'2021-4-14','现金',2),
(NULL,-50,'2021-4-14','现金',2),
(NULL,20000,'2021-3-11','支付宝',3),
(NULL,-5,'2021-3-11','支付宝',3),
(NULL,2000,'2021-5-18','微信',4),
(NULL,-20000,'2021-7-22','微信',5);

统计2021年3月15号到现在的所有红包收益

SELECT SUM(money) FROM TRADE WHERE time>'2021-3-15';
查询2021年2月15号到现在金额大于100 所有女性亲戚的名字和金额

SELECT name,money

FROM trade t JOIN person p ON t.p_id=p.id

WHERE time>'2021-2-15' AND ABS(money)>100

AND gender='女' AND rel='亲戚';
查询三个平台(微信,支付宝,现金)分别收入的红包金额

SELECT type,SUM(money) FROM trade WHERE money>0 GROUP BY type;

溢出设置overflow

hidden 隐藏
visible 显示
scroll 滚动显示

显示层级

当元素为非static 定位,出现层叠时, 可以通过z-index设置显示层级, 值越大显示越靠前

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

top上对齐
middle中间对齐
bottom下对齐
baseline基线对齐

视频播放参考04视频播放.html

JavaScript

作用: 给页面添加动态效果
语言特点:
- 属于脚本语言, 不需要编译由浏览器解析执行.
- 属于弱类型语言 int x = 10; String name="张三" ; let x=10; let name="张三";
- 基于面向对象语言
- 安全性强: 因为JS语言是嵌入到html页面中运行在客户端的语言,所以对安全性要求较高 , JS语言只能获取浏览器内部的数据, 浏览器以外客户端电脑上面的数据是禁止访问的.
- 交互性强: JS语言是嵌入到html页面中运行在客户端的语言, 和用户直接接触, 而像Java语言是运行在服务器的语言,需要通过网络进行交互,所以相对来说JS语言的交互性更强
- JavaScript和Java语言没有任何关系 , 只是为了蹭热度 .
变量数据类型运算符各种语句方法面向对象

变量

JavaScript语言属于弱类型语言
- Java: int age=18; String name="张三"; name=20; 报错
- JS: let age=18; let name="李四"; name=20; 正常执行

JavaScript语言中通过let或var声明变量

let声明的变量, 作用域和Java语言类似
var声明的变量, 不管在什么位置都相当于声明的是一个全局变量

举例:

Java:
for(int i=0;i<10;i++){
 	int j = i+1;   
}
int x = i+j;   //报错   i和j超出了作用域 
JavaScript:   let
for(let i=0;i<10;i++){
    let j=i+1;
}
let x = i+j;    //不会报错 但是因为i和j超出了作用域,访问不到i和j
JavaScript:   var
for(var i=0;i<10;i++){
    var j=i+1;
}
var x = i+j;   //不会报错, 并且可以访问到i和j的值

数据类型

JavaScript语言中只有引用类型
常见的对象类型：
- string字符串: 可以通过单引号或双引号进行修饰
- number数值: 相当于java中所有数值类型的总和
- boolean布尔值: true和false
- undefined未定义: 当变量只声明不赋值时,变量的类型为未定义类型
获取变量类型的方法: typeof 变量;

运算符

算术运算符: + - * / %
- 除法运算会自动根据结果转换整数或小数
  - java : int x = 5; int y=2; int z = x/y; z=2
  - js : let x = 5; let y=2; let z = x/y; z=2.5 x=6 z=3
关系运算符: > < >= <= != ==和===
- ==: 先统一等号两边变量的类型, 再比较值 "666"==666 true
- ===: 先比较类型,类型相同后再比较值 "666"===666 false
逻辑运算符: && || ! 只支持短路与和短路或
赋值运算符: = += -= *= /= %=
三目运算符: 条件?值1:值2

各种语句

if else
for 新循环 for(Person p : persons) JS: for(let p of persons)
while
switch case

如何在html页面中添加js代码

三种引入方式
- 内联:在标签的事件属性中添加JS代码,当事件触发时执行.
  - 事件: 指系统提供的一系列时间点 .
  - 点击事件: 当用户点击元素的时间点.
- 内部: 在页面的任意位置可以添加script标签,在标签体内写js代码, 建议写在body结束标签的附近
- 外部: 在单独的js文件中写js代码, 在html页面中通过script标签的src属性引入, 如果script标签引入了js文件则不能在标签体内继续写js代码

方法

Java: public 返回值方法名(参数列表){方法体}
JS: function 方法名(参数列表){方法体}
三种定义方法的方式:
- function 方法名(参数列表){方法体}
- let 方法名 = function(参数列表){方法体}
- let 方法名 = new Function("参数1","参数2","方法体");

和页面相关的方法

通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector("选择器");
获取和修改控件的值
```
<input type='text' value='abc'>
```
input.value 获取

input.value="xxx" 修改
获取和修改元素的文本内容 <div>abc</div> <span>abc</span>

NaN

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

JavaScript对象分类

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

BOM

BrowserObject Model: 浏览器对象模型,包含和浏览器相关的内容
window对象, 此对象中的属性和方法可以称为全局属性和全局方法, 访问时可以省略掉window.

window.isNaN() window.alert() window.parseInt()
window对象中常见的方法:
- isNaN(变量) 判断变量是否是NaN
- parseInt() 将字符串或小数转成整数
- parseFloat() 将字符串转成小数
- alert("xxx") 弹出提示框
- confirm("xxx")弹出确认框
- prompt("xxx")弹出文本框
- let timer = setInterval(方法,时间间隔); 开启定时器
- clearInterval(timer); 停止定时器
- setTimeout(方法, 时间间隔); 开启只执行一次的定时器
window对象中常见的属性
- location(位置)
  - location.href 获取或修改浏览器的请求地址
  - location.reload() 刷新页面
- history(历史)
  - history.length 历史页面的数量
  - history.back() 返回上一页面后退
  - hisotry.forward() 前往下一页面前进
  - history.go(n) n正值代表前进 n负值代表后退 0代表刷新

DOM

Document Object Model 文档对象模型, 包含和页面相关的内容
通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector("选择器");
获取和修改控件的值
```
<input type='text' value='abc'>
```
input.value 获取

input.value="xxx" 修改
获取和修改元素的文本内容 <div>abc</div> <span>abc</span>

元素对象.innerText = "xxx"; 修改

元素对象.innerText 获取
创建元素对象

let d = document.createElement("div");
添加元素到某个元素里面

元素对象.append(新元素);

前端MVC设计模式

MVC设计模式就是将实现前端业务的所有代码划分为三部分
M: model 模型 , 对应数据相关代码
V: View 视图, 对应的是页面标签相关
C: Controller 控制器, 对应的是将数据显示到页面中的过程代码
前端MVC设计模式存在弊端: 在Controller控制器部分需要频繁的进行DOM相关操作(遍历查找元素),比较浪费资源 , MVVM设计模式可以解决此问题

前端MVVM设计模式

MVVM设计模式也是将实现前端业务的所有代码划分为三部分
M: model 模型 , 对应数据相关代码
V: View 视图, 对应的是页面标签相关
VM:视图模型, 视图模型负责将页面中可能发生改变的元素和某个变量在内存中进行绑定, 并对变量进行监听,当变量发生改变时,会从内存中找到和变量所对应的元素, 让元素进行改动. 这样就不用像MVC设计模式中通过遍历查找的方式查找元素了，从而提高执行的效率。

VUE

此框架是基于MVVM设计模式的框架, 目前最流行的前端框架之一.
VUE框架两种用法:
- 多页面应用: 在html页面中引入vue.js框架文件
- 单页面应用:通过脚手架的方式使用VUE框架(第四阶段开始接触)

如何在html页面中引入vue.js

从CDN服务器引入

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

把框架文件下载到本地后引入
```
<script src="js/vue.min.js"></script>
```

VUE框架执行元素: VUE对象就相当于是MVVM设计模式中的VM视图模型, 此对象负责将页面中发生改变的元素和data里面的变量在内存中绑定, 并且会不断监听变量值的改变, 当检测到变量值发生改变时,会自动从内存中找到与之对应的元素,并且让元素的内容跟着发生改变.

VUE相关指令

{{变量}}: 插值, 让当前位置的文本内容和变量进行绑定
v-text="变量" 让元素的文本内容和变量进行绑定
v-html="变量" 让元素的标签内容和变量进行绑定
:属性名="变量" 让元素的某个属性的值和变量进行绑定
v-model="变量" 双向绑定,让控件的值和变量进行双向绑定, 当需要获取控件的值的时候使用
@事件名="方法" 给元素添加事件, 需要将事件触发的方法声明在methods里面.
v-for="(变量,下标) in 数组" 循环遍历指令, 遍历的同时会生成元素
v-if="变量" 让元素是否显示和变量进行绑定, true显示 false不显示(删除元素)
v-else 让元素的显示状态和v-if取反
v-show="变量" 让元素是否显示和变量进行绑定, true显示 false不显示(隐藏元素)

Web前端基础

Web前端基础

HTML

常用快捷键

文本相关标签

图片标签img

超链接a

表格标签table

表单form

分区标签

CSS 层叠样式表

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

CSS选择器

综合练习:

选择器(续)

颜色赋值方式

背景图片相关

文本和字体相关样式

元素的显示方式display

盒子模型

盒子模型之Content内容

盒子模型之margin外边距

盒子模型之边框border

盒子模型之内边距padding

部分标签会带盒子模型中的某些样式

CSS三大特性

居中相关

定位

静态定位

相对定位

绝对定位

固定定位

浮动定位

表设计面试题

溢出设置overflow

显示层级

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

视频播放 参考04视频播放.html

JavaScript

变量

数据类型

运算符

各种语句

如何在html页面中添加js代码

方法

和页面相关的方法

NaN

JavaScript对象分类

BOM

DOM

前端MVC设计模式

前端MVVM设计模式

VUE

VUE相关指令

ElementUI 网站快速成型工具

视频播放参考04视频播放.html