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有哪些新增加的表单元素？
我们以前学过的表单元素包括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布局
网友评论