死磕前端ing～

Author：闫玉良 这么久没有发文，很多人关心我是否离开了这个美丽的世界 ... 这些同学，是如何居心？出来，我保证不打死你们。不过很久没有更新文章，确实抱歉，我的错，我有罪 ～（小声逼逼：我又不是签约作家，还被逼出了连载的味道，也是没谁了。）

今天咱们唠唠前端那点事儿，和前端死磕到底。

更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

当然并不是和可爱的前端们发生争执，而是和那些标签、js、框架死磕到底。

说起来惭愧，许久没有碰过代码（除了偶尔的脚本），python 生疏已久，前端的 html 、css 和 javascript 更是遗忘在了奈何桥的另一头。作为一个热爱学习的三好青年，怎会允许此事发生？今天咱们就先来回顾一下这些基础知识。以下内容根据 HTML 、CSS 、JS 的顺序进行回顾，文章篇幅较长，可以跳读。

1.HTML

大家好，我是 html ，学名为超文本标记语言。在浏览器上处处可以看到我的身影。当然，我自己不会如此伟大，身后支撑有一个团队，他们是化妆师 CSS 和动作指导 Javascript。

我身上有很多的标签，经过化妆师 CSS 的修饰，才得以展现如此靓丽的一面（让一些开了美颜、瘦脸、拉长身高的小姐姐自愧不如）。那么，简单的数数我身上有哪些标签。

1.1 标签

1.head 标签，里面会包含一些个 meta 标签、title 标签（网页的标题就是这个小东东）。你以为这些就够了？它里面能嵌入 style （样式标签，内容为 CSS 代码），还可以嵌入 script （内容为 JavaScript 代码），内容极为丰富。

2.body 标签作为身体，大部分的页面内容就自此处啦。

3.h 是标题标签

4.div 是块状标签

5.p 是段落标签

6.br 是换行标签，它是单个出现的标签

7.img 是图片标签，他也是单个出现的标签

8.a 是超链接标签，点击可跳转其他链接

9.ul 和 li 组成了无序标签；而 ol 则是有序标签

10.form 是表单（其中 action 属性定义提交地址；method 属性则是确定表单提交的方式）

11.label 是标注标签。比如一个输入框前面标注为姓名，意思就是让用户输入姓名。

12.input 是输入框。type 属性确定其内容：text 是单行文本，password 是密码框，radio 是单选框，checkbox 是复选框，file 是上传文件，submit 是提交按钮，reset 是重置按钮，button 是普通按钮。

13.textarea 则是多行文本输入框

14.select 是下拉表单

15.option 与 select 配合使用，意思即下拉表单中的选项

16.span 标签则是一些特殊格式文本的标签

17.table 是表格标签，与其配合的有 tr 行标签， th 表头单元格， td 普通单元格

1.2 实体符号以及注释

大家都知道国人写文章的习惯为段首缩进两字符，如果在 p 标签起始位置手敲俩空格后，页面展示会发现怎么只有一个空格？？？那是因为被浏览器吃了，想要显示多个空格，就需要空格的实体符号了。那便是  。

另外，为了防止歧义的产生，还有俩实体符合值得一提，那便是大于号和小于号。毕竟它们长得太像标签的尖括号了。小于号表示为<；大于号表示为 >

注释为 <!-- xxx -->

1.3 行元素与行内元素

行元素就是单独占一行的标签，也就是后面再有标签去要到下一行去！咱们看看都有谁这么霸道，不要脸：标题标签 h（标题嘛，情有可原）；段落标签 p （凑合着也说的过去）；div 标签（这个东西就把它理解成容器吧，毕竟它没有语义，中性的很～）

行内元素就是老实人，只占自己的位置。元素之间可以排开（设置宽高是无效的，它的宽和高是由内容撑开的）。这些老实人都有谁呢？图片标签 img 和通用内联容器标签 span 以及超链接标签 a

1.4 布局

不想做将军的士兵，不是好士兵。论谋略、论布局，咱也有一手。

口诀是：先行后列、先整体再局部、先大后小

即先按照行的方式，将页面整体分开，再给每一行进行内容填充。

2.CSS

化妆师 CSS 就是美容整形专家了，它控制着 html 的美与丑。

它有个名字叫做 层叠样式表

2.1 基本语法

选择器 {
  属性: 值;
  ...
  属性: 值
}

选择器下面会大幅介绍，所以不要担心。属性和值嘛就很简单，比如字体颜色是红色，字体是仿宋，想起了被论文支配的恐惧 …

2.2 选择器

选择器其实并不复杂，它就是选择内容，然后为其添加样式，如何准确的选择要加样式的内容呢？就依靠下列选择器啦。

2.2.1 标签选择器

这是最简单的选择器，直接选择标签，其影响范围之广可想而之，所以大型项目里面可是很少使用的，慎用！

div{color: red}

2.2.2 类选择器

类这个字从何而来呢？它其实是根据标签的一个 class 属性命名的。多个标签想要渲染同样的效果，可设置相同的类。然后根据类名来选择元素即可。

.newbox{color:red}

2.2.3 层级选择器

层级选择器则是依据标签的层级结果，即嵌套格式进行选择。它可以结合标签选择器与类选择器来一同使用。

比如有个 html 结构如下：

<div class="new">
  <span>xxx</span>
</div>

为 span 标签加个颜色：

.con span{color:red}

2.2.4 id 选择器

id 为标签的名字。在数据库中 id 一般为唯一键，此处同理。

#box{color:red}

2.2.5 组选择器

组选择器便是选择一组内容，为其统一添加样式。

.box1,.box8{color:red}

2.2.6 伪类选择器

有一个常用的伪类选择器，它就是 hover ，表示鼠标悬浮于元素上时的状态。

.box:hover{color:red}

2.3 盒子模型

提到前端，不得不提到一个东西，那便是盒子模型。也就是浏览器中常看到的下列图片：

盒子模型主要还是为了理解如下几个概念而形象化的东西。

前一段时间在淘宝买了个毛绒玩具（蓝胖子），收到快递，在拆解过程中：

1.width 装玩具的盒子的宽度

2.height 装玩具的盒子的宽度

3.border 装玩具的盒子的厚度

4.padding 玩具和盒子之间的距离（蓝胖子不能压瘪，要不然差评，所以它被保护的很好）

5.margin 我快递盒子和放快递的大盒子之间的距离

有个现象是，当盒子的长和宽固定后， border 和 padding 增加，都会改变整体的尺寸，为什么呢？

因为 padding 增加后（即玩具和盒子之间的填充泡沫太多了）盒子被撑大了；border 增加后（商家比较有良心，换了个特厚实的盒子），所以快递变大了。

2.4 常用属性

1.width 设置标签的宽

2.height 设置标签的高

3.background 设置标签的背景色

4.border 设置边框线：border-top 即上边框；同理其他为 border-left、border-right 和 border-bottom

5.padding 设置元素内容与边框间的距离（即蓝胖子和快递盒之间的距离）

6.margin 设置元素和外界的距离

7.float 设置元素浮动

8.color 设置文字颜色

9.font-size 设置文字大小

10.font-family 设置文字字体

11.font-weight 设置是否加粗

12.line-height 设置行高

13.text-decoration 设置文字下划线

14.text-align 设置文字水平对齐方式

15.text-indent 设置文字首行缩进

css 中的注释为：

/* xxx */

16.display 设置元素的类型与隐藏。（none 为隐藏；inline 为行内元素；block 为块元素）

17.overflow 设置元素溢出时的动作。（visible 为内容会难看的被显示在元素框外，溢出；hidden 去掉超出的内容，只显示元素框内内容；scroll 则是现实滚动条，可以上下滚动显示全部内容；auto 则是如果内容超出去才会显示滚动条）

2.5 定位

2.5.1 绝对定位

找一个参照物来固定元素本身，优先去查找上一个设置了定位的元素，没有的话就是 body 了。然后根据它固定位置，脱离文档流

2.5.2 相对定位

设置相对定位的元素，一般设置父级相对定位，而子集绝对定位。

2.5.3 固定定位

以浏览器窗口为参照物，脱离文档流，以不变应万变。

文档流就是那些标签，它们按照顺序从上往下，从左到右的排列着，当然符合块元素与行内元素的特性。脱离文档流就是飘起来了，它们怎么排列，不受文档流的影响。

2.6 权重

CSS 的权重是衡量显示样式的优先级。权重值大的优先显示，如果权重值相同，后写的样式会覆盖掉前面的样式。

1.内联样式权重值最高，毕竟是标签的一部分，亲人嘛。权重值为 1000

2.ID 选择器仅次于内联样式，权重值为 100

3.类和伪类选择器权重值为 10

4.标签选择器权重值为 1

3.Javascript

希望看到这里，你还有耐心读下去。如果看不下去了，就先收藏一下，去喝杯水，休息一会。

Javascript 也是一种弱类型的语言，它的变量类型不像 Java、C 等需要提前声明，而是由赋的值类型决定，你给我个整数，我就是数字类型。

它定义变量的语法如下：

var iNum = 666
var sTr = 'Ethan Yan'

当然你也可以偷懒，多个变量定义，只用一个 var

var iNum = 666,sTr='Ethan Yan'

同时它有 5 种基本数据类型：

1.number

2.string

3.boolean

4.undefined

5.null

还有一种复合类型：object

它不严格缩进，全凭自己喜好，因为它的语句都以封号结尾，不像 python 一样，缩进错误疯狂报错。

它的注释如下：

// 单行注释

/*
	xxx
	多行注释
	xxx
*/

然后就是命名规范，毕竟你定义 xxx 没人能够理解。

变量、函数、属性、函数参数命名规范：

1.区分大小写

2.第一个字符必须是字母，下划线或者美元符号。（千万别以数字开头命名了，我真的很奇怪，总是有人以数字开头命名）

3.其他字符可以是字母、下划线、美元符号和数字

还有一种比较美观的命名方式，大家可以借鉴一下，那就是匈牙利命名风格：

1.如果是对象（Object）就写为：oDiv

2.如果是数组（Array）就写为：aItems

3.如果是浮点数（Float）就写为：fPrice

规律即：变量类型小写首字母加上变量名

3.1 函数

function fnAlert(){
  alert('hello!');
}

// 函数执行
fnAlert()

上面的函数就是弹出一句话 hello!

如果想给函数传参数，则可以使用如下方法：

function fnAlert(a){
  alert(a)
}

// 调用函数
alert(222222)

具有返回值的函数：

function fnAdd(iNum01,iNum02){
  var iRs = iNum01 + iNum02;
  return iRs;
  alert('complete!');
}

var iCount = fnAdd(3,4);
alert(iCount); // 弹出7

3.1.1 变量和函数的预解析

1.js 底层解析过程分为两个阶段，那就是编译阶段和执行阶段。所以会发生一件有意思的事情，那就是你在定义一个函数之前，调用这个函数，同样执行正确。为什么？因为编译阶段已经将函数定义过了。（是不是很不可思议）

2.变量如果先调用再定义，为什么不回出现相同的现象？因为变量在编译阶段，会先将其赋值为 undefined 类型，所以先使用变量，再声明变量也不会报错，但是会得到一个 undefined 类型的变量。

3.2 条件语句

3.2.1 if-else

var iNum1 = 1;
var iNum2 = 2;
var sTr;
if(iNum1>iNum2){
  sTr = '大于';
}else{
  sTr = '小于';
}
alert(sTr);

3.2.2 if-elseif-else

if(xxx){
  xxx;
}else if(xxx){
  xxx;
}else{
  xxx;
}

3.3 获取元素方式

如果一个元素定义如下：

<div id="div1">这是一个div元素</div>

想要获取该元素：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>

注意获取到的变量是一个对象，并不是值。想要取值，使用oDiv.innerHTML 即可做到

对了，写 js 时，有一个问题需要注意：

如果 script 标签内容（要获取某一个元素的值）在元素之前，那么获取不到，因为未被声明（代码从上往下执行，而且得到的结果不是 undefined 而是 null）。如果你非要这么变态的写，当然也有办法：

window.onload = function(){
  var oDiv = document.getElementById('div2')
}

window.onload 函数会在页面加载完之后执行，所以你将你的变态代码扔进去，js 写在哪里都正确。

3.4 操作元素的属性

语法如下：

var 变量 = 元素.属性名  // 读取属性
元素.属性名 = 新属性值   // 改写属性

读取属性名时的属性名写法可有些讲究了：

1.普通属性，即 html 中的属性，直接写就完事了

2.class 类属性需要改写。如：className

3.style 属性有横杠的也需要改写。如 font-size 改写为 .fontSize

3.5 事件属性以及匿名函数

3.5.1 事件属性

大家经常进行的鼠标点击、鼠标移入、鼠标移出都就是事件属性。我们可以通过将函数名赋值给元素事件属性的方式将事件和函数关联起来。

var oBtn = document.getElementById('btn');

oBtn.onclick = myalert;

function myalert(){
  alert('ok!');
}

3.5.2 匿名函数

js 中匿名函数很好写，我们改写上一段代码为例：

var oBtn = document.getElementById('btn');

// 注意下面写法
oBtn.onclick = function (){
  alert('ok!');
}

3.6 数组及操作方法

如同 python 中的列表，定义数组可以有下面两种方法：

var aList = new Array(1,2,3);
var aList = [1,2,3];

// 获取数组的长度
alert(aList.length);

// 用下标取出数组的0号数据
alert(aList[0]);

// 将数组成员通过一个分隔符合并成字符串
// 弹出 1-2-3
alert(aList.join('-'));

// 从数组最后增加成员3
aList.push(3);

// 从数组最后删除成员
aList.pop();

// 将数组反转
aList.reverse();

// 返回数组中元素第一次出现的1的索引值
aList.indexOf(1);

// 从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
aList.aplice(2,1,7,8,9);

3.7 循环语句

for(var i=0;i<len;i++){
    ......
}

从 0 开始，只要 i 小于 len 就会一直执行，没执行一次代码，i 进行加 1 操作。

3.8 字符串相关方法

1.直接用 + 进行拼接操作

2.parseInt() 将数字字符串转化为整数

3.parseFloat() 将数字字符串转化为小数

4.split() 把一个字符串分隔成字符串组成的数组

5.indexOf() 查找字符串是否含有某字符

6.substring() 截取字符串

用法： substring(start,end)（不包括end）

字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

先转化成数组，再利用数组的反转方法即可实现

3.9 定时器

setTimeout 只执行一次的定时器

clearTimeout 关闭只执行一次的定时器

setInterval 反复执行的定时器

clearInterval 关闭反复执行的定时器

3.10 封闭函数

封闭函数的三种写法：

(function(){
    alert('hello!');
})();

!function(){
    alert('hello!');
}()

~function(){
    alert('hello!');
}()

其实也属于匿名函数，即创建完函数立即调用，省略了函数名。

当然它并不是没事干，定义这么个东西好玩儿，它是为了防止命名冲突。

封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全.

打赏