HTML面试总结

Posted 2021-09-07 yangyangyang

面试题汇总：https://segmentfault.com/a/11...

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仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(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(显示字符集的设定)。