2018年03月_HansExploration

转载常见html5语义化标签

我们知道，创建结构清晰的页面可以建立良好的语义化基础，也降低了使用css的难度，下面总结了一些常用的语义化标签，有空慢慢更新，欢迎大家补充语义化HTML：用最恰当的HTML元素标记的内容。优点：1 提升可访问性； 2 SEO； 3 结构清晰，利于维护；...

2018-03-22 15:38:43 1132

转载浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？本篇文章将讲述自适应网页设计的概念和方法，使网页开发人员维护同一个网页代码，即可使网站在多种设备上具有更好的阅读体验。本文详细介绍了自适应网页的实现方法，希望能给迷惑的你带来帮助。　　一. 在HTML的头部加入meta标签　　　...

2018-03-22 13:37:04 947 1

转载深入理解移动端像素知识与Viewport知识

三种viewport和三种像素，只有明白了这些概念，才能更好地开发出适配不同分辨率设备的网页。但参阅的博客越多，对这些概念越是混乱，同样的一个概念，在一篇博客中是这种说法，在另一篇博客中又变成了另外一种说法，越看越成了一团乱麻！本文试着去综合一下多篇博客中的这些概念，并尝试去理顺这些概念间的复杂关系，如有错误，欢迎指正！1234 声明: 本人在网上看到如下地址的这篇博...

2018-03-22 12:28:38 215

转载设备像素，设备独立像素，CSS像素 & meta viewport

前言这两个属性说难不难，说容易又不易容。但如果你弄明白了这个，你就明白了一些东西，一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起，其实虽然标题里是三个名词，但我们接下来只聊两个就可以了，为什么？看完你就知道了。基本定义设备像素：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。CSS像素：CSS像...

2018-03-22 12:18:00 854

转载使用CSS3的@media来编写响应式的页面

首先要知道，我们为什么要写自适应的页面（响应式页面）【直接看干货】众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m...

2018-03-21 14:33:14 263

转载深入理解 flex-grow & flex-shrink & flex-basis

前言flex 有三个属性值，分别是 flex-grow， flex-shrink， flex-basis，默认值是 0 1 auto。发现网上详细介绍他们的文章比较少，今天就详细说说他们，先一个一个看。flex-grow定义项目的放大比例，默认值为0，就算存在剩余空间，也不会放大。单单几句话肯定不能表达出意思，来看个DEMO。flex-growflex-grow的默认值为0，如果没有定义该属性...

2018-03-21 11:35:44 370

转载 CSS中的变量使用，var()语法

惯例先看代码：:root{--white-max: #fff; --white-bright:#f5f5f5; --white-light:#eee; --white-dark: #ddd; }.navbar ul>li>a{color: var(--white-max);font-size: 1.1em;font-weight: bold;}.panel.panel-zxzx a...

2018-03-19 15:21:19 1069

转载使用CSS3 will-change提高页面滚动、动画等渲染性能

一、先来看一个例子下面这个例子来自某外文，我这里简单转述下。视差滚动现在不是挺流行的嘛，然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候，发现，页面的绘制性能掉到了每秒30帧，这种帧频人眼已经可以感觉到一定的顿挫感了。后来，参考一些其他同事还是同行的建议，做了一番优化，然后，页面的渲染性能——这优化之前完全就是便...

2018-03-14 15:46:47 329

转载添加或删除 HTML dom元素

创建新的 HTML 元素如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>&l

2018-03-13 11:04:25 435

转载 js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别

js中有两种声明函数的方法，分别为：var functionOne = function() { // Some code};function functionTwo() { // Some code}为什么会有两种不同的方法？每个方法的优点和缺点分别是什么？有什么情况是一种方法能完成而另外一种方法不能完成的吗？答: by @Greg不同点在于functionOne只会在到...

2018-03-13 10:27:27 2671 1

转载 insertAdjacentHTML方法详解

添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和 insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。 insertAdjacentText方法与 insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同方法名称：insertHtml(where...

2018-03-13 10:08:10 854

转载面向对象，原型

如果要我总结一下学习前端以来我遇到了哪些瓶颈，那么面向对象一定是第一个毫不犹豫想到的。尽管我现在对于面向对象有了一些的了解，但是当初的那种似懂非懂的痛苦，依然历历在目。为了帮助大家能够更加直观的学习和了解面向对象，我会用尽量简单易懂的描述来展示面向对象的相关知识。并且也准备了一些实用的例子帮助大家更加快速的掌握面向对象的真谛。jQuery的面向对象实现封装拖拽简易版运动框架封装这可能会花一点时间，...

2018-03-02 18:32:03 245

转载 JS函数中this的指向（深度解答--转载自追梦子）

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。　　为什么要学...

2018-03-02 17:12:51 750

转载 JS函数的四种调用方式

函数有下列调用模式函数调用模式方法调用模式构造器模式上下文模式1. 函数调用模式要调用，就肯定要先定义，函数的定义方式：声明式: function fuc() {}表达式式: var func = function() {};Function: new Function( ‘参数’,…,’函数体’ );单独独立调用的,就是函数调用模式，即函数名( 参数 )，不能加任何其他的东西，对象 o.f...

2018-03-02 14:57:25 443

HansExploration的博客