web前端基础

1、HTML

1.1、概述：Hyper Text Markup Language: 超文本标记语言，是一个运行在浏览器上、由浏览器解析的语言；他不仅可以处理文本信息，也可以处理多媒体相关的资源，这也是超文本这个名字的缘由；该语言是网页的基础，基本的网页结构和页面内容都由HTML语言来处理，如果把网页比做一个房子的话，HTML相当于建房子的水泥、钢筋，没有HTML语言就没有网页；

1.2、学习HTML：主要是学习标签的使用，HTML语言是由标签组成的，有各种各样的标签用于表示页面里不同的信息；

文本标签：

• h1-h6：标题标签，数字越小字体越大，独占一行，字体加粗，自带上下间距；
• p：段落标签，独占一行，自带上下间距；
• hr：水平分割线；
• br：换行符；
• b：字体加粗；
• i：字体倾斜；
• u：下划线；
• s：删除线；

列表标签：

• ul 和 li ：无序列表；li指的是ul列表里每行显示的标签；
• ol 和 li ：有序列表；li指的是ol列表里每行显示的标签；

图片标签：img，相关的属性解析

• src：相对路径（访问站内资源）或者绝对路径（访问站外资源），写相对路径的规则：1、资源与页面同级目录：直接写文件名；2、资源在页面的上级目录里：../文件名；3、资源在页面的下级目录里：/下级目录名/文件名；
• alt：图片不能显示时所显示的文字；
• title：图片标题；
• width/heigth：设置图片宽高，有像素与百分比的两种赋值方式；只设置宽的时候高会同比例的变化；

超链接标签：a，相关的属性

• href：资源路径；超链接标签可以被文本或者图片包裹，把文本和图片变成一个超链接；

表格标签：

table：表示表格标签的范围；

• tr：每行；
• td：每列；
• th：表头；

caption：表格标题；

相关的属性：

• border：设置边框；
• colsapn：跨列；
• rowspan：跨行；

1.3、标签分类

标签可以分为块状元素和行内元素；

块状元素：可以容纳行内元素和其他块级元素；

行内元素：只能容纳文本和其他行内元素；

行内元素与块状元素的区别：

1. 块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
2. 块级元素可以设置宽高;行内元素设置宽高无效。
3. 块级元素可以设置margin，padding属性;行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。

1.4、分区标签：可以理解为一个容器，将多个标签统一到容器里管理；

div：块级分区标签，独占一行；

span：行内分区标签，不会换行占位；

详细的HTML学习，可以参考这位老师的博客：Web前端：HTML最强总结 附详细代码_BudingCode的博客-CSDN博客_web代码

2、CSS

2.1概述：css（cascading style sheet）称为层叠样式表，它可以作用在同一个HTML元素上，这是层叠名字的缘由，它的主要意义是用于将页面的内容与表现的代码分离，美化页面；

css有三种引入HTML的方式：

内联：在属性中添加style的样式代码，它的缺点主要是不能复用；

内部引用：在head标签里添加style标签，里面写入样式代码，可以在当前页面使用；

外部引用：在单独的css文件中写入样式代码，可以给任何页面使用；

2.2：选择器：

标签选择器：标签名：{样式代码}；

id选择器：#id{样式代码}；主要用于选择特定的元素；

类选择器：.类名{样式代码}；用于选择一部分拥有相同样式代码的元素；

属性选择器：标签名[属性：值]{样式代码}；选择特定属性的元素；

以上选择器可以组合使用，这种选择器被称为组合选择器；

子孙后代选择器：通过元素与元素之间的上下关系来选择元素，包括后代元素；

子元素选择器：通过元素的上下关系选择元素，不包括后代元素；

伪类选择器：通过元素的点击状态来选择元素；

2.3、css的三大特性

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

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

• 优先级: 指选择器的优先级, 作用范围越小优先级越高；但可以通过添加！important属性来提高优先级；优先级顺序：!important> id>class>标签名>继承；

2.4、元素的显示方式

在样式代码中添加display：？，？代表三种显示方式：

block：块级元素默认值，独占一行，可以修改宽高；

inline：行内元素默认值，共占一行，不能修改宽高；

inline-block：行内块元素，共占一行，能修改宽高；

2.5、样式

三原色: 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; 设置字体大小+字体

2.6、盒子模型

通过盒子模型相关样式控制元素的显示效果，盒子模型由四部分样式组成：

• content内容:控制元素的显示尺寸
• margin外边距:控制元素的显示位置
• border边框: 控制元素的边框效果
• padding内边距: 控制元素内容的位置

1、盒子模型之content(内容)

控制元素的显示尺寸

相关样式: width和height

赋值方式:

• 像素
• 上级元素的百分比

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

2、盒子模型之margin(外边距)

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

赋值方式:

• margin-left/right/top/bottom:10px; 给某个方向添加外边距
• margin:10px; 四个方向添加10
• margin:10px 20px; 上下10 左右20
• margin:10px 20px 30px 40px; 上右下左顺时针赋值

行内元素上下外边距无效；上下相邻彼此添加外边距取最大值, 左右相邻两者相加；

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

3、盒子模型之border(边框)

赋值方式:

• border:粗细 样式 颜色;
• border-left/right/top/bottom:粗细 样式 颜色;
• border-radius:10px; 设置圆角 值越大越圆

4、盒子模型之padding(内边距)

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

赋值方式: 类似外边距

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

注意：给元素添加内边距会影响元素的宽高；

具体css样式代码实例请参考：Web前端：CSS最强总结 附详细代码_BudingCode的博客-CSDN博客

3、JavaScript

3.1、概述：简称JS，给页面添加动态效果；属于脚本语言, 不需要编译直接由浏览器解析执行，基于面向对象，弱类型语言；

安全性强:JS语言由于是运行在客户端电脑上的语言,所以JS语言只能访问浏览器内部的数据,浏览器以外的数据是禁止访问的；

交互性强: 因为JS语言是嵌入到html页面中,最终执行在客户端电脑里面的,和用户近距离接触,所以交互性更强；

3.2、用法

JavaScript的语言需用在script标签里面，script标签的位置要求不大，放在html的任意位置都可以，一般建议放在</body>的上面；而且JavaScript是现代浏览器以及HTML5中默认的脚本语言，以前还要在script标签里面写个type=“text/javascript"来显示它的脚本语言是谁，现在则不需要了；

3.3、变量申明

有let 和 var 两种申明方式，let的作用域和java类似，var的作用域是全局的；

弱类型语言不需要添加变量类型，如：

• 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的值

3.3、数据类型

number数值: 相当于Java中所有数值类型的总和

undefined未定义, 当变量只声明不赋值时,变量的类型为未定义

typeof 变量; 获取变量的类型

JavaScript中有个常用的全局属性NaN,即非数值(Not a Number)，NaN 属性用于引用特殊的非数字 值，该属性指定的并不是不合法的数字；

3.4、运算符

算术运算符: 除法会自动根据结果转换成整数或小数: let x=5; let y=2; x/y=2.5 x=6 x/y=3

关系运算符: > < >= <= != ==和===

• ==: 先统一两个变量的类型再比较值

• ===:先比较类型, 类型相同之后再比较值："666"==666 true "666"===666 false

3.5、方法的声明

• function 方法名(参数列表){方法体}

• let 方法名 = function(参数列表){方法体}

• let 方法名 = new Function("参数1","参数2","方法体")

3.6、对象分类

• 内置对象, 包括: string,boolean,number...

• DOM,Document Object Model文档对象模型, 包含和页面相关的内容

• BOM,Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容

详细的JavaScript基础知识，可以参考该博客：

Web前端：JavaScript最强总结 附详细代码 （带常用案例！）_BudingCode的博客-CSDN博客_前端代码

4、小结

把网页比作房子，HTML就像房子的构建材料：水泥、钢筋等；css就像房子的墙面，你所看到的房子的外观由它来决定；JavaScript就像房里的家具，有了家具房子才真正有了它的意义，可以让客户端与网页进行互动；

设计网页有专门的设计模式，传统的设计模式称为MVC设计模式，它把页面分为三块：M:model,指数据；V:view,指视图，页面的相关代码；C：controller,控制器，将数据展示到页面中，该过程需要频繁用到DOM，DOM操作会用到大量资源；

为了解决DOM造成大量资源占用问题，有了MVVM设计模式：VM：视图模型，视图模型将页面中可能发生改变的元素和某个变量在内存中进行绑定,当需要改变页面中的元素的之后只需要从内存中找到对应的元素即可, 不需要频繁的遍历查找,从而提高了执行效率；

Vue框架是目前最流行的前端框架之一，它是基于MVVM设计模式而运行的；Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系中找到变量所对应的页面元素并将元素内容进行改动；