(1) 前面页面有哪三层构成,分别是什么?作用是什么?
网页分成三个层次: 结构层、表示层、行为层
- 结构层:由HTML或XHTML之类的标记语言负责创建。
- 表示层: 由CSS负责创建。
- 行为层: 由JavaScript负责回答“内容应该如何对事件做出反应”这一问题。
(2) 简述一下对HTML语义化的理解?
- 正确的标签包含正确的内容
- HTML语义化让页面结构化,结构更清晰
- 即使没有css样式,也是很容易阅读的
- 便于浏览器、搜索引擎解析
- 搜索引擎的爬虫也依赖于HTMl标记来确定上下文和各个关键字的权重,利于SEO
(3) Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
- Doctype声明于文档最前面,告诉浏览器以何种方式来解析页面。有两种模式:严格模式和混杂模式
- 严格模式: 以浏览器支持的最高标准运行
- 混杂模式(兼容模式):向后兼容,模拟老式浏览器,防止浏览器无法兼容页面
(4) 行内元素有哪些? 块级元素有哪些?空元素有哪些?
- 行内元素: a 、b、span、img、input 、select、strong等
- 块级元素: div、p、ul、ol、dl、dt、dd、h1、h2等
- 空元素 、、 、 、 和
同时也是行内替换元素,height/width/padding/margin均可用。效果等于块元素,但不能独占一行。
(5) HTML5为什么只需要写?
- DTD(文档类型定义)可定义合法的XML文档构建模块,HTML5不基于SGML(标准通用标记语言),所以不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,而HTML4.0基于SGML,所以要对DTD进行引用,才能告诉浏览器文档所使用的的文档类型。
(6) ducument常用属性与方法有哪些?
document常见属性
- body 对元素的直接访问
- cookie 设置或返回与当前文档有关的所有cookie.
- domain 返回当前文档的域名
- lastModified 返回被最后修改的日期和时间
- referrer 返回当前文档的url
- title: 返回当前文档的标题
- URL: 返回当前文档的URL
document常见方法:
- write(): 动态向页面写入内容
- createElement(Tag): 创建一个HTML标签对象
- getElementById(ID): 获得之前id的对象
- getElementsByName(Name): 获得之前Name的对象
- body.appendChild(tag): 向HTML中插入元素对象
(7) src与href的区别
- href 是指网络资源所在的位置。用于超链接
- src 指向外部资源的位置。请求src 资源时会将指向的资源下载并应用到文档内,比如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架也是如此。
(8) 为什么利用多个域名来存储网站资源会更有效?
- 确保用户在不同地区能最快的速度打开网站,其中某个域名崩溃用户也能通过其他域名访问网站。
(9) label的作用是什么? 是怎么用的?
- label 标签来定义表单控件间的关系,当用户选择这个label标签时,浏览器对自动将焦点转到和这个标签相关的表单控件上。
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
label标签上使用for属性与表单控件使用id属性来关联。
(10) 浏览器内核有哪些?
- IE: trident内核
- Firefox: gecko内核
- Safari: webkit内核
- Opera: 以前是 presto内核,现在是Blink内核
- Chrome: Bink内核
(11) 说一说SVG的理解
SVG 可缩放矢量图形,是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法,并用文本格式的描述语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式
特点:
- 任意放缩: 用户任意缩放图像显示,而不会破坏图像的清晰度。
- 文本独立: SVH图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。
- 较小文件: SVG文件比那些GIF和JPEG格式的文件要小很多
- 超强显示效果: SVG图像在屏幕上总是边缘清晰,它的清晰适合任何屏幕分辨率和打印分辨率。
- 超强颜色控制: SVG图像提供一个1600万种颜色的调色板,支持ICC颜色描述文件标准、
RGB、线X填充、渐变和蒙版
在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
(12) 说一说canvas的理解
canvas是HTML5新增的一个API,在网页中动态实现2D与3D图像技术。有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
(13) 说一下SVG与Canvas两者的区别
- SVG是一种使用XML描述的2D图形的语言
- Canvas通过JavaScript来绘制2D图形
- SVG是基于XML,每个DOM元素都是可用的。
- Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
(14) title与h3的区别、b与strong的区别、i与em的区别?
- title属性没有明确意义只表示一个标题,H1则表示层次明确的标题,对页面信息的抓取有很大影响。
- strong是标明重点内容,有语气加强的含义, 会重读,而 是展示强调内容。
- i内容展示为斜体, em 表示强调的文本;
(15) 表单的基本组成部分有哪些,表单的主要用途是什么?
组成:表单标签、表单域、表单按钮
-
表单标签:这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。
-
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
-
表单按钮:包括提交按钮,复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
主要用途:表单在网页中主要负责数据采集的功能,和向服务器传送数据。
(16) HTML5 有哪些新增的表单元素?
- datalist
- keygen
- output
(17) HTML5 标准提供了哪些新的 API?
- Media API
- Text Track API
- Application Cache API
- User Interaction
- Data Transfer API
- Command API
- Constraint Validation API
- History API
(18) HTML5 存储类型有什么区别?
- localStorage: 持久化本地存储,数据永远不过期,关闭浏览器也不会丢失
- sessionStorage: 同一会话中的页面才能访问并且当回话结束之后数据也会销毁。是一种会话级别的本地存储。
(19) Cookie、sessionStorage、localStorage的区别
共同点: 都保存在浏览器端,在同源窗口中数据都是共享的
- cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
- cookie 数据始终在同源的 http 请求中携带(即使不需要),也会在浏览器和服务器间来回传递。
- sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。
存储大小
- cookie 数据大小不能超过 4k。
- sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
有期时间
- localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除。
- cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。
(20) HTML5 有哪些新特性、移除了那些元素 ?如何处理 HTML5 新标签的浏览器兼容问题 ?如何区分 HTML 和 HTML5 ?
HTML5现在已经不是SGML(标准通用标记语言)的子集,主要是关于图像,位置,存储,多任务等功能的增加。
新特性:
- canvas
- 媒介回放的video和audio
- 本地存储: localStorage长期存储与sessionStorage会话存储
- 语义化更好的内容元素,比如: article、footer、header、nav、section
- 表单控件: calendar、date、time、email、url、search
- 新技术: webWorker、webSocket、Geolocation
移除的元素:
- 纯表现的元素:basefont,big,center,font, s,strike,tt,u
- 对可用性产生负面影响的元素:frame,frameset,noframes
(21) HTML5 的离线储存怎么使用,工作原理能不能解释一下 ?
-
原理:
HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 -
如何使用
1、页面头部像下面一样加入一个 manifest 的属性;
2、在 cache.manifest 文件的编写离线存储的资源;CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: //offline.html
3、在离线状态时,操作 window.applicationCache 进行需求实现。
(22) 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢 ?
-
在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问 app,那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。
-
如果已经访问过 app 并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的 manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
-
离线的情况下,浏览器就直接使用离线存储的资源。
(23) iframe 内嵌框架有那些缺点 ?
内联框架 iframe一般用来包含别的页面,例如 我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使 iframe 透明效果;
- iframe 会阻塞主页面的 onload 事件;
- 搜索引擎的检索程序无法解读这种页面,不利于 SEO 搜索引擎优化(Search Engine Optimization)
- iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
如果需要使用 iframe,最好是通过 javascript 动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题。
(24) 如何实现浏览器内多个标签页之间的通信 ? (阿里)
- WebSocket、SharedWorker;
- 调用 localstorge、cookies 等本地存储方式;
- localstorge 在另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信;注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常;
(25) webSocket 如何兼容低浏览器 ?(阿里)
- Adobe Flash Socket 、
- ActiveX HTMLFile (IE) 、
- 基于 multipart 编码发送 XHR 、
- 基于长轮询的 XHR。