38
HTML快捷语法
CSS弹性盒子
动画
JS（数据类型 运算符 语法 自动数据类型转换）
HTML快捷语法
CSS弹性盒子
动画
JS（数据类型 运算符 语法 自动数据类型转换）
一.Emmet 语法 速查表（HTML快捷语法）
Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作。
1.调用方法
Emmet使用Tab作为自动生成HTML代码的触发器。
输入完生成HTML的缩写语句后，按下Tab，即可生成对应的HTML代码
- html:5 或!：用于HTML5文档类型
- html:xt：用于XHTML过渡文档类型
- html:4s：用于HTML4严格文档类型
2.相关语法
后代：>
Child: >
缩写：div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
兄弟：+
Sibling: +
缩写：div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
上级元素：^
Climb-up: ^
缩写：div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
缩写：div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组：（）
Grouping: ( )
缩写：div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
缩写：(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
重复多份：*
Multiplication: *
缩写：ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
编号：$
Item numbering: $
缩写：ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
缩写：h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
缩写：ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
缩写：ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
缩写：ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
ID和类属性
ID and CLASS attributes
缩写：#header
<div id="header"></div>
缩写：.title
<div class="title"></div>
缩写：form#search.wide
<form action="" id="search" class="wide"></form>
缩写：p.class1.class2.class3
<p class="class1 class2 class3"></p>
自定义属性
Custom attributes
缩写：p[title="Hello world"]
<p title="Hello world"></p>
缩写：td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
缩写：[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文本：{ }
Text: { }
缩写：a{Click me}
<a href="">Click me</a>
缩写：p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
隐式标签
Implicit tag names
缩写：.class
<div class></div>
缩写：em>.class
<em><span class="class"></span></em>
缩写：ul>.class
<ul> <li class="class"></li></ul>
缩写：table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
3.HTML
*所有未知的缩写都会转换成标签，例如，foo → *
缩写：!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
本文所列仅为最常用的一些语法和缩写，有关其他较为少用的可参考Emmet官方文档
**特别声明：**文中演示代码来自于官网API：http://docs.emmet.io/cheat-sheet/
## 二.CSS弹性盒子布局
（一）css的属性详解.pptx
链接：https://pan.baidu.com/s/1x6guVTonXiDUFZCZtfFKcQ](https://pan.baidu.com/s/1x6guVTonXiDUFZCZtfFKcQ )
提取码：z4r7
（二）CSS3弹性盒布局方式.pdf
链接：https://pan.baidu.com/s/1tVzhTL9LnfmmQFMsjOFeTg
提取码：iiep
（三）例子：
1.[3d旋转.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 150px;
width:150px;
background: url(img/logo.png);
background-size: 100% 100%;
transform: rotateY(0deg);
animation-name: dh;
animation-duration: 1s;
}
@keyframes dh{
from{
height: 150px;
width:150px;
background: url(img/logo.png);
background-size: 100% 100%;
transform: rotateY(0deg);
}
to{
height: 150px;
width:150px;
background: url(img/logo.png);
background-size: 100% 100%;
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
2[CSS弹性盒子布局.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
height: 600px;
width:800px;
border: 1px solid black;
/* 将外层设置为弹性盒子 */
display: flex;
/* justify-content: center; */
/* justify-content:space-around; */
flex-direction:row;
/* 当所有子层的宽度和高度超过了盒子是否要换行 */
/* flex-wrap:wrap;
align-content:space-between; */
}
.mydiv {
height: 100px;
width: 100px;
border: 1px solid black;
/* 让盒子里面的子层自动适配 */
/* margin:20px auto; */
}
</style>
</head>
<body>
<div id="box">
<div class="mydiv" style="order: 3;">1</div>
<div class="mydiv" style="order: 2;">2</div>
<div class="mydiv" style="order: 1;">3</div>
</div>
</body>
</html>
-
[index.html]
-
[transform动画.html]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { height: 200px; width: 200px; border: 1px black solid; margin-top: 50px; } div:first-child { background: red; /* 位移动画 左右移动 上下移动 */ /* transform: translate(100px,0px); */ transition: transform 1s; } div:first-child:hover { transform: translate(300px, 0px); transition: transform 1s; } div:nth-child(2) { background: gold; /* 旋转动画 */ /* transform: rotate(45deg); */ } div:nth-child(2):hover { transform: rotate(45deg); } div:nth-child(3) { background: cyan; /* 缩放动画 */ /* transform: scale(2); */ } div:nth-child(3):hover { transform: scale(2); } div:nth-child(4) { background: #FFFF00; } div:nth-child(4):hover { /* 扭曲动画 */ transform: skew(15deg, 25deg); } </style> </head> <body> <div id="d1"> </div> <div id="d2"> </div> <div id="d3"> </div> <div id="d4"> </div> </body> </html> -
[过渡动画.html]
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 500px; width: 500px; border: 1px black solid ; background-color: red; transition-property: width; transition-duration: 1s; transition-delay: 0s; transition-timing-function: linear; } div:hover{ width: 1500px; background-color: yellow; transition-property: width,background-color; transition-duration: 1s; transition-delay: 0s; transition-timing-function: linear; } </style> </head> <body> <div id=""> </div> </body> </html>
6.[过渡动画2.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 500px;
width: 500px;
border: 1px black solid ;
background-color: red;
transition-property: width;
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: linear;
}
div:hover{
width: 1500px;
background-color: yellow;
transition-property: width,background-color;
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
7.[盒子模
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.flex-container {
/* 设置为弹性盒子 */
display: flex;
width: 400px;
height: 550px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
align-self: stretch;
}
</style>
</head>
<body>
<div class="flex-container">
<!-- 一个标签可以设置多个 class 属性值 -->
<div class="flex-item item1">flex-start</div>
<div class="flex-item item2">flex-end</div>
<div class="flex-item item3">center</div>
<div class="flex-item item4">baseline</div>
<div class="flex-item item5">stretch</div>
</div>
</body>
</html>
8.[漂浮广告页.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
height: 300px;
width: 150px;
background: url(img/girl1.jpg);
background-size: 100% 100%;
position: absolute;
/* 开启动画 */
animation-name:guangao;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-direction:alternate;
animation-play-state: running;
}
#wai:hover{
animation-play-state:paused;
cursor: pointer;
}
#nei{
height: 30px;
width: 150px;
background: rgba(0,0,0,0.3);
color: white;
}
/* 自定义动画 */
@keyframes guangao{
10%{
left:500px;
background: url(img/girl2.jpg);
background-size: 100% 100%;
}
20%{
top:100px;
background: url(img/girl3.jpg);
background-size: 100% 100%;
}
30%{
top:100px;
left:300px;
background: url(img/girl4.jpg);
background-size: 100% 100%;
}
50%{
top:600px;
left:800px;
background: url(img/girl4.jpg);
background-size: 100% 100%;
}
60%{
top:20px;
left:20px;
background: url(img/girl5.jpg);
background-size: 100% 100%;
}
80%{
top:20px;
left:20px;
background: url(img/girl4.jpg);
background-size: 100% 100%;
}
90%{
top:620px;
left:320px;
background: url(img/girl1.jpg);
background-size: 100% 100%;
}
100%{
top:200px;
left:920px;
background: url(img/girl2.jpg);
background-size: 100% 100%;
}
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
<span onclick="gb()">关闭</span>
</div>
</div>
<script type="text/javascript">
function gb(){
document.getElementById("wai").style.display="none";
}
</script>
</body>
</html>
-
[修改元素自带样式.html]
-
[旋转动画.html]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #wai{ height: 300px; width: 200px; border: 1px black solid; display: flex; } #nei{ height: 115px; width: 150px; margin: auto; border-width: 0px; transition:transform 1s ; } #nei:hover{ transform: rotate(360deg); transition:transform 1s ; } #d2{ margin-top: 100px; height: 100px; width: 250px; border: 1px black solid; display: flex; } #lc{ height: 80px; width: 230px; margin: auto; transition:transform 0.5s ; transform: scale(0.8); } #lc:hover{ transform: scale(0.8); transform: rotate(10deg); } </style> </head> <body> <div id="wai"> <div id="nei"> <img src="img/jiuye.png" > </div> </div> <div id="d2"> <div id="lc"> <img src="img/xinlang.png" > </div> </div> </body> </html>
10.[自定义动画 - 副本.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 200px;
width: 200px;
background: red;
/* 开启动画
animation: mydh 2s 1s; */
animation-name: mydh;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: 10;
animation-timing-function: linear;
/* 动画执行完停留 backwards最开始的那一帧 forwards 停留在最后一帧 */
/* animation-fill-mode:forwards; */
/* normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
*/
/* animation-direction:alternate-reverse; */
/* 动画开启或暂停 */
animation-play-state: running;
}
/* 自定义动画 */
@keyframes mydh {
from {
height: 200px;
width: 200px;
background: red;
}
to {
width: 1500px;
background: yellow;
}
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
-
自定义动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 200px; width: 200px; background: red; /*开启动画 */ animation: mydh 2s 1s; } /* 自定义动画 */ @keyframes mydh{ from{ height: 200px; width: 200px; background: red; } to{ height: 500px; width: 500px; background:yellow; } } </style> </head> <body> <div id=""> </div> </body> </html> -
[自 [自定义动画细分.html]
三.JS
- JavaScript：客户端脚本语言
-
发展史：
-
1992年，nombas公司 C–,最早的客户端脚本语言。专门用于表单验证。 后更名为 scriptEarth
-
网景 scriptlive，后来找到sun公司合作，共同开发出 JavaScript
-
微软抄袭JavaScript 定义了 JScript
-
ECMA(欧洲计算机制造商协会)定义了一套客户端脚本语言的规范 ECMAScript规范
JavaScript = ECMAScript规范 + js自己特有的东西(BOM/DOM)
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入外部JS文件 --> <script src="js/public.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> alert("Hello JS"); </script> </head> <body> JavaScript:历史 用户名 和 密码 ----->发往后台 ----->提示 用户名和密码格式错误 校验数据格式，放在客户端校验（浏览器端校验）------>发送后台----->用户名和密码是否 浏览器没有校验数据功能。 Numbas 设计出了一种语言 C-- 没有火起来 网景公司------浏览器端校验思想挺好-------SUN------------正式改名为JavaScript 微软 IE JScript ECMA------ECMAScript7 DOM+BOM 浏览器内核：渲染引擎（HTML CSS 图片）和JS引擎（解析执行JS代码） JS:由浏览器的内核中JS引擎来解析执行。 JS根HTML的结合方式 1.内部方式，我们在HTML页面，提供一对 script标签 然后将JS代码写在这对标签内部 那么这对script标签 放在页面的任意位置都可以，当时你放下面和放上面他们在加载顺序上有区别。 目前给我放在head标签之间 2.外部方式：将JS代码单独抽取到一个文件当中，让后页面进行引用，为了提高JS代码的复用性。开发首选 </body> </html>
-
-
js与html结合方式
-
内部js：
- 定义
-
-
alert(1*“100”+200+1*“200”);
```
比较运算符
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//var num=NaN;
//NaN 参与比较运算都是false 除了 !=
//alert(NaN==NaN); //false
//alert(NaN!=NaN); //true
//JS中比较两个字符串字面内容是否相同使用==来比较，根据字典顺序比较
//alert("abc"=="abcd");
//alert(true==1);
//lert(false==0);
//== === 全等于：先比较数据类型是否一致，如果数据类型不一致，直接false
alert("100"==100);
alert("100"===100);
```
* 自动类型转换
* ```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// && || !
/* //数字类型转布尔：0 转换成false 非0转成true
alert(!2);
if(-10){
alert(true);
}else{
alert(false);
} */
//JS中这个分号，不写也可以
/* var i=0;
while(1){
//alert('ture');
if(i>10){
break;
}
console.log("死循环");
i++;
}
*/
//字符串转布尔类型：空串转成false 非空串转true
// if("abc"){
// alert('ture');
// }else{
// alert(false);
// }
/* var v=NaN; //NaN转布尔 转成false
var vv; // undefined 转换布尔 转成false
if(undefined||NaN){
alert(true)
}else{
alert(false);
} */
var obj=new Object();
//对象转布尔转换成true null转换成false
obj=null;
if(obj){
alert(true)
}else{
alert(false);
}
//NaN 参与数学运算结果都是NaN
alert(NaN+2*3/2);
alert(+"abc"+2*3/2);
</script>
</head>
<body>
</body>
</html>
```
* 对象：
* js是一门基于对象的语言
* 基于对象：不能由原生的对象派生出新的对象。换句话说，不存在继承关系
* Function(*****): 代表函数
* 创建方式：
* var fun = new Function("参数列表","方法体");
* function 方法名称(形参列表){
方法体
}
* var fun = function(){
}
* 属性：
length：形参的个数
* 使用：
* 函数名称(实参列表);
* 特点：
1.函数的调用，只与函数名称有关，与实参列表无关
2.函数内部有内置对象 arguments 封装实参数组
* void运算符：拦截返回值，一般结合a标签一起使用
* 注销a标签跳转功能，保留可被点击的功能
<a href="javascript:void(0);" onclick="exit();">退出</a>
自调用函数：(function () { /* code */ } ());
JS中的内置对象
(一)：String 对象
1. 定义方式1： String str=new String("abckdddd");
定义方式2：var str="我爱你爱你";
2. 属性：length: 字符串的长度
3 方法：
charAt() 返回在指定位置的字符。
例子：var v="abcd";
var a=v.charAt(2);
concat() 连接字符串。
例子：var v="ab"; var a="cd";
var z=v.concat(a);
indexOf() 根据字符检索此符在字符串中的索引。
例子：var v="abcde";
var z=v.indexOf("c");
lastIndexOf() 从后向前搜索字符串。
substring() 提取字符串中两个指定的索引号之间的字符。
var v="abcde";
var z=v.substring(0,3); 含头不含尾
toLowerCase() 把字符串转换为小写。
例子：
var str = "Hello World!";
document.write(str.toLocaleLowerCase());
toUpperCase() 把字符串转换为大写。
replace() 替换字符串。
例子：
var v="abceaaaa";
var z=v.replace("a","h"); 参1：被替换的字符/或字符串 参数2：替换成哪个字符/或字符串
split() 把字符串分割为字符串数组。
例子：
var v="a#b#c#d";
var z=v.split("#");
* trim():去除字符串两端的空格
例子：
var v=" abcd ";
var z=v.trim();
（二）：Number对象
定义方式：var num=new Number(555.6666);
var num1=Number(5694);
方法：
toString() 把数字类型转成字符串类型
例子：
var v=Number(695444);
var z=v.toString();
toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位
例子：
var v=Number(3.5999999999999);
； var z=v.toPrecision(4);
（三）：Date 对象
定义方式： var myDate=new Date();
方法：
getTime() 获取从1970-01-01 00:00：00 到当前的毫秒值
toLocaleString() 将时间转化成本地格式 利于阅读
例子
var myDate=new Data();
var time=myDate.getTime();
var localTime=time.toLocaleString();
（四）：Math 对象 特点： 该对象不需要创建 直接对象名点上方法
Math.random()；随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整
（五）：数组对象：
定义方式： var arr=new Array(2,6,8);
var arr1=[6,“a”,6];
属性： length 数组的长度
* 特点：
* 在js中数组可以存储任意类型元素
* 在js中数组的长度可变
* 方法：
concat() 连接两个或更多的数组，并返回结果。
例子：var v=[1,2]; var v2=[3,4];
var z=v.concat(v2);
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var v=[1,2,3];
var z=v.join("-"); 给数组元素之间添加分隔符
pop() 删除并返回数组的最后一个元素
例子：
var arr = [1, 6, 20];
alert(arr.pop());
push() 向数组的末尾添加一个或更多元素，并返回新的数组长度。
例子：var arr = [1, 6, 20];
alert(arr.push(28));
reverse() 颠倒数组中元素的顺序。
sort() 对数组的元素进行排序 从小到大
* 默认排序方式：字典顺序
* 要想实现自己的比较方式，需要传入比较器方法对象
例子：var arr = [1, 6, 20, 100];
alert(arr.sort(bijiao));
function bijiao(a, b) {
if(a > b) {
return 1;
} else if(a == b) {
return 0;
} else {
return -1;
}
//return a-b;
}
遍历数组：
(六）Global：全局方法对象
* 特点:该对象中的方法调用，不需要对象的引用，可直接使用
* isNaN() 检查某个值是否是NaN。
例子：var v=NaN; var v1="abc"; var v2=123;
var b=isNaN(v);
var b1=isNaN(v1);
var b2=isNaN(v2);
* parseInt() 解析一个字符串并返回一个整数。
* 从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
比正号强大些 var v=+“123”；
例子： var v=“152abc”
var v=“123”;
var z=parseInt(v)+1;
RegExp(**):正则表达式对象
* BOM：
* DOM：
2323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
