html面试题总结

1.请描述一个网页从开始请求到最终显示的完整过程?

1).在浏览器中输入网址;

2).发送至DNS服务器并获得域名对应的WEB服务器的IP地址;

3).与WEB服务器简历TCP连接;

4).浏览器向WEB服务器的IP地址发送相应的HTTP请求;

5).WEB服务器响应请求并返回指定的URL数据,或错误信息,若设定重定向,则重新定向到新的URL地址;

6).浏览器下载数据后解析HTML源文件,解析的过程中实现对页面的排版,解析完成后在浏览器中显示基础页面;

7).分析页面中的超链接并显示在当前页面,重复以上过程直至无超链接需要发送,完成全部显示。

2.DOCTYPE声明的作用是什么,严格模式与混杂模式如何区分?

<!DOCTYPE>声明位于文档的最前面,处于<html>标签前,告知浏览器的解析器,用声明文档类型规范来解析这个文档。

在严格模式(标准模式)中,浏览器根据规范呈现页面;在混杂模式中,页面以向后兼容的方式显示,以防止老站点无法工作。

如果HTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现,对于HTML4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

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

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎:解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

3,.简要描述常见的浏览器内核

浏览器内核负责对网页语法的解释并显示网页,它决定了浏览器如何显示网页的内容以及页面的格式信息。

常见的浏览器内核有:Trident:IE; Gecko:Mozilla浏览器如firefox ; Webkit: safari浏览器,也是chrome浏览器的内核原型;Blink:Chrome浏览器,Opera浏览器

4.如何理解html标签语义化?

语义化的主要目的在于直观的认识标签和属性的用途和作用,可以概括为用正确的标签做正确的事情。

html语义化可以让页面的内容结构化,便于浏览器解析,便于搜索引擎解析,并提高代码的可维护度和可重用性。比如以结构化标签<header>、<section>、<footer>等来代替无语义的标签div.

5.锚点的作用是什么?如何创建

锚点是文档某行的一个记号,类似于书签,用于链接到文档中的某个位置。当定义锚点后,我们可以创建直接跳至该锚点的链接,这样试用装就无需不停的滚动页面来寻找他们需要的信息了。

在使用<a>元素创建锚点时,需要使用name属性为其命名,代码如下:

<a name="anchr">锚点</a>

然后创建链接,直接跳转到锚点,代码如下;

<a href="#anchr">回到锚点</a>

6.使用<label>元素显示文本与使用其他文本标记显示文本有什么不同?

<label>元素的直观效果是直接显示标记之间的文本,而且不会为文本呈现任何特殊效果,但是它和其他文本标记所不同的是,它是为鼠标用户改进了用户体验性。

这是因为它可以附带一个for属性,只要将该属性的值设置为表单中任何一个控件的id属性值,则当用户点击该标签(文本)时,浏览器就会自动将焦点转到和标签相关的表单控件上

7.列举常用的结构标记,并描述其作用

结构标记专门用于作为语义化的标签来标识页面中的不同结构,常用有:

<header>元素:用于定义文档的页眉; <nav>元素:用于定义页面的导航链接部分; <section>元素:用于定义文档中的节,标识文档中的一个具体组成部分;

<article>元素:常用于定义独立于文档的其他部分的内容; <footer>元素:常用于定义某区域的脚注信息;<aside>元素:常用于定义页面的一些额外组成部分,如广告栏、侧边栏和相关引用信息。

8.超级链接有哪些常见的表现形式?

1.普通超级链接,语法为:

 <a href="' target="">文本</a>

2.下载链接,即目标文档为下载资源,语法如:

    <a href="day02.zip">下载</a>

3.电子邮件链接,用于链接到email,语法如:

   <a href="mailto:[email protected]">联系我</a>

4.空连接用于返回页面顶部如:

   <a href="#">..</a>

5.链接到JavaScript以实现特定的代码功能如:

   <a href="javascript:void(0)">不做反应</a>

   <a href="javascript:...">JS功能</a>

9.简要描述行内元素和块级元素的区别

(1)行内元素有:a b span img input select strong(强调的语气)

(2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

(3)常见的空元素: <br> <hr> <img> <input> <link> <meta>

鲜为人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

块级元素的前后都会自动换行,如同存在换行符一样,默认情况下,块级元素会独占一行

行内元素可以与其他行内元素位于同一行,在浏览器中显示时不会换行,对其不能设置高度和宽度。

还有一种称为行内块级元素,比如<img>、<input>等,可以和其他行内元素位于一行,且设置其高度和宽度

10.表单向服务器提交数据有几种方式,有什么区别?

将表单数据发送给服务器常用方式有两种:Get和Post。

浏览器发送给服务器的HTTP请求分为请求头(header)和请求主体(body)两部分,其中必须包含头部分,用于指定发送请求的方式、目的地以及其他关键信息;而主体是可选的,在头数据和主体数据之前用一个空白行来隔开。

两种方式的区别主要是发送数据方式不同,使用Get方式向服务器发送表单数据时,表单数据将附加在URL属性的末端;采用POST方法发送数据时,数据会防止在主体中发送

11.HTML5 为什么只需要写 <!DOCTYPE HTML>

HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);

而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

12.页面导入样式时,使用link和@import有什么区别?

  (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
  (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  (3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题; 
   (4)link支持使用js控制DOM去改变样式,而@import不支持;

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

在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。

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

如何使用: 1、页面头部像下面一样加入一个manifest的属性;

2、在cache.manifest文件的编写离线存储的资源;

CACHE MANIFEST

#v0.11 CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK: / /offline.html

3、在离线状态时,操作window.applicationCache进行需求实现。

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

在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。 离线的情况下,浏览器就直接使用离线存储的资源。

15.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。

cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

存储大小: cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

有期时间: localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据; sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

16.iframe有那些缺点?

*iframe会阻塞主页面的Onload事件;

*搜索引擎的检索程序无法解读这种页面,不利于SEO;

*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript 动态给iframe添加src属性值,这样可以绕开以上两个问题。

猜你喜欢

转载自www.cnblogs.com/breathee/p/9245643.html