前端开发

前端开发面试题收集(css部分)

孤者浪人 提交于 2020-02-20 08:00:56
http://davidshariff.com/quiz/ 做了下这里面前端开发面试的题,发现有些不会,所以在此做个整理以供自己学习,参考,总结。 1.问: CSS属性是否区分大小写? ul { MaRGin: 10px; } 答:不区分。(HTML, CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML 中元素名称和属性是必须小写的。) 2.问:对行内元素设置margin-top 和margin-bottom是否起作用 答:不起作用。(需要注意行内元素的替换元素img、input,他们是行内元素,但是可以为其设置宽高,并且margin属性也是对其起作用的,有着类似于Inline-block的行为)。看具体效果: <style> div { width: 500px; height: 500px; margin-top: 100px; margin-left: 100px; background: lightblue; } span { margin: 100px; } img { margin: 100px; } </style> </head> <body class="claro"> <div class="test_wrap"> <span> 我是行内元素,设置margin看是否对我起作用 </span> <img src="" alt=

前端调用百度API

旧巷老猫 提交于 2020-02-20 07:14:06
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <!--调用百度地图api--> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"> </script> <title></title> <style> /*服务网点*/ #wrap { width: 1196px; height: 540; margin: auto; overflow: hidden; } #wrap div ._left { width: 281px; float: left; height: 339px; border-right: 1px solid #CCCCCC; } #wrap ul { width: 1196px; height: 50px; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; margin-bottom: 57px; } /*搜索框城市*/ #input { width:

HTML/CSS 基础知识总结(一)

天大地大妈咪最大 提交于 2020-02-20 04:48:11
本文转载自 https://segmentfault.com/a/1190000004491633 要点:对Web标准的理解、浏览器差异、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? (1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些? (1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。 (2)行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p (3

BugPhobia休息篇章:Beta阶段第IX次Scrum Meeting前奏

倾然丶 夕夏残阳落幕 提交于 2020-02-19 13:56:01
特别说明:此次 Scrum Meeting 不计入正式的 Scrum Meeting ,因此此次工作仅为第 IX 次 Scrum Meeting 的前奏,而笔者也首次采用休息篇章作为子命题 0x01 : Scrum Meeting 基本摘要 Beta 阶段第九次 Scrum Meeting 前奏 敏捷开发起始时间 2015/12/23 00 : 00 A.M. 敏捷开发终止时间 2015/12/26 23 : 00 P.M. 会议基本内容摘要 ü 近期,由于 12 月 23 日至 12 月 26 日各专业课程均进入了收尾工作而导致软件工程的开发时间大幅度缩减,因此项目经理在与团队的开后端开发组、架构师讨论整体的进度后,决定 BugPhobia 团队暂停整体的开发进度;因此,此阶段的工作重心交付项目经理,其完成的必要的工作包括: n 整理 Beta 阶段的工作进度,同时规划 Beta 阶段后期的敏捷开发进程和分工安排 n 整理 Alpha 阶段、 Beta 阶段前期的文档,对需求分析、功能规格说明书、技术规格说明书进行整理和更新,保证项目本身文档稳步更新至 Beta 阶段版本 n 开始测试工作的布置,其中包括:后端单元测试的自动测试平台、 Django 单元测试的布置和安排、 ReactJS 前端的测试安排工作 n 开始 Beta 阶段文档的准备工作,其中包括: Semantic

BugPhobia展示篇章:学霸在线系统Alpha阶段展示

喜欢而已 提交于 2020-02-19 13:37:04
0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet you. BugPhobia ,我所言,均是心之所向。 0x01 :团队成员简介 To the world, you maybe a person. But to a person, you maybe the world. To the searching tags, you may well fall in love with http:// 10.2.26.67                      0x02 :团队项目愿景 Search With Tags~ ,或许作为软件工程的开发者,你会将学霸在线网站视为“爬虫组”和“数据组”等前端外壳;或许作为用户,你会将学霸在线网站视为一处搭建的问答平台,但事实,我们不局限于一个最简单的外壳,用户( User )、问答( Question )、课程( Course )、资源( Resource )、丰富的神秘功能( Secret )均是我们的工作,我们致力于打造面向 CS/EE 领域的垂直搜索引擎,且不忘初心。 网站基本定位 面向 CS/EE 领域的垂直搜索引擎 网站创新形式 首先,按照《构建之法》中创新类型的划分,在创新的类型上

springMVC的简单了解和环境搭建

♀尐吖头ヾ 提交于 2020-02-19 11:53:06
一,什么mvc 模型-视图-控制器(MVC)是一个众所周知的以设计界面应用程序为基础的设计思想。它主要通过 分离模型、视图及控制器在应用程序中的角色 将业务逻辑从界面中解耦。通常, 模型负责封装应用程序数据在视图层展示。 视图仅仅只是展示这些数据,不包含任何业务逻辑。 控制器负责接收来自用户的请求,并调用后台服务(e service 或者 dao )来处理业务逻辑。处理后,后台业务层可能会返回了一些数据在视图层展示。 控制器收集这些数据及准备模型在视图层展示。C MVC 模式的核心思想是将业务逻辑从界面中分离出来,允许它们单独改变而不会相互影响 二、常见 MVC 框架比较 运行性能上: Jsp+servlet>struts1>spring mvc>struts2+freemarker>struts2,ognl,值栈。 开发效率上,基本正好相反。值得强调的是,spring mvc 开发效率和struts2 不相上下,但从目前来看,spring mvc 的流行度已远远超过 struts2。Struts2 的性能低的原因是因为 OGNL(一种表达式语言,通过它简单一致的表达式语法,可以存取对象的任意属性,调用对象的方法,结合 struts2 框架使用)和值栈(简单理解为存放 struts2 action 的堆栈)造成的。所以,如果系统并发量高,可以使用 freemaker 进行显示

Python开发【前端】:Ajax(一)

夙愿已清 提交于 2020-02-19 11:38:54
Ajax   Ajax即“A synchronous J avascript And X ML ”(异步JavaScript和XML),是指一种创建交互式 网页 应用的网页开发技术, AJAX = 异步 JavaScript 和 XML ( 标准通用标记语言 的子集), AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面 1、初识 $.ajax({ url: '/host', // 数据提交地址 type: "POST", // 提交类型 data: {'k1': 123, 'k2': "root"}, // 提交的内容 字典格式 success: function(data){    // 客户端会一直等待服务端返回的数值 // data是服务器端返回的字符串 var obj = JSON.parse(data); } }) 建议:永远让服务器端返回一个字典 return HttpResponse(json.dumps(字典)) 2、简单的前后端交互  <div class="shade hide"></div> <div class="add-modal hide"> <form

前端开发如何快速 mock 数据

不羁岁月 提交于 2020-02-18 07:13:07
为什么要mock数据 并行开发,提升效率 我们都知道,一个项目开发需要前端 + 后端配合来完成,后端程序猿需要为前端开发攻城狮提供 api 接口,前端开发攻城狮,才能借助这些接口,来实现项目预期的功能。 我们一般开发项目的时候,各个团队都是并行进行的,为了减少每个环节之间的依赖等待,我们在各个环节都需要做一些数据模拟,来达到可以并行开发的目的。 所以前期双方以最快的速度,先把 api 接口的 URL 路径,请求参数、返回数据结构先确定下来,确定以后,双方就可以各自分道扬镳,各自去完成各自自己的任务: 后端程序猿,去实现这些接口的内部是实现; 测试同学,根据约定的参数,编写测试用例及自动化测试脚本,为下一步测试工作做准备; 前端攻城狮,通过 mock 的数据,立马开始前端开发(网站、小程序、APP); 等正式 api接口 开发好以后,只需把前端开发中的mock域名,更换成开发域名即可联调,而无需再去修改前端任何其他代码。 快速搭建原型 还有的应用场景,客户并不明确需求,暂时对于后台要开发成什么样式,还没有头绪。所以现在要让程序猿提供正式的接口,尚有难度,现在项目急需先把前端的原型做出来,让大家可以在线体验,边体验边调整修改。 如何mock数据 通过nodejs自己搭建 安装Node.js ,通过http-server开启本地服务器 获取端口 http://localhost:8000

前端模块化

女生的网名这么多〃 提交于 2020-02-17 19:48:10
前端模块化 为什么要用模块化,因为可以解决两个问题 变量命名冲突 代码复用 ES6中的导出export和导入import export导出的三种用法 直接定义变量/函数/类的时候前面就加exprot 使用对象类型导出export export {变量名1,变量名2} 如果导入的时候我想自己命名,就可以用default方法导入。 导入时自定义命名时不用加大括号 同一模块中default只能存在1个 //导出default export default function(){} //export default {} 导出对象 //导入 import myFun from './xxx.js' import导入 默认导入方法 import{变量名1,变量名2} from './xxx.js' 全部以对象的方式导入 import * as 自定义对象名 from './xxx.js' 使用的时候以对象的方式使用 如 obj.name commonJS中的导入和导出 导出 module.exports = {变量名1,变量名2} 导入 const {变量名1,变量名2} = require('./xxx.js') const obj = require('./xxx.js') el和template区别 真实开发中,不会频繁更改index.html中的代码,而是通过template的方式。

前端基础 css基础

怎甘沉沦 提交于 2020-02-17 18:39:42
文章目录 前言 正文 1.css的一些简单介绍 2.页面引入css 2.1 外部样式表 2.2 内部样式表 2.3 行内样式表 3.css选择器 3.1 元素选择器(标签选择器) 3.2 id选择器 3.3 类选择器(class选择器) 3.4 并集选择器 3.5 属性选择器 3.6 后代选择器 3.7 对上面的几种选择器归纳总结 4.常见的属性 4.1 字体属性 4.2 颜色和背景属性 4.3 文本属性 4.4 边框和编号属性 4.5 块元素和内联元素 4.6 浮动、块属性、层属性 总结 前言 昨天写了html的基础,今天趁热打铁再来学学css。不过可能今天的内容就有点多了,记得隔几天回头来复习一下加深印象(骗骗浏览数,嘻嘻嘻) 正文 玩笑归玩笑,不过今天的内容确实很多,现在开始正文。 1.css的一些简单介绍 css:指的是“Cascading Style Sheet(层叠样式表)”,是用来控制网页外观的一门技术。 作用:美化页面 之前说前端三剑客嘛,html,css,js。当然现在有很多很好的js框架出现(比如Angular、React、Vue),这方面框架的学习推荐去B站看技术胖的视频,我们今天只聊聊最基础的css,打好基础之后的学习才会更轻松。 2.页面引入css 三种方法 外部样式表 内部样式表 行内样式表 一般开发的话推荐外部样式表,我举例子的话会用内部样式表