前端三剑客——HTML，CSS，JavaScript技巧汇总

文摘职场 2024-04-24 23:06 广东

序言

摘要

第 1 章：HTML

第 2 章：CSS

第 3 章：JavaScript

第 4 章：JavaScript进阶

第 5 章：ES6

第 6 章：作者介绍

第 1 章

HTML

1.1、HTML介绍

HTML是HyperText Markup language的缩写，中文意思的“超文本标记语言”，用于描述网页的结构和内容。由Tim Berners-Lee和Daniel Connolly于1990年创造，它使用一系列标签定义网页内容的结构和样式，如文本、图像、链接等，兼容多平台，是互联网信息展示的核心技术。

1.2、文本标签

1.2.1、h标签

HTML中的<h>标签，全称为Heading标签，是一系列用于定义页面中标题的标签，从<h1>到<h6>共六个等级，用来给文本添加标题样式，同时也表明内容的结构层次。

1.2.2、p标签

在HTML中，<p>标签代表段落（Paragraph）元素，用于定义文档中的段落文本。每个<p>标签包裹的部分被视为一个独立的段落，浏览器会在段落前后自动添加垂直空白间距，以区分不同的段落。此标签是块级元素，意味着它默认独占一行并可以包含其他内联元素，如<strong>、<em>或<a>等。

1.2.3、meta标签

在HTML中，<meta>标签是一个位于文档头部（<head>）的辅助性标签，它不包含任何可见内容，而是为文档提供元数据（meta-information）。

元数据是关于数据的数据，对于<meta>标签来说，这意味着它可以用来定义页面的字符集、描述、关键词、作者、 viewport设置（影响移动设备上的页面缩放和布局）、刷新页面、版权信息等。

1.2.4、a标签

a标签有跳转和描点两种用法：

1. 使用跳转是打开一个新的页面；

2. 使用锚点则是跳转到当前页面别的地方。

1.3、列表ol和ul

1.3.1、有序列表

默认是列表序号是数字自增，也可以自己定义A和a等等。

1.3.2、无序列表

1.4、布局标签

1.5、多媒体标签

1.5.1、路径

根据资源的类型判断选择何种路径，一般站外资源用绝对路径，站内资源用相对路径。

绝对路径：

相对路径：

1.5.2、img图片标签

height：定义图像的高度；

width：定义图像的宽度。

1.5.3、audio音频标签

支持的音频格式：MP3、WAV、OGG；

src：规定音频的 URL；

controls：显示播放控件，没有这个属性的话就没有播放的按钮。

1.5.4、video

支持的音频格式：MP4, WebM、OGG；

src：规定视频的 URL；

controls：显示播放控件。

1.6、Table表格标签

需求：按照下面的原型图做一个相类似的网页。

1.7、Form表单项

hidden隐藏字段使用场景：

在表单中，为了在用户添加信息时能关联或后续修改特定记录，需提交用户ID，但又不宜让用户直接操作。

此时，采用<input type="hidden">字段，将ID值隐式嵌入表单中，随其他数据一并提交至服务器，确保数据关联性和完整性，过程对用户透明，简化交互同时维护数据管理的高效与安全。

第 2 章

CSS

2.1、CSS介绍

CSS是Cascading Style Sheets的简写，中文意思是层叠样式表，是一种设计网页外观和布局的语言，能够分离HTML内容结构与视觉表现，通过选择器 targeting HTML 元素，添加颜色、字体、布局等样式，实现网页的美化与布局控制。

2.2、CSS样式导入方式

CSS的导入方式就是CSS代码与html代码的结合方式。他们一共有3种结合方式，分别是内嵌样式，内部样式和外部样式。当三者样式冲突时，谁选择的范围小就谁生效。

2.1.1、行内样式

行内样式（Inline Styles）：直接在HTML元素的style属性中定义CSS样式，属性值是CSS属性键值对。

这个内嵌样式是html代码和css代码耦合在一起，不利于后期的维护，也不利于样式的复用，所以这种方式用得少。

2.1.2、内部样式

内部样式表（Internal Stylesheet）：在HTML文档的<head>部分使用<style>标签定义CSS规则。适用于单个页面的特定样式，不适用于多个页面共享样式。

2.1.3、外部样式

外部样式表（External Stylesheet）：通过<link>标签链接外部CSS文件。这是推荐的做法，因为它支持样式重用，易于维护和修改。

2.3、CSS选择器

2.3.1、id选择器

一、id命名规则：
1、不能数字开头；
2、不能使用中划线、下划线之外的符号；
3、不推荐中文；
4、尽量做到见名知意，看到名字就知道意思。

二、唯一性：
1、id命名不可以重复使用；在js中会因为id的命名冲突而导致报错；
2、每个标签只能有一组id。

2.3.2、类选择器

2.3.3、伪类选择器

伪类是CSS中的一种特殊类型，它们不直接对应于文档中的元素，而是表示元素的特定状态或位置，他就像类一样，例如：

标签名:hover{css样式}

hover是鼠标移入的意思，鼠标移动标签里面，文字发生颜色变化，鼠标不在就恢复原来的颜色。

第 3 章

JavaScript

3.1、JavaScript介绍

JavaScript，一种广泛应用于网页开发的动态编程语言，用于实现交互式页面效果和构建复杂网络应用，支持事件驱动、函数式编程及面向对象编程风格。脚本通常被<script>标签包裹，比如事件监听和相应交互逻辑。

3.2、JavaScript用法

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，引入的方式有两种，分别是：内部形式和外部形式。

3.2.1、内部形式

内部形式通过 <script> 标签包裹 JavaScript 代码。

3.2.2、外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。

3.3、声明变量

3.3.1、let

let 声明的变量可以被多次赋值。

3.3.2、const

const 修饰的值叫常量，只能赋值一次。

但是const 并不意味着它引用的内容不可修改，例如：

3.3.3、var

var 声明的变量可以被多次赋值，例如：

3.3.4、let和var的区别

在 JavaScript 中，let 和 var 都是用来声明变量的关键字，但它们在作用域、变量提升和块级作用域等方面有一些重要的区别。

1. 作用域

var在整个函数内都是可见的，let只在声明的代码块内有效。

2. 变量提升

var会被提升到函数或者全局作用域的顶部完成初始化，在声明之前就可以访问变量，let变量声明前没有完成初始化，在变量声明之前访问会报错。

3. 重复声明

var：可以重复声明同一个变量，后面的声明会覆盖前面的声明

let：在同一作用域内不能重复声明同一个变量，否则会引发错误。

3.4、基本数据类型

3.4.1、undefined和null

执行表达式或函数，没有返回结果，出现undefined；

访问数组不存在的元素，访问对象不存在的属性，出现undefined；

定义变量，没有初始化，出现undefined。

二者共同点：

都没有属性、方法；

二者合称 Nullish。

二者区别：

undefined 由 js 产生；

null 由程序员提供。

3.4.2、String字符串

js 字符串三种写法：

需求：拼接 URI 的请求参数

3.4.3、number和bigint

number类型标识的是双精度浮点小数，bigint类型标识整数。

3.4.4、boolean

在 JavaScript中，并不是 boolean 才能用于条件判断，你可以在 if 语句中使用【数字】、【字符串】... 作为判断条件。

3.5、对象数据类型

在JavaScript中，Function，Array，和Object都是属于引用数据类型，都被视为对象，它们共享了作为对象的基本行为，但各自针对特定的用途进行了优化：Function用于执行代码块，Array用于管理有序数据集合，而Object提供了一种灵活的结构来组织和操作数据。

3.6、Function

3.6.1、函数的介绍

函数是执行特定任务的可复用代码块，它们是构建复杂程序的基础，提供了封装、抽象和代码重用的能力。

3.6.2、函数定义和调用

3.6.3、函数例题

使用Javascript请设计一个函数，接收两个参数，a和 b，a作为开始位置，b作为结束位置，计算从a +.. +b 的和。

例如：传递1，3 则表示计算：1+2+3的和。

3.7、Array

3.7.1、Array介绍

JavaScript的Array对象是一个用于存储多个值的集合，这些值可以是任意类型，包括原始类型（如数字、字符串、布尔值）和其他对象。数组中的每个元素都有一个唯一的索引，索引从0开始。

3.7.2、创建Array

3.7.3、Array增加和删除API

3.7.4、join

join(separator)：将数组元素连接成字符串，元素间以separator分隔。

3.8、Array的迭代方法

3.8.1、map()

map()方法创建一个新数组，新数组中的每个元素都是原数组中元素经过调用提供的函数处理后的结果。它不对原数组进行修改。

3.8.2、filter()

filter()方法创建一个新数组，新数组中的元素是通过检查原数组中符合条件的所有元素。条件由提供的函数决定，返回true的元素会被包含在新数组中。

3.8.3、forEach()

forEach()方法对数组中的每个元素执行一次提供的函数。这个方法不会返回新数组，主要用于执行某种操作（副作用），如打印值或修改DOM等。

3.8.4、迭代方法的总结

这三个方法都不会改变原数组，而是通过创建新数组或执行回调函数来达到处理数据的目的。

1. map()用于转换数组中的每个元素，并返回一个新数组。

2. filter()用于筛选数组中的元素，返回一个仅包含符合条件的新数组。

3. forEach()用于对数组中的每个元素执行操作，没有返回值，主要用于遍历执行某些操作。

3.9、Object

3.9.1、Object介绍

JavaScript中的Object是一种数据结构，用于存储键值对（key-value pairs）。几乎所有的JavaScript值（除了原始类型如数字、字符串、布尔值、null和undefined）都是对象，或者可以视为对象。

3.9.2、对象字面量

3.9.3、构造函数

3.9.4、访问属性

3.9.5、修改属性

3.9.6、添加属性

可以直接通过赋值操作给对象添加新的属性，无论使用点表示法还是括号表示法。

3.9.7、删除属性

第 4 章

JavaScript进阶

4.1、JSON对象

4.1.1、JSON作用

在JavaScript中，JSON对象与JSON字符串之间的转换是非常常见的操作，主要通过两个内建函数来完成：JSON.stringify()用于将对象转换为字符串，而JSON.parse()则用于将字符串解析回对象。

4.1.2、JSON对象转为JSON字符串

当需要将JavaScript对象转换为JSON字符串以便于传输或存储时，可以使用JSON.stringify()方法。

4.1.3、JSON字符串转为JSON对象

当接收到一个JSON格式的字符串，并且想要在JavaScript中以对象的形式使用这些数据时，可以使用JSON.parse()方法。

4.2、BOM对象

4.2.1、BOM对象介绍

Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象。

4.2.2、BOM组成

1. Window：浏览器窗口对象；

2. Navigator：浏览器对象；

3. Screen：屏幕对象，获取屏幕的框高信息；

4. History：历史记录对象；

5. Location：地址栏对象，获取地址栏数据。

4.3、浏览器窗口对象

4.3.1、alert()

显示带有一段消息和一个确认按钮的警告框。

4.3.2、confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框。

什么不写就不知道用户是点击确认还是取消。所以可以定义一个变量接收返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false。

4.3.3、setInterval()

setInterval()方法可以在每隔指定的毫秒数重复执行某个函数或表达式。这对于定时更新、动画效果或者持续检查某个条件非常有用。

4.3.4、setTimeout()

setTimeout()方法允许你延迟指定的时间（以毫秒为单位）后执行某个函数或表达式。它只执行一次，而不是周期性执行。

4.4、Location地址栏对象

4.4.1、Location常用API

4.4.2、案例示例

打开当前网页记时3秒后跳转到鹰迅课堂官网。

4.5、DOM对象

4.5.1、DOM对象介绍

DOM：Document Object Model 文档对象模型。就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

在JavaScript中，DOM是连接网页内容与脚本语言的关键桥梁，允许开发者动态地读取、修改、创建或删除HTML元素和属性来改变网页的内容和外观，以及处理事件。

4.5.2、DOM对象介绍

1. 节点（Node）: DOM将HTML文档中的每个部分视为一个节点，包括元素节点（如<p>、<div>）、文本节点（如文本内容）、属性节点（元素的属性如src、class）以及文档本身也是一个节点（Document节点）。

2. 树结构: 整个HTML文档被表示为一个节点树，从顶层的document节点开始，向下分支到各个元素节点、文本节点等。

3. 访问和操作: JavaScript提供了多种方法和属性来遍历这个节点树，如getElementById、getElementsByTagname、querySelector和querySelectorAll等，以及用于修改节点的属性、内容或结构的方法，如innerHTML、appendChild、removeChild等。

4.5.3、HTML页面

4.5.4、DOM查找元素

4.5.5、DOM增加元素

4.5.6、DOM删除元素

4.5.7、DOM修改元素

4.5.8、查找结合修改

4.6、运算符与表达式

4.6.1、算术运算符

用于执行基本的数学运算：

4.6.2、比较运算符

用于比较两个值：

4.6.3、逻辑运算符

用于结合布尔值：

4.6.4、三目条件运算符

基于条件选择两个表达式之一：

4.6.5、赋值运算符

用于给变量赋值，包括复合赋值运算符：

4.7、控制语句

JavaScript中的控制语句用于控制程序的执行流程，包括条件判断、循环迭代等。以下是几种常见的控制语句及其代码示例：

4.7.1、if语句

用于根据条件执行代码块：

4.7.2、if-else语句

在条件不满足时执行另一段代码：

4.7.3、switch语句

用于基于不同的条件执行不同的代码块：

4.7.4、for循环

用于已知迭代次数的情况：

4.7.5、while循环

只要条件为真，就会一直执行循环：

4.7.6、for-in

用于遍历对象的属性：

4.7.7、for-of

用于遍历数组，也可以是其它可迭代对象，如 Map，Set 等：

4.7.8、try-catch

4.8、JavaScript事件

4.8.1、JavaScript事件介绍

JavaScript 事件是用户或浏览器执行的特定交互动作，比如点击按钮、鼠标悬停、页面加载等，这些动作可以触发预先定义好的函数，实现动态网页的交互功能。

事件是发生在 HTML 元素上的事情；

HTML 事件可以是浏览器行为，也可以是用户行为。

如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。

百度就是通过JavaScript事件来监听我们是否输入完成用户名的。

4.8.2、事件语法

1、事件源：是作用于哪里的意思？可以通过CSS的选择器来定位代码块。

2、事件类型：是单击左键还是右键，是鼠标移入还是移出？

3、事件要发生的时候执行什么命令？

是弹出对话框（警告、确认、提示），还是输入？

4.8.3、事件语法案例

需求：做三个按钮，分别是鼠标点击按钮弹窗，鼠标移入弹窗和鼠标移出弹窗。

4.9、JavaScript事件类型

4.9.1、click点击事件

点击事件（click）：当用户点击元素时触发。

4.9.2、鼠标悬停事件

mouseover：当用户鼠标移入时触发。

mouseout：当用户鼠标移出时触发。

4.9.3、键盘事件

当用户按下、释放或持续按下一个键时触发。

4.9.4、表单事件

change：当表单元素（如输入框、选择框等）的值改变并且失去焦点时触发。

input：当表单元素的值发生变化时立即触发，无需失去焦点。

submit：当表单提交时触发，通常用于阻止默认提交行为并执行自定义验证或异步操作。

4.9.5、load页面加载事件

当页面加载完毕时触发。

4.9.6、窗口大小调整事件

当浏览器窗口大小发生变化时触发。

4.9.7、focus元素聚焦

触发时机：当元素获得焦点时触发。通常，这发生在用户通过鼠标点击或使用键盘的Tab键导航到该元素时。

应用场景：可用于高亮显示用户正在交互的元素，比如改变边框颜色或背景色以指示当前焦点位置，或自动填充某些表单项。

示例代码：

4.9.8、blur元素失焦

触发时机：当元素失去焦点时触发，通常是用户通过点击页面上的其他元素或按下Tab键移至下一个可聚焦元素时。

应用场景：常用于表单验证，即在用户离开输入框时立即检查输入是否有效；或者恢复元素的默认样式，移除因聚焦而产生的特殊视觉效果。

第 5 章

ECMAScript

5.1、ES和JS的关系

1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

5.2、解构赋值

ES6中的解构赋值是对传统赋值操作的一种强力增强，它通过一种优雅而直观的方式，允许直接从数组或对象中提取数据并同时为变量赋值。这种特性基于模式匹配原理，极大地提升了代码的简洁度、可读性和易维护性。

5.3、模板字符串

ES6引入的模板字符串是字符串字面量的一种高级形式，采用反引号`包裹。它们不仅能够轻松创建包含换行符的多行文本，而且革新性地支持了变量和表达式的直接嵌入，无需传统的字符串拼接方式。

5.4、声明对象简写

ES6对JavaScript的对象字面量语法进行了简化，当对象的属性名与赋给它的变量名相同时，可以省略冒号和变量名的重复，直接写变量名即可。

5.5、定义方法简写

ES6对JavaScript的对象方法进行了简化，如果方法名与变量所指向的函数同名，可以省略function关键字以及冒号，直接将函数赋值给对象的属性。

5.6、对象扩展运算符

ES6引入拓展运算符（...），用于取出参数对象所有可遍历属性然后拷贝到当前对象。

5.6.1、浅拷贝

浅拷贝：可以用来快速复制一个对象，但这仅是浅拷贝，也就是说，如果原对象的属性是引用类型（如数组或另一个对象），拷贝得到的对象会共享这些引用类型的值。