Day48
补充
垂直居中
.xxx{
display: flex; /* 设置弹性盒*/
justify-content: center flex-start;
}
1.HTML5新特性
对于HTML5新特性来说，便签就是一个div
1.1 新增语义化标签
| 标签 | 描述 |
|---|---|
|
| 头部标签 |
| 导航标签 | |
| 内容标签 | |
| 块级标签 | |
| 侧边栏标签 | |
| 尾部标签 |
<body>
<style type="text/css">
header,nav,article,aside,footer,section{
background-color: #87A442;
text-align: center;
border: black 1px solid;
border-radius:20px;
margin: 10px;
padding: 10px;
}
header{
height: 120px;
}
nav{
height: 50px;
}
article{
width: 46%;
height: 120px;
float: left;
}
aside{
width: 46%;
height: 120px;
float: right;yu
}
footer{
clear: both;
height: 120px;
}
section{
height: 70px;
}
</style>
<header>头部标签 - header</header>
<nav>导航标签 - nav</nav>
<div>
<article>内容标签 - article
<section>块级标签 - section</section>
</article>
<aside>侧边栏标签 - aside</aside>
</div>
<footer>尾部标签 - footer</footer>
</body>
运行结果：
1.2 新增表单内容
<form action="#" method="post">
日期选择器：<input type="date"/><br/>
时间选择器：<input type="time"/><br/>
邮箱输入框：<input type="email"/><br/>
数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
URL输入框： <input type="url" list="url_list"/>
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="谷歌" value="http://www.google.com" />
<option label="百度一下" value="http://www.baidu.com" />
</datalist><br/>
<input type="submit" value="提交"/>
</form>
运行结果：
2.Javascript
2.1 什么是javascript
1.JavaScript的构成：标准script、DOM、BOM
2.作用：事件响应、操作对象
Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
**特点：**交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）
安全性（不可以直接访问本地硬盘）
跨平台性（由浏览器解析执行，和平台无关）
一个完整 JavaScript实现由以下3个部分组成
注意：Javascript vs Java
JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。JavaScript是一种弱类型语言，java是强类型语言。
3.JS基础篇
3.1 javascript版的HelloWorld
HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
<title></title>
<script type="text/javascript">
//弹框
//alert("HelloWorld...1");
//控制台输出
console.log("HelloWorld...1");
</script>
</head>
<body>
<script type="text/javascript">
//弹框
//alert("HelloWorld...2");
//控制台输出
console.log("HelloWorld...2");
</script>
</body>
3.2 定义变量
语法格式：var 变量名 = 值;
注意：
1.var表示变量
2.变量的类型随着值的类型发生改变
<body>
<script type="text/javascript">
var v = 100;
console.log(v);
v = "abc";
console.log(v);
</script>
</body>
3.3 基本数据类型(重要)
分类：
number - 数值型
string - 字符串类型
boolean - 布尔类型
undefined - 未定义类型
null - 空类型
Javascript的数据类型主要分为
基本数据类型
非基本数据类型（对象）
注意：JavaScript 中变量的值决定了变量的数据类型。
<body>
<script type="text/javascript">
//number - 数值型
//注意：number类型不分整数和小数
var num = 100;
console.log(num);//100
num = 123.123;
console.log(num);//123.123
//string - 字符串类型
//注意：string类型的值可以用单引号也可以用双引号括起来
var str = 'abc';
console.log(str);
str = "abc";
console.log(str);
//boolean - 布尔类型
var bool = true;
console.log(bool);//true
bool = false;
console.log(bool);//false
//undefined - 未定义类型
var v;
console.log(v);
v = undefined;
console.log(v);
//null - 空类型
var xx = null;
console.log(xx);
</script>
</body>
3.3.1 数值型 number
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
注意：number类型不分整数和小数
特殊点：
Infinity表示无穷大
两个正无穷大相加会是一个什么结果？正负相加—NaN
注意：NaN == NaN吗？如何正确判断是否为NaN
3.3.2 字符串类型 string
注意：string类型的值可以用单引号也可以用双引号括起来,字符串可以是引号中的任意文本
注意：string加号是字符串拼接符，其余是算数运算符(转换为数字类型)
3.3.3 布尔类型 boolean
布尔（逻辑）只能有两个值：true 或 false。
注意：
1.“”、0、undefined、null表示false
2.new String()初始化是一个object
3.""初始化是一个string
3.3.4 未定义类型 undefined
访问一个不存在的变量或使用已声明但未赋值的变量，都会得到一个值undefined，undefined类型的值只有一个undefined
3.3.5 空类型 null
被赋予null值的变量通常认为已经定义了，只是不代表任何东西
3.3.6 注意
1.== vs ===：
==判断两个值是否相等
===判断两个值+类型是否相等
2.null 和 undefined 的区别
null： object类型，代表“空值”，代表一个空对象指针。null表示"没有对象"，即该处不应该有值。
undefined： undefined类型。undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
3.JS 中 typeof 与 instanceof 的区别
typeof 可用来获取检测变量的数据类型，typeof 运算符返回一个用来表示表达式的数据类型的字符串。其实就是判断参数是什么类型的实例，就一个参数。instanceof判断引用是否是某个数据类型的
<body>
<script type="text/javascript">
//number类型的特殊点
//注意：Infinity表示无穷大
console.log(Infinity + (-Infinity));//NaN - Not a Number
//string类型的特殊点
//注意：string加号是字符串拼接符，其余是算数运算符
var str1 = "10";
var str2 = "3";
console.log(str1 + str2);//103
console.log(str1 - str2);//7
console.log(str1 * str2);//30
console.log(str1 / str2);//3.3333333335
console.log(str1 % str2);//1
//boolean类型的特殊点
//注意：""、0、undefined、null表示false
//undefined vs null
var v1 = undefined;
var v2 = null;
console.log(typeof v1);//undefined
console.log(typeof v2);//object
//== vs ===
//==判断两个值是否相等
//===判断两个值+类型是否相等
var v3 = 10;
var v4 = "10";
console.log(v3 == v4);//true
console.log(v3 === v4);//false
</script>
</body>
3.4 数组
JS中的数组是可以添加、删除元素，而Java中的只能查询和修改
<body>
<script type="text/javascript">
var arr = ["小王","小杨","小彭"];
//设置指定下标上的元素
arr[0] = "小平";
//获取指定下标上的元素
console.log("获取指定下标上的元素：" + arr[0]);//小平
//获取元素个数
console.log("获取元素个数：" + arr.length);
//添加元素
arr[3] = "小陈";
arr[4] = "小李";
arr[10] = "小燕";
//删除元素
delete arr[4];
console.log("--------------------");
//遍历数组 - for循环
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
console.log("--------------------");
//遍历数组 -- for-in
//注意：遍历有效元素的下标（undefined的元素认为是无效元素）
for(var index in arr){
console.log(arr[index]);
}
</script>
</body>
3.5 扩展
3.5.1 常量
概念：使用 const 声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是var
eg：const PI = 3.14
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
3.5.2 输入与输出
输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出：
alert()、document.wirte()以数字为例，向
alert()或document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。输入
向
prompt()输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
3.5.3 let与var的区别
使用
let时的注意事项：1.允许声明和赋值同时进行
2.不允许重复声明
3.允许同时声明多个变量并赋值
4.JavaScript 中内置的一些关键字不能被当做变量名
使用
var时的注意事项：1.允许声明和赋值同时进行
2.允许重复声明
）
3.5.2 输入与输出
输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出：
alert()、document.wirte()以数字为例，向
alert()或document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。输入
向
prompt()输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
3.5.3 let与var的区别
使用
let时的注意事项：1.允许声明和赋值同时进行
2.不允许重复声明
3.允许同时声明多个变量并赋值
4.JavaScript 中内置的一些关键字不能被当做变量名
使用
var时的注意事项：1.允许声明和赋值同时进行
2.允许重复声明
3.允许同时声明多个变量并赋值
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
