今日分享【HTML5基础知识汇总】以及常见面试题

1、什么是DOCTYPE，有啥作用？

Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上也略有不同。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的BUG，所以文档声明是必须的。

2、说说对HTML语义化的理解？

HTML标签的语义化，简单来说，就是用过正确的标签做最正确的事情，给某块内容用上一个最恰当最合适的标签，使得页面有良好的结构，页面元素有含义，无论是谁都能看的懂，这块的内容是什么。
语义化的优化有以下几点：

1. 在没有CSS样式情况下也能够让页面呈现出清晰的结构。
2. 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
3. 方便团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、src和href的区别

src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下:
① src:全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说: js脚本、img图片framme等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将is脚本放在底部而不是头部的原因。
②href:全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，通常用于a、link元素。
换句话来说：
src和href都是用来引用外部的资源，它们的区别如下
**src:**表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档内如请求is脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕所以一般is脚本会放在页面底部。
**href: **表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常用在a、link等标签上。

4、title 与 h1 的区别、b 与 strong 的区别、i与 em 的区别?

title属性表示网页的标题，h1元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响。
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时: strong会重读，而b是展示强调内容。
i是italic(斜体)的简写，是早期的斜体元素，表示内容展示为斜体，而em是emphasize (强调)的简写，表示强调的文本。

5、什么是严格模式与混杂模式?

严格模式:是以浏览器支持的最高标准运行。
混杂模式:页面以宽松向下兼容的方式显示，模拟老式浏览器的行为。

6、前端页面有哪三层构成，分别是什么?

由一下三部分构成：结构层、表示层、行为层
①结构层(structural layer)
结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说:一段文字、一张图片、一段视频等等。
②表示层(presentation layer）
表示层是由CSS负责创建，它的作用是如何显示有关内容，学名:层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥。
③行为层(behaviorlayer）
行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域。

7**、iframe的作用以及优缺点**

iframe也称作嵌入式框架，嵌入式框架和框架网页类似它可以把一个网页的框架和内容嵌入到现有的网页中。

优点:
可以用来处理加载缓慢的内容，比如:广告
可以使脚本可以并行下载
可以实现跨子域通信
缺点:
iframe会阻塞主页面的onload 事件
无法被一些搜索引擎索识别
会产生很多页面，不容易管理
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src届性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
会产生很多页面，不易管理，浏览器的后退按钮没有作用，无法被一些搜索引擎识别。

8、img上 title 与 alt

**alt: **全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
**title: **当鼠标移动到元素上时显示title的内容
区别:
一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较