Hello World

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:48 AM

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

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元素的存在意味着被标记内容有相应的结构化意义，例如

是用来标记段落

：死铁路 - 如何完成所有挑战
1 个月前 By DDD

如何修复KB5055523无法在Windows 11中安装？
2 周前 By DDD

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7722

15

Java教程

1642

14

CakePHP 教程

1396

52

Laravel 教程

1289

25

PHP教程

1233

29

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

Gitee Pages静态网站部署失败：单个文件404错误如何排查和解决？ Apr 04, 2025 pm 11:54 PM
GiteePages静态网站部署失败：404错误排查与解决在使用Gitee...

网页批注如何实现Y轴位置的自适应布局？ Apr 04, 2025 pm 11:30 PM
网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能，特别是如何处理批注之间的间�...

HTML，CSS和JavaScript：Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？ Apr 05, 2025 am 06:15 AM
实现图片点击后周围图片散开并放大效果许多网页设计中，需要实现一种交互效果：点击某张图片，使其周围的...

See all articles