
Web前端
文章平均质量分 58
杜小白Zero
这个作者很懒,什么都没留下…
展开
-
浅析CSS块级元素与行内元素
块级元素和行内元素是布局最基本的两种元素。1、块级元素 block element,显示在一块内,会自动换行,元素从上到下垂直排列,各自独占一行。 DIV是最常见的块级元素,元素样式的display:block都是块级元素。他们总是以一个块的形式表现出来,并且跟同级的兄弟块垂直排列,其宽度自动填满其父元素宽度。2、行内元素 inline element,也叫做内联元素、内嵌元素等...原创 2018-02-26 11:41:56 · 305 阅读 · 0 评论 -
常用的BOM对象
1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;2、document对象,文档对象;3、location对象,浏览器当前URL信息;4、navigator对象,浏览器本身信息;5、screen对象,客户端屏幕信息;6、history对象,浏览器访问历史信息; ...原创 2018-11-05 11:10:48 · 852 阅读 · 0 评论 -
单页面应用——SPA
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。 它将所有的活动局限于一个web页面中,仅在该web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript动态的交换HTML的内容,从而实现UI与用户的交互。...原创 2018-11-05 10:31:13 · 971 阅读 · 0 评论 -
Web语义化
什么是Web语义化? 如今互联网已经到了web3.0时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作的网页也从当初的table表格嵌套发展到了div+css,这是进步的标志。然而我们似乎看到了一个不太好的想象:整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一种html标签存在,这种div滥用现象使得网页制作似乎就只剩下了div。时代是进化着的...转载 2018-09-19 14:47:06 · 2300 阅读 · 1 评论 -
Flex布局教程(一)
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。F...转载 2018-04-14 10:47:46 · 864 阅读 · 0 评论 -
JSONP跨域请求原理及优缺点
一、JSONP与JSON的区别: JSONP 是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。 JSONP 和 JSON 的区别: JSON 是一种传输格式,而 JS...原创 2018-04-13 11:26:09 · 13556 阅读 · 2 评论 -
从输入URL到页面加载的过程?由一道题完善自己的Web前端知识体系!
----------超长文预警,需要花费大量时间----------对知识体系进行一次预评级看到这道题目,不借助搜索引擎,自己的心里是否有一个答案?这里,以目前的经验(了解过一些处于不同阶段的相关前端人员的情况),大概有以下几种情况:(以下都是以点见面,实际上不同阶段人员一般都会有其它的隐藏知识点的)level1:完全没什么概念的,支支吾吾的回答,一般就是这种水平(大致形象点描述):浏览器发起请求...转载 2018-04-12 21:33:40 · 883 阅读 · 0 评论 -
浅析cookie、sessionStorage 和 localStorage异同点
共同点:都是保存在浏览器端,且同源的。不同点:① 数据传递cookie数据始终在同源的http请求中携带(即使不需要),即会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。② 存储大小cookie数据大小不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessio...原创 2018-04-12 14:52:58 · 407 阅读 · 0 评论 -
CSS布局终结版
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1)使用inline-block+text-align(1)原理、用法§ 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。§ 用法:对子框设置display:inline-block,...原创 2018-04-04 22:18:30 · 265 阅读 · 0 评论 -
严格模式、混杂模式与怪异模式
Doctype作用?严格模式、混杂模式和怪异模式如何区分?它们有何意义?1、doctype的作用: 声明位于文档 的最前面,告知浏览器的解析器,用什么文档类型、规范来解析这个文档。注意:1).规范是指W3C发布的文档类型定义(DTD)中的规则。 2).三种DTD类型:严格、过渡和基于框架的HTML版本。2、严格模式、混杂模式和怪异模式的区分1)严格模式:严格模式的排版和JS运作模式是以该浏览器支...原创 2018-04-04 20:48:51 · 1288 阅读 · 0 评论 -
如何让你的网页符合W3C标准?
什么是W3C标准? W3C,World Wide Web Consortium,万维网联盟,一个负责制定并维护着我们所熟悉的万维网的诸多标准和协议的组织。WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要...原创 2018-04-04 20:31:59 · 2235 阅读 · 0 评论 -
前端性能优化篇
你遇到过性能很差的网页吗?这种网页响应特别慢,占用大量的CPU和内存,浏览起来常常卡顿,页面的动画效果也不流畅。你会有什么反应?可能大多数用户都会关掉这个网页,访问其他网站,作为一名开发者,如何才能提高性能呢?一、网页生成流程要理解网页性能为什么不好,就要了解网页的生成过程网页的生成过程,大致可以分为五步:HTML代码转化为DOMCSS代码转化为CSSOM(CSS Object Model)结合...原创 2018-04-04 17:49:57 · 517 阅读 · 0 评论 -
深入理解前端跨域原理及解决方案——前端面试
前言 受浏览器同源策略(所谓同源是指域名、协议和端口号都相同)的限制,本域的js不能操作其他域的页面对象(比如DOM),安全限制的同时也给注入iframe或是ajax应用带来了不少麻烦。所以我们要通过一些方法使得本域的js能够操作其他域的页面对象,或者其他域的js能操作本域的页面对象(iframe之间)。这里需要明确的一点是:所谓的域跟js的存放服务器没有关系,比如baidu.com的页面加...转载 2018-04-11 19:31:55 · 953 阅读 · 0 评论 -
HTTP与HTTPs
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据...转载 2018-04-14 18:10:21 · 538 阅读 · 1 评论 -
cookie、sessionStorage和localStorage的区别
这是一种对比性比较强的问题,可以先说他们的相同点,然后就是要详细阐述他们的不同点,而不同点不要刻意去对比,只要说出各自的特点,自然他们的不同点就出来了。共同点:都是保存在浏览器端,且同源的。区别:(1)存储位置不同,cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发...原创 2018-03-20 09:59:30 · 421 阅读 · 1 评论 -
优雅降级与渐进增强
大家可以先来看一下直观图,上方为优雅降级,下方为渐进增强。名词解释 渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应...原创 2018-03-20 09:47:12 · 282 阅读 · 0 评论 -
stopPropagation和cancelBubble的区别
首先,总结一下DOM中的事件对象:(符合W3C标准)preventDefault() 取消事件默认行为stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用stopPropagation() 取消事件冒泡对当前节点无影响IE中的事件对象:(不符合W3C标准)cancelBubble() 取消事件冒泡returnValue() ...原创 2018-03-07 09:37:13 · 2677 阅读 · 0 评论 -
深入理解JSX
JSX是React为JavaScript语法带来的可选扩展,用于在JavaScript代码中编写声明式XML风格语法。 对于Web项目而言,React的JSX提供了一组类似于HTML的XML标签,转译后,XML会被转译为针对React库的函数调用,如下:<h1>Hello World</h1>会被转译为:React.createElemen...原创 2018-11-05 16:12:16 · 529 阅读 · 0 评论