一、上节回顾
1、inline-block
默认会有3px宽度
2、改造标签
网页小三角造成视觉效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小三角</title>
<style>
.icon{
display: inline-block;
border-top: 30px solid transparent;
border-right: 30px solid red;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
3、img标签
img边框在IE里会默认显示出来，所以要设置boder=0
4、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.c1[eric=‘aa‘]{
color: red;
}
</style>
</head>
<body>
<div>
<div class="c1" eric="aa">1</div>
<div class="c1">2</div>
<div class="c1" eric="aa">3</div>
<div class="c1" eric="a">4</div>
<div class="c1">5</div>
</div>
</body>
</html>
5、清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.left{
float: left;
}
.clearfix:after{
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="c1">hello</div>
<div class="c2">world</div>
<div style="background-color: red" class="clearfix">
<div class="left" style="height: 100px;background-color: green">111111</div>
<div class="left">88888</div>
</div>
</body>
</html>
6、标签默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签默认值</title>
<style>
.c1{
color:red !important;
}
.c2{
color:green;
}
</style>
</head>
<body>
<input value="123" />
<textarea>456</textarea>
<select>
<option>上海</option>
<option selected="selected">北京</option>
<option>广州</option>
</select>
<div class="c1 c2">最牛优先级</div>
</body>
</html>
二、JavaScript
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的，通过浏览器内置的JavaScript解释器来解释执行。
1、存在形式
第一种方式：导入JS文件
<script type"text/javascript" src="JS文件"></script>
第二种方式：
<script type"text/javascript">
Js代码内容
</script>
2、放置位置
第一种方式：放置在HTML的head中
第二中方式：(推荐)放置在HTML的body代码块底部
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
3、变量
局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
- 局部变量
以var开头，形如var a = 123;
- 全局变量
name = ‘eric‘;
4、注释
此注释仅在Script块中生效
- 单行注释
//
- 多行注释
/* */
5、数据类型
- 原始数据类型
数字：JavaScript中不区分整数值和浮点数值，所有数字均用浮点数值表示。
parseInt() 将某值转换成数字，不成功则NaN
parseFloat() 将某值转换成浮点数，不成功则NaN
NaN，非数字，可使用 isNaN(num) 来判断。
Infinity，无穷大，可使用 isFinite(num) 来判断。
name = ‘eric‘;
age = Number(28);
var a = 111
parseInt("3.6");
parseFloat("4.9");
字符串：字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$‘：位于匹配子串右侧的文本
$$：直接量$符
跑马灯示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
</head>
<body>
<div id = "i1" style="display: inline-block;background-color:green;color:white">欢迎领导莅临指导！</div>
<script>
setInterval("f1()",300);
function f1(){
//js获取某一个标签的id,这里id = i1
var tag = document.getElementById(‘i1‘);
//获取标签的内容
var text = tag.innerText;
var a = text.charAt(0);
var sub = text.substring(1,text.length);
var new_str = sub + a;
tag.innerText = new_str;
}
</script>
</body>
</html>
布尔值：
布尔类型仅包含真假，与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且