在牛客网答题总结的前端面试71道HTML+CSS常考题

1、浏览器页面有哪三层构成，分别是什么，作用是什么?

       构成：结构层、表示层、行为层

       分别是：HTML、CSS、JavaScript

       作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

2、HTML5的优点与缺点？

优点： 

       a、网络标准统一、HTML5本身是由W3C推荐出来的；

       b、多设备、跨平台；

       c、即时更新；

       d、提高可用性和改进用户的友好体验；

       e、有几个新的标签，这将有助于开发人员定义重要的内容；

       f、可以给站点带来更多的多媒体元素(视频和音频)； 

       g、可以很好的替代Flash和Silverlight；

       h、涉及到网站的抓取和索引的时候，对于SEO很友好；

       i、被大量应用于移动应用程序和游戏。

缺点：

      a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。

      b、完善性：许多特性各浏览器的支持程度也不一样。

      c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战

      d、性能：某些平台上的引擎问题导致HTML5性能低下。

      e、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

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

       Doctype声明指出阅读程序应该使用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。

       (1)   声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的HTML 文档。

       (2)   所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。

        (3)   浏览器解析时到底使用标准模式还是怪异模式，与你网页中的 DTD 声明直接相关， DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明 ，将使网页进入怪异模式。

4、HTML5有哪些新特性、移除了哪些元素？

       Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4 大类。

结构性元素主要负责web上下文结构的定义

       section：在 web 页面应用中，该元素也可以用于区域的章节描述。

       header：页面主体上的头部， header 元素往往在一对 body 元素中。

       footer：页面的底部（页脚），通常会标出网站的相关信息。

       nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

       article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

级块性元素主要完成web页面区域的划分，确保内容的有效分割。

      aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

      figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。

      code：表示一段代码块。

      dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。

      行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。

      meter：表示特定范围内的数值，可用于工资、数量、百分比等。

      time：表示时间值。

      progress：用来表示进度条，可通过对其 max、min、step 等属性进行控制，完成对进度的表示和监事。

      video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。

       audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。

       details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。

       datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。

       menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。

       command：用来处理命令按钮。

 移除的元素：

       (1)    纯表现的元素：basefont, big, center, font, s, strike, tt, u;

       (2)    对可用性产生负面影响的元素：frame, frameset, noframes;

5、你做的网页在哪些浏览器测试过，这些浏览器的内核分别是什么？

        IE:trident内核

        Firefox:gecko内核

        Safari:webkit内核

        Opera:以前是presto内核，Opera现已改用Goolge Chrome的Blink内核

        Chrome:Blink(基于webkit, Google与Opera Software共同开发)

6、说说你对HTML5的认识，是什么？为什么？

       是什么：HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application ，RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换1999 年所制定的 HTML4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。

       为什么：HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。HTML5增强了浏览器的原生功能，符合HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

7、对WEB标准以及W3C的理解与认识？

（1）WEB标准

        什么是WEB标准：一系列标准的集合，包括结构化标准语言（html等）、表现标准语言（css）、行为标准语言（ECMAScript等）。这些标准大部分是由万维网联盟起草和发布。

          为什么使用web标准：为了解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题。

（2）W3C（World WideWeb Consortium）

          万维网联盟，是一个web开发的国际性联盟，是Web技术领域最权威和影响力的国际中立性技术标准机构。

8、HTML5行内元素有哪些？块级元素有哪些？空元素有哪些？

（1）行内元素：

         a - 锚点

        * abbr - 缩写

        * acronym- 首字

* b - 粗体 ( 不推荐 )

* bdo -bidi override

* 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 - 定义变量

   （2）块元素（block element）

*address - 地址

* blockquote - 块引用

* center - 居中对齐块

* dir - 目录列表

* div - 常用块级容易，也是 css layout 的主要标签

* dl - 定义列表

* fieldset - form控制组

* form - 交互表单

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* isindex - input prompt

* menu - 菜单列表

* noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容

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

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

可变元素:可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet

* button - 按钮

* del - 删除文本

* iframe - inline frame

* ins - 插入的文本

* map - 图片区块 (map)

* object - object对象

* script - 客户端脚本

(3)空元素（在HTML[1]元素中，没有内容的HTML元素被称为空元素）

<br/>//换行

<hr>//分割线

<input>//文本框等

<img>//图片

<link><meta>

9、什么是WebGL，它有什么优点？

       WebGL（全写 WebGraphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

        WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：

第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ；

第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

       通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

10、请你描述一下cookies, sessionStorage和localStorage的区别？

       （1）cookies：一小段文本信息，伴随着用户请求和页面在服务器和浏览器之间传递。因为HTTP协议是无状态，对于一个浏览器发出的多次请求，web服务器无法区分是否来自同一个浏览器，此时需要额外的数据用于维持会话。
       （2）sessionStorage:用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，会话结束数据随之销毁，它并非持久化的本地存储。

        （3）localStorage:用于持久化的本地存储，除非主动删除数据，否则数据永远都不会过期。

       sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

        sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同窗口（或 tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后， sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的。cookies会发送到服务器端。其余两个不会。

       Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie 。 Firefox 每个域名 cookie 限制为 50 个。 Opera 每个域名 cookie 限制为 30 个。 Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名（ name ）、值（ value ）和等号。 Opera 许 cookie 多达 4096 个字节，包括：名（ name ）、值（ value ）和等号。 Internet Explorer 允许 cookie 多达 4095 个字节，包括：名（ name ）、值（ value ）和等号。

区别：

Cookie

l  每个域名存储量比较小（各浏览器不同，大致4k）

l  所有域名的存储量有限制（各浏览器不同，大致4k）

l  有个数限制（各浏览器不同）

l  会随请求发送到服务器

LocalStorage

l  永久存储

l  单个域名的存储量有限制（推荐5MB，各浏览器不同）

l  总体数量无限制

SessionStorage

l  只在Session内有效

l  存储量更大（推荐没有限制，但是实际上各浏览器也不同）

11、对HTML语义化的理解？

什么是HTML语义化？

       （基本都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等）根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？

       为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；

       用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

       有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。

       方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方法来渲染页面；

       便于团队开发和维护，语义化更具可读性，是下一步页面的重要动向，遵循W3C标准的团队都要遵循这个标准，可以减少差异化。

语义化标签

<header></header>

<footer></footer>

<nav></nav>

<section></section>

<article><article>SM:用来在页面找那个表示一套结构完整且独立的内容部分。

        <aside></aside>SM:主题的附属信息（用途很广，主要就是一个附属内容），如果article里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了。

         <figrue></figure>SM:媒体元素，比如一些视频，图片等等。

         <datalist></datalist>SM:选项列表，与input元素配合使用，来定义input可能的值。

         <details></details>SM:用于描述文档或者文档某个部分的细节，默认属性为open，配合summary一起使用。

12、link和@import的区别？

XML/HTML代码

<link rel='stylesheet' rev='stylesheet'href='CSS文件 'type='text/css' media='all' />

XML/HTML代码

<style type='text/css'media='screen'>

@import url('CSS文件 ');

</style>

两者都是外部引用CSS方式，但是存在一定的区别：

        区别1：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。

        区别2：link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。

        区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

        区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

13、对SVG的理解？

       SVG可缩放矢量图形（ScalableVector Graphics）是基于可扩展标记语言（X