面试题整理

表单

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

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

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

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

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

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

canvas

1. 谈谈你对canvas的理解？

canvas相当于一个画布本身没有绘制能力即仅仅是图像的容器通常通过js在上面绘制图像

1. 请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

共同点

保存在游览器端，同源

不同点

数据传输上
Cookie数据在浏览器和服务器之间来回传递。其他两个不会自动发送数据到服务器端，仅在本地存储。Cookie数据有保存路径可以限制保存在特定的位置下
存储时间上
cookie只在设置的cookie过期时间之前一直有效；
sessionStorage：仅在当前浏览器窗口关闭前有效；
localStorage：始终有效
数据共享上
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
sessionStorage：不在不同的窗口下共享，即使是同一个页面的两个窗口。
存储大小上
cookie数据大小不超过4K，只适合保存很小的数据例如会话标识
sessionStorage和localStorage可以达到5M或更大

data-

1. `data-`属性的作用是什么？

data-是h5新增属性 -后面为自定义名称可存储数据存储的数据可以根据dataset获取若浏览器不支持则采用getAttribute获取数据

Doctype

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

作用：声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

严格模式：严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。

混杂模式：在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

意义：DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

GET

1. 表单提交中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 安全性较高。

盒模型

1. CSS的盒子模型？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

标准盒模型：width = content

IE盒模型： width = content + 左右padding + 左右border

href

1. 简述一下src与href的区别？

src是引入文件 href是链接跳转

src表示来源地址主要用于img script iframe等

href表示超文本引用主要用于link a等

HTML

1. 说说你对HTML语义化的理解?

Html 的语义化是指:根据内容的结构化，选择合适的语义化标签，便于开发者阅读和写出优雅的代码，同时让浏览器的爬虫和机器更好的解析。

语义化的目的:在没有用css的情况下，页面也能呈现出良好的内容结构，代码结构。

提高用户体验。

有利于搜索引擎。

方便其他设备解析。

便于团队维护和开发。

2. HTML全局属性有哪些？

accesskey 规定激活元素的快捷键；
class 规定元素的一个或多个类名（引用样式表中的类）；
contenteditable 规定元素内容是否可编辑；
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 样式上会导致元素不显示，但是不能用这个属性实现样式。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的CSS行内元素。
tabindex 规定元素的tab键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

HTML5

1. 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以下浏览器几乎全军覆没。

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

HTML新特性：

图像Canvas
多媒体video、audio
本地存储localStorage、sessionStorage
语义化更好的内容元素article、header、footer、nav、section
表单控件date、time、canlendar、url、search
新的技术webworker、websocket、Geolocation

移除的元素：
纯表现的元素u、big、center、strike、tt、font、basefont
框架集frame、frameset、noframes

3. 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 元素被称为空元素 )

//换行

//分隔线 < input> //文本框等

//图片

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

首先每一组的外观效果基本完全相同，标题效果、加粗效果、斜体效果。

但是title、b、i仅仅只有外观效果，而h3、strong、em属于语义化标签，对SEO有很大的帮助，会告诉搜索引擎这是很重要的。所以区别是很大的。

5. HTML5标签的作用?(用途)

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

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

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

6. HTML5 有哪些新增的表单元素？

datalist keygen output

7. HTML5 标准提供了哪些新的 API？

· Media API

· Text Track API

· Application Cache API

· User Interaction

· Data Transfer API

· Command API

· Constraint Validation API

· History API

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

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

1	<!doctype html> <html manifest=”example.app***”> ….. </html>

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

9. HTML5 有哪些媒体标签？

H5总共新增了5个媒体标签：

video：定义一个视频

audio：定义音频内容

source：替代audio、video中src属性定义媒体资源

canvas：一个画布API

embed：定义外部的可交互的内容或插件如flash

10. HTML5 中如何嵌入视频？

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

1
2
3

<video width=” 450 ″ height= ” 340 ″ controls>
  <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
</video>

11. HTML5中如何嵌入音频？

HTML5 支持 MP3 、 Wav 和 Ogg 格式的音频，下面是简单示例：

1
2
3

<audio controls>
    <source src=” jamshed.mp3 ″ type= ” audio/mpeg ” >
</audio>

12. 新的 HTML5 文档类型和字符集是？

HTML5 文档类型：

HTML5 使用 UTF-8 编码示例：

iframe

1. iframe的缺点

iframe会阻塞主页面的 Onload 事件；

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

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

img

1. img的title和alt有什么区别？

Alt 用于图片无法加载时显示

Title 为该属性提供信息，通常当鼠标滑动到元素上的时候显示

@import

1. link和@import的区别?

见link部分1

基础知识

1. 要动态改变层中内容可以使用的方法？

innerHTML，innerText

Label

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

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

Number:

Date:

注意:label的for属性值要与后面对应的input标签id属性值相同
Number:
<input type=“ text “ name=’Name’ id=’Name’/>

具体场景

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

思路：先用html+css做出一个圆形，然后再用js为圆形添加一个点击事件

css：width: 200px;
height: 200px;
border-radius: 50%;

js：var a1=document.querySelector(“.a1”)
a1.onclick=function(){
console.log(11)
}

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

< di v style=”width:100%;height:1px;background-color:black”></ div>

link

1. link和@import的区别?

XML/HTML代码

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

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

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

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

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

LocalStorage

1. 请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

见cookie部分1

浏览器

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

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

分别是：HTML、CSS、JavaScript

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

2. 浏览器的内核分别是什么?

a、 IE: trident 内核

b、 Firefox ： gecko 内核

c、 Safari:webkit 内核

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

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

3. 对浏览器内核的理解？

浏览器内核包含渲染引擎和js引擎

渲染引擎用于获取html、css和图片

js引擎用于解析执行JavaScript

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

WebSocket、 SharedWorker ；

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

POST

1. 表单提交中Get和Post方式的区别？

见GET部分1

SessionStorage

1. 请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

见cookie部分1

src

1. 简述一下src与href的区别？

见href部分 1

SVG

1. 对SVG的理解

SVG（ Scalable Vector Graphics ）是可缩放矢量图形可任意缩放图形缩放图形后图形不失真另外下载速度比jpg png等要快.

target

1. 说说超链接target属性的取值和作用？

target这个属性指定所链接的页面在浏览器窗口中的打开方式。

_blank：在新窗口中打开链接文档

_self：默认。在相同的框架中打开链接文档

_top：在整个窗口中打开链接文档

_parent：在父级框架中集中打开

_framename:在指定的框架中打开链接文档

W3C

1. 什么是w3c

万维网联盟，是一个web开发的国际性联盟

WebGL

1. 什么是WebGL

WebGL（Web Graphics Library）是一种3D绘图标准，是js和OpenGL的结合，通过增加一个OpenGL的js绑定，WebGL可以为H5canvas提供硬件3D加速渲染，无需任何浏览器插件支持。

2. WebGL有什么优点？

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

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

WebSocket

1. WebSocket与消息推送？

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
事件驱动
异步
使用ws或者wss协议的客户端socket 能够实现真正意义上的推送功能

缺点：

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

web标准

1. 什么是web标准

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

2. 为什么使用web标准

为了解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题

选择器

1. CSS选择器

标签选择器（如：body,div,p,ul,li）

类选择器（如：class=”head”,class=”head_logo”）

ID选择器（如：id=”name”,id=”name_txt”）

全局选择器（如：*号）

组合选择器（如：.head .head_logo,注意两选择器用空格键分开）

继承选择器（如：div p,注意两选择器用空格键分开）

伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

2. 优先级

!important>内联样式>id选择器>类选择器=伪类选择器=属性选择器>标签选择器=伪元素选择器>通配符>继承

面试题整理

表单

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

canvas

1. 谈谈你对canvas的理解？

Cookie

1. 请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

data-

1. data-属性的作用是什么？

Doctype

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

GET

1. 表单提交中Get和Post方式的区别？

盒模型

1. CSS的盒子模型？

href

1. 简述一下src与href的区别？

HTML

1. 说说你对HTML语义化的理解?

2. HTML全局属性有哪些？

HTML5

1. HTML5的优点与缺点？

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

3. HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?

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

5. HTML5标签的作用?(用途)

6. HTML5 有哪些新增的表单元素？

7. HTML5 标准提供了哪些新的 API？

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

9. HTML5 有哪些媒体标签？

10. HTML5 中如何嵌入视频？

11. HTML5中如何嵌入音频？

12. 新的 HTML5 文档类型和字符集是？

iframe

1. iframe的缺点

img

1. img的title和alt有什么区别？

@import

1. link和@import的区别?

基础知识

1. 要动态改变层中内容可以使用的方法？

Label

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

具体场景

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

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

link

1. link和@import的区别?

LocalStorage

1. 请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

浏览器

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

2. 浏览器的内核分别是什么?

3. 对浏览器内核的理解？

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

POST

1. 表单提交中Get和Post方式的区别？

SessionStorage

1. 请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

src

1. 简述一下src与href的区别？

SVG

1. 对SVG的理解

target

1. 说说超链接target属性的取值和作用？

W3C

1. 什么是w3c

WebGL

1. 什么是WebGL

2. WebGL有什么优点？

WebSocket

1. WebSocket与消息推送？

web标准

1. 什么是web标准

2. 为什么使用web标准

选择器

1. CSS选择器

2. 优先级

1. `data-`属性的作用是什么？