前端实习生面试题(一)--HTML

目录

1. 文档头声明的意义和作用 

2. CSS盒模型

3.HTML和XHTML的区别 

4. 语义化的理解 

5. 一个静态的HTML文件里边可能包含JS,CSS,它的一个加载顺序是怎样的? 

6. window.onload和$(document).ready()区别 

7. 什么是window对象,什么是document对象?

8.  如果将CSS放在后面会出现什么问题?   

9. 哪些性能优化的方法

10. 三种减少页面加载时间的方法

11. Src和href的区别

12. 平时怎么管理你的团队

13. 网站重构的理解

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

HTML

1.文档头的声明意义和作用?

(1)声明位于文档中的最前面,处于标签之前。告诉浏览器的解析器,用什么文档类型规范来解析这个文档。

(2) 假如文档中的标记不遵循doctype声明所指定的文档定义类型(dtd),这个文档有可能无法在浏览器中正确显示。

标准模式:标准模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行混杂模式。

 混杂模式:页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

2.CSS盒模型

CSS盒模型:网页设计中css技术所使用的一种思维模型。

CSS盒模型组成:外边距(margin),边框(border),内边距(paddimg),内容(content)

CSS盒模型分类:标准W3C盒子模型,IE盒子模型

区别:二者的区别在于height和width的计算。

标准W3C盒子模型:height=content  , width=content   

 IE盒子模型:height=content+padding+border, width=content+padding+border

3.HTML和XHTML的区别

 Xhtml必须被正确的关闭;

Xhtml必须被正确的嵌套;  

Xhtml标签名必须小写;

Xhtml必须拥有根元素(必须嵌套于<html></html>根元素中);

4.语义化的理解

更直观的认识标签或属性;

去掉或者丢失样式的时候能让页面呈现清晰的结构;  

有利于SEO:和搜索引擎建立良好的沟通,有助于爬虫爬取更多有效信息;

便于团队开发和维护,使网页更具可读性,减少差异化

5.一个静态HTML文件里包含JS, CSS,它的加载顺序是怎样的?

  (1)解析HTML文件,创建DOM树  

自上而下,遇到任何样式(link,style会阻塞),但css加载不会阻塞DOM树的解析,只会阻塞DOM树的渲染。 

 而js加载,需等到js加载完毕后才继续DOM树的解析和渲染。 如果外部脚本过大,加载时间比较长的话,就会造成网页失去响应。 

也是为什么在js文件开头写window.onload或者$(document).ready(),或者将script放在body后面的原因。

    (2)解析CSS。          

 优先级:浏览器默认设置<用户设置<外部样式<内联样式<内嵌样式  

    (3)将CSS规则与DOM树合并,构建渲染树(Render Tree)  

    (4)进行布局和绘制

6.window.onload和$(document).ready()区别

 window.onload是DOM文档结构加载完毕和所有文件(包括图片)加载完后所执行的一个函数。

 $(document).ready()则表示仅DOM文档加载完所执行的一个函数

7.什么是window对象,什么是document对象?

window对象它是一个顶层对象,表示一个浏览器窗口或一个框架。

 document对象是window对象的一个对象属性,每个载入浏览器的HTML文档都会成为Document对象。可通过window.document属性对其进行访问

8.如果将CSS放在后面,会出现什么问题?

   正常来讲css放在前面,这样就会先加载css的样式,在渲染dom的时候已经知道自己的样式,无需再次渲染。

   如果放后面,那么先渲染DOM,再加载CSS后,又要重新渲染,这就意味这要进行两次渲染,影响性能。

9. 哪些性能优化的方法

减少http请求次数,将通过网络请求获取的数据保存到本地

用innerHTML代替DOM操作,优化js性能

设置样式时,应该设置className,而不是直接设置style

缓存DOM节点查找的结果,减少IO读取操作

避免使用Css表达式

图片预加载,将样式表放在顶部,将脚本放在底部

10. 三种减少页面加载时间的方法

优化图片

使用web格式的图片,如果对颜色要求不高,可以用gif

优化css即压缩合并css

标明图片的高度和宽度(如果浏览器没有找到这两个参数,就会一边下载一边计算大小,如果知道这两个参数,就会预先腾出位置,继续加载)

11. Src和href的区别 

href 是指向网络资源所在的位置,建立和当前元素或文档之间的链接,用于超链接

src 是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img等

12. 平时怎么管理你的团队

1. 我会确定好全局样式(globe.css),编码模式(utf-8) 等

2. 并且告诉他们编写代码时的规范

3.各模块都及时编写人,以及各个模块内的功能标注注释,

4.如果是用vue框架,并且项目比较小时,我会写好大体框架,只需他们负责编写各个模块,最终由我来负责模块的整合

团队方面,

我会负责团队进度的把控,注重每名成员的感情情绪,调控团队的氛围和成员的激情,定时总结团队的问题和成果。

13. 网站重构的理解

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,964评论 1 45
  • 前端开发者丨http请求 https:www.rokub.com 前言见解有限, 如有描述不当之处, 请帮忙指出,...
    麋鹿_720a阅读 13,760评论 11 31
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,067评论 0 7
  • 今年自己最喜欢的回忆或者成就 比较混乱的一年,发生的很多事儿,好的,坏的,最高兴的事情莫过于小朋友慢慢想法,现在刚...
    阳光小花阅读 994评论 0 0