前端快速入门笔记_前端开发笔记
前言、
本文为前端快速入门自用笔记（学习视频参考B站视频BV1BT4y1W7Aw）
一、HTML（超文本标记语言）
1.1 概述
① HTML通过一系列的‘标签（又称元素）’来定义文本图像等内容。
② 一般而言HTML标签都是尖括号包围的关键字。
③ 标签一般成对出现，包含开始标签和结束标签（也称为双标签），内容位于两个标签之间。
例：
这是一个段落
这是一个标题
④ 除了双标签，同样也存在单标签。
例：
⑤ 单标签用于没有内容的元素，双标签用于有内容的元素。
⑥ 文件结构
1.2 常用文本标签
① 标题标签（h1~h6表示）
一级标题标签
二级标题标签
三级标题标签
四级标题标签
五级标题标签
六级标题标签
② 段落标签和更改文本样式
更改文本样式：字体加粗 , 斜线 , 下划线 , 删除线
③ 比较复杂的标签
（1）有序列表和无序列表
- 无序列表元素 1
- 无序列表元素 2
- 无序列表元素 3
有序列表元素 1 有序列表元素 2 有序列表元素 3 （2）表格
table row
table data
table header
列标题 1 列标题 2 列标题 3 元素 1 元素 2 元素 3 元素 21 元素 22 元素 23 元素 31 元素 32 元素 33
④ 运行结果
1.3 HTML标签属性
① 基本语法
（1）< 开始标签 属性名=\"属性值\" >
（2）每个HTML元素可以具有不同的属性
（3）属性名称不区分大小写，属性值对大小写敏感
② 适用于大多数 HTML 元素的属性
target的各项属性介绍：
③ 具有特殊属性的标签
1.4 块元素和行内元素
① 块元素（block）
（1）块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
（2）可以包含其他块级元素和行内元素。
（3）常见的块级元素包括
，
到
，
到
，
，
，
- ，
， 等。
② 行内元素（inline）
（1）行内元素通常在同一行内呈现，不会独占一行。
（2）它们只占据其内容所需的宽度，而不是整行的宽度。
（3）行内元素不能包含块级元素，但可以包含其他行内元素。
（4）常见的行内元素包括 ，，，，![]()
，
， 等。
③ 使用例
（块级标签）
通常用于创建一个包含其他 HTML 元素的容器块，通常没任何语意，仅用于组织内容（常用于创建页面的布局结构）
（行内元素）
相当于没有元素的 a 标签和 img 标签，主要作用是把一小部分文本给包装起来便于使用（给文本的一部分应用样式或者标记）
1.5 HTML表单
① form 属性：表单中所有元素必须包含在 form 标签内部（最常见的为 input）
input
一个单标签（输入内容的）
type
规定了 input 元素的类型
placeholder
在文本框中显示内容（提示）
value
规定 input 元素的值
二、CSS（层叠样式表）
2.1 概述
① 用于定义网页样式和布局样式的语言
② 通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
③ CSS 与 HTML 的关系：类似于建筑骨架与装修
2.2 CSS 语法
选择器{ 属性1: 属性值1; 属性2: 属性值2;}
① 选择器的声明中可以写无数条属性
② 声明的每一行属性，都需要以英文分号结尾
③ 声明中所有的属性和值都是以键值对这种形式出现的
2.3 导入方式
① 内联样式（Inline Styles）
css 样式可以直接放在 HTML 元素的标签中，因为都有 style 属性，所以可以在其中直接定义样式。
② 内部样式表（Internal Stylesheet）
在 HTML 文档的 head 标签中定义即可
③ 外部样式表（External Stylesheet）
把 css 样式单独放在 css 文件中然后在 head 标签里面使用另一个标签把它链接到我们这个 HTML 文档中。（允许在多个页面上重复使用相同的样式）
④ 三种导入方式的优先级：内联样式 > 内部样式表 > 外部样式表
使用例：
CSS 导入方式 p{ color: blue; font-size: 16px; } h2{ color: green; } 这是一个应用了css样式的文本
这是一个一级标题标签,使用内联样式
这是一个二级标题标签,使用内联样式
这是一个三级标题标签,使用内联样式
h3{ color: yellowgreen;}
2.4 选择器
CSS 选择器 /* 元素选择器 */ h2 { color: aqua; } /* 类选择器 */ .highlight { background-color: yellow; } /* ID 选择器 */ #header { font-size: 35px; } /* 通用选择器 */ * { font-family: \'KaiTi\'; font-weight: bolder; } /* 子元素选择器 */ .father > .son{ color: yellowgreen; } /* 后代选择器 */ .father p { color: brown; font-size: larger; } /* 相邻元素选择器 */ h3 + p{ background-color: red; } /* 伪类选择器 */ #element:hover{ background-color: blueviolet; } /* 选中第一个子元素 :first-child :nth-child() :active */ /* 伪元素选择器 ::after ::before */ 不同类型的 CSS 选择器
这是一个元素选择器示例
这是一个类选择器示例
这是另一个类选择器示例
这是一个ID选择器示例
这是一个子元素选择器示例
这是一个后代选择器示例
这是一个普通的 p 标签
这是一个相邻兄弟选择器示例
这是另一个 p 标签
这是一个伪类选择器示例
2.5 常用属性
① 行内块元素（Inline-block）
（1）水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性
（2）行内块元素可以包含其他行内元素或块级元素
② 使用例
CSS 常用属性 .block { background-color: aqua; width: 150px; height: 100px; } .inline { background-color: brown; width: 200px; height: 200px; } .inline-block { width: 100px; height: 150px; } .div-inline { display: inline; background-color: aquamarine; } .span-inlinee-block { display: inline-block; background-color: blueviolet; width: 300px; } 这是一个 font 复合属性案例
这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本
这是一个块级元素 这是一个行内元素 
display
这是一个转换成行内元素的div 标签 这是一个转换成行内块元素的span 标签
2.6 盒子模型
① 概述
属性
说明
内容（Content）
盒子包含的实际内容，比如文本、图片等
内边距（Padding）
围绕在内容的内部，是内容与边框之间的空间。可以使用 ‘Padding’ 属性来设置
边框（Border）
围绕在内边距的外部，是盒子的边界。可以用 ‘border’ 属性来设置
外边距（Margin）
围绕在边框的外部，是盒子与其他元素之间的空间。可以用 ‘margin’ 属性来设置
② 使用例
CSS 盒子模型 .border-demo { background-color: yellow; width: 300px; height: 200px; border-style: solid; border-width: 10px; border-color: blueviolet; /* border-left: 10px solid brown */ } .demo { background-color: aquamarine; display: inline-block; border: 5px solid yellowgreen; padding: 50px; margin: 40px; } B 站搜索小映一枝 这是一个边框示例
2.7 浮动和定位
① 传统网页布局方式
（1）标准流（普通流、文档流）：网页按照元素的书写顺序依次排列
（2）浮动
（3）定位
（4）‘Flexbox’ 和 ‘Grid’ （自适应布局）
注：‘标准流’ 是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素
② 浮动（元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向）
（1）‘浮动’ 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。
（2）语法：
选择器 { float: left/right/none;}
（3）注：浮动是相对于父元素浮动，只会在父元素的内部移动
③ 浮动的三大特性
（1）脱标：脱离标准流
（2）一行显示，顶部对齐
（3）具备行内块的元素特性
CSS 浮动 .father { background-color: aquamarine; /* height: 150px; */ border: 3px solid brown; /* overflow: hidden; */ } .father::after { content: \"\"; display: table; clear: both; } .left-son { width: 100px; height: 100px; background-color: yellowgreen; float: left; } .right-son { width: 100px; height: 100px; background-color: yellow; float: right; } 左浮动 右浮动 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
④ 定位方式
相对定位
相对于元素在文档流中的正常位置进行定位
绝对定位
相对于最近的已定位祖先元素进行定位，不占据文档流
固定定位
相对于浏览器窗口进行定位，不占据文档流。固定在屏幕上的位置，不随意滚动而移动
定位 .box1 { height: 350px; background-color: aqua; } .box-normal { width: 100px; height: 100px; background-color: purple; } .box-relative { width: 100px; height: 100px; background-color: pink; position: relative; left: 120px; bottom: 40px; } .box2 { height: 350px; background-color: yellow; margin-bottom: 300px; } .box-absolute { width: 100px; height: 100px; background-color: yellowgreen; position: absolute; left: 120px; } .box-fixed { width: 100px; height: 100px; background-color: brown; position: fixed; right: 0; top: 300px; } 相对定位
绝对定位
固定定位
三、JS（JavaScript）
3.1 概述
① 一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性
② 一种客户端脚本语言，JavaScript 可以直接嵌入 HTML，并在浏览器中执行
③ 不同于 HTML 和 CSS，JS 使得网页不再是静态，而是可以通过用户的操作动态来变化
④ 作用
客户端脚本
用于在用户浏览器中执行，实现动态效果和用户交互
网页开发
与 HTML 和 CSS协同工作，使网页更具交互性和动态性
后端开发
使用Node.js，JavaScript 也可以在服务器端运行，实现服务器端应用的开发
3.2 导入方式
① 内联式（在 JS 文件中直接嵌入 HTML 代码）
②外部引入（把 JS 代码保存在单独的外部文件中通过 script 标签的src属性引入）
JS 导入方式 console.log(\'hello, head的标签内联样式\') JavaScript 的导入方式
console.log(\'hello, body的标签内联样式\'); alert(\"你好, 内联样式弹窗\");
console.log(\'hello, 外联样式\');
3.3 变量及数据类型
JavaScript 基础语法 var x; let y = 5; const PI = 3.14 console.log(x, y, PI); let name = \'映枝\'; console.log(name); let empty_value = null; console.log(empty_value);
3.4 控制语句
① 条件语句 （常用结构）
（1）\' if \' 语句：常用于执行一个代码块，当指定条件为真（true）时执行。语法如下：
if(condition){ //如果条件为真，执行这里的代码}
（2）\' else \' 语句：用于在上一个 if 和所有 else if 都为假时执行的代码块。语法如下：
if(condition) { //如果条件为真，执行这里的代码} else { //如果条件为假，执行这里的代码}
（3）\' else if \' 语句：用于在上一个 if 语句条件为假时，检查另一个条件。可以有多个 else if 语句。语法如下：
if(condition1) { //如果条件1为真，执行这里的代码} else if(condition2) { //如果条件2为真，执行这里的代码} else { //如果以上条件都为假，执行这里的代码}
（4）使用例
JavaScript 基础语法 var x; let y = 5; const PI = 3.14 console.log(x, y, PI); let name = \'映枝\'; console.log(name); let empty_value = null; console.log(empty_value); let age = 19; if (age > 18){ console.log(\'你已经成年了\'); } else { console.log(\'未成年\') } let time = 21; if(time < 12) { alert(\'上午好\'); } else if (time < 18) { alert(\'下午好\'); } else { alert(\'晚上好\'); }
② 循环语句
（1）\' for \' 循环：是一种常见的循环结构，用于按照指定的条件重复执行代码块。语法如下：
for(初始化表达式; 循环条件; 迭代器) { // 循环体，执行这里的代码}
（2）\' while \' 循环：会在指定的条件为真时执行代码块。语法如下：
while (循环条件) { // 循环体，执行这里的代码}
（3）break 与 continue (循环关键字)
break
用于跳出循环，结束循环的执行
continue
用于跳出当前循环中的剩余代码，继续下一次循环
3.5 函数和事件
① 函数：是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出
function function_name(参数1, 参数2, 参数3, ...){ //参数可不写，表示不传参 // 函数体，执行这里的代码 return 返回值; // 可选，返回值}
② 作用域
全局作用域
在函数外部声明的变量
局部作用域（函数作用域）
在函数内部声明的变量
JS 函数 function hello() { console.log(\'hello, world!\'); } hello(); function hello_with_return() { return \'hello, world! - 返回值\' } let a = hello_with_return(); console.log(a); console.log(hello_with_return); function hello_with_params(name) { console.log(\'hello, \' + name); } hello_with_params(\'映枝\'); hello_with_params(\'GESITE\'); //作用域 let global_var = \'全局变量\'; function local_var_function() { let local_var = \'局部变量\'; console.log(\'函数内打印全局变量：\' + global_var); console.log(\'函数内打印局部变量：\' + local_var); } local_var_function(); console.log(\'全局打印全局变量：\' + global_var); console.log(\'全局打印局部变量：\' + local_var);
③ 事件
（1）事件种类
onClick
点击事件
onMouseOver
鼠标经过
onMouseOut
鼠标移出
onChange
文本内容改变事件
onSelect
文本框选中
onFocus
光标聚集
onBlur
移开光标
（2）事件绑定
\' HTML \' 属性
\' DOM \' 属性
\' addEventListener \' 方法
事件处理 // 点击事件 function click_event() { alert(\'点击事件触发了\'); } // 聚焦事件 function focus_event() { console.log(\'获取焦点\'); } // 失去焦点事件 function blur_event(params) { console.log(\'失去焦点\'); }
3.6 js DOM
① 概述
（1）当页面被加载时，浏览器会创建页面的文档对象模型，也就是 DOM（Document Object Model）
（2）每个 HTML 或 XML 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示
（3）文档节点是整个文档树的根节点
（4）DOM 为这个文档树提供了一个编程接口，开发者可以使用 JavaScript 来操作这个树状结构
② 节点树
③ DOM 对象常用方法
appendChild()
把新的子节点添加到指定节点
removeChild()
删除子节点
replaceChild()
替换子节点
insertBefore()
在指定的子节点前面插入新的子节点
createAttribute()
创建属性节点
createElement()
创建元素节点
createTextNode()
创建文本节点
getAttribute()
返回指定的属性值
四、 移动端适配和rem
4.1 移动端布局（推荐使用火狐、谷歌或 Edge 浏览器）
① 响应式布局的实现方法
（1）通过 \' rem \'、\' vw/vh \' 等单位，实现在不同设备上显示相同比例进而实现适配
（小米商城）
（2）响应式布局，通过媒体查询 \' @media \' 实现一套 HTML 配合多套 CSS 实现搭配
② Viewport（ \'视区\' 或 \'视口\' ）
（1） 指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果
（2）解析：
width=device-width
将视口的宽度设置为设备的宽度。这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局。
initial-scale=1.0
设置初始的缩放级别为1.0。这也有助于确保页面在加载时以原始大小显示，而不是被缩小或放大
minimum-scale=1.0
最小缩放比例为1
maximum-scale=1.0
最大缩放比例为1
user-scalable=no
不允许用户缩放
4.2 rem（在响应式网页和移动端布局时用 rem 而非 px）
① \' rem \' 是一个倍数单位，它是基于 html 标签中的 \' font-size \' 属性值的倍数
② 只要我们在不同的设备上设置一个合适的初始值，当设备发生变化 \' font-size \' 就会自动等比适配大小，从而在不同的设备上表现统一
五、 总结
至此前端开发入门已全部结束，进阶拓展可看博主的微信小程序开发笔记。
（后续博主应该会继续学习 Vue.js 以灵活运用前端 ）
感谢看到这里的你，有缘再会。
- ，
- ，
， 等。
② 行内元素（inline）
（1）行内元素通常在同一行内呈现，不会独占一行。
（2）它们只占据其内容所需的宽度，而不是整行的宽度。
（3）行内元素不能包含块级元素，但可以包含其他行内元素。
（4）常见的行内元素包括 ，，，，
，
， 等。③ 使用例
（块级标签）通常用于创建一个包含其他 HTML 元素的容器块，通常没任何语意，仅用于组织内容（常用于创建页面的布局结构） （行内元素） 相当于没有元素的 a 标签和 img 标签，主要作用是把一小部分文本给包装起来便于使用（给文本的一部分应用样式或者标记） 1.5 HTML表单
① form 属性：表单中所有元素必须包含在 form 标签内部（最常见的为 input）
input 一个单标签（输入内容的） type 规定了 input 元素的类型 placeholder 在文本框中显示内容（提示） value 规定 input 元素的值 二、CSS（层叠样式表）
2.1 概述
① 用于定义网页样式和布局样式的语言
② 通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
③ CSS 与 HTML 的关系：类似于建筑骨架与装修
2.2 CSS 语法
选择器{ 属性1: 属性值1; 属性2: 属性值2;}① 选择器的声明中可以写无数条属性
② 声明的每一行属性，都需要以英文分号结尾
③ 声明中所有的属性和值都是以键值对这种形式出现的
2.3 导入方式
① 内联样式（Inline Styles）
css 样式可以直接放在 HTML 元素的标签中，因为都有 style 属性，所以可以在其中直接定义样式。
② 内部样式表（Internal Stylesheet）
在 HTML 文档的 head 标签中定义即可
③ 外部样式表（External Stylesheet）
把 css 样式单独放在 css 文件中然后在 head 标签里面使用另一个标签把它链接到我们这个 HTML 文档中。（允许在多个页面上重复使用相同的样式）
④ 三种导入方式的优先级：内联样式 > 内部样式表 > 外部样式表
使用例：
CSS 导入方式 p{ color: blue; font-size: 16px; } h2{ color: green; }这是一个应用了css样式的文本
这是一个一级标题标签,使用内联样式
这是一个二级标题标签,使用内联样式
这是一个三级标题标签,使用内联样式
h3{ color: yellowgreen;}2.4 选择器
CSS 选择器 /* 元素选择器 */ h2 { color: aqua; } /* 类选择器 */ .highlight { background-color: yellow; } /* ID 选择器 */ #header { font-size: 35px; } /* 通用选择器 */ * { font-family: \'KaiTi\'; font-weight: bolder; } /* 子元素选择器 */ .father > .son{ color: yellowgreen; } /* 后代选择器 */ .father p { color: brown; font-size: larger; } /* 相邻元素选择器 */ h3 + p{ background-color: red; } /* 伪类选择器 */ #element:hover{ background-color: blueviolet; } /* 选中第一个子元素 :first-child :nth-child() :active */ /* 伪元素选择器 ::after ::before */不同类型的 CSS 选择器
这是一个元素选择器示例
这是一个类选择器示例
这是另一个类选择器示例
这是一个ID选择器示例
这是一个子元素选择器示例
这是一个后代选择器示例
这是一个普通的 p 标签
这是一个相邻兄弟选择器示例
这是另一个 p 标签
这是一个伪类选择器示例
2.5 常用属性
① 行内块元素（Inline-block）
（1）水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性
（2）行内块元素可以包含其他行内元素或块级元素
② 使用例
CSS 常用属性 .block { background-color: aqua; width: 150px; height: 100px; } .inline { background-color: brown; width: 200px; height: 200px; } .inline-block { width: 100px; height: 150px; } .div-inline { display: inline; background-color: aquamarine; } .span-inlinee-block { display: inline-block; background-color: blueviolet; width: 300px; }这是一个 font 复合属性案例
这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本
这是一个块级元素这是一个行内元素 display
这是一个转换成行内元素的div 标签这是一个转换成行内块元素的span 标签2.6 盒子模型
① 概述
属性 说明 内容（Content） 盒子包含的实际内容，比如文本、图片等 内边距（Padding） 围绕在内容的内部，是内容与边框之间的空间。可以使用 ‘Padding’ 属性来设置 边框（Border） 围绕在内边距的外部，是盒子的边界。可以用 ‘border’ 属性来设置 外边距（Margin） 围绕在边框的外部，是盒子与其他元素之间的空间。可以用 ‘margin’ 属性来设置 ② 使用例
CSS 盒子模型 .border-demo { background-color: yellow; width: 300px; height: 200px; border-style: solid; border-width: 10px; border-color: blueviolet; /* border-left: 10px solid brown */ } .demo { background-color: aquamarine; display: inline-block; border: 5px solid yellowgreen; padding: 50px; margin: 40px; }B 站搜索小映一枝这是一个边框示例2.7 浮动和定位
① 传统网页布局方式
（1）标准流（普通流、文档流）：网页按照元素的书写顺序依次排列
（2）浮动
（3）定位
（4）‘Flexbox’ 和 ‘Grid’ （自适应布局）
注：‘标准流’ 是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素
② 浮动（元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向）
（1）‘浮动’ 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。
（2）语法：
选择器 { float: left/right/none;}（3）注：浮动是相对于父元素浮动，只会在父元素的内部移动
③ 浮动的三大特性
（1）脱标：脱离标准流
（2）一行显示，顶部对齐
（3）具备行内块的元素特性
CSS 浮动 .father { background-color: aquamarine; /* height: 150px; */ border: 3px solid brown; /* overflow: hidden; */ } .father::after { content: \"\"; display: table; clear: both; } .left-son { width: 100px; height: 100px; background-color: yellowgreen; float: left; } .right-son { width: 100px; height: 100px; background-color: yellow; float: right; }左浮动右浮动这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
④ 定位方式
相对定位 相对于元素在文档流中的正常位置进行定位 绝对定位 相对于最近的已定位祖先元素进行定位，不占据文档流 固定定位 相对于浏览器窗口进行定位，不占据文档流。固定在屏幕上的位置，不随意滚动而移动 定位 .box1 { height: 350px; background-color: aqua; } .box-normal { width: 100px; height: 100px; background-color: purple; } .box-relative { width: 100px; height: 100px; background-color: pink; position: relative; left: 120px; bottom: 40px; } .box2 { height: 350px; background-color: yellow; margin-bottom: 300px; } .box-absolute { width: 100px; height: 100px; background-color: yellowgreen; position: absolute; left: 120px; } .box-fixed { width: 100px; height: 100px; background-color: brown; position: fixed; right: 0; top: 300px; }相对定位
绝对定位
固定定位
三、JS（JavaScript）
3.1 概述
① 一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性
② 一种客户端脚本语言，JavaScript 可以直接嵌入 HTML，并在浏览器中执行
③ 不同于 HTML 和 CSS，JS 使得网页不再是静态，而是可以通过用户的操作动态来变化
④ 作用
客户端脚本 用于在用户浏览器中执行，实现动态效果和用户交互 网页开发 与 HTML 和 CSS协同工作，使网页更具交互性和动态性 后端开发 使用Node.js，JavaScript 也可以在服务器端运行，实现服务器端应用的开发 3.2 导入方式
① 内联式（在 JS 文件中直接嵌入 HTML 代码）
②外部引入（把 JS 代码保存在单独的外部文件中通过 script 标签的src属性引入）
JS 导入方式 console.log(\'hello, head的标签内联样式\')JavaScript 的导入方式
console.log(\'hello, body的标签内联样式\'); alert(\"你好, 内联样式弹窗\");console.log(\'hello, 外联样式\');3.3 变量及数据类型
JavaScript 基础语法 var x; let y = 5; const PI = 3.14 console.log(x, y, PI); let name = \'映枝\'; console.log(name); let empty_value = null; console.log(empty_value);3.4 控制语句
① 条件语句 （常用结构）
（1）\' if \' 语句：常用于执行一个代码块，当指定条件为真（true）时执行。语法如下：
if(condition){ //如果条件为真，执行这里的代码}（2）\' else \' 语句：用于在上一个 if 和所有 else if 都为假时执行的代码块。语法如下：
if(condition) { //如果条件为真，执行这里的代码} else { //如果条件为假，执行这里的代码}（3）\' else if \' 语句：用于在上一个 if 语句条件为假时，检查另一个条件。可以有多个 else if 语句。语法如下：
if(condition1) { //如果条件1为真，执行这里的代码} else if(condition2) { //如果条件2为真，执行这里的代码} else { //如果以上条件都为假，执行这里的代码}（4）使用例
JavaScript 基础语法 var x; let y = 5; const PI = 3.14 console.log(x, y, PI); let name = \'映枝\'; console.log(name); let empty_value = null; console.log(empty_value); let age = 19; if (age > 18){ console.log(\'你已经成年了\'); } else { console.log(\'未成年\') } let time = 21; if(time < 12) { alert(\'上午好\'); } else if (time < 18) { alert(\'下午好\'); } else { alert(\'晚上好\'); }② 循环语句
（1）\' for \' 循环：是一种常见的循环结构，用于按照指定的条件重复执行代码块。语法如下：
for(初始化表达式; 循环条件; 迭代器) { // 循环体，执行这里的代码}（2）\' while \' 循环：会在指定的条件为真时执行代码块。语法如下：
while (循环条件) { // 循环体，执行这里的代码}（3）break 与 continue (循环关键字)
break 用于跳出循环，结束循环的执行 continue 用于跳出当前循环中的剩余代码，继续下一次循环 3.5 函数和事件
① 函数：是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出
function function_name(参数1, 参数2, 参数3, ...){ //参数可不写，表示不传参 // 函数体，执行这里的代码 return 返回值; // 可选，返回值}② 作用域
全局作用域 在函数外部声明的变量 局部作用域（函数作用域） 在函数内部声明的变量 JS 函数 function hello() { console.log(\'hello, world!\'); } hello(); function hello_with_return() { return \'hello, world! - 返回值\' } let a = hello_with_return(); console.log(a); console.log(hello_with_return); function hello_with_params(name) { console.log(\'hello, \' + name); } hello_with_params(\'映枝\'); hello_with_params(\'GESITE\'); //作用域 let global_var = \'全局变量\'; function local_var_function() { let local_var = \'局部变量\'; console.log(\'函数内打印全局变量：\' + global_var); console.log(\'函数内打印局部变量：\' + local_var); } local_var_function(); console.log(\'全局打印全局变量：\' + global_var); console.log(\'全局打印局部变量：\' + local_var);③ 事件
（1）事件种类
onClick 点击事件 onMouseOver 鼠标经过 onMouseOut 鼠标移出 onChange 文本内容改变事件 onSelect 文本框选中 onFocus 光标聚集 onBlur 移开光标 （2）事件绑定
\' HTML \' 属性 \' DOM \' 属性 \' addEventListener \' 方法 事件处理 // 点击事件 function click_event() { alert(\'点击事件触发了\'); } // 聚焦事件 function focus_event() { console.log(\'获取焦点\'); } // 失去焦点事件 function blur_event(params) { console.log(\'失去焦点\'); }3.6 js DOM
① 概述
（1）当页面被加载时，浏览器会创建页面的文档对象模型，也就是 DOM（Document Object Model）
（2）每个 HTML 或 XML 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示
（3）文档节点是整个文档树的根节点
（4）DOM 为这个文档树提供了一个编程接口，开发者可以使用 JavaScript 来操作这个树状结构
② 节点树
③ DOM 对象常用方法
appendChild() 把新的子节点添加到指定节点 removeChild() 删除子节点 replaceChild() 替换子节点 insertBefore() 在指定的子节点前面插入新的子节点 createAttribute() 创建属性节点 createElement() 创建元素节点 createTextNode() 创建文本节点 getAttribute() 返回指定的属性值 四、 移动端适配和rem
4.1 移动端布局（推荐使用火狐、谷歌或 Edge 浏览器）
① 响应式布局的实现方法
（1）通过 \' rem \'、\' vw/vh \' 等单位，实现在不同设备上显示相同比例进而实现适配
（小米商城）
（2）响应式布局，通过媒体查询 \' @media \' 实现一套 HTML 配合多套 CSS 实现搭配
② Viewport（ \'视区\' 或 \'视口\' ）
（1） 指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果
（2）解析：
width=device-width 将视口的宽度设置为设备的宽度。这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局。 initial-scale=1.0 设置初始的缩放级别为1.0。这也有助于确保页面在加载时以原始大小显示，而不是被缩小或放大 minimum-scale=1.0 最小缩放比例为1 maximum-scale=1.0 最大缩放比例为1 user-scalable=no 不允许用户缩放 4.2 rem（在响应式网页和移动端布局时用 rem 而非 px）
① \' rem \' 是一个倍数单位，它是基于 html 标签中的 \' font-size \' 属性值的倍数
② 只要我们在不同的设备上设置一个合适的初始值，当设备发生变化 \' font-size \' 就会自动等比适配大小，从而在不同的设备上表现统一
五、 总结
至此前端开发入门已全部结束，进阶拓展可看博主的微信小程序开发笔记。
（后续博主应该会继续学习 Vue.js 以灵活运用前端 ）
感谢看到这里的你，有缘再会。
- ，
