JavaScript与CSS属性对照表
JavaScript与CSS属性对照表是js初学者必备的基础知识，下表中列出了两种语法，可用于速查和参考学习，希望对有学习兴趣的朋友有所帮助！
2024年09月05日
JavaScript与CSS属性对照表
JavaScript与CSS属性对照表是js初学者必备的基础知识，下表中列出了两种语法，可用于速查和参考学习，希望对有学习兴趣的朋友有所帮助！
2024年09月05日
前言
看了一下各种面试题，选择题是必有的
所以我整理了一些经典的前端面试选择题，希望能对大家日后找工作有所帮助！
1、在 css 选择器当中，优先级排序正确的是（）
A、id选择器>标签选择器>类选择器
2024年09月05日
CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读。
下面介绍常见的CSS简写规则：
2024年09月05日
在本文中，我们将讨论无序列表，在制作现代网站和应用程序时，无序列表的发展是不可避免的。
你是否做了很多很多名单的粉丝？我也不是。但是，这里我们不是在谈论家务或购物清单。我们正在讨论制作现代网站和应用程序时不可避免的有序和无序列表。
如前所述，在HTML和CSS中创建列表时，有两种类型：有序和无序。在有序列表的情况下，存在数字。另一方面，在无序列表的情况下，不存在计数，这就是为什么这些类型的列表的通用名称是项目符号列表。
2024年09月05日
我们知道在 HTML 中列表可以分为无序列表、有序列表、定义列表。在网页中经常可以看到无序列表的使用，例如像导航栏菜单、新闻列表、商品分类、图片展示等，基本都是通过无序列表来实现的。
无序列表中每个列表项前面都会默认带一个圆点符号，然而一般我们平时在网站上看到的列表样式，通常前面是没有圆点符号的，所以我们要如何去掉这个默认的圆点符号呢？这些都可以通过 CSS 中的列表属性来实现。
2024年09月05日
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);
2024年09月05日
作者：张鑫旭（@张鑫旭）
网址：http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/
一、兼容性
一些CSS文章，或者CSS文档，兼容性什么的都是放在最后。