HTML 问题
doctype(文档类型) 的作用是什么？
- What does a doctype do?
文档类型声明（DOCTYPE）是一条位于 HTML 文档开头的指令，用于告知 Web 浏览器使用哪种 HTML 或 XHTML 规范来解释页面内容。具体来说，DOCTYPE 的作用包括以下几个方面：
- 触发标准模式：DOCTYPE 帮助浏览器确定要使用的渲染模式。在标准模式下，浏览器会按照规范的方式解释和渲染页面，确保页面在不同浏览器中呈现一致。
- 确保向后兼容性：通过指定正确的文档类型，可以确保旧版本的浏览器能够正确地解释和显示页面内容，从而提供向后兼容性。
- 指定文档类型：DOCTYPE 告知浏览器使用的是哪种 HTML 或 XHTML 规范，例如 HTML 4.01、XHTML 1.0 或 HTML5。这有助于浏览器正确解释文档中使用的标记和语法。
- 影响浏览器行为：不同的文档类型声明可能会影响浏览器的解释和渲染行为，例如在怪异模式下（Quirks Mode）或混杂模式下，浏览器可能会采用不同的渲染规则。
总之，DOCTYPE 的主要作用是指示浏览器使用哪种规范来解释和渲染页面内容，以确保页面在不同浏览器中以一致的方式呈现，并提供向后兼容性。
如果网页内容需要支持多语言，你会怎么做？
- How do you serve a page with content in multiple languages?
text
当向服务器发出 HTTP 请求时，发出请求的用户代理通常会发送有关语言首选项的信息，例如 Accept-Language 标头中的信息。然后，如果有这样的替代方案，服务器可以使用此信息以适当的语言返回文档的版本。返回的HTML文档还应该在<html>标签中声明lang属性，例如<html lang="en">...</html>。
为了让搜索引擎知道相同的内容可以用不同的语言提供，应该使用带有 rel="alternate" 和 hreflang="..." 属性的 <link> 标签。例如。 <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />。
渲染
服务器端渲染：HTML 标记将包含字符串占位符，并且将从代码或翻译服务的配置中获取特定语言的内容。然后，服务器动态生成包含该特定语言内容的 HTML 页面。
客户端渲染：将获取适当的区域设置字符串并将其与基于 JavaScript 的视图结合起来。在设计和开发多语言网站时，有哪些问题你必须要考虑？
- What kind of things must you be wary of when designing or developing for multilingual sites?
使用 data- 属性的好处是什么？
- What are data- attributes good for?
如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
- Consider HTML5 as an open web platform. What are the building blocks of HTML5?
请描述 cookies、sessionStorage 和 localStorage 的区别。
- Describe the difference between a cookie, sessionStorage and localStorage.
请解释 <script>、<script async> 和 <script defer> 的区别。
- Describe the difference between
<script>,<script async>and<script defer>.
为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
- Why is it generally a good idea to position CSS
<link>s between<head></head>and JS<script>s just before</body>? Do you know any exceptions?
什么是渐进式渲染 (progressive rendering)？
- What is progressive rendering?
你用过哪些不同的 HTML 模板语言？
- Have you used different HTML templating languages before?
1 DOCTYPE 的作用是什么？
2 标准模式与兼容模式各有什么区别？
3 HTML5 为什么只需要写 ，而不需要引入 DTD？
4 SGML、HTML、XML 和 XHTML 的区别？
5 DTD 介绍
6 行内元素定义
7 块级元素定义
8 行内元素与块级元素的区别？
9 HTML5 元素的分类
10 空元素定义
- 标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。
- 常见的空元素有：
br hr img input link meta
11 link 标签定义
link 标签定义文档与外部资源的关系。link 元素是空元素，它仅包含属性。 此元素只能存在于 head 部分，不过它可出现任何次数。link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表
12 页面导入样式时，使用 link 和 @import 有什么区别？
从属关系区别:@import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。加载顺序区别:加载页面时，link 标签引入的 CSS 被同时加载；@import 引入 的 CSS 将在页面加载完毕后被加载。兼容性区别:@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别； link 标签作为 HTML 元素，不存在兼容性问题。DOM 可控性区别:可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式
13 你对浏览器的理解？
14. 介绍一下你对浏览器内核的理解？
- 主要分成两部分：渲染引擎和 JS 引擎。
- 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引 擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。
- JS 引擎：解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎
15 常见的浏览器内核比较
16 常见浏览器所用内核
17 浏览器的渲染原理？
18 渲染过程中遇到 JS 文件怎么处理？
- JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML
解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。- 如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。
- 并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性
19 async 和 defer 的作用是什么？有什么区别？
- 脚本没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等 待后续载入的文档元素，读到就加载并执行。
defer属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。async属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不阻塞。多个脚本的执行顺序无法保证。
20 什么是文档的预解析？
- Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，
另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。 - 需要注意的是，
预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片
21 CSS 如何阻塞文档解析？
- 理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们， 然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。
- 所以如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么 浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，
浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析
22 渲染页面时常见哪些不良现象？（浏览器渲染过程）
FOUC：主要指的是样式闪烁的问题，由于浏览器渲染机制（比如 firefox），在 CSS 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部。白屏：有些浏览器渲染机制（比如 chrome）要先构建 DOM 树和 CSSOM 树，构建完成后再进行渲染，如果 CSS 部分放在 HTML 尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。
23 如何优化关键渲染路径？（浏览器渲染过程）
24 什么是重绘和回流？（浏览器绘制过程）
25 如何减少回流？（浏览器绘制过程）
26 为什么操作 DOM 慢？（浏览器绘制过程）
27 DOMContentLoaded 事件和 Load 事件的区别？
- 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发， 而无需等待样式表、图像和子框架的加载完成。
- Load 事件是当所有资源加载完成后触发的
28 HTML5 有哪些新特性、移除了那些元素？
29 如何处理 HTML5 新标签的浏览器兼容问题？
30 简述一下你对 HTML 语义化的理解？
31 b 与 strong 的区别和 i 与 em 的区别？
32 前端需要注意哪些 SEO ？
| SEO 优化原则 | 描述 |
|---|---|
合理设置 <title>、<meta description> 和 <meta keywords> | - <title>：简明扼要，突出重点关键词（不超过 2 次），不同页面标题应有所区别- <meta description>：高度概括页面内容，避免堆砌关键词，确保每个页面描述均不相同- <meta keywords>：列出重要关键词即可，但现代搜索引擎对此项依赖较小 |
| 语义化 HTML 代码，符合 W3C 规范 | 使用语义化的标签使网页结构清晰易懂，便于搜索引擎理解抓取 |
| 将重要内容的 HTML 代码放在文档前面 | 搜索引擎抓取顺序从上到下，保证关键内容在限制长度内被抓取完全 |
| 避免重要内容通过 JavaScript 输出 | 搜索引擎爬虫通常不会执行 JS 脚本来获取动态生成的内容 |
减少使用 <iframe> 标签 | 搜索引擎通常无法抓取嵌套在 <iframe> 中的独立内容 |
非装饰性图片必须添加 alt 属性 | 图片的 alt 属性提供文字描述，帮助搜索引擎理解图片内容 |
| 提升网站加载速度 | 网站响应速度是搜索引擎排序算法中的重要因素，应优化以提升用户体验和搜索引擎友好度 |
33 HTML5 的离线储存怎么使用，工作原理能不能解释一下？
34 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
35. 常见的浏览器端的存储技术有哪些？
36 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
37 iframe 有那些缺点？
- iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况。
- 搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO 。
- iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
- 浏览器的后退按钮失效。
- 小型的移动设备无法完全显示框架。
38. Label 的作用是什么？是怎么用的？
39. HTML5 的 form 的自动完成功能是什么？
40. 如何实现浏览器内多个标签页之间的通信?
41. webSocket 如何兼容低版本浏览器？
42. 页面可见性（Page Visibility API） 可以有哪些用途？
43. 如何在页面上实现一个圆形的可点击区域？
44. 实现不使用 border 画出 1 px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
45. title 与 h1 的区别？
46. ![]()
的 title 和 alt 有什么区别？
47. Canvas 和 SVG 有什么区别？
48. 网页验证码是干嘛的，是为了解决什么安全问题？
49. 渐进增强和优雅降级的定义
50. attribute 和 property 的区别是什么？
51. 对 web 标准、可用性、可访问性的理解
52. IE 各版本和 Chrome 可以并行下载多少个资源？
53. Flash、Ajax 各自的优缺点，在使用中如何取舍？
54. 怎么重构页面？
55. 浏览器架构
56. 常用的 meta 标签
57. css reset 和 normalize.css 有什么区别？
58. 用于预格式化文本的标签是？
59. DHTML 是什么？
60. head 标签中必不少的是？
61. HTML5 新增的表单元素有？
62. 在 HTML5 中，哪个方法用于获得用户的当前位置？
63. 文档的不同注释方式？
64. disabled 和 readonly 的区别？
- disabled 指当 input 元素加载时禁用此元素。
input 内容不会随着表单提交。 - readonly 规定输入字段为只读。
input 内容会随着表单提交。 - 无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value