题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题思路 可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法来说明你的思维广阔,知识丰富的一面. 浮动的方式有以下4种.   1.使用clear:both清除浮动 示例1:使用div html代码 css代码 <div class="box"> <…

题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! 解答思路 样式优先级规则 1.优先级顺序为:!important>style>权重值 2. 如果权重相同,则最后定义的样式的起作用,应该避免这种情况出现 权重规则 标签的权重为1 class的权重为10 id的权重为100 权重取值示例 /*权重为1*/ div{ } /*权重为10*/ .cl…

题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚.可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚. (一)元素水平居中的方式 1)行级元素水平居中对齐(父元素设置 text-align:center) [html] view plain copy <div style="width: 200px; height: 100px;b…

题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block(块级元素) <div>.<p> <ul> <ol> <form> …… inline(内联元素) <span> <a> <img> <input> <select> <label>…

本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以本题的难易程度为简单. 解题思路 position为元素定位属性,包含以下属性值 1. absolute绝对定位 相对位置为父元素为非static的第一个父元素进行定位. 2. fixed  固定定位(老IE6不支持) 相对于浏览器窗口进行定位. 3. relative相对定位 相对于其正常(默认布…

题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异. <h1>标题1标签在不同浏览器的盒子模型</h1>   火狐浏览器 谷歌浏览器 IE7浏览器 IE9浏览器 从上面可以看出,同一个标签,不同的浏览器解析的数据是不一样的,这样就会导致…

题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部 2.代码的实现 第一步 保证元素是块级元素 第二步 设置元素的边框 第三步 不需要显示的边框使用透明色 示例代码 .square{ width:0; height:0; margin:0 auto; border:6px solid trans…

题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不同点,以及他们的作用,及注意事项上去回答. 解答要点  相同点 都可以用来表示伪类对象,用来设置对象前的内容 :befor和::before写法是等效的  不同点 :befor是Css2的写法,::before是Css3的写法 :before的兼容性要比::before好 ,不过在H5开发中建议使用…

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")…

CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打开浏览器的调试界面查看这个输入框的css样式: 图中我圈出来的左边html代码的就是html属性的键值对,然后圈出的右边位置就是css样式,然后右边那个窗口你还可以所谓的线上编辑,在最后点击一下,就可以编辑: 这个此时就暂且不提了,以后学到的时候再添加,然后那些已经有的也可以去掉,把选项框里的“√”…

题目点评 这道题目有可能是笔试题,有可能面谈的时候进行叙述,如果是笔试题要求对css样式代码非常熟练,如果是面谈叙述,就需要你的表达能力非常强,要抓住要点,把需要用到的技能点讲清楚就可以了. 需要用到技术 1.     元素水平居中对齐 1)        使用margin对齐(推荐) 2)        使用left:50% 3)        使用text-align 2.  元素对相对窗口定位 1)        使用filxed(推荐) 2)        使用absolute定位 3)…

样式导入方式 link import 使用方式 link的使用 <link href="index.css" rel="stylesheet"> import的使用 <style type="text/css"> @import "index.css"; </style> 不同点 link除了引用样式文件,还可以引用图片等资源文件,而import只引用样式文件 <link rel=&q…

问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包括margin.border.padding.content ,元素的width=content的宽度 (2)IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度,元素的width=content+padding+border 2)个人理解和心得,要记住在面试时,我们和面试官是平等的,而且面试官也非…

题目点评 字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.需要对字符的处理方法比较熟悉,在回答的时候尽量能够说出多种解决方法更好! 字符串翻转的方法 1)使用字符串函数 //str=hello function reverseString(str) { var array = str.split('');//['h','e','l','l','o']; array = array.reverse();// ['o','l','l','e','h']; str = a…

本题的特点 这道题目的特点就是不按照正常的套路来提问,一般都是问优点,这里比较反常问iframe的缺点,很多同学肯定很不习惯这种问答,因为平时只关注有点,这么一问就懵逼了! 本题解答的思路及要点 ① iframe会阻塞主页面的Onload事件: ② 搜索引擎的检索程序无法解读这种页面,不利于SEO; ③ 会影响页面的并行加载. 知识补充:什么是并行加载? 并行加载:同一时间针对同一域名下的请求.一般情况,iframe和所在页面在同一个域下面,而浏览器的并加载的数量是有限制的.如下图 答题加分(提…

7.2 关于合同 签合同的时候,看公司要求,有些是3年,有些是5年,不要怕,签了就是了,真到想走的时候,提前说一声,随时可以走,不存在什么违约赔偿. 注意:你的合同和薪资都是属于保密的,不能让公司其他同事知道. 7.3 编码规范         代码做好注释,命名要规范,代码结构要有层次 7.4 怎么和团队成员沟通问题         问题纠结了30分钟后不能解决的要先同事请教,仍然不能解决的要向你的上级反应情况,争取早点解决问题. 7.5 少说话,多做事 职后第一个月,压力会非常大.咬紧牙,扛…

最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面希望看到本文的伙伴能自己去找答案,毕竟,技术只有自己真正理解了才是自己的东西,共勉. 小白第一次发文,恭请指点.PS(答案在这里) Web前端面试笔试题 Html+css 1.对WEB标准以及w3c的理解与认识. 2.Xhtml和html有什么区别. 3.css的引入方式有哪些?link和@impo…

CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(margin). 边框(border): (3)区 别: IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些?哪些属性可以继承? * 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选…

HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现. (2).标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行.在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作. HTML5 为什么只需要写 <!DOCTYPE HTML…

其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy, decrator么? 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件? 页面重构怎么操作? 网站重构:在不改变外部行为的前提下,简化结构.添加可读性,而在网站前端保持一致的行为. 也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI. 对于传统的网站来说重构通常…

本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个年轻的行业,所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前端程序员必备的技能之一. 前端开发知识点: HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级. HTML5.CSS3.Flexbox JavaScript: 数据类…

邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对一面试,人很多. 下面是面试过程:没让我自我介绍,有的会让先自我介绍,简单看了下我的简历开始问我是不是自学的,(计算机专业不开设这个专业,都是自学加项目经验)为什么选择前端开发,你怎么看前端开发这个岗位的.说那这样我就从简单到难的问你,由浅入深就知道你的水平了,面试官都很年轻,人都不错. 1:说一下…

转载: 2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正.:) HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的…

JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 ) 介绍js有哪些内置对象? Object 是 JavaScript 中所有对象的父对象 数据封装类对象:Object.Array.Boolean.Number 和 String 其他对象:Function.Arguments.Math.Date.RegExp.Error 参考:http:…

好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会. 浏览器就像一个空的画布,WEB开发者可以在这里尽情的发挥.下面是18个人们用CSS创建的又酷又有创造性的东西的例子,从原始字符到有趣的动画,有很多激励你自己将时间花费在CSS上. 1.TheSimpson…

好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCSS. SMACSS. BEM.这3个词.“如果还不知道这些是什么,请先不要继续看下去”,联想到作者这样友好(gāo lěng)的提醒,作为围观群众,自然要有所回应.所以,本文在这里分别介绍它们. OOCSS.SMACSS及BEM都是有关css的方法论(准确地说,其中BEM应该是一个完整的前端开发理论…

风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解 跨站脚本攻击(Cross-site scripting,通常简称为XSS) 反射型XSS原理与演示 交互的数据不会存储在数据库里,一次性的.一般是查询导致或者是错误的js执行 存储型XSS原理与演示 交互的数据会被存放在数据库里,永久性存储,一般出现在留言板,注册等页面 Dom型XSS原理与演示 漏洞是基于文档对象模型Document Objeet Model,DOM)的一种漏洞.不与后台服务器产生数据交互,是一种通过DOM操作前…

风炫安全web安全学习第二十九节课 CSRF防御措施 CSRF防御措施 增加token验证 对关键操作增加token验证,token值必须随机,每次都不一样 关于安全的会话管理(SESSION) 不要在客户端保存敏感信息 关闭浏览器直接销毁SESSION 设置会话过期操作,比如超过15分钟没有操作,直接销毁SESSION 访问控制的安全管理 敏感信息修改的时候需要二次验证,比如修改密码需要验证旧密码. 敏感信息修改使用POST,而不是GET 通过HTTP头部的REFERER来限制原来页面 增加验…

1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 h1,h2,h3,h4,h5,h6{color:red;} 2.继承(需要子元素没有属于他自己的CSS样式) body{ color:green; } 2.派生选择器 2.1派生选择器: 通过依据元素在其位置的上下文关系来定义样式 css.html <!DOCTYPE html> <html…

一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav article aside footer表单标签:email url range date媒体标签:video audio…… 二.CSS3新特性 圆角:border-radius阴影:box-shadow背景渐变:https://developer.mozilla.org/zh-CN/docs/W…