web前端试题集

作者: kakuqo | 来源:发表于2016-07-08 14:20 被阅读0次

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

HTML5文档类型：<!DOCUTYPE HTML>;
字符集：UTF-8;

2. HTML5中如何嵌入音频？

<audio autoplay ="autoplay" controls="controls" loop="loop" src="url"> 您的浏览器不支持 audio 标签 </audio>

Paste_Image.png

3.HTML5中如何嵌入视频？

<vedio src="movie.ogg" controls = "controls" height="500" width="500" ></vedio>

Paste_Image.png

4.除了audio 和vedio，HTML5还有哪些媒体标签？

多媒体交互标签

<vedio> 定义一个视频
<audio> 定义一个音频
<source> 定义媒体资源
<canvas> 定义图片
<embed> 定义外部的可交互的内容或插件比如flash

扩展

结构标签：（块状元素）有意义的div

<article> 定义一篇文章
<header> 定义一个页面或一个区域的头部
<nav> 定义导航链接
<section> 定义一个区域
<aside> 定义页面内容部分的侧边栏
<hgroup> 定义文件中一个区块的相关信息
<figure> 定义一组媒体内容
<figcaption>定义figure元素的标题
<footer>定义一个页面或一个区域的底部
<dialog>定义一个对话框（会话框）类似微信

web应用标签

<menu>命令列表
<menuitem>menu命令列表标签FF(嵌入系统)
<command>menu标记定义一个命令按钮
<meter> 状态标签（实时状态显示：气压、气温）C、O
<progress> 状态标签（任务过程：安装、加载） C、F、O
<datalist>为input标记定义一个下拉列表，配合option，F、O
<details>定义一个元素的详细内容，配合dt、dd C

注释标签

<ruby>定义注释或音标
<rp>告诉那些不支持Ruby元素的浏览器如何去显示
<rt>定义对ruby的注释内容文本

其他标签

<keygen>定义表单里一个生成的键值（加密信息传送）
<mark>定义有标记的文本（黄色选中状态）
<output>定义一些输出类型，计算表单结果配合oninput事件

重新定义的HTML标签

<b>代表内联文本，通常是粗体，没有传递表示重要的意思
<i>代表内联文本，通常是斜体，没有传递表示重要的意思
<dd>可以同details与figure一同使用，定义包含文本，dialog也可用
<dt>可以同details与figure一同使用，汇总细节，dialog也可用
<hr>表示主题结束，而不是水平线，虽然显示相同
<menu>重新定义用户界面的菜单，配合commond或者menuitem使用
<small>表示小字体，例如打印注释或者法律条款
<strong>表示重要性而不是强调符号

5. HTML5 canvas元素有什么用？

canvas标签是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上，即canvas有一个基于JavaScript的绘图API，SVG和VML使用一个XML文档来描述绘图。

6.HTML5存储类型有什么区别？

HTML5 支持本地存储，在之前版本中是通过cookie实现的，HTML5本地存储速度快而且安全。
有两种不同的对象可用来存储数据：

localStorage 适用于长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 存储的数据在浏览器关闭后自动删除；
提供三种方法:getitem(key)、setitem(key,value)、removeitem(key)

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

我们以前学过的表单元素包括text、button、file、radio等，HTML5中新增加了一些表单元素，下面列出这些元素及其作用：

email类型用于验证email的格式，当提交表单会自动验证email域的值
url类型用于验证url地址的格式，当提交表单时会自动验证url域的值
number类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持
range类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100
日期和时间类型：HTML5拥有多个可供选取日期和时间的新输入类型：
date选取日、月、年
month选取月、年
week选取周、年
time选取时间（小时和分钟）
datetime选取时间、日、月、年（UTC时间）
datetime-local选取时间、日、月、年（本地时间）
search类型用于搜索域，比如站点搜索或google搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标
*tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持
*color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

扩展

新增加的input属性

autocomplete自动显示以前输入过的信息，取值"on"或者"off"。
autofocus页面加载完成后自动获取到焦点。
form指定input所属的form，可以是多个。
formaction指定form提交后处理这个input的页面(URL)或文件。
formenctype指定form提交后数据如何编码。
formmethod指定发送form数据的HTTP方法，会覆盖相应的form的HTTP方法。
formnovalidate提交前不检查数据的有效性。
formtarget指定在哪个地方显示form提交后response的内容。
height,width输入框长和宽，只适用于image类型
max,min输入值的最大值和最小值，适用于有意义的number，range，日期类型。
multiple是否允许输入多个值。适用于有意义的number，range，日期类型。
pattern指定验证输入值的正则表达式，适用于text，search，url，tel，email，password。
required是否是必填项，如果不填必填项，则表单不能提交。
step输入自动增长时的步长值。
list输入项的候选列表，需要和datalist元素配合使用，list属性可用在这些类型上：text,search,url,tel,email,date,number,range和color，目测在firefox上有效。

8. HTML5废弃了哪些HTML4标签？

1.能用css代替的元素：basefont,big,center,font,s,strike,tt,u。
2.不在使用frame框架：frameset,frame,noframes。
3.只有部分浏览器支持的元素：applet,bgsound,blink,marquee。
4.其他被废除的元素：rb(ruby),acronym(abbr),dir(ul),isindex(form与input相结合）,listing(pre),xmp(code),nextid(guids),plaintex(text/plian)

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

1.游戏类：canvas、webgl
2.多媒体：video、audio
3.存储：localstorage、sessionstorage、websql、indexedDB
4.网络：websocket
5.拖放API：ondrop,ondragstart,ondragover,draggable:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>

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

HTML5引入了应用缓存技术，意味着web应用可以进行缓存，离线使用，通过创建cache manifest文件，创建离线应用。
应用缓存有三个优势：
1.离线浏览 2.提升页面载入速度 3.降低服务器压力

离线存储技术

HTML5提供了两大离线存储技术：localstorage 和 application cache,两者各有应用场景，传统还有离线存储技术cookie。
application cache用于存储静态资源。
cookie只能保存一小段文本（4096字节），所以不能存储大数据，这是cookie与上述缓存技术的差异之一，因为HTTP是无状态的，服务器为了区分请求是否来源于同一个服务器，需要一个表示字符串，而这个任务就是cookie完成的，这一段文本每次都会在服务器与浏览器之间传递，以验证用户的权限。

Application Cache使用

1.服务器端需要维护一个manifest清单
2.浏览器上只需要一个简单的设置即可
<html manifest="demo.appcache">
建议application cache 存储公共资源，不要存储业务资源

浏览器缓存是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器可以从本地磁盘显示文档，这样就可以加速页面的阅览，人为不可控制。

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

<doctype>标签告知浏览器文档使用哪种HTML或者XHTML规范。

Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
标准模式中，浏览器以其支持的最高标准呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

模式触发

浏览器根据DOCTYPE是否存在以及使用的那种DTD来选择要使用的呈现方法。

如果XHTML、HTML4.01文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。
包含过渡DTD和URL的DOCUTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URL会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
HTML5既然没有DTD,也就没有严格模式和宽松模式的区别，HTML5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

12.行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素：<span><i><em><strong><b>
块级元素：<div><section><article><figure>
空元素：<hr/><br/><img/>

13.link 和@important的区别是？

link是XHTML标签，除了加载CSS之外，还可以定义RSS等其他事务，并且无兼容性问题，而@important属于CSS范畴，只能加载CSS，并且其实在CSS2.1提出的，低版本浏览器不支持
link引用css时，在页面载入时同时加载，而@important需要页面网页完全载入后加载
link支持使用javascript控制DOM去改变样式；@important不支持

14.浏览器的内核分别是什么？

Trident内核：IE、傲游、世界之窗浏览器、腾讯TT、AVANT等
Gecko内核：Firefox、Netscape6至9
Webkit内核：Safari、Google、Chrome
Presto内核：Opera

15.常见兼容性问题及解决方案？

不同浏览器下默认标签的margin和padding不同------css重置
块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大--------在float标签样式控制中加入display：inline，转化为行内属性，但是行内元素宽高不可设，所有需要在后面再加上display：table
设置较小高度标签（一般10px），在IE6\IE7，遨游中高度超出自己设置高度-----给超出高度的标签设置overflow：hidden；或者设置行高line-hight小于你设置的高度
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
几个img标签放在一起的时候，有写浏览器会有默认的间距-----使用float属性为img布局