前言

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

一、HTML

1.1什么是HTML

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

1.2 基础标签

1.3 转义字符

1.4 图片、音频、视频标签

1.5 超链接标签

1.6 列表标签

1.7 表格标签

1.8 布局标签

布局标签用来设置css样式，相当于两张白纸提供给你，你自己可以在上面设置任意样式。

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

1.9 表单便签

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

表单项

二、CSS

2.1 什么是CSS

2.2 CSS导入方式

2.3 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运算符一样，不过多赘述。

需要注意==和===的区别

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

var age1 = 20;  //number
var age2 = "20";//Stringalert(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");

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对象的使用

注：非常多，因此查看文档使用

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 常见事件

此处只是给出查询地方，需要用请自行到官方文档查找查找

3.8 正则表达式

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

定义：

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

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

四、总结

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

HTML+CSS+JavaScript入门教程（万字）相关推荐

Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突过程是这样的:你现在有两个模块,分 ...
CSS新手入门教程~~~~
CSS新手入门教程~~~~ CSS简介: 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加 ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
Div+CSS布局入门教程(一) 页面布局与规划
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
div css教程属性,Div+CSS布局入门教程
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
JavaScript 入门教程-不古出品
JavaScript 教程入门-不古出品 JavaScript 背景 JavaScript 简介 JavaScript 使用 < script > 标签 JavaScript 函数和事件 ...

HTML+CSS+JavaScript入门教程（万字）

前言