当前位置：首页 > news >正文

前端系列-1 HTML+JS+CSS基础

news 文章来源：https://blog.csdn.net/Sheng_Q/article/details/133411677 2025/1/15 23:29:44

背景：

前端系列会收集碎片化的前端知识点，作为自己工作和学习时的字典，欢迎读者收藏和使用。
笔者是后端开发😶前端涉猎不深，因此文章重在广度和实用，对原理和性能不会过多深究。

1.html

1.1 html5网页结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题</title><link rel="icon"  href="data:image/png;base64,i..." type="image/x-icon"><link rel="shortcut icon" href="data:image/png;base64,...=" type="image/x-icon"></head><body></body>
</html>

1.2 html标签中包括head标签和body标签：

（1）head标签中可以定义字符编码格式，以及网页的标题和图标;
（2）页面显示的内容需要在body中定义。

1.3 在html中引入js：

(1) 内部插入的代码格式如下：

<script type="text/javascript">// JavaScript代码
</script>

(2) 引入js外部文件

<script type="text/javascript" src="文件路径">

一般在body标签底部引入，以保证所有的DOM元素都被加载后再加载JS文件;
注意加载多个JS文件时，如果有依赖关系，需要保证被依赖的文件先被引入。因此会先引入jquery等三方库，再引入业务js文件。

1.4 在html中引入样式：

(1) 内联样式

<h1 style="margin-left: 40px;">内联样式</h1>

直接在DOM元素中使用style属性进行样式设置，优先级最高；不利于维护。

(2) 内嵌样式

<head><title>内嵌样式</title><style>h1 {margin-left: 40px;}</style>
</head>

在head中通过style标签引入。

(3) 外部样式表

<link rel="stylesheet" href="./css/index.css">

通过link标签的href引入。

(4) 导入样式表

<link rel="stylesheet" href="./css/index.css">

在index.css文件中：

@import "1.css";
@import "2.css";
@import "3.css";
@import "4.css";

注意：在一个html文件中引入的多个样式表，如果选择器重复了，后者会覆盖前者。

1.5 常见元素:块和内联

DOM元素整体上可以分为块元素和内联元素两类。块元素可用于布局，内联元素可用于显示。二者主要区别在于：
(1) 块元素可以包含块元素、内联元素、文本；内联元素只能包含内联元素和文本；
(2) 块与其他元素之间有换行；内联元素不会换行；
(3) 块元素可以设置高度(height)和宽度(width), 内联元素不能设置;
常见的块级元素有： div, p/h, table/form, ul/ol, hr
常见的内联元素有： span, a, img, input/textarea, br

1.6 Dom原生语法

jquery出现后，基本不会再用DOM的原生语句。

(1)获取DOM对象
#返回拥有指定id的对象
document.getElementById('id属性值');
#返回拥有指定类型的对象集合
document.getElementsByClassName('class属性值');
#返回拥有指定标签名的对象集合
document.getElementsByTagName('标签名');
...

2.javascript

javascript作为脚本语言，语法与Java存在相似之处。如：注释使用双斜线(//), 使用分号(;)作为表达式的结尾…

2.1 常用类型

常用类型有：String，Number，Boolean, 数组，对象类型.

2.1.1 String

字符串可以使用单引号或者双引号包裹，可以使用加号(+)对字符串进行拼接。

创建方式如下：

var str1 = "str1";
var str2 = 'str1';
var str3 = new String("str1");
var str4 = "s"+"tr"+new String("4");

常用API:

// 判断string字符串是否以str开头, 返回true或false
string.startsWith(str)// 判断string字符串是否以str开头，返回true或false
string.endsWith(str)// 返回字符串string中第start+1位开始的长度为len字符串内容。
string.substr(start,len)// 替换字符串内容方法:将str1替换为str2
string.replace(str1, str2)

其他与java用法基本一致。

2.1.2 Number

可以表示整数，也可以表示小数；数值太大或者太小可以用科学计数法表示。

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

Number类型中有个比较特殊对象NAN，表示非数值。

typeof NaN; // "number"

NaN对象不等于任何对象，包括自己：

NaN == NaN //false

可以使用js内置的函数isNaN()来判断：

var nan = NaN;
isNaN(nan); // true
Number.isNaN(NaN); // true

当字符串不能转换为数字时，返回NaN表示解析失败；undefined和NaN的算术操作会返回NaN; 数学函数的无效参数如负数的平方根、负数的对数时会返回NaN；在js中存在无限大, 无限大乘以0会返回NaN：

var result = 1/0; //Infinity
var resultN = -1/0; //-Infinity
isNaN(result * 0); // true

2.1.3 Boolean

只有两个值：true和false; 注意大小写敏感。

2.1.4 数组

js中的数组中不要求元素类型相同，但尽量保持元素类型一致以方便维护。

创建方式如下：

var test_arr = ["a", 1, null];
var cars=new Array("ET7","ES8","EC6");

常用API:

//1.使用下标进行取值和赋值
cars[0]="Saab";
//2.添加、删除最后一个元素
list.push("banana");
list.pop();
//3.添加、删除第一个元素
scores.shift();
scores.unshift(76);

其他与java用法基本一致。

2.1.5 对象类型

var car = {name:"EC6", a:4.5, color:"blue"
};
// 有以下两种方式获取对象
car.name;
car["name"];

2.1.6 typeof 运算符

可以返回对象的大致类型，结果是字符串

typeof new String("str1"); // "object"typeof "str2"; // "string"typeof 123e5; // "number"var b3 = true; 
typeof b3; // "boolean"var arr_4 = ["a", 1, null];
typeof arr_4; // "object"var object5 = {name:"EC6", a:4.5, color:"blue"
};
typeof object5; // "object"

2.2 空对象

js中存在两个空对象，null和undefined，有以下区别：
(1) null是Object类型；undefined是Undefined

typeof null; // "object"
typeof undefined // "undefined"

(2) undefined表示缺少了预期的值或参数；使用var声明变量，未赋值时为undefined, 当函数为传参时为undefined，未定义函数返回值时-返回undefined；

(3) null通常用于显式地表示空或无效的对象、数组或变量; 清空一个变量或者释放一个对象的引用时，可以将其设置为null。

2.3 变量和作用域

在ES5及之前的js版本中使用var声明变量，在ES6中引入了let和const; 常见浏览器对这两个关键字兼容，可直接使用。

2.3.1 var关键字

函数级作用域：变量的作用域限制在声明的函数内部，从函数外部访问会报错。
变量提升：变量声明会被提升到作用域的顶部。
可以重复声明：后面的声明会覆盖前面。

2.3.2 let关键字

块级作用域：变量的作用域为所在代码块，即从代码块外部访问会报错。
不可重复声明：同一个作用域内，不可以多次使用let对同一个变量反复声明。
没有变量提升：let声明的变量在声明语句之后才能使用。

2.3.3 const关键字

常量：被赋值后不可修改。
块级作用域：与let相同，块级作用域。
不可重复声明：同一个作用域内，多次使用const声明同一个变量会报错。

let和const的特性和限制可以将var中可能引入发热误操作显示地提前到开发阶段，从而避免bug的产生；因此开发过程中，建议使用let和const替代var。

2.4 字符串和JSON常见操作

//1.JSON.stringify()将对象转换为JSON格式字符串
var obj = {name:"seong", age: 28}
var objStr = JSON.stringify(obj);
console.log(objStr);
//2.JSON.parse()将JSON格式字符串转为对象
var obj2 = JSON.parse(objStr)

2.5 if 和 switch-case;

if (条件表达式 1) {// 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {// 条件表达式 2 为真时执行的代码
} else if (条件表达式N) {// 条件表达式 N 为真时执行的代码
} else {// 所有条件表达式都为假时要执行的代码
}

if-else语法与Java基本相同, 需要注意条件表达式为变量时，零值转为false,非零值转为true;

let scoreLevel = "A";
switch(scoreLevel){case "A"://...break;case "B"://...break;default://...
}

switch-case语法与Java相同, 穿透和break用法也相同。

2.6 try-catch异常处理;

try {//...
} catch(err) {//...console.writeln( err.name+ err.message);
} finally {//...
}

异常对象中有name和message信息。

2.7 for循环和while循环

for (var i = 1; i <= 5; i++) {if (i == 3) {break;}console.log('提示信息：' + i);
}continue、breakvar num = 1;
while (num <= 10) {console.log(num + '\n');num++; 
}

for和while用法同Java, continue和break用法也相同。

2.8 与或非

与(&&) ，或(||)，非(!)，与Java完全相同

2.9 是否相等;

== 仅判断值是否相等；=== 判断值和类型是否相等。

var str1 = "1";
var int1 = 1;
console.log(str1 == int1);  // true
console.log(str1 === int1); // false

3.css

3.1 盒子模型

HTML中每个元素都是盒子模型，每个盒子模型包括4个部分：content、padding、border、margin，如下图所示：
在这里插入图片描述

3.1.1 内容content

content 作为元素的内容部分，常见样式如下：
【1】width和height
块级元素和内联元素有所区别：内联元素不可设置，宽/高属性由其内容(文本、图片大小)决定；块级元素可设置宽/高，默认宽度为父元素的100%，高度默认由内容(元素内容或者子元素高度之和)决定。

<div style="width:200px;height:100px;background-color:orange"></div>

显示如下：
在这里插入图片描述
说明：
在设置width和height时可使用倍数(em),像素(px),百分比(%)三种类型。

【2】display
none：隐藏元素且不占用任何空间；
block：设置为块级元素，允许设置width和height；
inline-block：设置为内联元素，不会独占一行，同时可以设置宽度和高度。

【3】background-color和background-image
background-color用于设置背景色，background-image用于设置背景图片；

/* 将div的背景颜色设置为红色 */  
div {  background-color: #ff0000; 
}div {  background-image: url('background.jpg');
}

说明：当同时设置背景色和背景图片时，仅背景图片生效。
其中：
CSS样式的颜色属性可以使用
（1）关键字，如"red"，“blue”；
（2）十六进制值：如"#ff0000"，"#00ff00"等；
（3）RGB，如rgb(255,0,0)，第一个数字表示红色，第二个数字表示绿色，第三个数字表示蓝色。

【4】color, font-size, text-align,overflow
color用于设置文本颜色；font-size用于设置本文大小；

text-align用于设置文本的水平对齐方式，常见取值有：
（1）left：文本内容将相对于元素的左边界对齐。
（2）right：文本内容将相对于元素的右边界对齐。
（3）center：文本内容将居中对齐。
（4）justify：文本内容将被对齐到左右两端，并在每行结束时调整单词间距，使其占据整个行宽。

overflow表示当内容超过盒子内容区指定的width和height时的显示方式，常见取值有：
（1）hidden:隐藏
（2）visible正常显示
（3）scroll显示滚动条；

3.1.2 内边距padding

内边距是内容区和边框之间的空间,可通过padding对内边距进行设置：

div {  padding: 10px;  
}

此时，padding作用于上下左右四侧，可通过下面的方式分别进行设置：

div {  padding-top: 1px;  padding-right: 10px;  padding-bottom: 1px;  padding-left: 3px;  
}

说明：设置盒子背景色属性时，背景色会延伸到填充区域。
注意：内联元素可以设置水平方向的内边距，不可设置垂直方向的内边距。

3.1.3 边框border

边框是环绕内容区和填充的边界，可以设置的属性有border-style、border-width和border-color ；
【1】border-style
边框样式，常见有：solid(实线), 虚线(dashed), 点线(dotted), 双线(double)

div {  border-style: solid;  /* 设置div的边框样式为实线 */  
}

【2】border-width
边框宽度，可通过px设置；

div {  border-width: 2px;  /* 设置div的边框宽度为2像素 */  
}

【3】border-color
用于设置边框颜色，默认无颜色

div {  border-color: #ff0000;  /* 设置div的边框颜色为红色 */  
}

说明：这三个属性可以一起使用，顺序无关紧要，如下所示：

div {  border: solid 2px #FF0000;
}

3.1.4 外边距margin

外边距是边框之外的空间,可通过margin对内边距进行设置：

div {  margin: 10px;  
}

此时，margin作用于上下左右四侧，可通过如下的方式分别进行设置：

div {  margin-top: 1px;  margin-right: 10px;  margin-bottom: 1px;  margin-left: 3px;  
}

注意：内联元素可以设置水平方向的外边距，不可设置垂直方向的外边距。
说明：多个元素之间的外边距，不是取和，而是取并集。

3.2 定位与浮动

【1】position
css使用position确定元素的定位方式，有以下几种：
（1）static
默认定位方式，即文档流。

<head><style>#node-1 {width: 500px;height: 100px;background-color: red;}#node-2 {width: 400px;height: 200px;background-color: orange;}#node-3 {width: 300px;height: 300px;background-color: yellow;}</style>
</head><body><div id="node-1"></div><div id="node-2"></div><div id="node-3"></div>
</body>

文档流显示如下：
在这里插入图片描述
分析：node-1(红色)、 node-2(橙色)、 node-3(黄色)分别各占一行，紧密排列

（2）relative
相对于原来的位置进行浮动；保留占用的空间。
将node-2节点的样式修改为：

#node-2 {width: 400px;height: 200px;background-color: orange;position: relative;top:100px;left: 100px;
}

显示为：
在这里插入图片描述
分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间保持，node-2(橙色)根据top和left相对原空间进行偏移。

（3）absolute
相对已定位的父节点(否则相对浏览器)进行浮动；不保留占用的空间。

将node-2节点的样式修改为：

#node-2 {width: 400px;height: 200px;background-color: orange;position: absolute;top:100px;left: 100px;
}

显示为：
在这里插入图片描述
分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间不保持，node-2(橙色)根据top和left相对浏览器左上角进行偏移。

（4）fixed
相对浏览器)进行浮动；不保留占用的空间。

将node-2节点的样式修改为：

#node-2 {width: 400px;height: 200px;background-color: orange;position: fixed;top:100px;left: 100px;
}

【2】float
使用float属性可以使元素脱离原文档流，float属性取值范围如下：
（1）left：使元素浮动到左侧；
（2）right：使元素浮动到右侧；
（3）none：默认值，元素不浮动；

<head><style>#node-1 {width: 500px;height: 100px;background-color: red;/*float: left;*/}#node-2 {width: 400px;height: 200px;background-color: orange;/*float: left;*/}#node-3 {width: 300px;height: 300px;background-color: yellow;/*float: left;*/}</style>
</head><body>
<div style="width:1200px; border: black 5px solid"><div id="node-1"></div><div id="node-2"></div><div id="node-3"></div>
</div>
</body>

显示如下：
在这里插入图片描述
分析：node-1(红色)、node-2(橙色) 、node-3(黄色) 分别各占一行，父节点因未设置hight从而高度为三个字节点之和。

对node-2(橙色)和node-3(黄色)节点样式添加 float: left;，显示如下：
在这里插入图片描述
分析：当node-2(橙色)和node-3(黄色)浮动后，不再占据原来的空间，父节点高度与node-1(红色)保持一致。

对node-1、node-2、node-3节点样式添加 float: left;，显示如下：
在这里插入图片描述
分析：当node-1(红色)、node-2(橙色)和node-3(黄色)浮动后，均不再占据原来的空间，父节点高度为0。

3.3 选择器

3.3.1 id选择器

使用井号(#)拼接元素id

#id{witdh: 100px;
}

3.3.2 类选择器

使用句号(.)拼接元素id

.class{witdh: 100px;
}

3.3.3 标签选择器

直接使用标签名

tag{witdh: 100px;
}

3.3.4 组合选择器

选择器1 选择器2 {...}表示选择器1下的所有满足选择器2的节点，可以直接相连，也可不连；
选择器1 > 选择器2{...}表示选择选择器1下直接包含的选择器2，而不包含间接包含的选择器2；
选择器1 + 选择器2{...}表示选择器1同级的下一个相邻的选择器2；
选择器1 ~ 选择器2{...}表示与选择器1同级的且在选择器1后面的所有的选择器2；
选择器1选择器2{...}表示同时满足选择器1和选择器2的元素.

4.jquery

4.1 安装和引入

在html中通过script标签引入：

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

也可以将jquery-2.0.2.min.js文件下载到本地后引入，避免每次引用都需要从远程下载。
注意：HTML中导入js时，依赖jquery的js文件需要在jquery之后被引入。

说明：
jQuery代码需要包含在$(document).ready(function(){})内部，为了确保代码在DOM完全加载后才执行。
当页面加载时，浏览器会逐步解析和构建DOM；如果jQuery代码在DOM还没有完全加载时就执行，可能会导致无法找到所需的DOM元素或执行操作。$(document).ready(function(){})会在DOM加载完成后触发，执行内部的代码块。

4.2 操作DOM

4.2.1 获取jquery的DOM对象

// 直接使用字符串【用于创建新的DOM节点】
$("<div></div>")// 包装HTML原生DOM对象
const inputMsg = document.getElementById("chat-input");
$(inputMsg)//使用css选择器获取, 支持id,标签，类选择器【用于操作现有DOM节点】
$("#chat-input")

4.2.2 删除节点

remove方法用于删除节点：

// 删除id为chat-input的元素
$("#chat-input").remove();

4.2.3 获取/设置节点内容

text方法用于获取或设置节点的内容

//设置
$("#chat-input").text('节点内容');
// 获取
var content = $("#chat-input").text();

4.2.4 设置样式

css方法获取和设置节点样式

// 设置背景色
$(".message-box").css("background-color":"red")
// 获取背景色
$(".message-box").css("background-color")

4.2.5 设置属性

attr方法获取和设置节点属性

// 设置背景色
$(".message-box").attr("display":"none")
// 获取背景色
$(".message-box").attr("display")

说明：属性可以是元素特有的，也可以是用户自定义的，用于储存信息。

4.2.6 隐藏与显示

hide和show方法用于控制节点的隐藏和显示

// 隐藏detail-box元素
$("#detail-box").show();// 显示detail-box元素
$("#appRightBottom").hide();

4.2.7 添加子节点

append方法用于添加子节点

const bodyDom = $("<span>新增内容</span>")
// 对id为chat-input元素添加<span>新增内容</span>节点
$("#chat-input").append(bodyDom);

4.2.8 获取子节点列表

// children()方法获取子节点列表
$("#chat-wrapper").children()//first()获取第一个子节点
$("#chat-wrapper").children().first()//last()获取最后一个子节点
$("#chat-wrapper").children().last()

获取子节点后，操作方式同操作节点。

4.3 事件机制

4.3.1 鼠标事件

单击和双击事件：

// 为元素绑定鼠标单击事件
$("#send-btn").click(function(){console.log("单机鼠标左键");
});// 为元素绑定鼠标双击事件
$("#send-btn").dbclick(function(){console.log("双机鼠标左键");
});

鼠标移入和移出事件：

//用户光标进入元素上时触发
$("#send-btn").mouseenter(function(){console.log("鼠标移入");
});// 光标离开元素时触发
$("#send-btn").mouseleave(function(){console.log("鼠标移出");
});

其他暂不涉及。

4.3.2 键盘事件

keydown 键盘按下时触发，keyup在按键释放时触发，keypress按下并抬起同一个按键时触发。

$("#xxx").keydown(function (event) {// event.keyCode可获取按键的idif (event.ctrlKey && event.keyCode == 13) {alert('Ctrl+Enter');};switch (event.keyCode) {case 37:alert('左');break;case 39:alert('右');break;};return false;
});