百度360必应搜狗淘宝本站头条
linux文件压缩linux用户组查看linux磁盘mysql安装linuxlinux多线程
当前位置：网站首页 > 优雅编程 > 正文

WEB前端开发入门学习笔记（web前端开发教程全套教程）

sinye56 2024-10-27 14:11 5 浏览 0 评论

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

相关推荐

RHEL8和CentOS8怎么重启网络

本文主要讲解如何重启RHEL8或者CentOS8网络以及如何解决RHEL8和CentOS8系统的网络管理服务报错，当我们安装好RHEL8或者CentOS8，重启启动网络时，会出现以下报错：...

Linux 内、外网双网卡路由配置

1.路由信息的影响Linux系统中如果有多张网卡的情况下，如果路由信息配置不正确，...

Linux——centos7修改网卡名

修改网卡名这个操作可能平时用不太上，可作为了解。修改网卡默认名从ens33改成eth01.首先修改网卡配置文件名（建议将原配置文件进行备份）...

CentOS7下修改网卡名称为ethX的操作方法

?Linux操作系统的网卡设备的传统命名方式是eth0、eth1、eth2等，而CentOS7提供了不同的命名规则，默认是基于固件、拓扑、位置信息来分配。这样做的优点是命名全自动的、可预知的...

Linux 网卡名称enss33修改为eth0

一、CentOS修改/etc/sysconfig/grub文件（修改前先备份）为GRUB_CMDLINE_LINUX变量增加2个参数（net.ifnames=0biosdevname=0），修改完成...

CentOS下双网卡绑定，实现带宽飞速

方式一1.新建/etc/sysconfig/network-scripts/ifcfg-bond0文件DEVICE=bond0IPADDR=191.3.60.1NETMASK=255.255.2...

linux 双网卡双网段设置路由转发

背景网络情况linux双网卡:网卡A(ens3)和网卡B(...

Linux-VMware设置网卡保持激活

Linux系统只有在激活网卡的状态下才能去连接网络，进行网络通讯。修改配置文件（永久激活网卡）...

VMware虚拟机三种网络模式

01.VMware虚拟机三种网络模式由于linux目前很热门，越来越多的人在学习linux，但是买一台服务放家里来学习，实在是很浪费。那么如何解决这个问题？虚拟机软件是很好的选择，常用的虚拟机软件有v...

Rocky Linux 9/CentOS Stream 9修改网卡配置/自动修改主机名(实操)

推荐...

2023年最新版 linux克隆虚拟机 解决网卡uuid重复问题

问题描述1、克隆了虚拟机，两台虚拟机里面的ip以及网卡的uuid都是一样的2、ip好改，但是uuid如何改呢？解决问题1、每台主机应该保证网卡的UUID是唯一的，避免后面网络通信有问题...

Linux网卡的Vlan配置，你可能不了解的玩法

如果服务器上连的交换机端口已经预先设置了TRUNK,并允许特定的VLAN可以通过，那么服务器的网卡在配置时就必须指定所属的VLAN，否则就不通了，这种情形在虚拟化部署时较常见。例如在一个办公环境中，办...

Centos7 网卡绑定

1、切换到指定目录#备份网卡数据cd/etc/sysconfig/network-scriptscpifcfg-enp5s0f0ifcfg-enp5s0f0.bak...

Linux搭建nginx+keepalived 高可用(主备+双主模式)

一：keepalived简介反向代理及负载均衡参考：...

Linux下Route 路由指令使用详解

linuxroute命令用于显示和操作IP路由表。要实现两个不同子网之间的通信，需要一台连接两个网络的路由器，或者同时位于两个网络的网关来实现。在Linux系统中，设置路由通常是为了解决以下问题：该...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表