2024年网页制作的面试题 篇1
一、应聘网站编辑岗位面试时要
1、作为一个网站编辑，你觉得你能为公司创造的价值在哪些地方?
2、编辑内容或图片之类时你考虑的第一要素是什么?
3、就你目前对网站编辑的认识，你觉得我们的网站目前急需解决的编辑问题是什么?
4、一般在对一个版块内容就行编辑之前你有哪些准备工作是必须做的?
二、如何面试网站编辑？面试网络编辑的经验介绍
1、知道什么是网站编辑
做网站编辑，你必须得了解什么是网站编辑?做网站编辑需要做什么?网站编辑就是网站内容的建设者，通过网络上互相的资讯，通过“搬运”“加工”“原创”的方式，通过网站后台进行发布，从而达到提高丰富网站内容、提高网站点击量和知名度的一种工作。
2、网站编辑需要具备什么
做网站编辑，需要具备的是：耐心、细心、敏感。耐心是网站编辑初期是充当一个资讯搬运工的角色，你必须要有相当大的耐心。细心就是注意资讯中出现的问题，包括错别字、链接等方面小问题。敏感就是对热点、新闻的捕抓和及时反映，这关系到网站流量的哦。然后要求网站编辑需要懂一些基础的html，然后必要的seo常识也是必须懂的。
3、关于网站的一些常识
所谓网站的常识就是你要懂得如何查询这个网站的收录和整体流量以及网站的排名，因为网站流量是网站编辑必须关注的，所以你必须得学会如何查这些东西，也就是站长查询工具的运用和了解。其实就是你能随口报出各种各样的网站，网论坛等，这些都是必备的。
4、了解这个网站。不管你要面试的是门户网站、招聘网站、购物网站，你都得先摸透这个网站，对这个网站必须得随口有话说，如果不了解你面试的网站，你能跟招聘官聊什么呢?
1.在面试之前，你必须要搞清楚，网络编辑究竟是干什么的。既然要面试这份工作，就要对这份工作有所了解。面试官一般都会问：你对这份工作怎么看?你觉得做好这份工作最重要的是什么?如果一问三不知，那成功的概率肯定不大。
2.面试最忌讳的是一开始就问：能给多少钱?是不是双休?有没有五险一金?有没有年假?人家企业欠你的?企业和员工的选择是双向的，你选择企业，企业也选择你。你都还没确定能不能胜任这份工作，就开始问钱?
我们在讲企业忠诚度的时候都会提到，你和企业不单单是钱的关系。用“失恋33天”里面的话说：你给企业挣钱，企业给你发工资，好歹大家有个合作关系。别一上来就那么单刀直入，让面试官觉得你眼睛里只有钱。马云说过：眼里只盯着钱的人，你一定挣不到钱，这是一个水到渠成的过程。面试官不会不跟你谈薪水就让你来上班的，你着什么急?
3.职业素养问题。这是书生最想说的，做什么工作不重要，首先要做好人。书生碰到过太多这样的员工，敲定好了明天来上班，临时又变卦了，说什么家远，说什么薪水不满意。更有甚者，连个电话都不打，第二天直接关机，也不来上班。这是一个员工应有的素质吗?甚至说是一个正常成年人应有的素质吗?你不来没关系，提前打个电话，说声抱歉，有这么难吗?
可能有些人觉得，我以后跟这个企业再没什么关系了，怎么做都无所谓，那你就大错特错了。其实每个圈子都是很小的，比如书生所在的医疗圈，面试的时候我都会问，之前在哪做过，有没有工作经验?如果你告诉我在某家公司做过，我就有途径打听到你的过去，打听到你是一个什么样的人。因为这个圈子本身就这么大，谁不认识谁啊?每个公司的主管，甚至老板，都会在群里经常聊天侃地，想打听一个人太简单了。
如果你还想在某个圈子一直做下去，那么最好留个好名声。当你面试的公司向上一家打听你情况的时候，你希望听到他们说这个人真不怎么样，还是希望听他们说这人很不错，可惜我们当初没留住他?
4.像一些面试别迟到，注意穿着打扮，不要喷太多香水这样的小细节，肯定是老生常谈了，书生在此就不多说了。
2024年网页制作的面试题 篇2
前期一定要做好准备，面试前将公司的业务逻辑梳理一下，做一个思维导图。这样每次跟面试者聊的时候，可以展示出自己对公司的了解，必要时谈谈自己的想法也是可以的。
多看一些面试题也是必备的，下面是黑马程序员整理的关于前端的面试题，希望可以帮助到即将找工作的你。
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input selec
tCss盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些?
link和@import的区别是?
内联 内嵌 外链 导入区别 ：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html
表示层 CSS
行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10.写出几种IE6 BUG的解决方法
双边距BUG float引起的 使用display
3像素问题 使用float引起的 使用dislpay:inline -3px
超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
Ie z-index问题 给父级添加position:relative
Png 透明 使用js代码 改
Min-height 最小高度 ！Important 解决’
select 在ie6下遮盖 使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
11.标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同使用 window.top.document.compatMode 可显示为什么模式
15.你如何对网站的文件和资源进行优化?
期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用
16.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处
17.清除浮动的几种方式，各自的优缺点
使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
是用afert伪元素清除浮动(用于非IE浏览器)
2024年网页制作的面试题 篇3
HTML面试题
1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。
2.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js;3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)
4.什么是语义化的HTML?直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
5.HTML5 为什么只需要写 !DOCTYPE HTML？HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
6.Doctype作用？标准模式与兼容模式各有什么区别?!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘画 canvas用于媒介回放的 video 和 audio 元素本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除语意化更好的内容元素，比如 article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技术webworker, websockt, Geolocation移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签：IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：
8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；
9.如何实现浏览器内多个标签页之间的通信?调用localstorge、cookies等本地存储方式
CSS面试题
1.简要说一下CSS的元素分类块级元素：div,p,h1,form,ul,li;行内元素 : span>,a,label,input,img,strong,em;
2.CSS隐藏元素的几种方法（至少说出三种）Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;Position:不会影响布局，能让元素保持可以操作;Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;
3.CSS清除浮动的几种方法（至少两种）使用带clear属性的空元素使用CSS的overflow属性；使用CSS的:after伪元素；使用邻接元素处理；
4.CSS居中（包括水平居中和垂直居中）内联元素居中方案
水平居中设置：1.行内元素设置 text-align:center；
2.Flex布局设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)
垂直居中设置：1.父元素高度确定的单行文本（内联元素）设置 height = line-height；
2.父元素高度确定的多行文本（内联元素）a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；b:先设置 display:table-cell 再设置 vertical-align:middle；块级元素居中方案
水平居中设置：1.定宽块状元素设置 左右 margin 值为 auto；
2.不定宽块状元素a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；b:给该元素设置 displa:inine 方法；c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；
垂直居中设置：使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;利用display:table-cell属性使内容垂直居中;使用css3的新属性transform:translate(x,y)属性;使用:before元素;
5.写出几种IE6 BUG的解决方法双边距BUG float引起的 使用display3像素问题 使用float引起的 使用dislpay:inline -3px超链接hover 点击后失效 使用正确的书写顺序 link visited hover activeIe z-index问题 给父级添加position:relativePng 透明 使用js代码 改Min-height 最小高度 ！Important 解决’select 在ie6下遮盖 使用iframe嵌套为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
6.对于SASS或是Less的了解程度？喜欢那个？语法介绍
7.Bootstrap了解程度特点，排版，插件的使用;
8.页面导入样式时，使用link和@import有什么区别？link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
9.介绍一下CSS的盒子模型？有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
10.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？id选择器（ # myid）类选择器（.myclassname）标签选择器（div, h1, p）相邻选择器（h1 + p）子选择器（ul > li）后代选择器（li a）通配符选择器（ * ）属性选择器（a[rel = “external”]）伪类选择器（a: hover, li: nth – child）可继承的样式： font-size font-family color, UL LI DL DD DT;不可继承的样式：border padding margin width height ;优先级就近原则，同权重情况下样式定义最近者为准;优先级为:JavaScript12!important > id > class > tagimportant 比 内联优先级高
11.CSS3有哪些新特性？CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgba
JavaScript面试题
1.javascript的typeof返回哪些数据类型Ｏbject number function boolean underfind;
2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（== – ===）；
3.数组方法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除
4.ajax请求的时候get 和post方式的区别?一个在url后面 一个放在虚拟载体里面有大小限制安全问题应用不同 一个是论坛等只需要请求的，一个是类似修改密码的;
5.call和apply的区别Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)
6.ajax请求时，如何解释json数据使用eval parse,鉴于安全性考虑 使用parse更靠谱;
7.事件委托是什么让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
8.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包闭包就是能够读取其他函数内部变量的函数。
9.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild10.说一下什么是javascript的同源策略？一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
11.编写一个b继承a的方法;JavaScript1234567891011function A(name){ this.name = name; this.sayHello = function(){alert(this.name+” say Hello!”);};}function B(name,id){ this.temp = A; this.temp(name); //相当于new A(); delete this.temp; this.id = id; this.checkId = function(ID){alert(this.id==ID)};}
12.如何阻止事件冒泡和默认事件JavaScript12345678function stopBubble(e){ if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true}return false
13.下面程序执行后弹出什么样的结果?JavaScript12345678910111213141516171819function fn() { this.a = 0; this.b = function() { alert(this.a) }}fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { this.a = 30; alert(this.a); }}var myfn = new fn();myfn.b();myfn.c();
14.谈谈This对象的理解。
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象
15.下面程序的结果JavaScript1234567891011function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } };}var a = fun(0); a.fun(1); a.fun(2); a.fun(3);var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1); c.fun(2); c.fun(3);
//答案：
//a: undefined,0,0,0//b: undefined,0,1,2//c: undefined,0,1,1
16.下面程序的输出结果JavaScript123456789var name = 'World!';(function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); }})();
17.了解Node么？Node的使用场景都有哪些？高并发、聊天、实时消息推送
18.介绍下你最常用的一款框架jquery,rn,angular等;
19.对于前端自动化构建工具有了解吗？简单介绍一下Gulp,Grunt等；
20.介绍一下你了解的后端语言以及掌握程度
其它
1.对Node的优点和缺点提出了自己的看法？
(优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
2.你有哪些性能优化的方法？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4） 当需要设置的样式很多时设置className而不是直接操作style。（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
3.http状态码有那些？分别代表是什么意思？100-199 用于指定客户端应相应的某些动作。200-299 用于表示请求成功。300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。500-599 用于支持服务器错误。 503 – 服务不可用4.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）查找浏览器缓存DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求进行HTTP协议会话客户端发送报头(请求报头)文档开始下载文档树建立，根据标记请求所需指定MIME类型的文件文件显示浏览器这边做的工作大致分为以下几步：加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
5.你常用的开发工具是什么，为什么？Sublime,Atom,Nodepad++;
6.说说最近最流行的一些东西吧？常去哪些网站？Node.js、MVVM、React-native,Angular,Weex等CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等
7.介绍下你的项目（如果有的话）？并说一下在做这个项目中运用的技术以及遇到的难题是如何解决的