web前端2018
从2018年以后对web前端的重新认识
zhaihaohao1
这个作者很懒,什么都没留下…
展开
-
web前端练习32----Css,盒子模型,display,visibility,overflow,单位em
一、盒子(框)模型1.1图形示例:1.2盒子模型的主要构成,由内向外:内容区:width,height内边距:padding边框:border外边距:margin可见宽高 = 内容区+内边距+边框1.3块级元素的盒子模型(在文档流中):内容区:可以设置宽高 width,height内边距:内边距指的是内容区和边框之间的距离,内边距会影响盒子的大小边框:盒子可见框最外侧,...原创 2019-12-28 06:58:01 · 544 阅读 · 2 评论 -
web前端练习31----Css,选择器(基本选择器,复合选择器,属性选择器,伪类,伪元素,优先级,雪碧图练习)
参考文档:https://man.ilovefishc.com/css3/一、基本选择器:1通配符选择器 *2元素选择器 element3类选择器 .class4id选择器 #id5内联样式 style二、复合选择器:1交集选择器 element.class || element#id2并集选择器 element1,element2,element3,...3后...原创 2019-12-21 10:14:52 · 562 阅读 · 0 评论 -
web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)
一、文档流:文档流处在网页的最底层, 它表示的是一个页面的位置我们所创建的元素默认都处在文档流中元素在文档流中的特点:块元素:1. 块元素在文档流中会独占一行, 块元素会自上向下排列。2. 块元素在文档流中默认宽度是父元素的100 % (铺满父元素)。3. 块元素在文档流中默认高度被内容(或者子元素) 撑开( 包裹内容)内联元素:1. 内联元素在文档流中只占自身大小, 会默认从左向右排列...原创 2019-12-08 08:00:17 · 678 阅读 · 0 评论 -
web前端练习29----Bom中,Navigator,loaction,history ,Screen,window及案例(滚动,刷新加载,传参)
BOM- 浏览器对象模型- BOM可以使我们通过JS来操作浏览器- 在BOM中为我们提供了一组对象,用来完成对浏览器的操作- BOM对象:1.Navigator- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器2.Location- 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面3.History-代表浏览器的历史记录...原创 2019-11-23 22:04:08 · 327 阅读 · 0 评论 -
web前端练习28----Dom4,事件(事件对象,事件冒泡,事件委派,事件传播,事件绑定,事件移除及案例练习)
一、事件对象 event1.1概念:事件处理函数可以附加在各种对象上,包括DOM元素,window对象等。当事件发生时,event对象就会被创建并依次传递给事件监听器。在处理函数中,将event对象作为第一个参数,可以访问DOMEvent接口。event对象里有很多事件相关的属性和方法,例如事件,被点击元素对象target,创建时间,事件类型,坐标,path等...原创 2019-11-17 12:13:26 · 336 阅读 · 0 评论 -
web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习(列表刷新加载,二级菜单)
0.修改class(修改类选择器)操作class就是修改元素对象的className语法:元素对象.className='类选择器名称';代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...原创 2019-11-09 10:10:05 · 340 阅读 · 0 评论 -
web前端练习26----Dom2,节点的 创建添加,删除,替换,克隆,innerHTML,innerText,显示隐藏及练习
下面以这个 html 作为例子 操作: <!--节点的 创建添加,删除,替换,克隆 --> <div>这是几个人</div> <ul id="peopleUl" name='ulName'> <li id="lip1" type="text">刘备</li> <...原创 2019-10-27 22:29:38 · 632 阅读 · 0 评论 -
web前端练习25----Dom1,元素节点(自己,父节点,子节点,兄弟节点),属性节点,文本节点
DOM是文档对象模型,规定了文档的显示结构,可以轻松地删除、添加和替换节点说白了,dom就是节点操作关于dom可以看这个链接https://blog.csdn.net/u012155729/article/details/78135393常见节点:文档节点,元素节点,属性节点,文本节点文档节点:对应的是 docment 对象,里面包含了所有的节点元素节点,属性节点,文本节点...原创 2019-10-27 22:10:13 · 478 阅读 · 0 评论 -
web前端练习24----es5,es6重要语法总结
1变量的两种方式var 全局作用域,函数作用域let 全局作用域,块级作用域https://blog.csdn.net/zhaihaohao1/article/details/1020469042函数的两种方式声明创建 可以提前调用表达式创建 不可以提前调用https://blog.csdn.net/zhaihaohao1/article/details/1020482042.1...原创 2019-10-20 06:41:36 · 255 阅读 · 0 评论 -
web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例:倒计时,大小动画平移动画,轮播图
文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setIntervalhttps://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeoutsetInterval();定时执行函数setInterval无限次的执行,要通过clearInterva...原创 2019-10-16 20:15:15 · 1200 阅读 · 0 评论 -
web前端练习22----js中的原型对象prototype,原型链(重要)
原型对象原理解析:我们创建的每一个函数,解析器都会向函数中添加一个属性 prototype这个属性对应着一个对象,就是原型对象。如果函数作为普通函数,调用 prototype 没有任何作用当函数以构造函数的形式调用时,它所创建的对象都会有一个隐含的属性 __proto__,我们可以通过 __proto__ 来访问原型对象原型对象就相当于一个公共区域,同一个构造函数的实例都能访...原创 2019-10-13 11:40:37 · 359 阅读 · 0 评论 -
web前端练习21----使用babel,让es6兼容所有的浏览器
es6的语法有些浏览器是不兼容的,babel可以把es6的语法全部编译成es5的,兼容所有浏览器babel 官网 https://www.babeljs.cn使用 babel 需要3步1下载 babel.min.js 依赖包2引入 <script src='babel.min.js'></script>3设置 type='text/babel'项目结构:...原创 2019-10-05 20:30:54 · 677 阅读 · 0 评论 -
web前端练习20----es6新语法7,生成器对象 Generator
百度搜索 mdn Generatorhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator例子1 基本使用 // 例子1 基本写法 function* iGenerator() { yield 1; ...原创 2019-10-04 15:24:02 · 193 阅读 · 0 评论 -
web前端练习19----es6新语法6,异步任务 Promise
百度搜索mdnpromisehttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/PromisePromise 基本用法,模拟请求 数据 function myAsyncTask(time) { var promise1 = new ...原创 2019-10-04 15:10:11 · 189 阅读 · 0 评论 -
web前端练习18----es6新语法5,展开运算符...
百度搜索mdn展开运算符https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax1、操作数组1.1、展开元素 /** * 把数组中的元素展开 */ function iClick1() {...原创 2019-10-04 12:28:36 · 335 阅读 · 0 评论 -
web前端练习17----es6新语法4,数组,Set集合,Map集合
一、Array数组百度搜索mdn数组https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array1、数组创建 // 创建数组 var fruits = ['Apple', 'Banana', '梨子', '橘子', '桃子', '1',...原创 2019-10-04 10:34:57 · 483 阅读 · 0 评论 -
web前端练习16----es6新语法3,对象,及class类的引入
一、声明对象的两种常用形式百度搜索mdn JavaScript面向对象https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_JS1,构造函数,形式 基本语法 // 定义对象构造器形式 function Method2() {...原创 2019-10-04 07:25:58 · 352 阅读 · 0 评论 -
web前端练习15----es6新语法2,箭头函数,bind,函数参数默认值,函数返回对象
零、函数的两种表达形式1.声明形式创建函数 // 函数声明的形式创建的函数,会在所有代码执行之前被创建。 // 所以可以在声明之前调用 // 先调用 fun1(); function fun1() { console.log('zhh1'); }...原创 2019-10-04 07:07:38 · 344 阅读 · 0 评论 -
web前端练习14----es6新语法1,let,const,解构赋值,模板字符串,字符串,判断类型
ECMAScript 是(欧洲计算机制造商协会)它规定了js的语法标准。 主要包括: 语言语法 – 语法解析规则、关键字、语句、声明、运算符等。 类型 – 布尔型、数字、字符串、对象等。 原型和继承 内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。https://www.kancloud.cn/kancloud/es6-in-depth/...原创 2019-10-04 06:28:05 · 483 阅读 · 0 评论 -
web前端练习13----推荐一部html5+css的牛逼视频教程
视频优点:1很多人把html5+css写成了div+css,让很多新的特性没有体现出来2讲课风趣幽默,容易理解Emmet 快捷语法https://blog.csdn.net/qq_33744228/article/details/80910377课件案例https://ilovefishc.com/html5/速查手册https://man.ilovefishc.com视频分集...原创 2019-09-15 11:24:34 · 514 阅读 · 0 评论 -
web前端练习12----js中call,apply实现继承
1,apply和call 就是为了改变this的指向存在的;2,当一个object1没有某个函数,但是其他object2(父类)有,我们可以借助call和apply,用object1调用object2的函数;(子类调用父类的函数)3,call和apply可以实现多继承,一个子类可以继承多个父类;先了解一下:call和apply的区别,在于参数不同。call传的是普通对象apply传...原创 2019-01-16 16:46:41 · 213 阅读 · 0 评论 -
web前端练习11----js中的回调(把函数作为参数传递)
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt;&amp;amp;amp;lt;head lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;meta原创 2019-01-15 15:31:52 · 1729 阅读 · 0 评论 -
web前端练习10----写一个弹出框效果
效果图:思路:简单的说就是写一个div,显示隐藏就可以了具体步骤如下:1创建一个div(puman)设置铺满全屏;设置浮在窗口最上面设置半透明子元素竖直居中2创建一个div(puman)的子元素dialog就是半透明布局的弹出框设置固定的宽高里面存放条目3用js添加dialog的子元素dialog_item并并渲染出自己写的假数据4dialog_item添加点击事件...原创 2019-01-14 14:10:56 · 993 阅读 · 0 评论 -
web前端练习9----写一个公众号项目
使用html+css+js 实现爱谷童模公众号https://www.igrowmodel.com/wx/Login.html测试账号:zhh123 123456主要功能贴图:源码就不贴了:直接下载查看:原创 2019-01-14 09:55:29 · 1014 阅读 · 1 评论 -
web前端练习8----html中label标签的使用
label 元素不会向用户呈现任何特殊效果 label把事件转移到相关元素上面 for 属性规定 label 与那个元素绑定绑定事件1结合上传文件的元素使用 &amp;amp;lt;div class=&amp;quot;buju1&amp;quot;&amp;amp;gt; &amp;amp;lt;!--label把事件转移到原创 2018-12-10 09:22:39 · 2877 阅读 · 0 评论 -
web前端练习7----css布局总结
1、position相关position: fixed;固定布局position: relative;相对定位position: absolute;绝对定位;具体参考:https://blog.csdn.net/zhaihaohao1/article/details/843161192、display相关display: flex;align-items: center;子...原创 2018-12-05 14:43:45 · 263 阅读 · 0 评论 -
web前端练习6----登录静态页面
效果图:源码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/tit原创 2018-11-30 11:56:23 · 1373 阅读 · 1 评论 -
web前端练习5----css 的 display: flex,box-sizing: border-box;
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写,意为&amp;quot;弹性布局&amp;quot;,用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。1子元素水平摆放,...原创 2018-11-30 11:18:53 · 1015 阅读 · 0 评论 -
web前端练习4----h5和Android交互
效果图:项目结构思路:思路:1、安卓中请求到json2、把json传给html文件(实际上传给js),html渲染数据 (java调js)3、html中的按钮点击事件,调用安卓文件中的方法,在安卓中处理 (js调Java)代码:WebNetActivity中:package com.zhh.android;import android.app.Activity;impor...原创 2018-11-23 10:59:53 · 329 阅读 · 0 评论 -
web前端练习3----css的position属性理解
position: relative; 相对定位元素的定位是相对其正常位置。position: absolute; 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:结合下面的例子解释:父元素box中, 必须设置 position: relative; 相对定位;子元素icon1中, position: absolute; 绝对定位;子元素i...原创 2018-11-21 11:31:18 · 421 阅读 · 0 评论 -
web前端练习2----实现列表功能
思路:1 html+css 完成基本布局2 接收到上个页面的数据,Ajax请求数据3 js渲染数据我把所有代码:html css js 都写在了一个文件里 Listview1.html&amp;lt;html&amp;gt;&amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&原创 2018-11-15 14:55:37 · 860 阅读 · 0 评论 -
web前端练习1----实现登录功能
效果图:思路:1html+css 完成基本布局2Ajax请求数据完成登录功能3把登录成功后的 token和用户名传到下个页面代码:我把所有代码:html css js 都写在了一个文件里Login.html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &a原创 2018-11-15 14:45:45 · 19188 阅读 · 0 评论