关于html:HTML面试总结

49次阅读

共计 3626 个字符,预计需要花费 10 分钟才能阅读完成。

HTML5 有哪些新个性?

  • HTML5 当初曾经不是 SGML 的子集,次要是对于图像,地位,存储,多任务等性能的减少。
  • 拖拽开释 (Drag and drop) API
    语义化更好的内容标签(header,nav,footer,aside,article,section)
    音频、视频 API(audio,video)
    画布 (Canvas) API
    天文 (Geolocation) API
    本地离线存储 localStorage 长期存储数据,浏览器敞开后数据不失落;sessionStorage 的数据在浏览器敞开后主动删除
    表单控件,calendar、date、time、email、url、search
    新的技术 webworker, websocket, Geolocation
  • 移除的元素
    纯体现的元素:basefont,big,center,font, s,strike,tt,u;
    对可用性产生负面影响的元素:frame,frameset,noframes;
    反对 HTML5 新标签:
  • IE8/IE7/IE6 反对通过 document.createElement 办法产生的标签,
    能够利用这一个性让这些浏览器反对 HTML5 新标签,
    浏览器反对新标签后,还须要增加标签默认的款式:
  • 当然最好的形式是间接应用成熟的框架、应用最多的是 html5shim 框架
    <!–[if lt IE 9]>
    <script> src=”http://html5shim.googlecode.com/svn/trunk/html5.js”</script>
    <![endif]–>
    如何辨别:DOCTYPE 申明 \ 新增的构造元素 \ 性能元素

Doctype 作⽤? 严格模式与混淆模式如何辨别?它们有何意义?

一、Doctype 作用是什么?
<!DOCTYPE> 申明叫做文件类型定义(DTD),申明的作用为了通知浏览器该文件的类型。让浏览器解析器晓得应该用哪个标准来解析文档。<!DOCTYPE> 申明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。

二、严格模式和混淆模式的如何辨别?他们有什么意义?
规范模式(严格模式)的排版和 JS 运作模式都是以该浏览器反对的最高规范运行。

在兼容模式(混淆模式或怪异模式)中,页面以宽松的向后兼容的形式显示, 模仿老式浏览器的行为以避免站点无奈工作。

如何实现浏览器内多个标签页之间的通信?

一、调用 localStorage

在一个标签页外面应用 localStorage.setItem(key,value)增加(批改、删除)内容;在另一个标签页外面监听 storage 事件。通过 localstorge.getItem(key)存储的值,实现不同标签页之间的通信。

二、调用 cookie+setInterval()

将要传递的信息存储在 cookie 中,每隔肯定工夫读取 getCookie 获取信息,即可随时获取要传递的信息。

行内元素有哪些?块级元素有哪些?空 (void) 元素有哪些?行内元素和块级元素有什么区别?

行内元素有:a、b、span、img、input、select、strong

块级元素有:div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、p

空元素:br、hr、img、input、link、meta

区别:

行内元素不能够设置宽高,不独占整行

块级元素能够设置宽高,独占整行

简述一下 src 与 href 的区别?

src 用于替换以后元素;href 用于在以后文档和援用资源之间确立分割。

src 是 source 的缩写,指向内部资源的地位,指向的内容将会嵌入到文档中以后标签所在位置

href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建设和以后元素(锚点)或以后文档(链接)之间的链接

<script src =”js.js”></script>

<link href=”common.css” rel=”stylesheet”/>

浏览器本地存储 cookies,sessionStorage,localStorage 的区别?

在较高版本的浏览器中,js 提供了 sessionStorage 和 globalStorage。在 HTML5 中提供了 localStorage 来取代 globalStorage。

html5 中的 Web Storage 包含了两种存储形式:sessionStorage 和 localStorage。

sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面能力拜访并且当会话完结后数据也随之销毁。因而 sessionStorage 不是一种长久化的本地存储,仅仅是会话级别的存储。

而 localStorage 用于长久化的本地存储,除非被动删除数据,否则数据是永远不会过期的。

web storage 和 cookie 的区别
Web Storage 的概念和 cookie 类似,区别是它是为了更大容量存储设计的。Cookie 的大小是受限的,并且每次你申请一个新的页面的时候 Cookie 都会被发送过来,这样无形中节约了带宽,另外 cookie 还须要指定作用域,不能够跨域调用。

除此之外,Web Storage 领有 setItem,getItem,removeItem,clear 等办法,不像 cookie 须要前端开发者本人封装 setCookie,getCookie。

然而 cookie 也是不能够或缺的:cookie 的作用是与服务器进行交互,作为 HTTP 标准的一部分而存在,而 Web Storage 仅仅是为了在本地“存储”数据而生

浏览器的反对除了 IE7及以下不反对外,其余规范浏览器都齐全反对(ie 及 FF 需在 web 服务器里运行),值得一提的是 IE 总是办好事,例如 IE7、IE6 中的 userData 其实就是 javascript 本地存储的解决方案。通过简略的代码封装能够对立到所有的浏览器都反对 web storage。

localStorage 和 sessionStorage 都具备雷同的操作方法,例如 setItem、getItem 和 removeItem 等
cookie 和 session 的区别:
1、cookie 数据寄存在客户的浏览器上,session 数据放在服务器上。
2、cookie 不是很平安,他人能够剖析寄存在本地的 COOKIE 并进行 COOKIE 坑骗

思考到平安该当应用 session。

3、session 会在肯定工夫内保留在服务器上。当拜访增多,会比拟占用你服务器的性能

思考到加重服务器性能方面,该当应用 COOKIE。

4、单个 cookie 保留的数据不能超过 4K,很多浏览器都限度一个站点最多保留 20 个 cookie。
5、所以集体倡议:

将登陆信息等重要信息寄存为 SESSION
其余信息如果须要保留,能够放在 COOKIE 中

XML 和 JSON 的区别?

(1). 数据体积方面。

JSON 绝对于 XML 来讲,数据的体积小,传递的速度更快些。

(2). 数据交互方面。

JSON 与 JavaScript 的交互更加不便,更容易解析解决,更好的数据交互。

(3). 数据形容方面。

JSON 对数据的描述性比 XML 较差。

(4). 传输速度方面。

JSON 的速度要远远快于 XML。

浏览器是如何渲染页面的?

iframe 的优缺点?

iframe 的长处:

1.iframe 可能一成不变的把嵌入的网页展示进去。

2. 如果有多个网页援用 iframe,那么你只须要批改 iframe 的内容,就能够实现调用的每一个页面内容的更改,方便快捷。

3. 网页如果为了对立格调,头部和版本都是一样的,就能够写成一个页面,用 iframe 来嵌套,能够减少代码的可重用。

4. 如果遇到加载迟缓的第三方内容如图标和广告,这些问题能够由 iframe 来解决。

iframe 的毛病:

1. 会产生很多页面,不容易治理。

2. 如果框架个数多的话,可能会呈现高低、左右滚动条,用户体验度差。

3. 代码简单,无奈被一些搜索引擎索引到,应用 iframe 会不利于搜索引擎优化。

4. 很多的挪动设施(PDA 手机)无奈齐全显示框架,设施兼容性差。

5.iframe 框架页面会减少服务器的 http 申请,对于大型网站是不可取的。

Canvas 和 SVG 图形的区别是什么?

1. 什么是 Canvas?

Canvas 是 H5 新进去的标签

Canvas 画布,利用 JavaScript 在网页绘制图像

2. 什么是 SVG?

SVG 可缩放矢量图形(Scalable Vector Graphics),基于可扩大标记语言 XML

谈一谈 meta 标签?
meta 标签是用来形容一个 HTML 网页文档的属性,比方该网页的作者,日期,网页的关键字,刷新,网页等级设定等等

meta 标签能够分为两大部分:

  • http-equiv:http 题目信息
  • name:页面形容信息

    http-equiv 相似于 http 的头部协定,作用是回应给浏览器一些有用的信息来帮忙正确准确的显示网页内容。罕用的 http-equiv 类型有:Content-Type 和 Content-Language(显示字符集的设定)。

正文完
 0