前端网页开发学习（HTML+CSS+JS）有这一篇就够！（一）：https://developer.aliyun.com/article/1555662
▐ 定位
position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）
➱ position: static; （默认）
HTML元素默认情况下的定位方式为 static（静态），静态定位的元素不受 top、bottom、left 和 right 属性的影响，不会以任何特殊方式定位，它始终根据页面的正常流进行定位。
➱ 固定定位 position: fixed;
固定定位的元素是相对于视口定位的，即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
➱ 相对定位 position: relative; (相对定位和绝对定位是我们常用的 )
元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
➱ 绝对定位 position: absolute;
元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed），如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
JavaScript教程
▐ 概述
JavaScript简称JS，是为网页添加各式各样的动态功能的一种前端脚本语言，也就是网页的行为。
JS是前端脚本语言，Java是后端高级语言，不要因名字相似而混为一谈，二者并无联系
▐ 基础语法
JS脚本写在哪?
JavaScript的脚本写在一个<script></script>标签中，如果在代码量很多的情况下可以写在外部js文件中，再在html文件中导入外部js文件即可.
一旦标签导入其他的js文件，<script>标签内部就不能写脚本了 !
注释
JavaScript中的注释分为两种,分别是单行注释 // 和多行注释 /* */
<script> // 单行注释 /* 多行注释 */ </script>
单行注释 // 快捷键： Ctrl + /
多行注释 /* */ 快捷键： Ctrl + Shift + /
变量如何声明?
• JavaScript属于弱类型语言，即变量是没有类型的，给它什么类型的值就是什么类型.
• 我们通过关键字var声明一个变量.
var a = 10; var b = "5"; var c = true;
数据类型
• 数值型 number：包含整数和浮点数
• 字符串型 string：单引号或双引号都可以表示字符串
• 布尔型 boolean：返回 true / false
• undefined类型 ：声明了变量但没有赋值
var g; //此时g就属于undefined类型 alert(typeof(g)); //type()函数用于获取数据类型
• Object类型：编译器本身(自带)为我们提供的一些类，如日期类Date
var date = new Date(); alert(date.getFullYear); //获取年 alter(date.getMonth() + 1); //获取月 alert(date.getDate); //获取日
运算符
JavaScript中的运算符和Java中的运算符几乎没有差别，但也有特殊所在！不过大致也可分为：算术运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符。在此我主要给大家详细介绍下不同之处和特殊所在。
算数运算符：
特殊点：
' + ' 不仅表示加法运算，也表示字符串的连接.
var a = 10; var b = 5; var c = "5"; var d = "d"; alert(a+b);// 15 (加法运算) alert(a+c);// 105 (连接作用) alert(a+d);// 10d (连接作用)
' - ' 减法运算中：字符串 - 数值 = 数值.
JavaScript中会把表达式中数字字符尝试类型转换，" 5 " — 5
但要注意这里的字符串必须是数字，若不是数字无法类型转换进行运算，返回NaN(not a number)
var a = 10; var b = 5; var c = "5"; var d = "d"; alert(a-b);// 5 (减法运算) alert(a-c);// 5 (减法运算,将数字字符转化为数值) alert(a-d);// NaN (Not a Number)
NaN并不是报错，它只是为我们返回了NaN结果，并不是程序错误！
比较运算符：
特殊点：
' === ' 表示全等，在此之前我们很少见到三个等号，它比较的是值和类型，而 ' ==' 只比较值.
var a = 5; var b = 5; var c = "5"; alert(a==c);// true (只比较值) alert(a===c);// flase (比较值和类型)
赋值运算符：
逻辑运算符：
条件运算符：
➩ 此三者并无无特殊点
流程控制
JavaScript中的流程控制语法和Java中的相同，例如选择结构中的 if / if else，循序结构中的for循环、while循环...这些基本的语法在这里我就不详细介绍了，用法和Java相同 !
▐ 函数
函数的声明和调用：在JavaScript中我们使用关键字function 来声明一个函数。
//声明函数 function test() { lert("你好"); } //调用函数 test();
常用的全局函数：
• alert 弹出框
• typeof 返回参数数据类型
• eval 将某个字符串当做js脚本运行
• parseInt 将参数转为整数
• parseFloat 将参数转为浮点数
▐ 事件
事件指的是在网页上发生的交互动作或状态变化，例如用户点击按钮、输入文本、滚动页面等。通过监听这些事件，可以在特定的情况下执行相应的操作或函数，实现交互和动态效果。
Javascript中的常用事件有：
• onclick ： 鼠标单击事件
• dblclick ： 鼠标双击事件
• onblur ： 标签失去焦点
• onfocus ： 标签获得焦点
• onmouseover ： 鼠标移到某标签上
• onmouseout ： 鼠标从某标签上移开
• onkeydown ： 用户按下键盘按键
• onload ： 网页加载完毕后触发相应的的事件处理程序
• onchange ： 当前标签失去焦点并且标签的内容发生改变时触发事件处理程序
▐ 计时
通过JS我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这种也称之为计时事件.
setTimeout 表示延迟 "指定时间" 后调用 "指定函数" ，且只调用一次.
clearTimeout 关闭setTimeout定时器
setInterval 表示每隔 "指定时间" 就调用一次 "指定函数" ，只要不关闭定时器就会一直调用.
clearInterval 关闭setInterval定时器
▐ HTML DOM
JS HTML DOM是我们学习JavaScript过程中非常重要的内容，它可以解决：如何在JavaScript中操作网页中的标签? 这个问题。
Dom是document Object Model (文档对象模型) 的缩写，JavaScript认为网页中的每个标签都是一个对象，在js中把这一类标签对象称为html_dom对象，既然我们要操作网页中的标签，那么第一步肯定是先拿到标签对象，那么第一个问题来了：
如何在js中获得网页中的标签对象？
在网页加载完毕后，在js中生成一个document对象(表示整个html文档)里面提供了一个方法： getElementById()
//通过标签id获得网页中的标签对象 var obj1 = document.getElementById("txt1"); var obj2 = document.getElementById("txt2");
拿到网页中的标签对象后就可以通过dom对象操作标签的属性了(包括css属性).
<style> #box{ width: 300px; height: 300px; } </style> <script> function test(){ var obj = document.getElementById("box"); obj.style.backgroundColor="blue"; } </script> </head> <body> <input type="button" onclick="test()" value="蓝色"/> <div id="box"></div> </body>
除此之外我们还可以操作标签体中的内容：
innerText 把标签内部值拿到,获得标签体中的文本内容
innerHtml 获得标签内的所有内容(包括子标签)
html css js三者之间的关系
HTML、CSS和JS是构建网页不可或缺的技术组成部分，它们各自扮演不同的角色：
HTML（超文本标记语言）：它是网页内容的骨架，负责创建页面的基本结构和内容布局。HTML元素是构成网页的最基本的块状单位，如段落、标题、图像等。
CSS（层叠样式表）：它负责为HTML元素提供样式描述，包括颜色、字体大小、边距、布局等。CSS使得网页在不同设备和屏幕尺寸下都能保持一致性和美观性。
JS（JavaScript）：它是一种动态脚本语言，允许开发者向用户提供交互式体验，如动画、滑动效果、表单验证等。JavaScript还可以改变和更新网页的内容和样式，使网页具有响应式行为。
因此HTML、CSS、JavaScript 也被称为前端三剑客，是学习前端网页开发的必备的基础技能。
结语：
🎈到这里又要和大家说再见了，本篇文章总结了前端网页开发的的三门基础语言，即HTML、CSS和Javascript，供新手学习或期末复习🎈希望我的分享能给您带来帮助，创作不易也欢迎大家三连支持，你们的点赞就是博主更新最大的动力🎈如有不同意见，欢迎评论区积极讨论交流，让我们一起学习进步！有相关问题也可以私信博主，评论区和私信都会认真查看的，我们下次再见🎈 本人微信：g2279605572
海漫浩浩,我亦苦作舟!大家一起学习,一起进步!
