作为一名后端程序员，在开发过程中避免不了和前端打交道，所以就要了解一些前端的基础知识，比如三剑客HTML,CSS,JavaScript，甚至有必要学习一下Vue、React等前端主流框架。


学习文档：https://www.w3school.com.cn/

一、HTML

1、注意事项

1）HTML文件以.htm或.html为扩展名
2）HTML结构标签


3）HTML标签不区分大小写
4）HTML标签属性值用单双引皆可
5）HTML语法松散

2、基础标签

1）概览
非常简单，如下标签可自行测试

2）html表示颜色(3种方式)

1、英文单词：red , pink , blue. . .
2、rgb(值1,值2,值3)：值的取值范围:0255，如 rgb(255,0,0)
3、#值1值2值3，值的范围:00FF

1
<font face="楷体" size="5" color="#ff0000">html基础</font>

3）拓展（转义字符）

3、图片音频视频标签


1）img（定义图片）

src: 规定显示图像的URL(统一资源定位符)
height: 定义图像的高度
width: 定义图像的宽度

1
2
3
4
<!-- 使用相对路径 -->
<img src="a.jpg" width="300" height="400">
<!-- 使用绝对路径 -->
<img src="https://gitee.com/zhengyquan/images/raw/master/img/gzh.png">

2）audio（定义音频）
支持的音频格式: MP3、WAV、OGG

src: 规定音频的URL
controls: 显示播放控件

1
<audio src="b.mp3" controls></audio>

3）video（定义视频）
支持的视频格式: MP4, WebM、OGG

src: 规定视频的URL
controls: 显示播放控件

1
<video src="c.mp4" controls width="500" height="300"></video>

一些小结

4）其他说明
资源路径：

  • 绝对路径: 完整路径。

  • 相对路轻: 相对位置关系。如 ../img/a.jpg

    • ./ ：当前目录， ./可以省略
    • ../ ：上一级目录

尺寸单位：

1、px：像素
2、%：百分比

4、超链接与列表标签

标签 描述
<a> 定义超链接。用于链接到另一个资源

4.1 超链接

1）href: 指定访问资源的URL
2）target: 指定打开资源的方式

_self: 默认值，在当前页面打开
_blank: 在空白页面打开

如，在<body>标签内部编写如下超链接

1
<a href="https://zhengyquan.gitee.io/" target="_blank">欢迎访问我的个人小站</a>

一般在页面内部跳转用_self，要跳转到外部资源用_blank。

4.2 列表标签

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项

1）有序列表(order list)
如，在<body>标签内部编写如下有序列表

1
2
3
4
5
<ol>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ol>

2）无序列表(unorder list)
如，在<body>标签内部编写如下无序列表

1
2
3
4
5
<ul>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ul>

5、表格标签与布局标签

1）表格标签

2）布局标签

相关注意如下

6、表单 & 表单项标签

6.1 表单

表单:在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项(元素):不同类型的input元素、下拉列表、文本域等

1）标签说明

1
2
3
4
5
6
7
8
9
10
11
12
13
<form>  定义表单
<input>  表单项(元素):不同类型的input元素、下拉列表、文本域等
<label>  为表单项定义标注
<select>  定义下拉列表
<option>  定义下拉列表的列表项定义文本域
<textarea>  定义文本域

如下是form标签详解（重点）
form：定义表单
- action：规定当提交表单时向何处发送表单数据，URL
- method：规定用于发送表单数据的方式
    - get：浏览器会将数据直接附在表单的action URL之后。大小有限制
    - post：浏览器会将数据放到http请求消息体中。大小无限制

2）表单示例(注意看注释，是重点)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示表单标签</title>
</head>
<body>
乾坤未定，你我皆是牛马！
<!--
form:
    action:指定表单数据提交的URL
        *表单项数据要想被提交，则必须指定其name属性
    method:指定表单提交的方式(重要--面试题常考)
        1.get：默认值
            *请求参数会拼接在URL后边
            *url的长度有限制 4KB
        2.post：
            *请求参数会在http请求协议的请求头中(可以打开开发者工具网络抓包查看)
            *请求参数无限制
-->
    <form action="#" method="post">
        <input type="text" name="username">
        <input type="submit">
    </form>
</body>
</html>

测试数据，查看结果。打开开发者工具(我的是ctrl+shift+i)，输入hello

6.2 表单项

1）说明

2）表单项示例（重点看注释）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
</head>
<body>
<!--action：规定当提交表单时向何处发送表单数据。method：规定用于发送表单数据的方式-->
<form action="#" method="post">
    <!--hidden:设置隐藏字段,当需要悄悄(修改)提交某些数据时用到-->
    <input type="hidden" name="id" value="123">
    <!--绑定name属性才能提交到服务器，设置label并关联(for)到id,实现单击文本就能跳转单选按钮/复选框，增强用户体验-->
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>
    性别：
    <!--绑定同一个name,在单选时表现为互斥。value为设置提交到服务器时显示的数据(方便后端辨识)，提交成功默认都为on-->
    <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
    <br>
    爱好：
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">游戏
    <br>
    头像：<!--type="file" 文件上传-->
    <input type="file"><br><br> <!--br换行-->
    城市：
    <select name="city">
        <!--value起别名，最好是英文，防止提交后端时出现乱码-->
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select><br><br>
    个人描述：
    <textarea cols="20" rows="5" name="textarea"></textarea><br><br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">
</form>
</body>
</html>

运行界面如下

测试数据，查看结果。打开开发者工具(我的是ctrl+shift+i)，输入数据，点击免费注册。

二、CSS

1、CSS概述

2、导入方式（3种）

1）内联样式（行内样式）：在标签内部使用style属性，属性值是css属性键值对（不推荐）

  • <div style=”color: red”>Hello CSS~</div>

2）内部样式（内嵌样式）：定义<style>标签，在标签内部定义css样式（可以写在页面任何位置，但通常约定写在head标签中）
3）外部样式（外联样式）：定义link标签，引入外部的css文件。即写在一个单独的.css文件中（需要通过link标签在网页中引入）

  • <link href=”../css/demo.css” rel=”stylesheet”>
  • demo.css：p{color: red;}

demo.css

1
2
3
p{
    color: red;
}

3、示例（演示CSS的三种导入方式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示CSS</title>
    <!--内部样式：定义style标签并使用span选择器控制body的span标签-->
    <style>
        span{
            color: red;
        }
    </style>

    <!--外部样式：link关联外部的css, ../回到上一级目录。rel指定为stylesheet(css样式)-->
    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>
    <!--未使用CSS-->
    Hello CSS
    <!--内联样式演示CSS-->
    <div style="color: red">Hello CSS</div>
    <!--内部样式演示CSS-->
    <span>Hello CSS</span>
    <!--外部样式演示CSS-->
    <p>Hello CSS</p>
</body>
</html>

注：外部样式用到的css文件(demo.css)

1
2
3
p{
    color: red;
}


运行结果如下，黑色的是没有用CSS样式的，其他三个是使用了CSS三种不同样式的。

4、CSS选择器


小结

三、Javascript

1、js概述

2、js引入方式

2.1 内部脚本

将JS代码定义在HTML页面中，几点注意如下

1、在HTML中，JavaScript代码必须位于<script>与</script>标签之间

2、在HTML文档中可以在任意地方，放置任意数量的<script>。

3、一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示

2.2 外部脚本

将JS代码定义在外部JS文件中，然后引入到HTML页面中
1）外部文件：demo.js
2）引入外部 js文件
注意:

1、外部脚本不能包含<script>标签

2、<script>标签不能自闭合

2.3 引入方式示例

1）html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示javascript</title>
</head>
<body>
<!--内部脚本引入js-->
<script>
    alert("hello js!");
</script>

<!--外部脚本引入js-->
<!--src属性指定路径，../返回当前文件的上一级目录-->
<script src="../js/demo.js"></script>
<!--注意虽然没有写内容，但不能自闭合，即不能写成 <script src="../js/demo.js"/>  -->
</body>
</html>

2）外部脚本引用用到的 js文件（demo.js）

1
alert("hello js!")

3）运行结果，会跳出一个弹窗，点击两下后会消失。

3、js基础语法

3.1 书写语法

1）区分大小写
与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。
2）每行结尾的分号可有可无（尽量写上更加严谨）
3）注释

单行注释：//
多行注释：/* */

4）大括号{ }：表示代码块

1
2
3
if(count==3){
    alert(count);
}

3.2 输出语句

1）window.alert()：写入警告框。

window.alert(“hello JS~”); //弹出警告框

2）document.write()：写入HTML输出

document.write(“hello JS ~”); //写入HTML

3）console.log()：写入浏览器控制台

console.log(“hello JS~”); //写入控制台

示例(演示3种输出方式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示js输出</title>
</head>
<body>
<script>
    window.alert("hello js~") //写入警告框，window可省略
    document.write("hello js 2~") //写入HTML
    console.log("hello js 3~") //写入浏览器控制台,按ctrl+shift+I,打开开发者工具，控制台显示hello js 3~
</script>
</body>
</html>

运行结果如下，会有3次输出，写入浏览器控制台的需要打开开发者工具（我的是按ctrl+shift+I），点击控制台查看


3.3 变量

1）说明

JavaScript中用 var关键字(variable的缩写)来声明变量

JavaScript是一门弱类型语言，变量可以存放不同类型的值

2）变量名需要遵循的规则

1、组成字符可以是任何字母、数字、下划线(_)或美元符号($)
2、数字不能开头
3、建议使用驼峰命名

3）var 关键字声明变量的特点

  • 作用域：全局变量
  • 变量可以重复定义（后面定义的值会覆盖前面定义的）

注：let和const关键字

ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

ECMAScript 6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

3.4 数据类型 & 运算符

1）说明
JavaScript 中分为：原始类型和引用类型
5种原始类型:

  • number：数字（整数、小数、NaN(Not a Number))
  • string：字符、字符串，单双引皆可
  • boolean：布尔。true，false
  • null：对象为空，返回Object类型
  • undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用 typeof运算符可以获取数据类型

  • 如 alert(typeof age);

2）示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*演示js的弱类型(变量可以存放不同类型的值)*/
    var a=10; // number类型
    alert(a);
    alert(typeof(a)) // typeof运算符可以获取数据类型 
    a="hello js~"; // string类型
    alert(a);
    alert(typeof(a))
    /*
        var: 特点
            1. 作用域：全局变量
            2. 变量可以重复定义
     */
    {
        var age=30;
        var age=20; // 变量可以重复定义，后者覆盖前者
    }
    alert(age); // 作用域为全局变量,可以在代码块外访问age
    const PI=3.14;
    //PI=3.141; 报错，const关键字声明一个常量，不可变
</script>
</body>
</html>

3）运算符
比较简单，可自行测试。

4）流程控制
js的流程控制语句可类比java，不再赘述。

4、js函数

4.1 概述

1）函数
函数（方法）是被设计为执行特定任务的代码块。

  • 定义：JavaScript函数通过function关键词进行定义，语法为：function functionName(参数1,参数2..){要执行的代码}
  • 调用：函数名称(实际参数列表);

2）注意

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

JS中，函数调用可以传递任意个数的参数。

4.2 示例（两种函数定义方式）

新建一个html文件，引入并编写如下js代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*演示js函数*/

    // 第一种函数定义方式
    function add(a,b){
        return a+b;
    }
    let result = add(1,2);
    alert(result);

    // 第二种函数定义方式
    var add=function (a,b) {
        return a+b;
    }
    let result1 = add(2,3);
    alert(result1);
</script>

</body>
</html>

5、js对象

5.1 Array数组

JavaScript中 Array对象用于定义数组。
1）定义

var 变量名= new Array(元素列表); // 方式一
var 变量名=[元素列表]; // 方式二

2）访问

arr[索引]=值;

注意：JS数组类似于Java集合，长度，类型都可变 (变长变类型)

3）属性与方法

4）示例
演示js创建数组的两种方式及相关属性和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js数组</title>
</head>
<body>
<!--演示js创建数组的两种方式及属性方法-->
<script>
    var arr=new Array(1,2,3);
    // alert(arr);

    var arr1=[1,2,3]
    // alert(arr1)
    // 访问并修改值
    arr[1]=4;
    // alert(arr);
    // 特点：js里的数组相当于java中的集合，变长变类型
    var arr2=[1,2,4];
    arr2[10]=10; // 变长
    // alert(arr2[10]); // 10
    // alert(arr2[9]); // undefined,找不到的定义为undefined
    // alert(arr2); // 1,2,4,,,,,,,,10

    // 变类型
    arr2[5]='hello';
    // alert(arr2); // 1,2,4,,,hello,,,,,10

    // 属性和方法 属性：length 数组长度
    for(let i=0;i<arr.length;i++){
        // alert(arr[i]);
    }

    // forEach：遍历数组中有值的函数
    arr.forEach(function (e){
        // alert(e);
    })

    // ES6箭头函数:(...)=>{...} --简化函数定义
    arr.forEach((e) =>{
        // alert(e);
        })

    // push:添加元素
    arr.push(5);
    alert(arr) // 1,4,3,5
    // splice:删除元素
    arr.splice(0,1)
    alert(arr) // 4,3,5
</script>
</body>
</html>

注：上面演示了部分运行结果，其他结果可自行打开对应的注释运行查看

5.2 String字符串

1）创建对象的方式 & 属性与方法说明

注：substring(start,end) —开始索引，结束索引(含头不含尾)

2）代码示例
演示js创建字符串及相关属性和方法。新建一个html文件，在其中引入并编写如下js代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js字符串</title>
</head>
<body>
<script>
    //创建字符串对象
    // var str = new string ("Hello string" );

    var str1 = " Hello string "; // 首尾各有一个空格
    console .log(str1); //  Hello string
    // length
    console.log(str1.length); // 14
    // charAt
    console.log (str1.charAt (4)); // l
    // indexOf
    console.log (str1.indexOf ("lo")); // 4
    // trim
    var s1 = str1.trim (); // Hello string
    console.log (s1) ;
    //substring(start,end) ---开始索引，结束索引(含头不含尾)
    console.log (s1.substring(0,5)); // Hello
</script>
</body>
</html>

在浏览器中运行，打开开发者模式(按ctrl+shift+I)，进入控制台查看输出结果。如下

5.3 自定义对象

5.4 JSON

1）json概述

2）基础语法
注：json与js对象的转换是重点

3）代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js字符串</title>
</head>
<body>
<script>
    var jsonstr = '{"name" : "Tom" , "age":18 , "addr" : [ "北京","上海","西安"]}';
    alert(jsonstr.name) ; // undefined
    // json字符串--js对象
    var obj = JSON.parse (jsonstr);
    alert(obj.name) ; // Tom
    // js对象--json字符串
    alert(JSON .stringify(obj)); // {"name":"Tom","age":18,"addr":["北京","上海","西安"]}
</script>
</body>
</html>

5.5 BOM

1）BOM概述

概念:

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

组成：

  • window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

2）window介绍

定时器相关注意

1、setInterval –周期性的执行某一个函数

2、setTimeout –延迟指定时间执行一次

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js字符串</title>
</head>
<body>
<script>
    //获取
    window .alert ("Hello BOM");
    alert ("Hello BOM window");
    //方法
    //confirm -对话框--确认: true ，取消: false
    var flag = confirm ("您确认删除该记录吗?");
    alert (flag) ;
    //定时器- setInterval --周期性的执行某一个函数
    var i = 0 ;
    setInterval(function (){
        i++;
        console.log("定时器执行了"+i+"次");
    },2000)
    //定时器- setTimeout --延迟指定时间执行一次
    setTimeout(function (){
        alert("JS")
    },3000)
</script>
</body>
</html>

上述setInterval定时器在控制台的运行结果

3）Location介绍

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js字符串</title>
</head>
<body>
<script>
    // location地址栏对象
    alert(location.href);
    // 会自动跳转到指定网站
    location.href = "https://zhengyquan.gitee.io/"
</script>
</body>
</html>

5.6 DOM

1）DOM概述

2）DOM的3个部分

3）Document对象获取Element元素对象的函数

更多详情请参考官方文档：https://www.w3school.com.cn/js/js_htmldom.asp

6、js事件监听

6.1 事件

HTML事件是发生在HTML元素上的“事情”。如:
1）按钮被点击
2）鼠标移动到元素上
3）按下键盘按键

6.2 事件监听

JavaScript可以在事件被侦测到时执行代码。

6.3 事件绑定的两种方式

6.4 常见事件