网站首页 > 知识剖析正文

WEB前端开发入门学习笔记

nixiaole 2024-11-25 15:43:01 知识剖析 18 ℃

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);

8.模块化开发 :

将庞大的项目结构拆分成若干个独立依赖的小块,然后通过一定的拼装机制(模块化规范)加载到项目中.

常见的模块加载规范 :

CommonJS 同步加载机制 => 适用服务器端

AMD 异步加载机制 => 适用在浏览器端

CMD 异步加载机制(根据AMD衍生出来的 ,国人玉伯退出的模块加载机制) = > 浏览器端

ES6规范了之前的一些模块加载机制优点

模块 : 其实任何js代码块都可以视为是一个模块 ,它可以是一个变量,一个方法或者一个对象和一个类.

为了演示ES6模块化的功能 : nodejs + webpack(打包)

笔记二：

1.雪碧图的使用

2.垂直方向的外边距(重叠):

如果遇到垂直方向的外边距重叠(容器是父子嵌套关系) ,只要使用给父级设置边框或背景色,是阻断重叠现象.

3.选择器:

1)空格 (根据标签的嵌套关系,表示后代元素)

2) >

3),

4)+

5)~

------------------------------------------------------

标准文档流:

行内元素:

1.一行显示,一行显示不下才换行

2.不能设置宽高属性

3.不能垂直方向外边距

4.默认底部对齐

5.使用text-align 实现对齐

a em strong i span img label button input

select option textarea

块级元素:

1.独占一行

2.可以设置宽高属性

3.支持垂直方向外边距

4.使用margin 对齐

p h1-h6 hr br div ul li ol dl dt table tr form

上一篇： border table 打造家具与空间的全新关系
下一篇： HTML的窗口分帧

网站首页 > 知识剖析 正文

WEB前端开发入门学习笔记

猜你喜欢

网站首页 > 知识剖析正文