盒子模型
是一种变成思想，网页是使用div容器组成,盒子模型就可以实现div容器的布局；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-coibcBsr-1661343911719)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824093459232.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#d1{
width: 300px;
height: 300px;
background-color: aqua;
/* 边框: 宽度 线型 颜色 */
border: red 5px solid;
/* 单独设置某一边 */
/* border-left: red 5px solid; */
/* 填充,会将div撑大 */
padding:10px;
/* 可以单独设置某一边的填充 */
/* 外边距:
可以同时设置四边: 上 右 下 左
*/
/* margin:1px 2px 3px 4px; */
margin: auto;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="d1">
<div>
用户名<input />
</div>
<div>
密码<input />
</div>
</div>
</body>
</html>
Bootstrap
前端框架，可以快速搭建网站，提供整个完整页面效果，也有单独css样式，组件，和js插件
Bootstrap使用步骤：
1、进入网站找到3版本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bwQwsklD-1661343911720)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824102534886.png)]
2、下载源码[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hgnlw5mR-1661343911720)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824103215759.png)]
3、如果不想下载，也可以使用提供的CDN
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
4、创建项目，引入bootstrap库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZB9pXvaf-1661343911721)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824103529043.png)]
5、创建html文件，引入css文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N5QCDLSf-1661343911721)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824103810213.png)]
6、开始使用bootstrap的示例
找到一个模板页面，然后复制模板页面内容。
如果该页面也有定制css，也需要将定制css内容找到并复制粘贴到当前项目
找到源码，前边有一个链接就是它的css格式，打开应该是404，可以根据地址，在原网页中控制台中寻找该文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54VFCJso-1661343911722)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824105437387.png)]
栅栏
bootstrap他将页面分成等分12份；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cQUAnCIu-1661343911722)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824113103646.png)]
表格
按钮
图片
分页
图标
资源地址：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2opiD1qq-1661343911723)(C:\Users\Zyh\AppData\Local\Temp\1661340570979.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div>
<!-- 页面导航 -->
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div class="row">
<!-- 栅格 -->
<div class="col-md-6">
<!-- 表格 -->
<table class="table table-striped table-bordered table-hover">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PASSWORD</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>
<!-- 图标组件 -->
<a href="#">
<span class="
glyphicon glyphicon-trash"></span>
</a>
|<a href="#">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>删除|编辑</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>删除|编辑</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>删除|编辑</td>
</tr>
</table>
<!-- 分页组件-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- 按钮组件 -->
<div>
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
</div>
<!-- 图片组件 -->
<div>
<img src="img/justdoit.jpg" class="img-circle" width="135px">
</div>
</body>
</html>
JavaScript
JavaScript,简称js,是一种脚本语言,需要配合HTML一起使用,主要是让HTML出现动态效果。
JS由ECMAScript语法，DOM，BOM组成
语法：声明变量，运算，流程控制，对象等等
DOM：文档对象模型，将html页面比作一个文档，形成节点树
BOM：浏览器对象模型，将浏览器比作对象，可以对浏览器进行操作
引入方式
创建HTML项目，创建HTML页面，在HTML页面引入JS
有两种方式：
1 、在html内直接写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- js代码建议放在文档的最后 -->
<!-- 使用<script>标签引入js -->
<!-- 页面加载至此处,代码就会执行 -->
<script type="text/javascript">
// 在此处写js代码
// 输出语句,输出到开发者工具的控制台
console.log("js日志...")
</script>
</body>
</html>
2、html也js分离
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHFUwBcR-1661343911724)(D:\千峰上课\Every Day Stage2\day32\code\day32_css_js.assets\image-20220824145726566.png)]
JS语法
变量
js变量，是弱类型语言，声明变量只需要var关键字
也可使用基本数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 声明变量
// var 变量名 = 值;
var a = 1;
var b = "我爱js";
var c = 1.1;
var d = false;
var e = new Date();
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
// 常量,不能重新分配值
const f = 3.14;
console.log(f);
// f = 3.5; // 会报错,学会查看开发者工具中控制台报错
console.log(f);
</script>
</body>
</html>
基本数据类型
JavaScript有五种基本数据类型：
Number 数字
String 字符串
Boolean 布尔类型
underfined 未定义
Null 空
// 声明变量
// var 变量名 = 值;
var a = 1;
var b = "我爱js";
var c = 1.1;
var d = false;
var e = new Date();
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
// 打印类型,typeof(参数),该方法会将类型返回
console.log("-----------------");
console.log(typeof(a)) // number
console.log(typeof(c)) // number
console.log(typeof(b)) // string
console.log(typeof(d)) // Boolean
console.log(typeof(e)) // object类型,不是基本类型,是引用类型
console.log(typeof(h)) // 未定义
字符串方法
<script type="text/javascript">
var str = "Java-Script";
console.log(str.length); // 长度
console.log(str.charAt(1));// 根据下标找字符
console.log(str.indexOf("cr"));// 根据字符串找下标
console.log(str.substring(4)); // 参数1 从哪里开始截取,参数2可选
console.log(str.substring(1,3)); // 参数1 从哪里开始截取,参数2结束下标
console.log(str.split("-")); // 按照指定字符拆分,返回的是数组
</script>
引用类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 声明一个引用对象
var user = {
id:1,
name:"狗蛋",
age:18,
sex:false,
address:{
contry:"中国",
province:"河南",
city:"郑州"},
};
// 其实这就是JSON,后续学过框架,学过前后端分离开发,学过RESTFul之后
// JSON会用的很多。
// 获得属性
console.log(user.name+"---"+user.age)
// 更改属性
user.name = "杉杉";
console.log(user.name+"---"+user.age)
</script>
</body>
</html>
数组类型
<script type="text/javascript">
/*
长度不固定,类型不固定
*/
var arr1 = []; // 空数组
arr1[0] = 1; // 给值
var arr2 = [1,"二",false,new Date];
var arr3 = new Array(3); // 指定长度创建数组,但是长度没有限制
arr3[0] = 0;
arr3[1] = 1;
arr3[2] = 2;
arr3[3] = 3;
console.log(arr3);
/**
* 使用数组:
*/
// 取值
console.log(arr3[0])
// 赋值
arr3[0] = 10;
console.log(arr3[0])
console.log("--------");
// 方法
// length:数组长度
// join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
// pop():返回并删除最后元素
// push()：向数组的末尾添加一个或更多元素，并返回新的长度
// reverse();反转数组
// sort();排序
var arr4 = [1,2,3,4,5];
console.log(arr4.length);
console.log(arr4.join("-")); // 与字符串方法split相反
console.log(arr4.pop());
console.log(arr4);
console.log(arr4.push(6));
console.log(arr4);
console.log(arr4.reverse());
console.log(arr4.sort()); // 只会升序排序
</script>
日期类型
<script type="text/javascript">
var date = new Date();// 当前时间
console.log(date);
console.log(date.getFullYear()); // 获得年
console.log(date.getMonth() + 1); // 获得月份,0-11
console.log(date.getDate());// 日
console.log(date.getDay());// 周
console.log(date.getTime());// 毫秒值
var date2 = new Date(1); // 毫秒,从1970-1-1
console.log(date2)
// 按照本地格式打印时间
console.log(date.toLocaleString())
</script>
运算符
算术运算,逻辑,关系运算,三目运算
多了一个===
判断内容 1"1" true
=判断内容和数据类型 1=“1” false
<script type="text/javascript">
var a = 10;
var b = 1;
// 算术运算
// console.log(a+b);
// console.log(a-b);
// console.log(a*b);
// console.log(a/b);
// console.log(a++); // ++在后,先使用,再自增
// console.log(a);
// && 一错就错,全对才对
if(a > b && a < b) {
// console.log("&& ==> a>b")
} else{
// console.log("&& ==> ERROR")
}
// || 一对就对,全错才错
if(a > b || a < b) {
// console.log("|| ==> OK")
} else{
// console.log("|| ==> ERROR")
}
if(false && a++) {
console.log("1 ==> "+a)
} else{
console.log("2 ==> "+a)
}
// 非!
console.log(!true)
/**
* 关系运算符
* > < >= <= !=
* 判断是否相等 ==和===
* == 只是判断值是否相等
* === 判断值和类型都要相等
*/
var x = 1;
var y = "1";
if(x === y) {
console.log("x==y")
}else{
console.log("x!=y")
}
var i = 1;
var j = 2;
console.log(i < j ? "i":"j");
</script>
分支
if
if…else…
if…elseif…else…
switch…case
循环
while
do…while
for
<script type="text/javascript">
var i = 1;
while(i < 11){
console.log(i);
i++;
}
console.log("--------");
var j = 1;
do{
console.log(j);
j++;
}while(j < 11);
console.log("--------");
for(var k = 1;k < 11;k++) {
console.log(k)
}
// 作业: 遍历数组
</script>
函数【重点】
函数，就是类似Java中的方法，可以完成某些功能
关键字是function
返回值可直接写return，不需要定义返回值类型，参数不需要定义数据类型，直接写就行
function 函数名([参数1,...]) {
[return 值;]
}
// 方法定义上没有返回值类型
// 参数列表中也不需要设置数据类型,也不需要写var
// 函数如果需要返回数据,直接ruturn 值;
// 调用
函数名([参数]);
与java的区别：
输出语句不一样
java用Systeam.out.publicln()
js用conlole.log（）
定义变量用var，
声明常量const，且不可改变
基本数据类型五种
Number,String,Boolean,undefined，null
创建对象
var 对象名 = {
属性：属性值
...
}
声明函数（方法）
function 函数名([参数1,...]) {
[return 值;]
}
console.log(k)
}
// 作业: 遍历数组
</script>
### 函数【重点】
函数，就是类似Java中的方法，可以完成某些功能
关键字是function
返回值可直接写return，不需要定义返回值类型，参数不需要定义数据类型，直接写就行
```js
function 函数名([参数1,...]) {
[return 值;]
}
// 方法定义上没有返回值类型
// 参数列表中也不需要设置数据类型,也不需要写var
// 函数如果需要返回数据,直接ruturn 值;
// 调用
函数名([参数]);
与java的区别：
输出语句不一样
java用Systeam.out.publicln()
js用conlole.log（）
定义变量用var，
声明常量const，且不可改变
基本数据类型五种
Number,String,Boolean,undefined，null
创建对象
var 对象名 = {
属性：属性值
...
}
声明函数（方法）
function 函数名([参数1,...]) {
[return 值;]
}