金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 前端开发面试题,在Git上如何强推代码规范

原标题:前端开发面试题,在Git上如何强推代码规范

浏览次数:150 时间:2019-12-14

注意 转载须保留原文链接( ),译文链接,作者译者等信息。 作者:wangwen896
本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可能的!
前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增,正如赫门在2015深JS大会上的《前端服务化之路》主题演讲中说的一句话:“每18至24个月,前端都会难一倍”,这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前端程序员必备的技能之一。
面试有几点需注意:
面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。

引言

最近参加了“前端规范制定topic”小组,小组成员一起制定了html、css、js、es6、vue和react等规范,但规范制定好了怎么进行推广去强制执行呢,已知我们的项目都是用git做管理的,所以马上想到在git上做文章,本文讲述的就是如何在git上推行代码强校验。

移动WEB前端UI框架

目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面PHP程序员雷雪松就把2015年最全的移动WEB前端UI框架分享给大家。

目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。下面在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面就把2015年最全的移动WEB前端UI框架分享给大家。
Amaze UI
Amaze UI是一个轻量级(所有CSS和JS gzip后100kB左右)、Mobile first的前端框架, 基于开源社区流行前端框架编写。
Amaze UI Github地址:
Amaze UI官网:

Frozen UI
Frozen UI 是一个简单易用,轻量快捷,为移动端服务的前端框架,专注于移动web的UI框架,基于腾讯手机QQ规范。
Frozen UI Github地址:

SUI
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面。
SUI官网:

ZUI
ZUI是一个开源前端实践方案,帮助你快速构现代跨屏应用。
ZUI Github地址:

H-ui
H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT开发的轻量级web前端框架,开源免费,简单灵活,兼容性好,满足大多数中国网站。
H-ui Github地址:

pure.css
pure.css 一组小,响应CSS模块,您可以使用在每一个web项目
pure.css Github地址:

UIkit
UIkit是YOOtheme团队开发的一款轻量级、模块化的前端框架,可快速构建强大的前端web界面。UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式设计可在多种环境中使用等特点。UIkit中文网为广大国内开发者提供详尽的中文文档、代码实例等,帮助开发者快速掌握并使用这一框架。
UIkit Github地址:

Bootstrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等,助力开发者掌握并使用这一框架。
Bootstrap中文网:

拼图
拼图号称中国版的Bootstrap,优秀的跨屏响应式布局前端开发框架(CSS框架),国内前端框架先驱及领导者,能自动适应电脑、平板、手机等设备,让web前端开发更简单、快速、便捷。
拼图官网:

Plane UI
Plane UI是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。
Plane UI Github地址:

Foundation
Foundation 5是我们最快、最好的构建。多用的功能来帮助编写代码和学习比以往任何时候都要快。
Foundation官网:

mui
mui是最接近原生APP体验的高性能框架。
mui Github地址:

WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、icon等各式元素。
WeUI Github地址:

Arale
Arale 立足于支付宝的前端需求和国内前端社区,基于Sea.js和spm生态圈,致力发展小而美的前端模块架构,建立了一套从编码测试到部署的开发体系, 是一个开放、简单、易用的前端解决方案。Arale 模块均兼容于 IE6+ 以及 Chrome/Firefox/Safari/Opera 的最新稳定版。
Arale官网:

Semantic UI
Semantic UI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
Semantic UI Github地址:

Jingle UI
Jingle UI是一个基于html5、css3开发轻量级的移动webapp 框架,提供一些基本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh……),帮助您更方便的开发移动应用。
Jingle UI Github地址:

CMUI
CMUI 是一个专攻移动网页的 UI 框架,它提供了丰富的组件和简洁的接口,开箱即用。CMUI 帮助开发者摆脱样式细节和兼容性困扰,从而腾出更多精力投入到业务开发中。
CMUI Github地址:
以上是在长期工作中总结出来的移动WEB UI框架资源,大家可以根据自己的业务需求去选择合适的WEB UI框架。在此不评价任何一个框架的好坏,存在就有他的合理性,总有他适合的场景。感谢这些项目的贡献者,感谢开源力量!

来源:2015年最全的移动WEB前端UI框架

题目类型: 理论知识、算法、项目细节、技术视野、开放性题、工作案例。

git知识点

说到git,我们先来了解下平时项目中不是很关注的几个git概念.

git仓库

git是分布式版本管理系统,可以有多个代码仓库,所有参与项目的开发者都可以拥有自己的本地仓库,每一个本地仓库都是一个完整的版本库,即使不联网,也可以任意的进行开发、创建分支、commit和查看版本的历史提交记录等。

但每个人都在自己的本地仓库开发,怎么做到代码共享和同步呢?在我们的项目中,通常都会建立一个大家都可以访问的共享仓库,这个共享仓库放在一个专门的线上服务器上,我们也叫它远程仓库。远程仓库和本地仓库的唯一差别就在于它是裸仓库,就是不包含任何工作目录,仅仅是由 “.git” 目录组成的。它作为服务器仓库供各开发者push、pull数据,实现数据共享和同步,不保存文件,只保存历史提交的版本信息等。

图片 1

git存储方式

说完git仓库,我们来了解下git的存储方式。git存储数据更像是把数据看作是对小型文件系统的一组快照,每次提交更新或者是保存项目状态时,它主要对现有的文件制作一个快照并保存这个快照的索引。这个“快照”就是git对象,而“快照的索引”就是对象名。所有用来表示项目历史信息的文件,都是通过一个40字符的(40-digit)“对象名”来索引的。对象名看起来像这样的:26e5847434caa7597c4088de8ecab9cd567957d1。

在git里,每一个“对象名”都是对“对象”内容做 SHA-1哈希计算得来的, SHA-1是一种密码学的hash算法,这样在每个仓库中不同内容的对象就会有不同的对象名。git有四种类型的对象:"blob"、"tree"、 "commit" 和”tag”:

  • “blob”用来存储文件数据,没有文件名,只有内容
  • “tree”有一串指向blob对象或是其它tree对象的指针,它一般用来表示内容之间的目录层次关系
  • “commit” 指向一个"tree对象", 并且带有相关的描述信息,如提交者、提交时间、注释等等
  • “tag”用来标记某一个提交(commit) 的方法

所以下面所描述的获取文件信息基本上都是通过各种git命令操作hash对象名来获取的,这也是为什么在这里介绍“git存储方式”的原因,方便大家更深刻的了解git命令。

作用域

由git仓库的定义可以看出,本地仓库因为是本地的,任何能接触得到仓库的人都可以进行修改、删除等,所以本地仓库不适合做代码强校验。那只能考虑远程仓库了,可以当用户push推送的时候,校验代码,如果不符合规范,就拒绝这次提交,虽然你不能阻止开发者写出糟糕的代码,但可以防止这些代码流入官方的代码库。

git钩子

好了,确定了规范在服务端仓库上来强推行,但怎么做到当用户push动作触发的时候去做一下代码强校验呢,经过调研发现,git钩子正好解决了我们的这个问题。

什么是git钩子呢?git钩子是在git仓库中特定重要动作发生时自动运行的脚本,它可以让你自定义git内部的行为,在开发周期中的关键点触发自定义的行为。这样来说,git钩子就可以帮我们来推行规范了。

git钩子到底什么样呢,它存在于每个git仓库的.git/hooks目录中,当你观察.git/hooks时,你会看到下面这样的文件:

图片 2

hooks目录下展示的钩子并不全,这里带simple后缀的只是git的大部分钩子,.sample拓展名防止它们默认被执行,想要运行一个钩子,去掉后缀名或者在git官网查看相应钩子名称添加新文件即可。

  • 钩子分类

    按照钩子的定义,hooks下的钩子可分为本地钩子和服务端钩子两类。本地钩子基本由提交和合并这样的操作所调用,而服务器端钩子主要用于接收推送这样的联网操作。上面“作用域”部分已经提到,我们只能在服务端仓库做代码强校验,所以接下来主要研究服务端钩子。

  • 钩子语言

    这些钩子就是git内置的一些脚本,内置的脚本大多是shell和perl语言的,但你可以使用任何脚本语言,只要它们最后能编译到可执行文件。本人对python比较熟,所以整个的开发用的是python语言。

细节追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种知识关联是长时期的学习,临时抱佛脚绝对是记不住的。

git服务端钩子

由上面的git知识点一步步看下来,我们就可以确定了代码校验合适的地方是在服务端钩子上,但服务端钩子也有好多,我们的代码规范要在哪个钩子做比较合适呢,接来下就具体介绍下服务端最有用的3个钩子,并找出一个适合我们的钩子。

  • pre-receive

这个脚本在git push向远程仓库推送操作时,最先被调用。它没有参数,但是可以从标准输入获取一系列的推送引用。如果它以非零值退出,所有的推送内容都不会被接受,所以这是强制推行开发规范的好地方。

#!/usr/bin/python
# -*- coding: utf-8 -*-

import re,fileinput

for file_line in fileinput.input():
    #从标准输入可以获取三个值
    #推送前的引用指向的内容的SHA-1值,用户准备推送的内容的SHA-1值,引用的名字(分支)
    old_hash,new_hash,branch = re.split(r's+', file_line.strip('n'))
# 放弃推送
# sys.exit(1)

 

  • update

update脚本和pre-receive脚本十分类似,不同之处在于它会为每一个准备更新的分支各运行一次。假如推送者同时向多个分支推送内容,pre-receive只运行一次,相比之下update则会为每一个被推送的分支各运行一次。它不会从标准输入读取内容,而是会接受三个参数,这三个参数信息和pre-receive在标准输入读取信息相同。如果update脚本以非零值退出,只有相应的那一个引用会被拒绝;其余的依然会被更新。

#!/usr/bin/python
# -*- coding: utf-8 -*-

import sys
#接受三个参数
#引用的名字(分支), 推送前的引用指向的内容的SHA-1值,用户准备推送的内容的SHA-1值
branch,old_hash,new_hash = sys.argv
# 只放弃当前分支的推送
# sys.exit(1)

 

  • post-receive

post-receive脚本在成功推送后被调用,可以用来更新其他系统服务或者通知用户,它接受与 pre-receive相同的标准输入数据。它的用途包括给某个邮件列表发信,通知持续集成(continous integration)的服务器,或者更新问题追踪系统(ticket-tracking system)等。

服务端推送成功后调用的钩子不止post-receive这一个,如上面.git/hooks图中的post-update也是其中之一,但是为什么不介绍post-update呢?原因是它的输入获取值太单一,post-receive更像是post-update的超级集合,所以推送成功后的调用我们一般用post-receive。

我们经常用到的gitlab中的web hook就绑定了这个钩子,当然web hook是绑定了好几个不同的钩子的,post-receive只是其中一个,如下图的web hook的中的Push events事件触发的就是.git/hooks中的post-receive脚本

图片 3

分析这三个钩子,我们显然选push成功前调用的钩子,那到底是选pre-receive还是update呢?考虑到我们的项目很少有一次push多个分支的场景,最终选了pre-receive钩子来做我们的代码强校验。

回答问题再棒,面试官(可能是你面试职位的直接领导),会考虑我要不要这个人做我的同事?所以态度很重要、除了能做事,还要会做人。(感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ ))

在pre-receive钩子里做代码校验

钩子选择好了,接下来就是怎么做了,下面是一个简单的流程图,具体为从标准输入中获取三个值,分别是推送前的引用指向内容的SHA-1值,用户准备推送内容的SHA-1值和分支名,我再代码里分别用变量old_hash,new_hash和branch来表示这三个值,下面有用到。根据这三个值用git命令分别获取用户信息和提交的增量文件,把这些文件推送到eslint服务上进行代码校验,校验成功就直接push通过;不成功则在客户端返回校验结果,push不通过。

图片 4

根据上面的描述,重点介绍下怎么获取用户信息和增量文件

  • 用户信息

获取用户信息的目的是传给eslint服务端,在服务端可以给分析用户的行为及给用户发送邮件等 这个命令可以定制化格式只获取用户的信息

  • %cn: committer name
  • %ce: committer email
  • %ct: committer date, UNIX timestamp
  • --no-patch: 不显示提交差异

    'git show --format="%%cn %%ce %%ct" --no-patch %s' % new_hash

 

定制化后运行的结果是下面这样的,可以获取提交者的信息:

图片 5

  • 增量文件

增量文件取得是本次推送引用指向内容的SHA-1值和推送前的引用指向内容的SHA-1值中间的差值。命令如下,其中 --name-status是只取差异文件的名字和状态值

为什么不直接取本次推送引用指向内容的SHA-1值而取差值呢,原因是上次推送和本次推送中间可能隔了好几个commit,每一个commit对象都会生成一个唯一的SHA-1哈希字串的。

'git diff --name-status %s %s' %(old_hash,new_hash)

 

运行后得到的结果是:

图片 6

后面的就是怎么获取文件及和eslint服务通讯的问题了,在这里不是重点就略过了...

资深的前端开发能把absolute和relative弄混,这样的人不要也罢,因为团队需要的是:你这个人具有可以依靠的才能(靠谱)。

总结

本文可以说是我接到任务后,从只了解git的git pull、git clone、git push等几个常用命令到怎么在git上实现我们的需求的一个探索过程,希望里面的介绍对不是很熟悉git的同学有点帮助,另外也简单介绍了下我们强推规范的大致流程。后续会继续研究下gitlab和git钩子的关联关系。

前端开发知识点:
HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox JavaScript: 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他: 移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
作为一名前端工程师,无论工作年头长短都应该掌握的知识点:
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。 3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。 4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。 5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。 6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型 7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们 8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。 9、HTML与XHTML —— 二者有什么区别,你觉得应该使用哪一个并说出理由。 10、JSON —— 作用、用途、设计结构。
备注:
根据自己需要选择性阅读,面试题是对理论知识的总结,让自己学会应该如何表达。 资料答案不够正确和全面,欢迎欢迎Star和提交issues。 格式不断修改更新中。
HTML
Doctype作用?标准模式与兼容模式各有什么区别?

(1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML5 为什么只需要写 <!DOCTYPE HTML>?

HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);

而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素。

(1)行内元素有:a b span img input select strong(强调的语气)
(2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

(3)常见的空元素:
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
页面导入样式时,使用link和@import有什么区别?

(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;

(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
介绍一下你对浏览器内核的理解?

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则:解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
常见的浏览器内核有哪些?

Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]
详细文章:浏览器内核的解析和对比

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

* HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素,比如 article、footer、header、nav、section;
表单控件,calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;

移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;

* 支持HTML5新标签:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src=";
<![endif]-->

* 如何区分HTML5: DOCTYPE声明新增的结构元素功能元素
简述一下你对HTML语义化的理解?

用正确的标签做正确的事情。
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
及时在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
HTML5的离线储存怎么使用,工作原理能不能解释一下?

在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

如何使用:
1、页面头部像下面一样加入一个manifest的属性;
2、在cache.manifest文件的编写离线存储的资源;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时,操作window.applicationCache进行需求实现。
详细的使用请参考:有趣的HTML5:离线存储

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
离线的情况下,浏览器就直接使用离线存储的资源。
详细的使用请参考:有趣的HTML5:离线存储

请描述一下 cookies,sessionStorage 和 localStorage 的区别?

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

存储大小:
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

有期时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
iframe有那些缺点?

*iframe会阻塞主页面的Onload事件;
*搜索引擎的检索程序无法解读这种页面,不利于SEO;

*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态给iframe添加src属性值,这样可以绕开以上两个问题。
Label的作用是什么?是怎么用的?

label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>
HTML5的form如何关闭自动完成功能?

给不想要提示的 form 或某个 input 设置为 autocomplete=off。
如何实现浏览器内多个标签页之间的通信? (阿里)

WebSocket、SharedWorker;
也可以调用localstorge、cookies等本地存储方式;

localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,
我们通过监听事件,控制它的值来进行页面信息通信;
注意quirks:Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常;
webSocket如何兼容低浏览器?(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR
页面可见性(Page Visibility API) 可以有哪些用途?

通过 visibilityState 的值检测页面当前是否可见,以及打开网页的时间等;
在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放;
如何在页面上实现一个圆形的可点击区域?

1、map+area或者svg
2、border-radius
3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>
网页验证码是干嘛的,是为了解决什么安全问题。

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水;
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
title与h1的区别、b与strong的区别、i与em的区别?

title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影响;

strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:<strong>会重读,而<B>是展示强调内容。

i内容展示为斜体,em表示强调的文本;

Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
CSS
介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

(1)有两种, IE 盒子模型、W3C 盒子模型;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
(3)区 别: IE的content部分把 border 和 pading计算了进去;
CSS选择符有哪些?哪些属性可以继承?

* 1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a:hover, li:nth-child)

* 可继承的样式: font-size font-family color, UL LI DL DD DT;

* 不可继承的样式:border padding margin width height ;
CSS优先级算法如何计算?

* 优先级就近原则,同权重情况下样式定义最近者为准;

* 载入样式以最后载入的定位为准;

优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类有那些?

举例:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

给div设置一个宽度,然后添加margin:0 auto属性

div{
width:200px;
margin:0 auto;
}
居中一个浮动元素

确定容器的宽高 宽500 高 300 的层
设置层的外边距

.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative; //相对定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
让绝对定位的div居中

position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display有哪些值?说明他们的作用。

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
position的值relative和absolute定位原点是?

absolute
生成绝对定位的元素,相对于值不为 static的第一个父元素进行定位。
fixed (老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。
relative
生成相对定位的元素,相对于其正常位置进行定位。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
inherit
规定从父元素继承 position 属性的值。
CSS3有哪些新特性?

新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-column layout)
阴影和反射 (ShadowReflect)
文字特效 (text-shadow、)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
增加了旋转,缩放,定位,倾斜,动画,多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:
请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?

.
用纯CSS创建一个三角形的原理是什么?

把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一个满屏 品 字布局 如何设计?

简单的方式:
上面的div宽100%,
下面的两个div分别宽50%,
然后用float或者inline使其不换行即可
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?

* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式,从总体中逐渐排除局部。

首先,巧妙的使用“9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。

* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

* 解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
为什么要初始化CSS样式。

- 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

- 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法: * {padding: 0; margin: 0;} (强烈不建议)

淘宝的样式初始化代码:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
absolute的containing block(容器块)计算方式跟正常流有什么不同?

无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:
1、若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;
2、否则,则由这个祖先元素的 padding box 构成。
如果都找不到,则为 initial containing block。

补充:
1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)

  1. absolute: 向上找最近的定位为absolute/relative的元素
  2. fixed: 它的containing block一律为根元素(html/body),根元素也是initial containing block
    CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?

对BFC规范(块级格式化上下文:block formatting context)的理解?

(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
css定义的权重

以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现
请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式

移动端的布局用过媒体查询吗?

使用 CSS 预处理器吗?喜欢那个?

SASS (SASS、LESS没有本质区别,只因为团队前端都是用的SASS)
CSS优化、提高性能的方法有哪些?

浏览器是怎样解析CSS选择器的?

在网页中的应该使用奇数还是偶数的字体?为什么呢?

margin和padding分别适合什么场景使用?

抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]

元素竖向的百分比设定是相对于容器的高度吗?

全屏滚动的原理是什么?用到了CSS的那些属性?

什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?

视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)

::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景 ?

你对line-height是如何理解的?

设置元素浮动后,该元素的display值是多少?(自动变成display:block)

怎么让Chrome支持小于12px 的文字?

让页面里的字体变清晰,变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)

font-style属性可以让它赋值为“oblique” oblique是什么意思?

position:fixed;在android下无效怎么处理?

如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
display:inline-block 什么时候会显示间隙?(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
overflow: scroll时不能平滑滚动的问题怎么处理?

有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。

png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:前端开发面试题,在Git上如何强推代码规范

关键词:

上一篇:shell基本语法,Linux安装JDK完整步骤

下一篇:开源造轮子,很强大的HTML