面试大全：HTML5
2017-06-22 本文已影响40人
西瓜炒苦瓜
1.什么是盒子模型
内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
标准 w3c 盒子模型: margin、border、padding、content
ie 盒子模型: margin、content(包含border 和 padding)
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
3.浏览器的内核
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
4.简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src =”js.js”></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
5.cookies，sessionStorage 和 localStorage 的区别
（1）cookie在浏览器和服务器间来回传递， sessionStorage和localStorage不会。
（2）sessionStorage和localStorage的存储空间更大。
（3）sessionStorage和localStorage有更多丰富易用的接口。
（4）sessionStorage和localStorage各自独立的存储空间。
6.a：img的alt与title有何异同？b：strong与em的异同？
a:
alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
b:
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
7.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
8.你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
8.你用过栅格系统吗？如果使用过，你最喜欢哪种？
[Bootstrap](http://v3.bootcss.com/)。Bootstrap是个比较Nice的框架，即使是初学者也很容易掌握。它预定义了大部分比较常用的css样式，除此之外还包含了一堆有很有的组件，你需要做的只不过是给标签添加上适当的class它就会为你完成工作。你还可以利用less/sass更改源码，自定义你需要的样式。
Bootstrap的栅格系统把一行最多分为12列，你可以组合成3x4列，4x3列，2x6列等；然而分成12列是不能完全适应到所有的应用场所。比如，我先把一行平均分为5列，它就无能为力了。
另外，使用Bootstrap还有个比较严重的弊端。如果你的页面很依赖Bootstrap，你在标签上面定义的class会飞涨！如果你再加上AngularJS，项目的html文档很快就会变得无法管理。
9.html5中的新增元素和废除元素
#1、新增的结构元素**
(1)section元素section元素表示页面中的一个内容区块，比如章节、页眉、页脚或者页面中的其他部分，它可以与h1、h2、h3等元素结合起来使用，表示文档结构。[HTML5](http://lib.csdn.net/base/html5)与html4代码比较：<section>......</section><div>......</div>
(2)、article元素article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章。[html5](http://lib.csdn.net/base/html5)与html4代码比较：<article>......</article><div>......</div>
(3)、aside元素aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。[Html5](http://lib.csdn.net/base/html5)与html4代码比较：<aside>......</aside><div>......</div>
(4)、header元素header元素表示页面中的一个内容区块或整个页面的标题；html5与html4代码比较：<header>......</header><div>......</div>
(5)、hgroup元素hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合；html5与html4代码比较：<hgroup>......</hgroup><div>......</div>
(6)、footer元素footer元素表示整个页面或页面中的一个区块的脚注。一般来说会包含创作者的姓名、创作日期以及创作者的联系方式。html5与html4代码比较：<footer>......</footer><div>......</div>
(7)、nav元素nav元素表示页面中导航链接的部分。html5与html4代码比较：<nav>......</nav><ul>......</ul>
(8)、figure元素figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立的单元。使用figcaption元素为figure元素组添加标题;html5与html4代码比较：<figure> <figcaption>共产党</figcaption> <p>共产党是中华人民共和国的第一大政党</p></figure>
<dl> <h1>共产党</h1> <p>共产党是中华人民共和国的第一大政党</p></dl>
#2**、新增的其他元素**
(1)video元素video元素定义视频，比如电影片段或其他视频流；等同于html4的object元素
(2)audio元素audio元素定义音频，比如音乐或其他音频流；等同于html4的object元素
(3)embed元素embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3 ； 等同于html4的object元素
(4)mark元素mark元素主要用来在视觉上向用户那些需要突出显示或者高亮显示的文字;mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词；等同于html4的span元素
(5)progress元素progress元素表示运行中的进程，可以使用progress来显示[JavaScript](http://lib.csdn.net/base/javascript)中消耗时间的函数的进程；html4中无法实现；
(6)meter元素meter元素表示度量衡。仅用于已知最大值和最小值的度量。必须定义度量的范围，可以在元素的文本中。也可以在min/max属性中定义 html4无法实现；
(7)time元素time元素 表示日期或者时间，也可以同时表示两者；等同于html4的span元素
(8)ruby元素ruby元素表示ruby注释；
(9)rt元素rt元素表示字符的解释或发音；
(10)rp元素rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容；
(11)wbr元素wbr元素表示软换行。他与br元素的区别：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行；
(12)canvas元素canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，进提供一块画布，但它把一个绘图API展现给客户端[javascript](http://lib.csdn.net/base/javascript)，以使脚本能够把想绘制的东西绘制到这块画布上；
(13)command元素command元素表示命令按钮，比如单选按钮，复选按钮或按钮；
(14)details元素details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息，summary元素应该details元素的第一个元素
(15)detalist元素datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表；html5新增功能。
(16)datagrid元素datagrid元素表示可选数据的列表，他以树形列表的形式来显示。
(17)keygen元素keygen元素表示生成密匙。
(18)output元素output元素 表示不同类型的输出，比如脚本的输出
(19)source元素source元素为媒介元素定义媒介资源；对应html4的<param>
(20)menu元素menu元素表示菜单列表。当希望列出表单空间时使用；
#**3、新增的input元素的类型**
(1)email元素email类型表示必须输入Email地址的文本输入框；
(2)url元素url类型表示必须输入URL地址的文本输入框；
(3)number元素number类型表示必须输入数值的文本输入框；
(4)range元素range类型表示必须输入一定范围内数字值得文本输入框；
(5)Date PickersHTML5拥有多个可供选取日期和时间的新型输入文本框：date-------选取日、月、年month------选取月、年week-------选取周、年time-------选取时间（小时和分钟）datetime----选取时间、日、月、年（UTC时间）datetime-local-----选取时间、日、月、年（本地时间）
#**4、废除的元素**
(1)能使用CSS替代的元素
对于basefont、big、center、font、s、strike、tt、u这些元素，由于他们的功能都是纯粹为画面展示服务的，而HTML5中提倡把画面展示性功能放在CSS样式表中统一编辑，所以将这些元素废除了，并使用编辑CSS、添加CSS样式表的方式进行替代。其中font元素允许由“所见即所得”的编辑器来插入，s元素、strike元素可以由del元素替代，tt元素可以由CSS的font-family属性替代。
(2)不再使用frame框架对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在HTML5中已不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上这三个元素废除。
(3)只有部分浏览器支持的元素对于applet。bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML5中被废除；其中applet元素可由embed元素或者object元素替代，bgsound元素可由audio元素替代，marquee可以由javascript编程的方式所替代。
(4)其他被废除的元素1）废除rb元素，使用ruby元素替代；2）废除acronym元素，使用abbr元素替代；3）废除dir元素，使用ul元素替代；4）废除isindex元素，使用form元素与input元素相结合的方式替代；5）废除listing元素，使用pre元素替代；6）废除xmp元素，使用code元素替代；7）废除nextid元素，使用GUIDS元素替代；8）废除plaintext元素，使用"text/plian"MIME类型替代；
10.form属性的作用
<form action=".." method="post" enctype="multipart/form-data" name="biaodan">
<input type="text" name="txtUsername">
</form>
1、属性
1、action
定义表单被提交时发生的动作
提交给服务器处理程序的地址
注意：通过 与服务器端人员交流 得到 action 的地址
默认，提交给本页
2、method
作用：定义表单提交数据时的方式
取值：
1、get (默认值)
意义为：得到，获取
场合：向服务器要数据时使用
特点：
1、明文提交,所提交的数据时可以显示在地址栏上的-安全性较低
2、提交数据有大小限制-最大为2KB
2、post
意义：邮寄，邮递
场合：将数据提交给服务器处理时使用(有保密类型数据时)
特点：
1、隐式提交-所提交的内容是不会显示在地址栏上的，安全性较高
2、无大小限制
3、put
4、delete
3、enctype
作用：编码类型，即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器
取值：
1、application/x-www-form-urlencoded
默认值
允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件
2、multipart/form-data
允许 将文件提交给服务器
3、text/plain
只允许提交普通字符。特殊字符，文件等都无法提交
4、name
定义 表单的名称
11.html5和html的区别
1.在文档类型声明上
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5:
<!DOCTYPE html>
2.在结构语义上
html4.0：没有体现结构语义化的标签，我们通常都是这样来命名的
<divid="header"></div>
html5：在语义上却有很大的优势。提供了一些新的[html5标签]
<header> 、<nav>、<article>、<aside>、<footer>..
3.强大的HTML5的新功能
1.Canvas标签 2.SVG
