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

背景：

前端系列会收集碎片化的前端知识点，作为自己工作和学习时的字典，欢迎读者收藏和使用。

笔者是后端开发😶前端涉猎不深，因此文章重在广度和实用，对原理和性能不会过多深究。

1.html

1.1 html5网页结构

html 复制代码

<!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) 内部插入的代码格式如下：

html 复制代码

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

(2) 引入js外部文件

html 复制代码

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

一般在body标签底部引入，以保证所有的DOM元素都被加载后再加载JS文件;

注意加载多个JS文件时，如果有依赖关系，需要保证被依赖的文件先被引入。因此会先引入jquery等三方库，再引入业务js文件。

1.4 在html中引入样式：

(1) 内联样式

html 复制代码

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

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

(2) 内嵌样式

html 复制代码

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

在head中通过style标签引入。

(3) 外部样式表

html 复制代码

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

通过link标签的href引入。

(4) 导入样式表

html 复制代码

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

在index.css文件中：

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的原生语句。

python 复制代码

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

2.javascript

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

2.1 常用类型

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

2.1.1 String

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

创建方式如下：

javascript 复制代码

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

常用API:

javascript 复制代码

// 判断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

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

javascript 复制代码

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

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

javascript 复制代码

typeof NaN; // "number"

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

javascript 复制代码

NaN == NaN //false

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

javascript 复制代码

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

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

javascript 复制代码

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

2.1.3 Boolean

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

2.1.4 数组

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

创建方式如下：

javascript 复制代码

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

常用API:

javascript 复制代码

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

其他与java用法基本一致。

2.1.5 对象类型

javascript 复制代码

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

2.1.6 typeof 运算符

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

javascript 复制代码

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

javascript 复制代码

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常见操作

javascript 复制代码

//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;

javascript 复制代码

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

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

javascript 复制代码

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

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

2.6 try-catch异常处理;

javascript 复制代码

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

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

2.7 for循环和while循环

javascript 复制代码

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
  break;
 }
 console.log('提示信息：' + i);
}

continue、break

var num = 1;
while (num <= 10) {
 console.log(num + '\n');
 num++; 
}

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

2.8 与或非

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

2.9 是否相等;

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

javascript 复制代码

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%，高度默认由内容(元素内容或者子元素高度之和)决定。

html 复制代码

<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用于设置背景图片；

css 复制代码

/* 将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对内边距进行设置：

css 复制代码

div {  
    padding: 10px;  
}

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

css 复制代码

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)

css 复制代码

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

【2】border-width

边框宽度，可通过px设置；

css 复制代码

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

【3】border-color

用于设置边框颜色，默认无颜色

css 复制代码

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

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

css 复制代码

div {  
    border: solid 2px #FF0000;
}

3.1.4 外边距margin

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

css 复制代码

div {  
    margin: 10px;  
}

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

css 复制代码

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

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

3.2 定位与浮动

【1】position

css使用position确定元素的定位方式，有以下几种：

（1）static

默认定位方式，即文档流。

html 复制代码

<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节点的样式修改为：

javascript 复制代码

#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节点的样式修改为：

javascript 复制代码

#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节点的样式修改为：

javascript 复制代码

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

显示为：

分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间不保持，node-2(橙色)根据top和left相对浏览器左上角进行偏移。

【2】float

使用float属性可以使元素脱离原文档流，float属性取值范围如下：

（1）left：使元素浮动到左侧；

（2）right：使元素浮动到右侧；

（3）none：默认值，元素不浮动；

html 复制代码

<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

javascript 复制代码

#id{
	witdh: 100px;
}

3.3.2 类选择器

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

javascript 复制代码

.class{
	witdh: 100px;
}

3.3.3 标签选择器

直接使用标签名

javascript 复制代码

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标签引入：

html 复制代码

<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对象

js 复制代码

// 直接使用字符串【用于创建新的DOM节点】
$("<div></div>")

// 包装HTML原生DOM对象
const inputMsg = document.getElementById("chat-input");
$(inputMsg)

//使用css选择器获取, 支持id,标签，类选择器【用于操作现有DOM节点】
$("#chat-input")

4.2.2 删除节点

remove方法用于删除节点：

java 复制代码

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

4.2.3 获取/设置节点内容

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

java 复制代码

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

4.2.4 设置样式

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

java 复制代码

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

4.2.5 设置属性

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

java 复制代码

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

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

4.2.6 隐藏与显示

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

javascript 复制代码

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

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

4.2.7 添加子节点

append方法用于添加子节点

java 复制代码

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

4.2.8 获取子节点列表

java 复制代码

// children()方法获取子节点列表
$("#chat-wrapper").children()

//first()获取第一个子节点
$("#chat-wrapper").children().first()

//last()获取最后一个子节点
$("#chat-wrapper").children().last()

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

4.3 事件机制

4.3.1 鼠标事件

单击和双击事件：

javascript 复制代码

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

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

鼠标移入和移出事件：

javascript 复制代码

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

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

其他暂不涉及。

4.3.2 键盘事件

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

javascript 复制代码

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

其他暂不涉及。

4.4 ajax

使用ajax方法调用HTTP接口，如下所示：

javascript 复制代码

$.ajax({
    url:  "/aiws/api/queryHistoryById?recordId=0", 
    type: 'GET', 
    async: false, 
    data: '', 
    dataType: 'json', 
    success: function (result) {
         console.log(result)
    }, 
    error: function (msg) {
        console.error(msg)
    }
});

其中：url表示服务器接口地址；type表示方法类型，如GET, POST; async表示请求是否异步；data表示发送给服务器的数据；dataType表示接受的数据类型，如果为text将服务器返回的结果解析为字符串；如果为json，会将服务器返回的结果解析为对象类型；success在请求成功时调用，error在请求异常时调用。