web前端试题集

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

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

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

我们以前学过的表单元素包括textbuttonfileradio等,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布局
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,417评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,921评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,850评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,945评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,069评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,188评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,239评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,994评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,409评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,735评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,898评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,578评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,205评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,916评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,156评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,722评论 2 363
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,781评论 2 351

推荐阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,575评论 0 7
  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 843评论 0 1
  • 接上 关于HTML/HTML5(一)http://www.jianshu.com/p/33fc7840c079 学...
    Amyyy_阅读 787评论 0 4
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,146评论 0 1
  • “一个真正想死的人也不在乎死是什么,他死就是了,不会还这么絮絮叨叨声明白己多么想死,想摆脱欲望,想成为一块石头,一...
    邹彩霞阅读 3,598评论 0 2