前端面试之HTML部分_前端面试html-优快云博客

本文深入讲解前端开发中的关键技术，包括DOCTYPE的作用、多语言网站的设计挑战、data-属性的应用、HTML5的基本构件等内容，并探讨了cookie、session等存储机制的区别及<script>标签的不同用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOCTYPE有什么用

1、WEB世界中存在许多不同的文档，只有了解文档的类型，浏览器才能正确的把文档显示出来。

2、HTML也有多个不同的版本，只有确切知道页面使用的是哪个具体的HTML版本，浏览器才能完全正确地显示出HTML页面

所以使用<!DOCTYPE>来解决这个问题，它不是HTML标签，只是为浏览器提供文档类型的声明。

HTML5类型文档的声明为：<!DOCTYPE html>

二、在设计开发多语言网站时，需要留心哪些事情

1、在HTML中使用lang属性。

2、引导用户切换到自己国家的母语。

3、在图片中展示文本可以在所有终端上都显示出非系统的美观字体，但在多语言的情况下，需要制作多种语言对应的图片，导致图片数量激增，导致不可控问题。

4、注意文字长度溢出影响布局的问题：不同国家语言在表达相同意思时句子长度会有些差异，所以在页面布局时尽量不要使用受文字长度影响大的的设计，如：标题、按钮等。

5、注意颜色的使用：不同颜色在不同国家有不同的象征。

6、日期与货币格式差异：比如美国的日期格式是“May 31, 2012”，而在欧洲部分地区，日期格式是“31 May 2012”。

7、尽量不要使用连接的翻译字符串：比如“今天的日期是”+具体日期，这样做可能会打乱其他语言的语序。替代方案是为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：I will travel on {% date %}和{% date %} 我会出发。可以看到，语言的语法规则不同，变量的位置是不同的。

8、语言阅读方向：在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。

三、什么是data-属性

在 JavaScript 框架变得流行之前，前端开发者经常使用data-属性，把额外数据存储在 DOM 自身中，这样做是为了在找不到合适的属性或元素时将自定义数据存储到页面或应用中。而现在，不鼓励使用data-属性。原因之一是用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。

四、将HTML5看作是开放的网络平台，什么是HTML5的基本构件？

1、语义：更准确地描述内容。

2、连接：提供新的方式与服务器通信。

3、离线和存储：允许网页在本地存储数据并有效地离线运行。

4、多媒体：在open web中，视频和音频被视为一等公民。

5、2D/3D图形和特效：提供更多演示选项。

6、性能和集成：提供更快的访问速度和性能更好的计算机硬件。

7、设备访问：允许使用各种输入设备、输出设备。

8、外观：可以开发丰富的主题。

五、cookie，session，sessionStorage，localStorage对比

原文链接：http://blog.youkuaiyun.com/ruby_xc/article/details/65939988

	session	cookie	sessionStorage	localStorage
由谁初始化	服务器	客户端或服务器（一般是服务器）如果客户端创建，则默认关闭浏览器cookie失效	客户端	客户端
存储位置	服务器，但是sessionId 会返回客户端存储在 cookie中	客户端	客户端	客户端
生命周期	设定超时时间（默认关闭浏览器失效）	手动设置	当前会话有效（同源同窗口），关闭页面或浏览器被清除，刷新页面或进入同源另一个页面没有影响	永不过期
容量	不宜过大，否则会给服务器性能造成影响	4kb	5MB	5MB
与服务器端通信		每次都会携带在 HTTP头中，如果使cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
访问权限	任意窗口（因为sessionId存在cookie中）	任意窗口	当前会话（当前页面窗口）在新窗口中即使是相同页面数据也不能相互访问	任意窗口

六、请描述<script>、<script async>和<script defer>的区别

1、<script>-遇到该标签将导致HTML解析中断，然后去提取对应脚本并立即执行，执行结束HTML才能继续解析。

2、<script async>-遇到该标签HTML并不会停止解析，而是与脚本的提取和执行工作同时进行，脚本执行完毕时间不确定，可能在HTML解析完成之前或之后，所以只有当脚本与其他脚本独立时才使用该标签，否则可能导致后续脚本访问不到前面脚本情况。

3、<script defer>-脚本提取过程与HTML解析过程并行，但执行过程必须等到HTML解析完毕，如果有多个defer，脚本的执行顺序与在文档中的出现顺序执行。

注：没有src属性的脚本，async与defer属性会被忽略。

七、为什么最好把css的<link>标签放在<head>标签中，而把js的<script>标签放在</body>标签前？

1、css标签应该放在<head></head>标签之间，因为如果放在</body>标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费，效率也不高。如果放在<head></head>之间，浏览器边构建边渲染，效率要高的多。将样式表放在文档底部附近一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。所以将<link>标签放在<head>标签中这种做法可以防止呈现给用户空白的页面或没有样式的内容。

2、当js文件放在<head>中时，浏览器构建DOM树的时候遇到js文件加载会阻塞，也就是说，浏览器不会加载body中的标签，一旦这个js文件的数量和内容都比较大，那么就会造成页面空白的情况，导致较差的用户体验。（js文件之所以会阻塞后续加载是因为在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的）。所以script标签最好放在</body>标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。