HTML前端面试题求职季必备

前端面试题HTML部分

求职季到啦!慕粉在慕课手记里整理了很多面试经典题目、答案和心得。有任何疑问或补充欢迎到慕课手记里留言哦!

慕女神祝大家求职顺利~

Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

Doctype声明位于文档中最前面的位置,处于标签之前.此标签可告诉文档使用哪种HTML或XHTML规范.该标签可声明三种DTD类型,分别表示严格版本/过渡版本/基于框架的HTML文档.

HTML5为什么只需要写!DOCTYPEHTML?

doctype是documenttype(文档类型)的简写,在页面中,用来指定页面所使用的xhtml(或者html)的版本。要想制作符合标准的页面,一个必不可少的关键组成部分就是doctype声明。只有确定了一个正确的doctype,xhtml里的标识和css才能正常生效。html告诉浏览器这个文件是html格式网页文件.

两个合起来就是html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。

行内元素有哪些?块级元素有哪些?空(void)元素有那些?

常见块元素(blockelement)

address-地址

blockquote-块引用

center-居中对齐块

dir-目录列表

div-常用块级容器,也是csslayout的主要标签

dl-定义列表

fieldset-form控制组

form-交互表单

h1-大标题

h2-副标题

h3-3级标题

h4-4级标题

h5-5级标题

h6-6级标题

hr-水平分隔线

isindex-inputprompt

menu-菜单列表

noframes-frames可选内容,(对于不支持frame的浏览器显示此区块内容)

noscript-可选脚本内容(对于不支持script的浏览器显示此内容)

ol-排序表单

p-段落

pre-格式化文本

table-表格

ul-非排序列表(无序列表)

常见行内元素(inlineelement)

a-锚点

abbr-缩写

acronym-首字

b-粗体(不推荐)

bdo-bidioverride

big-大字体

br-换行

cite-引用

code-计算机代码(在引用源码的时候需要)

dfn-定义字段

em-强调

font-字体设定(不推荐)

i-斜体

img-图片

input-输入框

kbd-定义键盘文本

label-表格标签

q-短引用

s-中划线(不推荐)

samp-定义范例计算机代码

select-项目选择

small-小字体文本

span-常用内联容器,定义文本内区块

strike-中划线

strong-粗体强调

sub-下标

sup-上标

textarea-多行文本输入框

tt-电传文本

u-下划线

var-定义变量

可变元素

可变元素由上下文语境来决定是块元素还是内联元素[1]。

applet-javaapplet

button-按钮

del-删除文本

iframe-inlineframe

ins-插入的文本

map-图片区块(map)

object-object对象

script-客户端脚本

空元素

由于HTML元素的内容是开始标签与结束标签之间的内容。而某些HTML元素具有空内容。(emptycontent),那些含有空内容的HTML元素,就是空元素。空元素[2]是在开始标签中关闭的。

例子

br就是没有关闭标签的空元素。

页面导入样式时,使用link和

import有什么区别?

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

差别1:老祖宗的差别。link属于XHTML标签,而

import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,

import就只能加载CSS了。

差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而

import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览

import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

差别3:兼容性的差别。由于

import是CSS2.1提出的所以老的浏览器不支持,

import只有在IE5以上的才能识别,而link标签无此问题。

差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为

import不是dom可以控制的。

差别5:

import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表.

介绍一下你对浏览器内核的理解?

浏览器最重要或者说核心的部分是“RenderingEngine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

常见的浏览器内核有哪些?常见的有四大内核:

Trident:IE浏览器使用的内核,该内核程序在年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE9。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如Maxthon、TheWorld、TT、GreenBrowser、AvantBrowser等)。

Gecko:Netscape6开始采用的内核,后来的MozillaFireFox(火狐浏览器)也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。Gecko引擎的由来跟IE不无关系,前面说过IE没有使用W3C的标准,这导致了微软内部一些开发人员的不满;他们与当时已经停止更新了的Netscape的一些员工一起创办了Mozilla,以当时的Mosaic内核为基础重新编写内核,于是开发出了Geckos。不过事实上,Gecko内核的浏览器仍然还是Firefox(火狐)用户最多,所以有时也会被称为Firefox内核。此外Gecko也是一个跨平台内核,可以在Windows、BSD、Linux和MacOSX中使用。

Presto:目前Opera采用的内核,该内核在年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了 ,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。实际上这是一个动态内核,与前面几个内核的 的区别就在脚本处理上,Presto有着天生的优势,页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度,根据在同等条件下的测试,Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3(Trident内核最慢,不过两者相差没有多大)。只可惜Presto是商业引擎,这很大程度上限制了Presto的发展。

Webkit:苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。google的chrome也使用webkit作为内核。WebKit内核在手机上的应用也十分广泛,例如Google的手机Gphone、Apple的iPhone,等所使用的Browser内核引擎,都是基于WebKit。win10的IEedge也是。

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

HTML5已形成了最终的标准,概括来讲,它主要是关于图像,位置,存储,多任务等功能的增加。

新增的元素有绘画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。

--兼容:1.IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。2.使用是html5shim框架

--区分:DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。简述一下你对HTML语义化的理解?

语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。

在没有CSS的时候能够清晰的看出网页的结构,增强可读性。

便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。

支持多终端设备的浏览器渲染。

HTML5的离线储存怎么使用,工作原理能不能解释一下?

HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作;

上面提到的HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

当我们 次正确配置appcache后,当我们再次访问该应用时,浏览器会首先检查manifest文件是否有变动,如果有变动就会把相应的变得跟新下来,同时改变浏览器里面的appcache,如果没有变动,就会直接把appcache的资源返回,基本流程是这样的。

请描述一下cookies/sessionStorage/localStorage的区别?

共同点:都是保存在浏览器端,且同源的。

区别:cookie数据始终在同源的







































北京治疗白癜风医院
北京治白癜风 的专科医院



转载请注明:http://www.xxcyfilter.com/zyyq/3936.html