-

布局：

4.表单

form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果

表单项标签常见的有三个，分别是input，select，textarea

CSS

（对于后端来说，只需简单了解一下）

1.简介

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素

css代码一般定义在style 标签中。

2.导入方式

导入方式就是 css 代码和 html 代码的结合方式，主要有三种

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

Hello CSS~

（2）内部样式：定义

（3）外部样式：定义link标签，引入外部的css文件（最常用！）
如编写一个css文件（demo.css）：

div{color: red;
}

然后在html中引用：

3.选择器

这里就要说CSS的语法了

CSS 规则：选择器 & 一条或多条声明

如：

//
p {color:red;text-align:center;}

有三种选择器：
（1）元素选择器

元素名称{color: red;}

div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

（2）id选择器

#id属性值{color: red;}

首先html代码（指定元素的id）

hello css2

然后CSS去渲染指定id的内容

#name{color: red;}/*将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

（3）class选择器

.class属性值{color: red;}

html代码：

hello css3

CSS代码：

.cls{color: red;} /*将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

总览一波：

JavaScript

1.简介

JavaScript 是一门跨平台、面向对象的脚本语言；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

（而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的）

JavaScript 是用来控制网页行为的，它能使网页可交互

2.引入方式

位于 标签之间，类比CSS~

（1）内部脚本
将JS代码定义在HTML页面中，用

（2）外部脚本

将JS代码定义在外部JS文件中，然后引入到HTML页面中
例如，外部文件demo.js

alert("hello js");

html中引入js文件

3.基本语法

（1）变量

（2）数据类型

（3）流程控制

（4）函数
方式1：

function 函数名(参数1,参数2…){
要执行的代码
}

方式2：

var 函数名 = function (参数列表){
要执行的代码
}

如：

function add(a, b){return a + b;
}

调用：

let result = add(10,20);

4.对象

(1) 基本对象

Array对象：

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

定义：

var 变量名 = new Array()
var 变量名 = [元素列表]

访问：
与java一样，直接通过索引

属性：

方法很多，可以参考官方文档

(2) BOM对象

Browser Object Model，浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现

(3) DOM对象

Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

5.事件

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码

事件绑定：

方式一：通过 HTML标签中的事件属性进行绑定

function on()
{alert("我被点击了")
}

方式二：通过 DOM 元素属性绑定（更常用）

document.getElementById("btn").onclick=function()
{
alert("我被点击了")
}

常见事件