前端面试经典题目合集（HTML+CSS）（二）

1、Label的作用是什么，是怎么用的？

参考答案

label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

<label>Date:<input type='text' name='B'/></label>

注意:label的for属性值要与后面对应的input标签id属性值相同

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

2、如何实现浏览器内多个标签页之间的通信?

参考答案

WebSocket、 SharedWorker ；

也可以调用localstorage、 cookies 等本地存储方式；

localstorage另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，

我们通过监听事件，控制它的值来进行页面信息通信；

注意quirks： Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

3、如何在页面上实现一个圆形的可点击区域？

参考答案

a、 map+area 或者 svg

b、 border-radius

c、纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

4、title与h3的区别、b与strong的区别、i与em的区别？

参考答案

title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： <strong> 会重读，而 <B> 是展示强调内容。

i内容展示为斜体， em 表示强调的文本；

Physical Style Elements -- 自然样式标签

b, i, u, s, pre

Semantic Style Elements -- 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用 , 如果不能确定时首选使用自然样式标签。

5、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？

参考答案

<divstyle="width:100%;height:1px;background-color:black"></div>

6、HTML5标签的作用?(用途)

参考答案

a、使Web页面的内容更加有序和规范

b、使搜索引擎更加容易按照HTML5规则识别出有效的内容 

c、使Web页面更接近于一种数据字段和表

7、简述一下src与href的区别？

参考答案

src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。

src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。

<script src ='js.js'></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href='common.css' rel='stylesheet'/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用@import 方式。

8、谈谈你对canvas的理解？

参考答案

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

9、WebSocket与消息推送？

参考答案

B/S架构的系统多使用HTTP协议，

HTTP协议的特点： 1 无状态协议 2 用于通过 Internet 发送请求消息和响应消息 3 使用端口接收和发送消息，默认为80端口 底层通信还是使用Socket完成。

HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送（ F5 已坏） , 一些变相的解决办法：

双向通信与消息推送

轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。 
优点：后端程序编写比较容易。 
缺点：请求中有大半是无用，浪费带宽和服务器资源。 
 实例：适于小型应用。

长轮询：客户端向服务器发送Ajax请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。 
优点：在无消息的情况下不会频繁的请求，耗费资小。 
缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。 Comet 异步的 ashx ， 
实例：WebQQ、 Hi 网页版、 Facebook IM 。

长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求，服务器端就能源源不断地往客户端输入数据。 
优点：消息即时到达，不发无用请求；管理起来也相对便。 
缺点：服务器维护一个长连接会增加开销。 
实例：Gmail聊天

Flash Socket：在页面中内嵌入一个使用了 Socket 类的 Flash 程序 JavaScript 通过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通信， JavaScript 在收到服务器端传送的信息后控制页面的显示。 
优点：实现真正的即时通信，而不是伪即时。 
缺点：客户端必须安装Flash插件；非 HTTP 协议，无法自动穿越防火墙。 
 实例：网络互动游戏。

Websocket:

WebSocket是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。

特点:

a、事件驱动

b、异步

c、使用 ws 或者 wss 协议的客户端 socket

d、能够实现真正意义上的推送功能

缺点：少部分浏览器不支持，浏览器支持的程度与方式有区别。

10、img的title和alt有什么区别？

参考答案

Alt 用于图片无法加载时显示 Title 为该属性提供信息，通常当鼠标滑动到元素上的时候显示

11、表单的基本组成部分有哪些，表单的主要用途是什么？

参考答案

组成：表单标签、表单域、表单按钮

a、表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。

b、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

主要用途：表单在网页中主要负责数据采集的功能，和向服务器传送数据。

12、表单提交中Get和Post方式的区别？

参考答案

(1)、 get 是从服务器上获取数据， post 是向服务器传送数据。

(2)、 get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。

(3)、对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。

(4)、 get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB。

(5)、 get 安全性低， post 安全性较高。

13、HTML5 有哪些新增的表单元素？

参考答案

HTML5 新增了很多表单元素让开发者构建更优秀的 Web 应用程序，主要有：

datalist

keygen

output

14、HTML5 废弃了哪些 HTML4 标签？

参考答案

HTML5 废弃了一些过时的，不合理的HTML 标签：

· frame

· frameset

· noframe

· applet

· big

· center

· basefront

15、HTML5 标准提供了哪些新的 API？

参考答案

HTML5 提供的应用程序 API 主要有：

· Media API

· Text Track API

· Application Cache API

· User Interaction

· Data Transfer API

· Command API

· Constraint Validation API

· History API

16、HTML5 存储类型有什么区别？

参考答案

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。 HTML5  提供了下面两种本地存储方案：

· localStorage  用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。

· sessionStorage  同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

17、HTML5 应用程序缓存和浏览器缓存有什么区别？

参考答案

应用程序缓存是 HTML5  的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

<!doctype html>

<html manifest=”example.appcache”>

…..

</html>

 

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

18、HTML5 Canvas 元素有什么用？

参考答案

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作，

 

 

<canvas id=” canvas1 ″ width= ” 300 ″ height= ” 100 ″ >

</canvas>

19、除了 audio 和 video，HTML5 还有哪些媒体标签？

参考答案

HTML5 对于多媒体提供了强有力的支持，除了 audio 和 video 标签外，还支持以下标签：

 

<embed> 标签定义嵌入的内容，比如插件。

 

 

<embed type=” video/quicktime ” src= ” Fishing.mov ” >

<source> 对于定义多个数据源很有用。

 

 

<video width=” 450 ″ height= ” 340 ″ controls>

     <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >

     <source src=” jamshed.ogg ” type= ” video/ogg ” >

</video>

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

 

 

<video width=” 450 ″ height= ” 340 ″ controls>

     <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >

     <source src=” jamshed.ogg ” type= ” video/ogg ” >

     <track kind=” subtitles ” label= ” English ” src= ” jamshed_en.vtt ” srclang= ” en ” default></track>

      <track kind=” subtitles ” label= ” Arabic ” src= ” jamshed_ar.vtt ” srclang= ” ar ” ></track>

</video>

据源很有用。标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

20、HTML5 中如何嵌入视频？

参考答案

和音频类似，HTML5 支持 MP4 、 WebM 和 Ogg 格式的视频，下面是简单示例：

 

 

<video width=” 450 ″ height= ” 340 ″ controls>

  <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >

   Your browser does’ nt support video embedding feature.

</video>