web前端最新最全面试题总结(HTML5)

h5新增的内容和api

  • 简化的文档类型和字符集
  • 富有语义化的新结构元素
  • 新增的内联元素
  • 支持动态页面
  • 全新的表单设计
  • 强大的绘图功能和多媒体功能
  • 打造桌面应用的一系列新功能
  • 获取地理位置信息
  • 支持多线程
  • history对象

cookies,sessionStorage 和 localStorage 的区别

相同点:都存储在客户端
不同点:

1.存储大小

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

2.有效时间

  • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  • cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
  1. 数据与服务器之间的交互方式
  • cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

HTML5 为什么只需要写 ?

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

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

你知道多少种Doctype文档类型?

  • 该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
  • HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
  • XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
  • Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks
  • (包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

简述一下你对HTML语义化的理解?

答:用正确的标签做正确的事情。

html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;

即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;

使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML 和HTML5?

答:

​ (Q1)

HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素,比如 article、footer、header、nav、section;

(6)表单控件,calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

(Q2)

IE8/IE7/IE6支持通过document.createElement方法产生的标签,

可以利用这一特性让这些浏览器支持HTML5新标签,

浏览器支持新标签后,还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim,

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

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

HTML与XHTML——二者有什么区别

区别:

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使“--8.图片必须有说明文字

说几条XHTML规范的内容(至少3条)

  1. 所有的标记都必须有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须使用小写
  3. 所有的xml标记都必须合理嵌套
  4. 所有的属性值都必须用引号“”括起来
  5. 所有的<和&特殊符号用编码表示
  6. 给所有属性赋一个值

HTML5中的DataList是什么?

定义选项列表,与input元素配合使用,来定义input可能的值。datalist及其选项不会被显示出来,他仅仅是合法的输入值列表

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
datalist>

SVG是什么?

svg(Scalable Vector Graphics,可伸缩矢量图形)由万维网联盟(W3C)推出的基于xxxxim编码的开放式图形、图像标准。他虽然是一种二维矢量图形格式,但其中包含矢量图形、光栅图像及文本等。

  • SVG 是代码,通过浏览器的解析而渲染成一种图形;
  • 可缩放矢量图形是基于可扩展标记语言(XML),以描述二维矢量图形的一种图形格式,由万维网联盟(

World Wide Web Consortium,W3C)指定,是一个开放标准;

  • 矢量图与像素图的不同就在于,矢量图是由数学表达式定义的,矢量图不适合表现色彩丰富的照片,更加适合展示简单的几何图案;

你熟悉SVG样式的书写吗?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

HTML5canvas是什么?

Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。

能用Canvas做些什么?

  1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧,Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。
  2. 图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作,但Ohad认为大家完全可以用Canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。
  3. banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
  4. 模拟器:Ohad认为,无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。
  5. 远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
  6. 字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。
  7. 图形编辑器:Ohad预测,图形编辑器将能够100%基于Web实现。
  8. 其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力,运用HTML5技术创造更多价值。

HTML5应用程序缓存及原理Application Cache

原理

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

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

什么是Application Cache

HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用。

Application Cache带来的三个优势是:

① 离线浏览

② 提升页面载入速度

③ 降低服务器压力

而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响

离线存储技术

HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景;传统还有离线存储技术为Cookie。

经过实践我们认为localstorage应该存储一些非关键性ajax数据,做锦上添花的事情;

Application Cache用于存储静态资源,仍然是干锦上添花的事情;

而cookie只能保存一小段文本(4096字节);所以不能存储大数据,这是cookie与上述缓存技术的差异之一,而因为HTTP是无状态的,服务器为了区分请求是否来源于同一个服务器,需要一个标识字符串,而这个任务就是cookie完成的,这一段文本每次都会在服务器与浏览器之间传递,以验证用户的权限。

所以Application Cache的应用场景不一样,所以使用也不一致。

Application Cache简介

Application Cache的使用要做两方面的工作:

① 服务器端需要维护一个manifest清单

② 浏览器上只需要一个简单的设置即可

如何区分HTML和HTML5?

  1. 在文档类型声明上

  1. 在结构语义上

**HTML: **没有体现结构语义化的标签,通常都是这样来命名的

,这样表示网站的头部。
HTML5: 在语义上却有很大的优势,提供了一些新的HTML5标签比如: article、footer、header、nav、section,这些通俗易懂。

HTML5常见的兼容性问题?

1.让老式浏览器支持HTML5

2.让老式浏览器兼容css3

对web标准化(或网站重构)知道哪些相关的知识,简述几条你知道的Web标准?

网页主要有三部分组成:结构(Structrue)、表现(presentation)和行为(Behavior)。对应的网站标准也分为三方面:

  • 结构化标准语言,主要包括XHTML和XML;
  • 表现标准主要包括css
  • 行为标准主要包括对象模型(如W3C DOM)、ECMAScript等

web标准以及w3c标准

标签闭合,标签小写,不乱嵌套,使用外链形式的css和js,结构层,表现层,行为层分离

data-属性的作用是什么?

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

  • 属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
  • 属性值可以是任意字符串

如果把HTML5看作做一个开放平台,那它的构建模块有哪些?

你可能感兴趣的:(面试题)