web前端试题集

2016-07-08  本文已影响0人  kakuqo

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 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本地存储速度快而且安全。
有两种不同的对象可用来存储数据：

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

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

扩展
新增加的input属性

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来选择要使用的呈现方法。

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

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

13.link 和@important的区别是？

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

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

上一篇下一篇

猜你喜欢

热点阅读