1.无序列表
<ul type="circle">
<li>橘子</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<ul type="disc">
<li>橘子</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<ul type="square">
<li style="color:red;">橘子</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
2.有序列表
<ol type="1">
<li>橘子</li>
<li>葡萄</li>
<li>樱桃</li>
</ol>
<ol type="a">
<li>橘子</li>
<li>葡萄</li>
<li>樱桃</li>
</ol>
<ol type="I">
<li>橘子</li>
<li>葡萄</li>
<li>樱桃</li>
</ol>
3.自定义列表
<dl>
<dt>计算机学院</dt>
<dd>软件工程</dd>
<dd>网络工程</dd>
<dd>计算机应用</dd>
<dt>音乐系</dt>
<dd>唱</dd>
<dd>唱</dd>
<dd>唱</dd>
</dl>
4.列表样式
<style>
ul{
/**设置列表样式**/
list-style-type:circle;
/**设置列表样式为图像**/
list-style-image:url(images/arrow.png);
/**设置列表样式位置 : 默认为 outside 外侧 / inside内侧*/
list-style-position:inside;
/*简写:**/
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>橘子</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
</body>
5.表格跨行跨列
<table border="1">
<tr>
<td colspan="3">三年级五班学员语文成绩和数学成绩</td>
</tr>
<tr>
<td rowspan="2">白杨</td>
<td>语文</td>
<td>86</td>
</tr>
<tr>
<td>数学</td>
<td>96</td>
</tr>
<tr>
<td rowspan="2">杨晨</td>
<td>语文</td>
<td>59</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
6.数据劫持
var man = {
age: 8,
state: '儿童',
sex: '女',
name: "张三"
}
// man.age = -2500; //这样设置无法对数据可靠性,安全性做出处理 ,很容易造成数据的混乱
//拦截处理 : get(在获取属性时会自动触发) / set (在设置属性时会自动触发) , 在这种拦截机制中做出需要拦截的操作
var hanlder = {
set: function (target, key, value) {
console.log('正在准备设置对象的属性...',target, key, value);
if(key == "age"){
if(value>=0 && value<=120){
target.age = value;
if(value>=0 && value<=12){ //实现在每次修改年龄的时候 ,根据修改年龄的数值决定对象属性state的状态 ,此处就与age属性实现了数据的绑定,而不需要在每次设置age属性的时候,都要去写一遍判断逻辑和操作state
target.state="儿童"
}else if(value>=13 && value <18){
target.state = "少年";
}else if(value>=19 && value <30){
target.state = "青年";
}else{
target.state = "老年人";
}
}else{
throw new Error('年龄输入不合法!!');
}
}
},
get: function (target, key) {
// console.log('此处应该是获取代理目标对象属性的拦截操作...',target,key);
switch (key) {
case "age":
if (target.sex == '女') {
return '女孩子的年龄一般不能问的!!';
} else {
return target.age;
}
break;
default:
return target[key];
}
// return '数据保密!';
}
}
//实例化一个proxy , 其实就是对外提供的一个操作代理对象(操作时修改的就是prxoy对象,但是它会将数据再修改到目标对象上)
var proxy = new Proxy(man, hanlder);
console.log('年龄为:', proxy.age); //此时会触发proxy中的get ,因为在获取age属性
proxy.age = 30;
7.async数据异步操作
//async 函数 ,异步函数 : 目的就将异步操作变成同步操作的方式编写
/**
使用关键字 async 声明一个异步函数 , 在调用异步函数的之前使用await关键配合使用,来声明当前执行的异步需要等待 ,等await关键字中的函数执行完之后 ,才会执行后边的代码
*/
async function timeout(time) {
return new Promise((resolve, reject) => {
setTimeout(() => { //模拟一个异步操作,比如说是一次ajax交互
resolve(123);
}, time)
})
}
async function hello(title, time) {
let s = null;
await timeout(time).then((res) => {
// console.log(res);
s = res;
});
console.log(title + s);
}
hello("教育改变生活!!!!", 5000);