1. 什么是<!DOCTYPE>？是否需要在 HTML5 中使用？
它是 HTML 的文档声明，通过它告诉浏览器，使用哪一个 HTML 版本标准解析文档。
在浏览器发展的历史中，HTML 出现过很多个版本，不同版本在元素、属性等书写格式上略有差异，如果不预先告诉浏览器，浏览器就不知道我们的文档标准是什么，在这种情况下，大部分浏览器将开启最大兼容模式来解析网页，我们称之为怪异模式。这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的 bug，所以文档声明是必须的。
而文档声明有多种书写格式，对应不同的 HTML 版本，
<!DOCTYPE>这种书写是告诉浏览器，整个文档使用 HTML5 的标准进行解析。
2. 什么是严格模式与混杂模式？
**严格模式：**又称标准模式，是指浏览器按照 W3C 标准解析代码。
**混杂模式：**又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
**如何区分：**浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
- 如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
- 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
- DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD 不存在或者格式不正确——混杂模式）
- HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
**意义：**严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。
3. 列举几条怪异模式中的怪癖行为
- 宽高的算法与 W3C 盒模型不同
在 *W3C* 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 *IE5.5* 及以下的浏览器及其他版本的 *Quirks* 模式下，*IE* 的宽度和高度还包含了 *padding* 和 *border*。
- 怪异模式下可以设置行内元素宽高
在 *standards* 模式下，给 *span* 等行内元素设置 *wdith* 和 *height* 都不会生效，而在 *Quirks* 模式下，则会生效。
- 怪异模式下 white-space:pre 会失效
4.说说对 html 语义化的理解
语义化的目的主要有以下几点：
- 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
- 有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。 可以让爬虫爬更多的信息是重点。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
- 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。HTML5 中新增加的很多标签，例如：article、nav、header 和 footer 等，就是基于语义化设计原则
- header：用于定义页面的头部区域，通常包括网站 logo、主导航、全站链接以及搜索框。
- nav：定义页面的导航链接部分区域。
- main：定义文档的主要内容，该内容在文档中应当是独一无二的
- article：定义页面独立的内容，它可以有自己的 header、footer、sections 等，专注于单个主题的博客文章，报纸文章或网页文章。
- section：表示文档中的一个区域（或节），比如，内容中的一个专题组。
- aside：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
- footer：定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
5.对于 WEB 标准以及 W3C 的理解与认识问题
任何东西都需要一个标准，有了标准才能够更好的进行交流和推广。不同的标准，得出的便是不同的结果。因此，制定什么样的标准，如何确立标准，至关重要。
正因为有了网页的标准，才能降低开发难度及开发成本，减少各种 BUG、安全问题， 提高网站易用性。
就好比 HTML 在 W3C 组织推出标准之前，不同的浏览器厂商有一套自己的标准，这对于开发人员来讲是痛苦的，所以才会遗留下浏览器的标准模式和怪异模式这个历史问题。
W3C 就是一个推出标准的组织，被称之为万维网联盟，W3C 最重要的工作是发展 Web 规范。
6.请描述下 SEO 中的 TDK？
在 SEO 中，所谓的 TDK 其实就是 title、description、keywords。
- title：浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到，搜索引擎在抓取网页时，最先读取的就是网页标题，所以 title 是否正确设置极其重要。title 一般不超过 80 个字符，而且词语间要用英文 “-” 隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高。
- description：也就是网页的内容摘要，这是对于一个网页的简要内容概况。description 一般不超过 150 个字符，描述内容要和页面内容相关。
- keywords：主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此 keywords 的每个词都要能在内容中找到相应匹配，才有利于排名。keywords 一般不超过 3 个，每个关键词不宜过长，而且词语间要用英文 “,” 隔开，尽量将重要的关键字靠前放。
什么是 SEO？
SEO 由英文 Search Engine Optimization 缩写而来，中文意译为“搜索引擎优化”。
其实叫做针对搜索引擎优化更容易理解。它是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的目标。
如何进行 SEO 优化工作？
下面就介绍一些常见的 SEO 优化手段。 整个 SEO 工作大致可以分为内部优化和外部优化。
内部优化
1. 合理的 title、description、keywords
这个就是上面经典面试题中出现的 TDK，其实就是这 3 个单词的缩写。
-
title：浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到，搜索引擎在抓取网页时，最先读取的就是网页标题，所以 title 是否正确设置极其重要。title 一般不超过 80 个字符，而且词语间要用英文 “-” 隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高。
-
description：也就是网页的内容摘要，这是对于一个网页的简要内容概况。description 一般不超过 150 个字符，描述内容要和页面内容相关。
-
keywords：主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此 keywords 的每个词都要能在内容中找到相应匹配，才有利于排名。keywords 一般不超过 3 个，每个关键词不宜过长，而且词语间要用英文 “,” 隔开，尽量将重要的关键字靠前放。
2. 语义化的 HTML 代码，符合 W3C 规范
语义化代码能够让搜索引擎容易理解网页，即使脱去了 CSS 这一层外衣，整个网页的结构也是清清楚楚的，无论是搜索引擎还是阅读者，都能够很容易的分辨网页的结构。
关于语义化的具体内容，可以参阅《语义化》章节。
3. 非装饰性图片必须加 alt
img 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
例如：<img src="/xxx.jpg" alt="海尔官网-双门冰箱" />
alt 标签的作用：
- 增强内容相关性：它是可以利用汉字介绍文章内容的，对于一些特定的企业产品，由于视觉的体验，它往往是少文字的。
- 提高关键词密度：在操作企业站的时候，我们经常遇到是站点首屏一个大的横幅 banner，几乎占用了首页的大部分页面，为了有效的提高首页核心关键词密度，我们只能利用一切办法增添关键词，比如：在图片的 alt 标签中添加。
4. 对于不显示的对象谨慎使用 display:none
对于不想显示的文字内容，应当设置 z-index 或设置到浏览器显示器之外。因为搜索引擎会过滤掉 display:none 其中的内容。
5. 重要内容 HTML 代码放在最前
索引擎抓取 HTML 顺序是从上到下，所以我们尽量将重要的内容放在前面，保证重要内容一定会被抓取。
6. 少用 iframe
少用或者尽量不用 iframe，因为搜索引擎不会抓取 iframe 中的内容
优化的细节还有很多，更多细节可以参阅这篇博文：blog.csdn.net/yanyihan16/…
外部优化
外部优化主要是指放友情链接和外链。好的友情链接可以快速的提高网站的权重，高质量的外链，会给你的网站提高源源不断的权重提升。另外，就是要向各大搜索引擎登陆入口提交尚未收录站点。
