前端知识梳理1_html/css_WEB-ITnose

前段时间专心整理一下关于前端的面试问题。感谢耐心尽责的楷豪和闻东师兄最近给我们的指导和建议。大家可以通过这些问题，大家可以顺便看以下自己的水平。

https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese

 

我也利用课余时间（三天没安排课程的下午晚上）尝试写下自己的答案，水平有限，望体谅。

暂时只提供上半部分，下半部关于js和jQuery的还有部分答案未完全确认，稍后再发布。

 

你在昨天/本周学到了什么？

 　　这段事件一直在整理有关前端的面试题目，整理这也题目，不只是为了能够学习应付即将到来的面试，更是为了补补基础知识。日常项目开发进度太快了，很多属性或者方法用了就忘，这样会造成另外一个隐患，因为基本知识不够扎实，常用的方法用得不够熟练，就很难高效率地开发项目。

　　有了扎实的基础知识，才能其期盼自己走得更远。

　　1）知道W3C的标准，于是在编写html时候会规避“标签不闭合，乱嵌套，大小写混杂”可能造成不同浏览器展示不一致的隐患。

　　2）知道了CSS的“层叠”规则，整理并且对比了清楚浮动和实现居中的方法，还发现了一些不常用属性。于是，有利于日后高效地编写样式表。

　　等等，等等

 

编写代码的哪些方面能够使你兴奋或感兴趣？

　　编写代码最让我兴奋的是学习新的技术，尝试新的视觉效果的过程。

　　例如topview招新网站上，考虑到日后页面上由于丰富的交互和功能，脚本文件较大。虽然一般浏览器对文件有异步加载功能，但是这些文件指的是图片视频样式表等，不包含脚本，也就是说当加载脚本的时候会造成堵塞，脚本的加载会堵塞页面上的图片加载，也就是说因为脚本文件过大，用户可能需要等待较长的事件。当页面内部的脚本等基本元素没加载完毕，当时样式和结构已经加载完后，css3动画出现，四个小球流畅地旋转滚动直到脚本完全加载完毕。

　　前端本身就是一个美好有趣的领域。对于众多的网站或者系统来说，后台提供的功能才是核心模块，但是关乎网站或者系统是否能够持续地吸引用户的眼球，能否在同样类型的产品中脱颖而出，也许前端的交互是否人性化和性能是否稳定高效占了绝大多数因素。良好的用户体验，给他们积极高效的用户体验，甚至改变大众的生活方式，这正是我当初学习编程的初衷。

（面试官也许会问得：是怎么实现这个效果的或者关于用户体验方面你还做过哪些努力，没关系，我认真做了准备。甚至要对比一下css3过渡和动画的区别，鉴于篇幅有限，关于css3的具体使用就不在这里列举，用户体验方面的答案，下面会做回答。）

/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。*/@-webkit-keyframes spin {　　0% {　　　　-webkit-transform:rotate(0deg);　　}　　50% {　　　　-webkit-transform:rotate(-180deg);　　}　　100% {　　　　-webkit-transform:rotate(-360deg);　　}}/*使用 @keyframes 中创建动画，需要把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：　　　　规定动画的名称　　　　规定动画的时长*/-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;

具体可以参考：http://www.w3school.com.cn/css3/css3_animation.asp

闻东师兄推荐：http://www.tuicool.com/articles/NBbQjy3

在制作一个Web应用或Web站点的过程中，你是如何考虑它的UI、安全性、高性能、SEO、可维护性以及技术因素的？

（如果问我这个问题，我会很兴奋的，因为可以说半个小时。）

　　

谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等。)

　　（有两套开发环境，一套是用来平时团队项目的开发，我的jdk、tomcat、photoshop等等都部署安装在wins系统上面；另外一套是用来“装逼”的，呃，对于我这种选择困难症病人，纠结了一下最后决定说说“装逼”的那套开发环境）

　　操作系统用的是linux的ubuntu，能够是我接触到linux常用命令、下载安装、转移新增删除文件都很方便（面试官会问到哪些指令吗？）

　　编辑器是brackets，作为免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境，简约、优雅、快捷！

　　浏览器是chrome，内部提供的开发工具很丰富，例如单步调试、模拟不同像素设备、能够显示较多css3属性等。

　　

*你最熟悉哪一套版本控制系统？

（这个问题，用过git，用过myeclipse里的svn，用过tortoiseSVN将代码上传到sinaapp服务器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）

　　在Git 中的绝大多数操作都只需要访问本地文件和资源，不用连网。对于任何一个文件，在Git 内都只有三种状态：已提交（committed），已修改（modified）和已暂存（staged）。已提交表示该文件已经被安全地保存在本地数据库中了；已修改表示修改了某个文件，但还没有提交保存；已暂存表示把已修改的文件放在下次提交时要保存的清单中。　

基本的Git 工作流程如下所示：
　　1. 在工作目录中修改某些文件。
　　2. 对这些修改了的文件作快照，并保存到暂存区域。
　　3. 提交更新，将保存在暂存区域的文件快照转储到git 目录中。

常用命令：

//用git 把Git 项目仓库克隆到本地，以便日后随时更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告诉Git 开始对这些文件进行跟踪，然后提交：$ git add filenme.html//每次准备提交前，先用git status 看下，是不是都已暂存起来了，然后再运行提交命令$ git commit -m 'initial project version'// 把本地仓库提交到远程仓库的master分支中$ git push origin master 

你能描述一下当你制作一个网页的工作流程吗？

　　1）根据需求，确定主题。透彻深入所做网站的核心功能和关键。

　　2）收集资料。从对比相同类型的网站（惯用而熟悉的样式，用户更乐意接受），参照别人可行的实现方法。　　3）规划网站。抽离出类似的模块和可重用的部件。如果是响应式网站就需要设定断点，根据不同宽度屏幕设定样式。　　4）设计数据库。　　5）搭建基本的框架。引入重置样式表reset.css和字体样式表font.css，风格统一的图标还有后台需要用到的包。　　6）编码和调试。注意统一命名和编码规范。当多人开发时，还需要制定规范文档。　　7）上传测试。利用FTP工具，把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。 　　8）推广宣传 。不断宣传，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。 

　　9）维护更新 。网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者 

　　（具体还需要集合我的实际经验：http://www.cnblogs.com/0603ljx/p/4284521.html）　　

你能描述一下渐进增强和优雅降级之间的不同吗?

　　　　它们是看待同种事物的两种观点，它们关注在同一个网站同一功能在不同设备不同浏览器下的表现：

　　　　渐进增强，一开始值构建站点的最小特性，然后不断针对个浏览器追加功能，性能越好的设备能够显示更加出众的效果。

　　　　优雅降级，一开始就构造站点的完整功能，然后针对浏览器测试和修复。

　　　　web标准对可访问性做了如下定义：web内容对于残障用户或者普通的可阅读和可理解性。无论用户是否残障，都得通过用户代理（User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理 ：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。还得考虑用户访问Web内容时的环境限制 。比如：我们真的要考虑浏览器禁用JavaScript/CSS的情形吗？我的理解是，要考虑的其实不是禁用了JavaScript/CSS的浏览器，而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器，手机浏览器等，JavaScript提供的是一层可访问性，不能代替内容本身。

　　　　当然，从渐进增强的角度讲，鼓励使用高级特性，只是同时要做到优雅降级，让低端用户代理上，也能保留低保真的体验。（除了用户代理，还有什么方法检测客户端设备？特性检测，css3媒体查询）

　　(讲讲我在平时项目中，在“渐进增强”和“优雅降级”的努力)

如果提到了特性检测，可以加分。

　　　　　　

假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?
文件拼合，减少http请求。

　　用一个大的CSS文件替代多个小体积的CSS文件这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定的影响（这里指的是随着文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把CSS文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。因此，如果你有4个Javascript和3个css文件在页面中被加载，你浪费掉了7次因网络往返过程产生的时间。在美国，延迟平均是70毫秒，这样你就浪费了7*70 = 490毫秒，大致延迟了半秒的时间。在美国之外的国家访问你的页面，平均延迟大约是200毫秒，这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。

请解释一下什么是“语义化的 HTML”

　　分离结构和表现的另一个重要方式是使用语义化的标记来构造文档内容。一个XHTML元素的存在意味着被标记内容有相应的结构化意义，例如

是用来标记段落

标记标题

• 标记列表，不能过分使用

  　　语义化的标签往往与默认样式有所联系，像是Hx系列 表示标题，会被赋予默认的块级加粗居中样式；,用来区别于其他文字，起到了强调的作用。用来明确告诉你它们的用途。

  　　语义化标签让大家更直观认识标签和属性的用途。语义化的网页，对搜索引擎友好，更容易被搜索引擎抓取，有利于推广。

• *你如何对网站的文件和资源进行优化？
• 期待的解决方案包括：
• 文件合并（同上题“假若你有5个不同的 CSS 文件, 加载进页面的最好方式是？”）

　　　　　　　　减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。

• 文件最小化/文件压缩

　　　　　　　　即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。

• 使用 CDN 托管

　　　　　　　　CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

• 缓存的使用

　　　　　　　　Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的


Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu By DDD
R.E.P.O. Simpan Fail Lokasi: Di ​​manakah & bagaimana untuk melindunginya?
3 minggu yang lalu By DDD
Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu By DDD
R.E.P.O. Simpan Fail Lokasi: Di ​​manakah & bagaimana untuk melindunginya?
3 minggu yang lalu By DDD
Tunjukkan Lagi

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Tunjukkan Lagi

Topik panas
Di manakah pintu masuk log masuk untuk e-mel gmail?
7310
9
Tutorial Java
1624
14
Tutorial CakePHP
1345
46
Tutorial Laravel
1259
25
Tutorial PHP
1207
29
Tunjukkan Lagi

Related knowledge

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Apakah tujuan & lt; meter & gt; unsur?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Apakah tujuan & lt; DATALIST & GT; unsur?

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?

See all articles