前端面试题之HTML

1. 浏览器页面由哪三层构成，分别是什么，作用是什么？

结构层（HTML），表示层（CSS），行为层（JS）

2. HTML5的优缺点

优点：
	1. 网络标准统一
		- W3C推荐的，是由几百家公司一起酝酿的技术
	2. 多设备、跨平台
		- 可以移植到多个平台上，例如UC的开放平台、Opera的游戏中心、Facebook应用平台，
		  更可以封装成IOS或安卓APP
	3. 自适应网页设计
	4. 语义化标签
	5. 即时更新
		- 不用像客户端那样每次更新，只需要刷新网页
	6. 提高可用性和改变用户的友好体验
	7. 有几个新的标签，有助于开发人员定义重要内容
	8. 可以给站点带来更多的媒体元素
	9. 新增更多原生功能减少对插件的依赖，可以很好的代替Flash和Silverlight
	10. 涉及到网站的抓取和搜索的时候，对于SEO很友好
	11. 被大量运用于移动应用程序和游戏

 缺点：
	1. 安全：web storage、web socket这样的功能很容易被黑客利用，来盗取用户的信息
	2. 完善性：各浏览器支持的程度不一样
	3. 技术门槛：HTML5简化开发者工作的同时代表了许多新的属性和API需要开发者学习
	4. 性能：某些平台上的引擎问题导致HTML5性能低下

3. DOCTYPE的作用？严格模式和混杂模式如何区分？它们有何意义？

• HTML5的DOCTYPE只有一种；严格模式和混杂模式只存在于HTML4.0.1；
• 声明于文档的最前面的位置，处于标签之前，用来告知浏览器使用哪种HTML的规范。该标签可声明3种DTD类型，
  分别表示严格版本、过度版本和基于框架的HTML文档
• 标准模式是指浏览器按W3C标准解析执行代码；怪异模式是指浏览器用自己的方式解析执行代码，各个浏览器的
  解析方式不同（不声明DOCTYPE或声明错误则会启用混杂模式）

4. HTML5有哪些新特性？移除了哪些元素？

• 新特性：
	a. 图像Canvas
	b. 多媒体 video、audio
	c. 本地存储 localStorage、sessionStorage
	d. 语义化更好的内容元素 artical、header、footer、nav、section
	e. 表单控件 date、time、canlemdar、url、search
	f. 新的技术 webworker、websocket、Geolocation
• 移除的元素：
	a. 纯表现的元素 u、big、center、strike、tt、font、basefont
	b. 框架集 frame、frameset、noframes

5. 对web标准以及W3C的理解与认识

• W3C：万维网联盟，起草和发布一些标准
• Web标准：标签闭合、标签小写、不乱嵌套、提高搜索几率、使用外链CSS和JS（结构、表现、行为的分离）、
  文件下载与页面响应快速、内容能被更多用户访问、内容能被广泛设备所访问、容易维护、改版方便、提供打印版本

6. cookies，sessionStorage，localStorage的区别

• sessionStorage和localStorage是HTML5 Web Storage API提供的，用来保存web请求的数据在本地。两者的区别
  是sessionStorage保存的数据在浏览器同源的标签页也关闭后就会被删除；localStorage保存的数据如果部主动删
  除，则永久存在
• 存储空间：WebStorage可以提高5MB的存储空间；cookie为4KB（各个浏览器不同）
• 与服务器交互：WebStorage的数据仅仅是储存在本地，不会与服务器发生交互；cookie会随着HTTP请求发给服务器
• 接口：WebStorage提供更丰富的接口，如setItem，getItem，removeItem，clear；cookie则需要开发者自己封装
  setCookie，getCookie

7. 说说你对HTML语义化的理解

• 语义化是指根据内容语义化，选择合适的标签
• 目的：
	a. 在没有CSS的情况下，结构依然清晰
	b. 有利于SEO和搜索引擎建立良好沟通，更容易被搜索引擎抓取
	c. 方便其他设备解析（盲人阅读器、移动设备等）
	d. 方便团队开发和维护
• 语义化标签包括：header，footer，nav，section，article，aside，figure，datalist等

8. link和@import的区别

• 代码：
Link: `<link rel=“stylesheet” type=“text/css” href=“style.css”/>`
Import: `<style type=“text/css”>@import url(“style.css”)</style>`
• 区别：
	a. link引用CSS时，在页面载入的同时加载；@import需要页面完全载入以后加载
	b. link是HTML标签，无兼容性问题；@import是CSS2.1提出的，低版本浏览器不支持
	c. link支持使用JS控制DOM去改变样式；@import不支持

9. HTML全局属性有哪些？

1. accesskey 亏定激活元素的快捷键
2. class 规定类名
3. contenteditable
4. contextmenu
5. draggable
6. hidden
7. id
8. style

10. 超链接target属性的取值和作用？

1. _blank：在新窗口中打开链接文档
2. _self：默认。在相同狂减重打开链接文档
3. _parent：在父框架中打开链接文档
4. _top：在整个窗口中打开链接文档

11. ‘data-*’属性的作用是什么？

• ‘data-*’为HTML5中的新属性，用于存储页面或应用程序的私有自定义数据
• HTML：
  <div id=‘test’ data-animal-type=“鸟类”>喜鹊</div>
  JS：
  const ele = document.getElementById(‘test’);
  ele.setAttribute(‘data-name’,‘qwe’);
  ele.getAttribute(‘data-name’);