HTML
听雨愁眠
这个作者很懒,什么都没留下…
展开
-
css中的 link和@import到底有什么区别?
写在前面在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式。而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式。那么同样是引入外部样式,这两者有什么区别呢,下面请跟随我来详细了解一下link和@import的区别吧!区别<!DOCTYPE html><html lang="...原创 2019-10-27 20:48:55 · 297 阅读 · 0 评论 -
node.js中的相关概念和表单提交
1.相关概念一.关于require('文件名)var fs = require('fs'); //加载核心模块var template = require('art-template'); //加载第三方包模块,所有的第三包都是通过npm下载var b = require('./b'); // 加载自己的文件模块二.关于模块查找顺序1.优先加载自己缓存下来的文件2.核心模块...原创 2019-10-21 22:31:32 · 101 阅读 · 0 评论 -
Node中require第三方模块(art-template)的规则
Node.js中使用CommonJs模块化机制,通过npm下载的第三方包,我们在项目中引入第三方包都是:let xx = require('第三方包名'),究竟require方法加载第三方包的原理机制是什么,今天我们来探讨下。1、安装art-template通过npm安装模板引擎(npm:包管理工具,能帮你下载你所需要的包)npminstall...转载 2019-10-20 21:08:48 · 688 阅读 · 0 评论 -
ES6----入门(二)
接上次:https://blog.csdn.net/qq_38163146/article/details/102538651三 函数1,参数默认值 ES6首次添加了参数默认值。我们再也不用在函数内部编写容错代码了。function add(a=1,b=2){ return a + b; } add();//3 add(2);//4 add(3,4);//7...原创 2019-10-15 22:36:23 · 332 阅读 · 0 评论 -
ES6----入门(一)
ES6新特性ECMAScript 6 是ECMA于2015.06发布的版本,作为一个分界点,现在我们通常把这之后的版本统称为ES6。ES6带来了许多全新的语法,同时添加了类的概念,可以预见的是,JavaScript正朝着工程化语言迈进,我们并不知道这对于年轻的JavaScript来说是好还是坏,因为它最开始是做为一款轻量级的脚本语言而风靡全球的。一 新的原始类型和变量申明1,symb...原创 2019-10-13 22:00:35 · 185 阅读 · 0 评论 -
HTML5基本标签使用header,nav和footer
header标签:基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容,也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如:<header> <h1>HTML5基本标签使用,header,Nav和footer</h1> <div class="post-meta...转载 2019-09-02 22:52:14 · 3377 阅读 · 0 评论 -
jQuery.data()和html5 dataset
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。html代码:&...转载 2019-09-04 22:42:35 · 242 阅读 · 0 评论 -
Html5中video标签那些属性和方法
video标签行内属性video标签行内属性 src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度 webkit-playsinline="true" IOS下防止全屏播放 playsinline="tru...转载 2019-09-06 23:31:48 · 2596 阅读 · 0 评论 -
css3中的flex (弹性布局)
flex (弹性布局)网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有现代浏览器的支持,这意味着,现在就能很安全地使用这项功能。为容器设置f...转载 2019-08-29 23:44:56 · 281 阅读 · 0 评论 -
css3中的变形(transform)
transform 字面上的意思就是 使改变外观、改变形态在css3中transform主要包括以下几种:1.旋转 rotate2.倾斜 skew3.缩放 scale4.移动 translate语法transform:nonetransform:rotate | skew | scale | translatenone:表示不进行变换表示一个或多个变换函数,空格分开,意思...原创 2019-08-28 22:54:19 · 477 阅读 · 0 评论 -
CSS3中的选择器
CSS3介绍CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。CSS3的现状浏览器支持程度不够好,有些需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛属性选择器属性选择器的标志性符号是 []。如先创建: <div> <p class="noe"&g...转载 2019-08-27 21:26:30 · 174 阅读 · 0 评论 -
web交互方式—ajax
一、什么是AjaxAJAX即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验,较少网络数据的传输量。同时,由于AJAX请求获取的是数据而不...转载 2019-08-26 21:25:30 · 176 阅读 · 0 评论 -
jquery.on()超级方法
定义和用法:1. on() 方法在被选元素及其子元素上添加一个或多个 事件处理程序2.自jquery1.7版本之后 on()方法是bind() live() delegate() 方法新的替代品 推荐使用此方法!使用其他的方法可能会出现不兼容的问题3.使用on()方法添加的事件程序适用于当前及未来的程序(这里的未来的程序是脚本创建的新元素,或者是以前的事件代理程序)4. 如果要移除使用o...转载 2019-08-22 22:27:04 · 394 阅读 · 0 评论 -
jQuery中的text,html和valsan三者的区别
jQuery中的text,html和valsan三者的区别:.html()用为读取和修改元素的HTML标签<body><div> 这是div中的文本内容 <h1>这是h1标签文本内容</h1> <input type="text" value="这是input标签的文本"></div>...原创 2019-08-21 21:43:33 · 119 阅读 · 0 评论 -
html5中的canvas
canvas<canvas width="600" height="400" style="border: 1px solid #ccc"></canvas>1.<canvas>标签只是图形容器,你必须使用脚本来绘制图形,有一个机遇javascript的绘图API。要从同一图形的一个<canvas>标记中移除元素,往往需要擦掉绘图重新绘制它...原创 2019-09-08 20:45:27 · 120 阅读 · 0 评论 -
html5中的localStorage本地缓存
早期的web中使用cookies在客户端保存诸如用户名等简单的信息,但是,在使用cookies存储永久数据存在以下问题。 1.cookies的大小限制在4kB,不适合大量的数据存储。 2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。 3 cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽。HTML5很好的提供了本地存储的功能,以键值对存储...原创 2019-09-09 23:29:21 · 373 阅读 · 0 评论 -
移动端rem适配屏幕
1、px、pt、em、rem 的区别px(pixel)像素,是屏幕上显示数据的最基本的点,表示相对大小(不同分辨率上px显示不同)pt(point)印刷行业常用的单位(磅),等于1/72英寸,表示绝对长度emem是相对长度单位,基于父级元素的font-size计算字体大小。如果未设置父级字体大小,则相对浏览器默认字体尺寸16px(1em = 16px):10px=0.625em...原创 2019-10-08 20:38:54 · 445 阅读 · 0 评论 -
初学css预处理less
LESS是什么?less是一门CSS预处理语言。由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上,引入了变量、Mixin混入、运算以及函数等功能,大大简化了CSS的编写,降低了CSS的维护成本。本质上,LESS包含一套自定义的语法及一个解析器,写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性,...原创 2019-10-07 20:09:32 · 169 阅读 · 0 评论 -
js中的cookie
什么是cookie ?cookie:是记录在用户浏览器中的信息,通常情况下是以“键/值”的形式进行存储的,可设置过期的时间.特征: 1.同一个网站共享一-套cookie. 2.大小有限,-一般都是4kb, 只能存文本 3.必须要通过本地服务器来预览。 不能以file的形式 4.分为临时cookie和设置过期时间的cookie...原创 2019-09-29 20:47:07 · 1067 阅读 · 0 评论 -
CSS媒体查询media
CSS媒体查询media实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要对特别的屏幕单独定制样式代码。在我的代码里面我把屏幕分为了三种,代表为iPhone、iPad、PC三种,分别对应着三种不同的样式。目前可以实现:根据界面大小自动调整布局 界面宽度小到一定程度时会隐藏header,将其放到侧拉栏中一个媒体查询由一个可选的媒体类型和零个或多个使...原创 2019-09-22 21:54:45 · 194 阅读 · 0 评论 -
bootstrap栅栏系统
bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col-lg的理解..col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-...转载 2019-09-18 22:44:47 · 247 阅读 · 0 评论 -
Bootstrap基础入门
Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstra...转载 2019-09-17 23:44:18 · 151 阅读 · 0 评论 -
html5 响应式布局
一、什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。 随着越来越多的设...原创 2019-09-16 23:58:38 · 308 阅读 · 0 评论 -
认识视口单位vm、vh在网页中的排版应用
视口单位是什么?在 CSS 规范中,有4种类型的可用视口单位:·vw --- 1vw 等于视口宽度的 1%vh --- 1vh 等于视口高度的 1%vmin --- vw 和 vh 中的较小值vmax --- vw 和 vh 中的较大值视口,即浏览器屏幕大小,1vw 等于浏览器宽度的 1%,100vw 即整个浏览器的宽度。视口的单位大小会根据视口大小的改变自动计算,视口大小的改变常...转载 2019-09-15 23:28:34 · 484 阅读 · 0 评论 -
移动端的触摸事件
首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchendtouchstart:手指触摸到一个 DOM 元素时触发。 touchmove:手指在一个 DOM 元素上滑动时触发。 touchend:手指从一个 DOM 元素上移开时触发。Touch 属性1.Touch.identifier:此 Touch 对象的唯一标识符。 一次触摸动作(我们...原创 2019-09-12 00:09:04 · 125 阅读 · 0 评论 -
移动端mate标签设置
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">1.width=device-width //应用程序的宽度和屏幕的宽度是一样的...原创 2019-09-11 00:07:38 · 214 阅读 · 0 评论 -
JavaScript中的原型对象
原型对象:1.在Javascript中,当系统加载构造函数后,会自动在内存中生成一个对象,这个对象就是原型对象。两者之间在内存中表现为相对独立,不存在谁包含谁的关系。但是两者之间又有一些关联,在构造函数的内部存在一个prototype属性指向原型对象,同时在原型对象的内存也存在一个属性constructor其指向了构造函数。2.作用之一:数据共享,节省空间原型模式: fun...原创 2019-08-12 23:13:05 · 891 阅读 · 0 评论 -
jQuery之jquery.lazyload.js插件用法
网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片。让网页首屏尽可能快的加载进来。如何使用jquery.lazyload.js:1、jquery.lazyload.js依赖于 jquery. 请将下列代码加入HTML的结尾,也就是</body>前:<scri...转载 2019-08-25 22:25:15 · 323 阅读 · 0 评论 -
JavaScript中的对象和三种创建方法
1.编程思想:把生活中做的一些事的经验融入到程序中 面向过程:凡事都要亲力亲为,每件事具体到过程都要知道,注重的是过程 面向对象:根据需求找对象,所有事情都是通过对象来完成,注重的是结果.2.面向对象的特点:封装 继承 多态----后端语言的特点,JavaScript没有 js不是一门面向对象的语言,但是js可以模拟面试对象思想 --...原创 2019-07-22 21:04:46 · 221 阅读 · 0 评论 -
JavaScript DOM事件属性
DOM的概念文档对象模型(DocumentObjectModel,DOM)是--种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。DOM可被JavaScript 用来读取、改变HTML、 XHTML以及XML文档。DOM经常进行的操作获取元素动态创建元素对元素进行操作(设置其属...原创 2019-07-25 23:27:38 · 160 阅读 · 0 评论 -
利用js创建元素
第一种方式用document.write 缺点: 创建好的元素会把之前页面中所有内容都替换了document.getElementById('box').onclick=function () { document.write("<h1>这是动态创建H1标签</h1>") }第二种方式:innerHTML="<p>内...原创 2019-07-30 23:49:56 · 954 阅读 · 0 评论 -
JS DOM节点(父级元素、父级节点、子级元素、子级节点、..之间的关系)
节点属性 1.NodeType: 节点类型:1-----表示标签 2-----表示属性 2---文本 2.NodeName: 节点的名字 标签----大写标签名 属性----小写的属性文本节点 3.NodeValue: 节点值: 标签--null 属性--属性值 文本---文本内容<div id="dv"> <span id="...原创 2019-07-29 22:42:49 · 4700 阅读 · 0 评论 -
JavaScript中的Array对象属性及方法
Array对象Array 对象用于在单个的变量中存储多个值a.下标 -- 编号,从 0 开始,到 (长度-1) 结束,索引b.元素 -- 数组中存放数据的空间c.长度 -- 数组中存放数据的个数常用数组API总结length属性 -- 获取数组长度push() -- 将一个或多个元素添加到数组的末尾,并返回新数组的长度。该方法和 call() 或 apply() 一起使用时,...原创 2019-07-24 22:04:59 · 286 阅读 · 0 评论 -
JavaScript中的循环语句
循环语句很多事情不只是做一次,要重复做。比如:在操场上跑十圈。我们可以使用循环语句来完成这个功能。循环语句,就是重复执行一段代码。循环三要素:1、声明循环变量。2、设置退出条件。3、让循环变量改变。while循环:实际上, while循环的语法结构中,就是体现这三个要素。当退出条件永远为true时,或者循环变量没有改变时,会导致退出条件永远不满足,那么循环永远不会停止...原创 2019-07-17 21:28:57 · 315 阅读 · 0 评论 -
JavaScript中的数组
数组定义:数组的标准定义:一个存储元素的线性集合,元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量。在javascript中的数组有些不同,他们其实是特殊的对象,表示偏移量的索引是数组对象的属性(字符串)。效率上不如其他语言高。创建数组:通过 var arr1 = [1,2,3]使用 new var arr2 = new Array(1,2,3)...原创 2019-07-19 21:22:01 · 125 阅读 · 0 评论 -
JavaScript中的Math对象、Date对象和String对象
JavaScript中的对象分为3种:内置对象、浏览器对象、自定义对象1、Math对象Math 不是以构造函数,就是一个内置对象,Math的方法是Math.出来的Math对象中常用的方法Math 不是以构造函数,就是一个内置对象,Math的方法是Math.出来的 Math.PI 圆周率 Math.abs(x) 返回x的绝对值传入一个非数字形式的字符串或者...原创 2019-07-23 22:07:27 · 175 阅读 · 0 评论 -
JavaScript基础操作符
JavaScript有赋值、比较、算术、位、逻辑、字符串和特殊运算符。1、算术操作符 将给定数值(常量或变量)进行给定的计算,并返回一个数值。标准的算术操作符 是加(+)、减(-)、乘(*)、除(/)四则运算。这些操作符与在其它编程语言中的作 用一样。 根据操作数的多少,可分为: 1)一元运算符:只有一个操作数++...原创 2019-07-16 22:36:23 · 66 阅读 · 0 评论 -
浅析JavaScript中的变量
1、JavaScript 简称js 是一门脚本语言 是一门解释语言 是一门弱类型语言 2、JavaScript和java区别 1)JavaScript是一门脚本语言,不需要编译,直接运行。 常见脚本语言 cmd t-sql 2)java是编译语言,需要使用IDE将代码编译成计算机认识的二进制 ...原创 2019-07-15 21:57:46 · 87 阅读 · 0 评论 -
css中的display显示与隐藏属性
通常默认html内容是显示,但有时我们想前期他隐藏,鼠标经过一个触发地方,便显示被隐藏内容,这个时候开始时候我们运用display:None,当鼠标经过触发地方时,JS对应调用display:block样式的CSS显示内容。我们用CSS伪类隐藏案例:1、代码如下这是没有隐藏2、然后给这个div添加css display:none隐藏属性3、最后做一个鼠标放在上...原创 2019-07-14 22:02:44 · 9075 阅读 · 0 评论 -
JavaScript的location对象和history对象
一、location对象window. location对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面2、包含的属性:hash、host(含端口号的主机名)、hostname(不含端口号的主机名)、href(等价于location.toString()方法)、pathname、port、protocol、search.3、方法: //获取地址栏 中 #...原创 2019-08-04 22:38:04 · 1362 阅读 · 0 评论