zoukankan      html  css  js  c++  java
  • 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:perfectio@yeah.net">联系我</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属性值,这样可以绕开以上两个问题。

  • 相关阅读:
    DB2 for Z/os Statement prepare
    Foreign key (referential) constraints on DB2 LUW v105
    复制Informational constraints on LUW DB2 v105
    DB2 SQL Mixed data in character strings
    DB2 create partitioned table
    MVC中使用EF的技巧集(一)
    Asp.Net MVC 开发技巧(二)
    Linq使用技巧及查询示例(一)
    Asp.Net MVC 开发技巧(一)
    Asp.Net MVC Identity 2.2.1 使用技巧(八)
  • 原文地址:https://www.cnblogs.com/breathee/p/9245643.html
Copyright © 2011-2022 走看看