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

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

sinye56 2024-10-27 14:11 8 浏览 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

相关推荐

程序员:JDK的安装与配置(完整版)_jdk的安装方法

对于Java程序员来说，jdk是必不陌生的一个词。但怎么安装配置jdk，对新手来说确实头疼的一件事情。我这里以jdk10为例，详细的说明讲解了jdk的安装和配置，如果有不明白的小伙伴可以评论区留言哦下...

Linux中安装jdk并配置环境变量_linux jdk安装教程及环境变量配置

一、通过连接工具登录到Linux(我这里使用的Centos7.6版本)服务器连接工具有很多我就不一一介绍了今天使用比较常用的XShell工具登录成功如下：二、上传jdk安装包到Linux服务器jdk...

麒麟系统安装JAVA JDK教程_麒麟系统配置jdk

检查检查系统是否自带java在麒麟系统桌面空白处，右键“在终端打开”，打开shell对话框输入：java–version查看是否自带java及版本如图所示，系统自带OpenJDK，要先卸载自带JDK...

学习笔记-Linux JDK - 安装&amp;配置

前提条件#检查是否存在JDKrpm-qa|grepjava#删除现存JDKyum-yremovejava*安装OracleJDK不分系统#进入安装文件目...

Linux新手入门系列:Linux下jdk安装配置

本系列文章是把作者刚接触和学习Linux时候的实操记录分享出来，内容主要包括Linux入门的一些理论概念知识、Web程序、mysql数据库的简单安装部署，希望能够帮到一些初学者，少走一些弯路。注意：L...

测试员必备:Linux下安装JDK 1.8你必须知道的那些事

1.简介在Oracle收购Sun后，Java的一系列产品就被整合到Oracle官网中，打开官网乍眼一看也不知道去哪里下载，还得一个一个的摸索尝试，而且网上大多数都是一些Oracle收购Sun前，或者就...

Linux 下安装JDK17_linux 安装jdk1.8 yum

一、安装环境操作系统：JDK版本：17二、安装步骤第一步：下载安装包下载Linux环境下的jdk1.8，请去官网（https://www.oracle.com/java/technologies/do...

在Ubuntu系统中安装JDK 17并配置环境变量教程

在Ubuntu系统上安装JDK17并配置环境变量是Java开发环境搭建的重要步骤。JDK17是Oracle提供的长期支持版本，广泛用于开发Java应用程序。以下是详细的步骤，帮助你在Ubuntu系...

如何在 Linux 上安装 Java_linux安装java的步骤

在桌面上拥抱Java应用程序，然后在所有桌面上运行它们。--SethKenlon（作者）无论你运行的是哪种操作系统，通常都有几种安装应用程序的方法。有时你可能会在应用程序商店中找到一个应用程序...

Windows和Linux环境下的JDK安装教程

JavaDevelopmentKit（简称JDK），是Java开发的核心工具包，提供了Java应用程序的编译、运行和开发所需的各类工具和类库。它包括了JRE（JavaRuntimeEnviro...

linux安装jdk_linux安装jdk软连接

JDK是啥就不用多介绍了哈，外行的人也不会进来看我的博文。依然记得读大学那会，第一次实验课就是在机房安装jdk，编写HelloWorld程序。时光飞逝啊，一下过了十多年了，挣了不少钱，买了跑车，娶了富...

linux安装jdk,全局配置，不同用户不同jdk

jdk1.8安装包链接：https://pan.baidu.com/s/14qBrh6ZpLK04QS8ogCepwg提取码：09zs上传文件解压tar-zxvfjdk-8u152-linux-...

运维大神教你在linux下安装jdk8_linux安装jdk1.7

1.到官网下载适合自己机器的版本。楼主下载的是jdk-8u66-linux-i586.tar.gzhttp://www.oracle.com/technetwork/java/javase/downl...

window和linux安装JDK1.8_linux 安装jdk1.8.tar

Windows安装JDK1.8的步骤：步骤1：下载JDK打开浏览器，找到JDK下载页面https://d.injdk.cn/download/oraclejdk/8在页面中找到并点击“下载...

最全的linux下安装JavaJDK的教程(图文详解)不会安装你来打我?

默认已经有了linux服务器，且有root账号首先检查一下是否已经安装过java的jdk任意位置输入命令：whichjava像我这个已经安装过了，就会提示在哪个位置，你的肯定是找不到。一般我们在...

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

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