编写一个三行三列的表格
//用table标签来进行定义一个表格<table><!-- tr表示一行--><tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td></tr><!-- 第二行 --><tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td></tr><!--第三行--><tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td></tr></table>
编写表格的时候，需要在table标签中添加一些属性
1、显示边框：border="1"2、将单元格与单元格之间的距离取消：cellspacing="0"3、设置单个单元格里面内容相对边框的距离：cellpadding="0"4、可以设置整个表格的大小，使用width和height，设置好之后，表格的特性，自动垂直居中，每个单元格的宽度和高度平均分配（内容长度一致）5、将表格放置在网页的中间位置：align="center"6、给整个表格设置背景颜色：bgcolor="aqua"7、给整个表格设置背景图片：background="路径"
编辑表格中的单行,tr标签中的属性
1、设置每一行的高度：height=""2、设置每一行的背景颜色：bgcolor=""3、将一行中单元格中的内容水平居中：align="center"
编辑表格中单个单元格的内容，td标签中的属性
1、设置高度和宽度:width和height，设置高度只需要设置每一行的第一列，设置宽度只需要设置每一列的第一行2、设置单个单元格的背景颜色：bgcolor="red"3、设置单个单元格的背景图片：background="路径"4、设置单个单元格的内容水平居中：align="center"
合并单元格
1、合并列：colspan2、合并行：rowspan
三、CSS内容css:层叠样式表，用来规定页面所有的样式属性，其中包括：高度、宽度、背景颜色、背景图片和文本所有属性等样式。
3.1 内联方式(不推荐)概念：在要设置属性的标签中添加style标签，再在style里面编写css的属性
以图片为例：
以表格为例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css1</title> </head> <body> <table style="border: 1px red solid;width: 500px;height: 300px;"> <tr style="color:red;font-size: 23px;text-align: center;"> <td style="border: 1px red solid;">1</td> <td style="border: 1px red solid;">2</td> <td style="border: 1px red solid;">3</td> </tr> <tr> <td style="border: 1px red solid;">4</td> <td style="border: 1px red solid;">5</td> <td style="border: 1px red solid;">6</td> </tr> <tr> <td style="border: 1px red solid;">7</td> <td style="border: 1px red solid;">8</td> <td style="border: 1px red solid;">9</td> </tr> </table> </body></html>
3.2 内部方式（常用方式）使用内部方式必须先学会选择器，现在就使用5中简单的选择器，在head标签之间，新增一个style标签，所有的选择器都写在style标签之间。
id选择器
在style标签中用#表示；比如：
#id选择器名称{
css样式;
}
调用id选择器，在标签中用id=”id选择器名称”;
在style标签中用小数点表示，比如：
.class选择器名称{
css属性;
}
调用css选择器，在标签中用class = “class选择器名称”;
在style标签中，使用标签名称作为选择器名称，比如：
td{
css样式;
}
不需要调用，在body中所有的对应标签都会被使用上。
多个选择器共同作用对标签进行渲染，简单理解：前面的选择器都是选定范围，最后一个选择器才是进行标签的渲染。
选择器1 选择器2{
css样式;
}
要有一些动作效果，比如：鼠标悬停，也可以和组合选择器一起使用。
td:hover{ background-color: #00FFFF;}
3.3 外部引用（工作用）
设置字体的css
1、color:字体颜色
2、font-family:字体的样式，和face作用一致
3、font-size:字体的大小
4、font-weight:字体加粗
5、text-align:文本水平居中
6、line-height:;文本垂直居中
设置位置：
1、margin:设置外边距
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
2、padding:内边距
padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
其他属性
1、float:left;设置div的浮动
2、box-sizing:border-box,设置内边距的使用自适应
3、border-radius:设置圆角,如果长度为正方形的一半，则会是一个圆
4、position:fixed， 显示界面的绝对定位，不会随着网页的下滑改变
5、position:absolute:在网页的绝对定位
4和5都要配合使用left和top，其他的right和buttom也可以使用，频率较低
6、opacity：设置透明度
<a name="Do4lB"></a># 四、DIV盒模型<a name="w9sjc"></a># 五、表单- 表单主要使用用来从前端将数据提交到后端的标签，用户填写的数据提交到后端。```html<!-- 定义一个表单 --><form action = "后端服务器的请求路径" method="请求的方式"> 电话号码：<input type = "text" placeholder="请输入电话号码...." maxlength="11"/><br/> 密码：<input type = "password" placeholder="请输入密码...."/><br/> 性别： <input type = "radio" name = "gender"/>男 <input type = "radio" name = "gender"/>女 <br /> 兴趣爱好： <input type = "checkbox" />爬山 <input type = "checkbox" />照相 <input type = "checkbox" />游泳 <br/> 城市： <select> <option>重庆</option> <option>上海</option> <option selected="selected">广州</option> <option>背景</option> </select> 个人简介:<br /> <textarea rows="20" cols="80"></textarea><br /> <input type="submit" value = "提交"/> <input type = "button" value = "提交2" /> <button>提交3</button> <input type = "reset" value = "重置" /></form><!-- 无序列标签--> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <!-- 有序列标签 --> <ol> <li>1</li> <li>2</li> <li>3</li> </ol>
六、JavaScript基础
- 前端的脚本文件，不需要编译，编写好的js文件用html文件引入，再用浏览器打开即可运行。
- JavaScript组成：
1、ECMAScript：js的基础部分，其中包括：数据类型、变量、数组、函数、分支、循环
2、BOM：浏览器对象模型，往往取决于浏览器的支持。
3、DOM：文档对象模型（重点）
6.0 js里面的输出
方式1：以弹出框的方式进行输出，优先级最高
alert(“输出的内容”)；
方式2：在页面的部分进行输出
document.write(“输出的内容”);
方式3：在控制台输出（F12）,主要运用在编程里面的测试数据
console.log(“输出的内容”);
prompt(“js的输入”)，输入的任何数据，都会被当成字符串输入。
6.1 js数据类型1、number：数字数据类型，包含：小数和整数
2、string:字符串数据类型
3、boolean:布尔型
4、Object：对象数据类型
5、Array:数组数据类型
*6、function:函数数据类型
7、NaN:not a number，不是一个数字
8、undefined:未定义的数据类型，经常在错误提示里面（a not defined）
9、null:空数据
6.2 js的变量1、定义变量第一种：定义变量并赋值
var 变量名 = 值;
2、定义变量第二种：先定义变量，后给变量赋值
var 变量名;
变量名 = 值;
3、定义变量第三种：直接给值
变量 = 值;
4、在js中可以定义局部变量，用let
let 变量名 = 值;
根据变量的值判断变量的数据类型，需要使用关键方法typeof
var num1 = 12;document.write(typeof num1);document.write("<br />");var num2 = 1.2;document.write(typeof num2);document.write("<br />");
6.3 分支语句if分支语句
if(判断语句1){ 判断语句1为true的时候执行的语句}else if(判断语句2){ 判断语句2为true的时候执行的语句}else{ 其他判断语句都为false的时候执行的语句}
switch分支
var 定义一个变量switch(变量){ case 值1： 变量等于值1的时候执行语句； break;case 值2： 变量等于值2的时候执行语句； break;default: 当变量和前面所有的值都不相等的时候执行的语句;}
6.4 循环语句for循环
for(var 变量= 值;判断语句;改变变量){ 循环执行的代码;}
while循环
var 定义变量while(判断语句){ 循环执行的代码;}
do…while循环
var 定义变量do{ 循环执行的代码;}while(判断语句)
while和do…while的区别：while先判断条件是否满足，再执行循环的代码;do…while先执行代码,再判断条件是否满足。
- 跳出循环：
1、continue:结束本次循环，继续下一次循环
2、break:结束所有的循环，跳出循环体。
补充 运算符
=，+=，-=，*=，/=，%=
+，-，*，/，%，++，—
比较运算符
>,<,>=,<=,==,===,!====:绝对等于，必须值相同，数据类型也要相同才为true
逻辑运算符
与运算：&&
或运算：||
非运算：!
?
var 变量 = 比较运算?值1:值2；
6.5 数组
- 数组相当于一个容器，用来存储一组数据（可以是变量，直接是值）。不限制长度、不限制数据类型。
定义数组的方式：
//最简单的一种var arr = [1,2,3,4,"a","B","c",new object()];//定义空数组var num = new Array();//定义空数组第二种方式：var str = [];
遍历数组
//方式1：for(var i = 0;i < arr.length;i++){ document.write(arr[i]+"<br />");}//方式2：i的值仍然是下标for(var i in arr){ document.write(arr[i]+",");}//方式3：如果只是想要查看，可以直接输出数组,只想看到数组中的元素值，建议使用这种document.write(arr);
6.6 函数概念：将相同功能的代码进行封装，要使用的时候再进行调用，提高代码的复用性，函数和java一致也可以实现方法的重载。
语法：
//函数的语法：function 函数名称(参数){ 实现函数的方法;return 变量或者值;}
关键字：arguments
<script> /*定义一个函数，实现任意个数数值的和*/ function add(a,b){ var res = 0; var len = arguments.length; for(var i = 0;i < len;i++){ var num = arguments[i]; res = res + num; } return res; } var res = add(1,2,3,4,5); document.write("res = "+res); </script>
字面量函数
在js里面，function实际上可以当成一个数据类型，可以将函数赋值给一个变量，使用变量表示使用函数。
//普通定义函数function 函数名(){}//调用方式：函数名();//匿名函数：不能调用，要么将匿名函数给字面量，要么将匿名函数写成回调函数function(){}//字面量：var fun = function(){}//调用函数。使用该变量，使用的是字面量，本质上该变量是函数数据类型，要调用的时候，需要给变量加小括号fun();
js里面的对象
- 方式1：字面量创建对象
```
//字面量创建对象：每一个对象都需要单独给定属性的数值；
var person = {
name:”张三”,
age:18,
doIt:function(){
console.log("我要学java");
}
}
//调用属性和方法：
conosole.log(person.name);
person.doIt();
- 第二种方式：使用父类创建的方式```javascript//该方式不能根据需求批量进行创建对象var obj = new Object();obj.name = "李四";obj.gender = "男";obj.doIt = function(){ console.log("js的语法比较简单");}//调用方式：console.log(obj.name);obj.doIt();
使用函数编程的方式创建对象
function createPerson(name,age){ var obj = new Object();obj.name = name;obj.age = age;obj.doIt= function(){ console.log(obj.name+",学习java");}return obj;}//获取对象var p1 = createPerson("李雷",30);console.log(p1.name);p1.doIt();
使用构造方法的形式创建对象
```javascript
function person(name,age){
this.name = name;
this.age = age;
this.doIt=function(){
console.log(name+"，学习it");
}
}
//创建对象并调用属性和方法
var p1 = new person(“李四”,19);
console.log(p1.name);
p1.doIt();
<a name="UPZRg"></a># 七、BOM对象- 浏览器对象模型，取决于浏览器是否支持。
//BOM对象都是用window进行调用的方法
1、window.alert(“输出内容”);
2、window.prompt(“请输入内容：”);
//通过BOM获取浏览器窗口的实际大小，宽度和高度
var height = window.innerHeight;
var width = window.innerWidth;
//实际上document对象是由window对象调用
window.document.write(“输出内容”);
//获取屏幕的高度和宽度
var width = screen.width;
var height = screen.height;
//获取可用高度和宽度：去掉菜单栏和标签栏
var width = screen.availWidth;
var height = screen.availHeight;
//location相关属性
var url = location.href;获取当前的页面请求路径
var hostname = location.hostname;获取当前页面的主机名或者主机地址
var protocol = location.protocol;获取当前页面的协议，一般分为：http或者https
var port = location.port;获取当前页面请求的端口
//history:
history.back()；实现网页的后退
history.forward() ；实现网页的前进
<a name="iQWhL"></a># 八、DOM对象- DOM:document object model 文档对象模型，主要用于操作body中的标签内容。对标签的增加、删除、修改、查找。<a name="EMavm"></a>## 8.1 对元素进行操作- 可以使用document对象对标签进行操作，其中：增加表示使用js代码在body中动态的生成标签，删除表示用js动态的将一些标签删除，查找表示可以使用js将body中的标签获取到，修改表示用js对该标签进行css的修改。- 新增元素```javascript//使用js代码对body中进行新增标签。document.write("<div style = 'border:1px red solid;width: 100px;height: 100px; border-radius: 50%;'></div>");//使用document提供的方法进行在body中创建标签var oDiv = document.createElement("div");//对该div进行css的设置oDiv.style.width = "100px";oDiv.style.height = "100px";oDiv.style.float = "left";oDiv.style.border = "1px red solid";//将创建好的div进行挂载document.body.appendChild(oDiv);
- 获取元素
```javascript
//根据id获取元素，只能唯一的获取一个id标识的标签，document.getElementById(“id名称”)
var oDiv = document.getElementById(“one”);
//根据class获取元素，可以获取多个标签，获取的变量为伪数组，document.getElementsByClassName(“class名称”)
var oDiv = document.getElementsByClassName(“list”);
//根据标签名称获取元素，可以获取多个，document.getElementsByTagName(“标签名称”);
var oDiv = document.getElementsByTagName(“div”);
//获取单个：
var oDiv = document.querySelector(“#one div”);
//获取多个
var oDiv = document.querySelectorAll(“.list”);
- 修改元素：前提要先使用获取。```javascriptvar oDiv = document.querySelector("#one div");oDiv.style.border = "3px red solid";//第二种方式var oDiv = document.getElementById("one");oDiv.style.border = "3px blue solid";//修改css属性的方式1var oDiv = document.getElementsByClassName("list");for(var i = 0;i < oDiv.length;i++){ oDiv[i].style.border = "3px black solid";}//方式2：var oDiv = document.querySelectorAll(".list");for(var i = 0;i < oDiv.length;i++){ oDiv[i].style.border = "3px aqua solid";}
- 删除元素:需要先获取
```javascript
//根据id删除
var oDiv = document.getElementById(“one-1”);
oDiv.remove();
//第二种方式：
var oDiv = document.querySelector(“#one”);
oDiv.remove();
//根据class标签删除
var oDiv = document.getElementsByClassName(“list”);
var len = oDiv.length;
for(var i = 0;i < len;i++){
oDiv[0].remove();
}
//第二种方式：
var oDiv = document.querySelectorAll(“div”);
for(var i = 0;i < oDiv.length;i++){
oDiv[i].remove();
}
<a name="icL8a"></a>## 8.2 事件操作- 概念：当触发了有些特定事件的时候，才调用js的函数代码。- 鼠标事件：需要在鼠标要操作的标签上加上鼠标事件
1、onclick:鼠标单击事件
2、ondblclick:鼠标双击事件
3、onmouseover:当鼠标移入时执行，只执行一次
4、onmousemove:鼠标在该标签上移动则执行，会多次执行
5、onmouseout:鼠标移除时执行的代码
- 键盘事件:可以监听键盘的按键，并且可以根据值判断是哪个键盘按下，和标签无关```javascript1、onkeydown:键盘被按下2、onkeyup:键盘松开3、获取键盘的编码：event.keyCode
| 
