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

超全面！一文带你快速入门HTML，CSS和JavaScript！

news 2024/11/15 1:58:28

作为一名后端程序员，在开发过程中避免不了和前端打交道，所以就要了解一些前端的基础知识，比如三剑客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的长度有限制 4KB2.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~") //写入HTMLconsole.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); // 作用域为全局变量,可以在代码块外访问ageconst 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// lengthconsole.log(str1.length); // 14// charAtconsole.log (str1.charAt (4)); // l// indexOfconsole.log (str1.indexOf ("lo")); // 4// trimvar s1 = str1.trim (); // Hello stringconsole.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 ，取消: falsevar 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>