前端入门面试30条

三、 Web前端能做什么?

公司官网(在PC通过浏览器来访问公司网站)移动端网页(在手机上来浏览公司信息、小游戏等)移动端APP(例如:淘宝、去哪儿旅游、携程等)微信小程序(微信最新推出的功能,随用随装,不占用手机空间)。前端开发所学技术由简单到难,所以在很多网站上你会看到“七天入门前端”的视频博客等等,也就是说一星期就学会了HTML+CSS。最基本的页面你就可以书写了。

< img /> <input> <link> <meta> 。

六、 开发环境

市面上有很多的HTML编辑器可以选择,常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

1、浏览器

浏览器在本地也能打开html文件,浏览器就跟解释器一样,从上倒下,从左到右

全球共有五大浏览器厂商,我们主要以chrome为主

ie
chrome
firfox
safri
presto
浏览器内核不同,浏览器渲染引擎不同(后期考虑兼容性问题),其他浏览器都是使用这5款浏览器内核 

2、浏览器历史:

世界最早浏览器,网景浏览器(Netscape )
后来它想做操作系统,动了微软的奶酪,微软就想弄死他,
微软做的也特别的绝情,微软利用windows操作系统的市场占有率,提供了免费浏览器ie,而且windows
操作系统里还必须有

中国最早浏览器ie6,国企内就用ie6,

浏览器不同,解析的标签标准不同,微软太霸道,就不改标准,坚持不更新,后来谷歌和火狐抢占了市场,IE就傻逼了,目前也只有傻逼才用IE。。。

市场越发地混乱,于是w3c(万维网联盟(World Wide Web Consortium,W3C))成立,用来制定大家的统一标准

须知:学前端一半工作在考虑兼容性,目前html5在兼容性方面解决的比较好

3、文件后缀名规范

.htm和.html扩展名的区别

#1、DOS系统(win95或win98)下只能支持长度为3的后缀名,所以老版本的系统一直在用.htm后缀

#2、但在windows后缀长度可以大于3位,所以windows下无所谓htm与html,html是为长文件的格式命名的

#3、如果文件后缀是.htm,毫无疑问,浏览器也可以兼容,但推荐使用.html

**9、前端语言有哪些?后端语言有哪些?
**
(1)、前端语言:HTML、css、javascript。
(2)、后端语言(服务器端语言):php、java、asp.net、node.js

四、 为什么要学习前端开发

我们为什么要学习前端开发,因为我们的课程定位是Python全栈开发,也就是说我们不仅要掌握后端开发的技术还要掌握一定程度的前端开发技术。 通过前面课程的学习,相信大家都已经掌握了Python基础语法、函数、面向对象、网络编程及数据库相关的内容。上面说的那些内容都是属于后端开发范畴的,在接下来的这个章节我们将一起来学习一下前端部分的内容,

3、什么叫做响应式?
针对不用的屏幕显示不同的网页布局,比如说大屏幕手机、小屏幕手机、平板能够适应不同的屏幕来显示网站。

五、 前端开发都有哪些内容

我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。

(1)HTML是什么?

HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

(2)CSS

CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。

(3)JavaScript

JavaScript是一门脚本语言。

HTML、CSS和JavaScript的区别 我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢?

“HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为

如果我们把前端开发的过程比喻成“建房子”,做一个网页就像盖一栋房子

1、先把房子结构建好(HTML)

2、建好房子之后给房子装修(CSS),例如往窗户安上窗帘、往地板铺上漂亮的瓷砖

3、最后呢,装修完了之后,当夜幕降临的时候,我们要开灯(JavaScript),这样才能看得见里面。

 

我们先用HTML搭建网页结构,这时候默认情况下,字体、字体颜色、字体大小和背景颜色如下图,仅仅使用HTML的文字

图片 1

然后我们通过CSS修饰一下,改变其字体、字体大小、字体颜色和背景颜色,得到如下的效果图

图片 2

最后,我们通过JavaScript定义鼠标一个行为,就是鼠标移动到上面的时候,背景颜色会变为深绿色,效果如下:

图片 3

**28、UI设计师需要会使用的工具的简称都有哪些?
**
以下一些工具的简称,大家应该有一定的了解,以免被问到咱们只知道简称。
(1)、AI (adobe illustrator)基于矢量的图形制作软件
(2)、PS(adobe Photoshop)图像处理软件。
(3)、DW(Adobe Dreamweaver)网页编辑器
(4)、AE(Adobe After Effects)一款图形视频处理软件
(5)、flash(Adobe Flash)二维动画软件
(6)、Axure(Axure RP)快速原型设计工具
(7)、墨刀(MockingBot)移动端原型工具
(8)、Fireworks网页作图软件

一、 web1.0时代的网页制作

网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。

例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。

相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧,这个组合就是web1.0时代额产物

17、Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
(1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
(2)、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

*16、为什么要初始化CSS样式。
*
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。最简单的初始化方法就是: {padding: 0; margin: 0;} 。

二、 web2.0时代的前端开发

“前端开发”是从“网页制作”演变而来的。

从2005年开始,互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验。

在web 2.0时代,网页有静态网页和动态网页。

所谓动态网页,就是用户不仅仅可以浏览网页,还可以与服务器进行交互。举个例子,你登陆新浪微博,要输入账号密码,这个时候就需要服务器对你的账号和密码进行验证通过才行。

web2.0时代的网页不仅包含炫丽的动画、音频和视频,还可以让用户在网页中进行评论交流、上传和下载文件等(交互性)。这个时代的网页,如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的,那是远远不能满足需求。

现在网站开发无论是开发难度,还是开发方式上,都更接近传统的网站后台开发,所以现在不再叫“网页制作”,而是叫“web前端开发”。

所以,处于web2.0时代的你,如果要学习网站开发技术,就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”,因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多,例如代码冗余、网站维护困难(学习到后期,你会知道为什么不用这个组合了

**19、如何居中div,如何居中一个浮动元素?
**
确定容器的宽高 宽500 高 300 的层。
设置层的外边距
.div { Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%; top:50%; }

4、针对不同屏幕的响应式,UI设计师该做几套设计图?
只做一套,大多UI设计师会使用iPhone5的尺寸来做一套(640X1136)。那么这种可以适配响应式的各种屏幕的吗?这种在HTML5中通过代码中的媒体查询来实现。媒体查询怎么写?媒体查询的具体写法如下:@media screen and (max-width:640px) { //最大宽度是640px的屏幕宽度 nav li { //nav标签下的li标签设置样式 display: inline; //转化为行元素 }}

**11、行内元素有哪些?块级元素有哪些?空(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)、知名的空元素(单标签):

**14、你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏(品)字布局 如何设计?
**
首先划分成头部、body、脚部;
实现效果图是最基本的工作,精确到2px;
与设计师,产品经理的沟通和项目的参与做好的页面结构,页面重构和用户体验处理hack,兼容、写出优美的代码格式针对服务器的优化、拥抱 HTML5。

**22、你做的页面在哪些流览器测试过?
**IE内核浏览器:360,傲游,搜狗,世界之窗,腾讯TT。 非IE内核浏览器:firefox opera safari chrome 。

1、什么是H5?
H5=HTML5,指的是HTML超文本标记语言(HTML)的第五次重大修改,HTML的第五代。HTML5具有的特点:
(1)、语义化的标签:好处是网站加载更快;该标签举例:header、nav、article等。
(2)、增加了音频、视频标签:好处是取代falsh;该标签举例:audio、video。
(3)、canvas标签:好处在浏览器上绘制图形或动画,取代flash。
(4)、支持手机和平板的响应式布局。HTML5的缺点:低版本浏览器支持性不好,比如IE9以下的浏览器不支持HTML5。

**30、怎么调试网页代码?怎么查看网页源代码?
**
(1)、按键盘上的F12,打开开发者调试工具;
(2)、鼠标右键查看页面源代码。

  • 可继承: font-size font-family color, ul li dl dd dt;
  • 不可继承 :border padding margin height ;
  • 优先级就近原则,样式定义最近者为准;
  • 载入样式以最后载入的定位为准;优先级为: !important > id > class > tag
    important 比 内联优先级高

**12、CSS的盒子模型?
**
(1)、两种, IE 盒子模型、标准W3C 盒子模型;IE 的content部分包含了 border 和 pading;
(2)、盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)。

**20、css的基本语句构成是?
**
选择器{属性1:值1;属性2:值2;„„} 例如:div{margin-top:10px;border:1px solid #ccc}

本文由金沙官网线上发布于Web前端,转载请注明出处:前端入门面试30条

您可能还会对下面的文章感兴趣: