HTML+CSS+JavaScript入门教程（万字）-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML+CSS+JavaScript入门教程（万字）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

作为一名后端开发人员，开发过程中，必不可少的与前端进行对接，因此尽管是后端开发者，也需要一定的前端知识，因此写下HTML+CSS+JavaScript入门知识，着重介绍了JavaScript，方便自己复习，也各位小伙伴参考。

一、HTML

1.1什么是HTML

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的
HTML（HyperText Markup Language）:超文本标记语言
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言：由标签构成的语言
HTML运行在浏览器上，HTML标签由浏览器来解析
HTML标签都是预定义好的。例如：使用展示图片
W3C标准：网页主要由三部分组成
- 结构：HTML
- 表现：CSS
- 行为：JavaScipt

1.2 基础标签

html+css+js,web前端开发,javascript,html,css

1.3 转义字符

html+css+js,web前端开发,javascript,html,css

1.4 图片、音频、视频标签

html+css+js,web前端开发,javascript,html,css

1.5 超链接标签

html+css+js,web前端开发,javascript,html,css

1.6 列表标签

html+css+js,web前端开发,javascript,html,css

1.7 表格标签

html+css+js,web前端开发,javascript,html,css

1.8 布局标签

html+css+js,web前端开发,javascript,html,css
布局标签用来设置css样式，相当于两张白纸提供给你，你自己可以在上面设置任意样式。

div占满一整行。（一行）
span占自己所占的位置。（一块）

1.9 表单便签

html+css+js,web前端开发,javascript,html,css

method：指定表单的请求方式
- 1 get:默认值
  - 请求的参数会拼接在URL后面
  - url的长度会有限制 4kb
- post：
  - 请求的参数会在http请求协议的请求体系中
  - 请求参数无限制的

表单项

html+css+js,web前端开发,javascript,html,css

二、CSS

2.1 什么是CSS

html+css+js,web前端开发,javascript,html,css

2.2 CSS导入方式

html+css+js,web前端开发,javascript,html,css

2.3 CSS选择器

html+css+js,web前端开发,javascript,html,css

三、JavaScript

3.1 什么是JavaScript

JavaScipt是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互
W3C标准：网页主要由三部分组成
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript（简称JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。
ECMAScriot 6（ES6）是在最新的JavaScript版本（发布于2015年）。

3.2 JavaScript的引入方式

内部脚本：将JS代码定义在HTML页面中
在HTML中，JavaScript代码必须位于标签之间

<script>
	alert("hello JS-")
</script>

提示

在HTML文档中可以在任意地方，放置任意数量的

3.3 基础语法

3.3.1 输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

3.3.2 变量

var

JavaScript中使用var关键字（variable的缩写）来声明变量

var test = 20;
test = "张三",

var是全局变量，一处定义，全局可用
var可以重复声明，取最后的赋值为变量的值

let

ECMAScript 6新增了let关键字来定义变量，它的用法类似于var，但是:
- 它是局部变量，只在所在代码块内有效
- 不允许重复声明
  const
const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

3.3.3 数量类型和转换

数量类型
JavaScript中分为：原始类型和引用类型
五种原始类型：

number:数字（整数、小数、NAN（Not a Number））
string：字符、字符串、单双引皆可
boolean：布尔。（true、false）
null：对象为空
undefined：当声明的变量没有进行初始化的时候，该变量的默认值为undefined

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

var age = 3；
//此处打印出来是age的数据类型为：number
alert(typeof age);

类型转换

其他类型转换为number：
- String：按照字符的字面值，转换为数字，如果字面值不是数字，则转为NaN，一般使用parseInt()
- boolean:true转换为1，false 转为0。
其他类型转换为boolean：
- number：0和NaN转为false ，其他的数字转换true
- string：空字符串转为false ，其他的字符转为true。
- null：转为false
- undefined：转为false

注意在JavaScript下列代码1和2的写法等价

var flag = "" 

if(flag != null && flag.length >0) //1
if(flag)//2
//在JavaScript中1和2的写法等价

3.3.4运算符

这里与java运算符一样，不过多赘述。
html+css+js,web前端开发,javascript,html,css
需要注意==和===的区别

==先判断类型是否一样，如果不一样，则进行类型转换后，再比较
===先判断类是否一样，不一样直接返回FALSE，若一样才再进行比较

var age1 = 20;  //number
var age2 = "20";//String

alert(age1 == age2); //true
alert(age1 === age2);//false

3.3.5 流程控制语句

JavaScript的流程控制语句和Java的一样，这里不再赘述，需要注意的是，在使用流程控制语句的时候，变量的定义建议使用let关键字，局部定义

if
for
switch
while
do…while

3.3.6 函数

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

定义：JavaScript函数通过function关键字进行定义，有两种方式

方式一

/**
function functionName(参数1，参数2...){
函数体
}
*/

//函数定义
function add(a,b){
return a+b;
}
//调用函数
let result = add(1,2);//返回值为3

注意与Java不同的是

形式参数不需要数据类型，因为JavaScript是弱类型语言
返回值也不需要定义类型，直接return即可

方式二

/**
var functionName = function(参数1，参数2...){
函数体
}
*/

//函数定义
var add= function(a,b){
return a+b;
}
//调用函数
let result = add(1,2);//返回值为3
//此外函数调用中可以传递任意个参数
let result = add(1,2,3);//返回值仍然为3
//只传递了一个参数
let result = add(1);//返回值为1+NaN = NaN

3.4 JavaScript对象

Array

定义

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

var arr = new Array(1,2,3);//方式1
var arr = [1,2,3];//方式2

//使用
arr[0] = 1;

注意，JavaScript中数组是变长和变类型的，即声明了数组长度为3的数组，也可使用超过三的下标

//变长
var arr3 = [1,2,3];
arr[10] = 3;//这里也不会报错，正常执行
//变类型
var arr3 = [1,2,3];
arr[1] = "abc";//这里也不会报错，正常执行

Array也是一个对象

String

定义

var 变量名 = new String(s);//方式一
var 变量名 = s;//方式二

var str= new Array("hello");//方式1
var str= "hello";//方式2
var str= 'hello';//方式3

属性

自定义对象

格式

var 变量名 = {
						属性名称1：属性值1，
						属性名称2：属性值2，
						...
						函数名称：function（形参列表）{}
						...								
			}

var person = {
	name:"zhangsan",
	age:23,
	eat:function(){
	alert("干饭")
	}
}

3.5 BOM

Browser Object Model 浏览器对象模型
JavaScript 将浏览器的各个组成部分封装为对象
下面逐一介绍

Window 浏览器窗口对象（是其他四个的包含，大范围）

获取：直接使用window，其中window。可以省略
window.alert("abc");
html+css+js,web前端开发,javascript,html,css

1.alert()//不再赘述
2.confirm()//其同样弹出一个windows框吗，但是有确认和取消按钮，可以接收两个值，true和false
3.setTimeout(function,毫秒值)//在指定的时间间隔后执行传入的函数，只执行一次

	setTimeout(function(){
		alert("只执行一次");
	},2000)

4.setInterval(function,毫秒值)//在指定的时间间隔后执行传入的函数，重复执行

	setInterval(function(){
		alert("重复执行");
	},2000)

Navigator：浏览器对象，不常用，可以上官方文档查阅，不赘述
Screen：屏幕对象，不常用，可以上官方文档查阅，不赘述
History：历史记录对象
- 获取：使用window.history获取，其中window.可以省略
```
  window.history.方法();
  history.方法();
```
- 方法
Location：地址栏对象（网址）
- 获取：使用window.location获取，其中window.可以省略
```
  window.location.方法();
  location.方法();
```
- 方法

3.6 DOM

3.6.1 基本介绍

Document Object Model 文档对象模型
将标记语言的各个组成部分分装为对象
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
如下图所示
JavaScript通过DOM，就能够对HTML进行操作了
- 改变HTML元素的内容
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件做出反应
- 添加和删除HTML元素
DOM是W3C（万维网联盟）的标准
DOM定义了访问HTML和XML文档的标准
W3C DOM标准被分为3个不同的部分：
- 1.核心DOM：针对任何结构化文档的标准模型
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
- 2.XML DOM:针对XML文档模型（XML是核心DOM的子集）
- 3.HTML DOM:针对HTML文档的标准模型（HTML是核心DOM的子集）
  - Image：<img>
  - Button：<input type = 'button'>

3.6.2 获取Element对象

获取：使用Document对象的方法来获取

getElementById：根据id属性值获取，返回一个Element对象

<img id="light" src = "../imgs/off.gif" >
var img = document.getElementById("light")

getElementByTagName：根据标签名称获取，返回一个Element对象数组

<div class="cls">xiaowang</div>
<div class="cls">xiangli</div>
var divs= document.getElementByTagName("div")
for(let i = 0; i<divs.length; i++){
	alert(divs[i]);
}

getElementByName：根据name属性值获取，返回一个Element对象数组

<imput type="checkbox" name="hobby">电影
<imput type="checkbox" name="hobby">旅游
<imput type="checkbox" name="hobby">邮箱
var hobbys= document.getElementByTagName("hobby")
for(let i = 0; i<hobbys.length; i++){
	alert(hobbys[i]);
}

getElementByClassName：根据class属性值获取，返回一个Element对象数组

<div class="cls">xiaowang</div>
<div class="cls">xiangli</div>
var clss= document.getElementByTagName("cls")
for(let i = 0; i<clss.length; i++){
	alert(clss[i]);
}

3.6.3 常见HTML Element对象的使用

注：非常多，因此查看文档使用
html+css+js,web前端开发,javascript,html,css

3.7 事件监听

事件：HTML事件是发生在HTML元素上的”事情“。比如：
- 按钮被点击
- 鼠标移动到元素之上
- 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码

3.7.1 事件绑定

事件绑定有两种方式

方式1：通过HTML标签中的时间属性进行绑定

<input type = "button" onclick='on()'>
function on(){
	alert("我被点了")
}

方式2通过DOM元素属性绑定

<input type = "button" id="btn">
document.getElementByld("btn").onclick = funciton(){
	alert("我被点了")
}

3.7.2 常见事件

此处只是给出查询地方，需要用请自行到官方文档查找查找
html+css+js,web前端开发,javascript,html,css

3.8 正则表达式

概念：正则表达式定义了字符串的组成的规则

定义：

直接量：注意不要加引号
```
var reg = /^\w{6,12}$/;
```
创建RegExp对象
```
var reg = new RegExp(/^\w{6,12}$/);
```

方法：
test(str)：判断指定字符串是否符合规则，返回true或false
语法：

四、总结

以上包含了基础的HTML+CSS+JavaScript入门，前端还有大量知识需要学习，这里知识作为以为后端程序员，至少需要了解的前端知识，有了这些基础，在实际开发中遇到其他前端问题，查阅官方文档即可，文档地址：W3C
以上仅是个人在学习中的学习笔记，供自己复习使用，也供大家参考，欢迎各位小伙伴提出问题和不足，互相交流，如果对你有帮助，请多多点赞，收藏，关注，谢谢！！！文章来源地址https://www.toymoban.com/news/detail-625278.html

到了这里，关于HTML+CSS+JavaScript入门教程（万字）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！