作为一名后端程序员，在开发过程中避免不了和前端打交道，所以就要了解一些前端的基础知识，比如三剑客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)：值的取值范围:0~255，如 rgb(255,0,0)
3、#值1值2值3，值的范围:00~FF
<font face="楷体" size="5" color="#ff0000">html基础</font>
3）拓展（转义字符）
3、图片音频视频标签
1）img（定义图片）
src: 规定显示图像的URL(统一资源定位符)
height: 定义图像的高度
width: 定义图像的宽度
<!-- 使用相对路径 --> <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: 显示播放控件
<audio src="b.mp3" controls></audio>
3）video（定义视频）
支持的视频格式: MP4, WebM、OGG
src: 规定视频的URL
controls: 显示播放控件
<video src="c.mp4" controls width="500" height="300"></video>
一些小结
4）其他说明
资源路径：
-
绝对路径: 完整路径。
- 绝对磁盘路径。如 https://gitee.com/zhengyquan/images/raw/master/img/gzh.png
- 绝对网络路径。如 D:\Blog1\themes\butterfly\source\img\星球.jpg
-
相对路轻: 相对位置关系。如 …/img/a.jpg
- ./ ：当前目录， ./可以省略
- …/ ：上一级目录
尺寸单位：
1、px：像素
2、%：百分比
4、超链接与列表标签
| 标签 | 描述 |
|---|---|
| <a> | 定义超链接。用于链接到另一个资源 |
4.1 超链接
1）href: 指定访问资源的URL
2）target: 指定打开资源的方式
_self: 默认值，在当前页面打开
_blank: 在空白页面打开
如，在<body>标签内部编写如下超链接
<a href="https://zhengyquan.cn" target="_blank">欢迎访问我的个人小站</a>
一般在页面内部跳转用_self，要跳转到外部资源用_blank。
4.2 列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
1）有序列表(order list)
如，在<body>标签内部编写如下有序列表
<ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol>
2）无序列表(unorder list)
如，在<body>标签内部编写如下无序列表
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
5、表格标签与布局标签
1）表格标签
2）布局标签
相关注意如下
6、表单 & 表单项标签
6.1 表单
表单:在网页中主要负责数据采集功能，使用<form>标签定义表单
表单项(元素):不同类型的input元素、下拉列表、文本域等
1）标签说明
<form> 定义表单 <input> 表单项(元素):不同类型的input元素、下拉列表、文本域等 <label> 为表单项定义标注 <select> 定义下拉列表 <option> 定义下拉列表的列表项定义文本域 <textarea> 定义文本域 如下是form标签详解（重点） form：定义表单 - action：规定当提交表单时向何处发送表单数据，URL - method：规定用于发送表单数据的方式 - get：浏览器会将数据直接附在表单的action URL之后。大小有限制 - post：浏览器会将数据放到http请求消息体中。大小无限制
2）表单示例(注意看注释，是重点)
<!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）表单项示例（重点看注释）
<!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
p{ color: red; }
3、示例（演示CSS的三种导入方式）
<!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)
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代码
<!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）
alert("hello js!")
3）运行结果，会跳出一个弹窗，点击两下后会消失。
3、js基础语法
3.1 书写语法
1）区分大小写
与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。
2）每行结尾的分号可有可无（尽量写上更加严谨）
3）注释
单行注释：//
多行注释：/* */
4）大括号{ }：表示代码块
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种输出方式)
<!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）示例
<!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代码。
<!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创建数组的两种方式及相关属性和方法
<!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代码。
<!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）代码示例
<!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 --延迟指定时间执行一次
代码示例
<!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介绍
代码示例
<!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 常见事件
OK！以上就是这篇文章的全部内容了！欢迎点赞、收藏、关注！
