日常来点面试题2021.2.20

抽出点时间看一些面试题，补充一些基础知识。今天看一些HTML相关的题目。

问题：

1. 浏览器页面由哪三层构成，分别是什么，作用是什么？
2. HTML5的优缺点
3. 对Web标准以及W3C的理解和认识
4. HTML与XHTML的区别
5. 什么是静态和动态网页？
6. DOCTYPE的作用是？如何区分严格模式与混杂模式？区分它们有什么意义？
7. 如何调试和查看网页源代码？
8. 语义化的主要目的是什么？
9. 锚点的作用？如何创建？
10. 列举常用的结构标签并描述其作用

回答：

1. 构成：结构层、表示层、行为层，分别对应HTML，CSS，JavaScript。HTML实现页面结构，CSS完成页面表现与风格，JavaScript实现客户端的逻辑功能业务。

2. 优点：网络标准统一、多设备、跨平台、即时更新、提高可用性与用户体验、加入新的语义标签、给站点带来更多多媒体元素、对SEO友好、适用于移动应用程序和游戏。
   缺点：安全问题，web storage、web socket这样的功能容易被黑客利用，盗取用户个人信息。完善性和兼容性，不同浏览器对HTML5支持程度不同，IE9以下几乎全军覆没。对开发者而言提高了技术门槛，HTML5性能在某些平台上较低。

3. 标签要闭合，英文小写，不要嵌套混乱，用标签语义化提高搜索的概率，使用外链式的CSS，JS使结构、样式、行为分离，内容能被更广泛的设备访问，代码精简、开发组件化、代码易维护、可复用，改版省级方便。

4. HTML是一种基于Web页面的设计语言，XHTML是一种基于XML，语法严格，标准的设计语言。两者主要的不同是XHTML元素必须正确嵌套，元素必须关闭，标签必须小写，必须有根元素，HTML没有这些限制。

5. 静态网页是指没有数据交互的网页，没有数据库参与，没有服务端数据加载，也可以理解为只有HTML+CSS+JavaScript做成的网站，这里的JavaScript只考虑一些简单的逻辑处理。动态网页是指有后台参与的网页，数据从数据库中提取，需要有后台逻辑支持。以前的动态网页有ASP，JSP，PHP等，现在有ajax技术之后，采用异步加载技术的页面也可以理解成动态网页。（有动画的网页不一定是动态网页，这里的动态指数据）

6. DOCTYPE声明位于文档中的最前面， 处于标签之前。 告知浏览器的解析器， 用什么文档类型规范来解析这个文档。严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。在混杂模式中， 页面以宽松的向后兼容的方式显示。 模拟老式浏览器的行为以防止站点无法工作。DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

   严格模式就是浏览器根据Web标准去解析页面的方法，是一种严格要求的DTD，不允许使用任何表现层的语法，混杂模式是一种向后兼容的解析方法。触发严格模式需要在HTML标签前声明正确的DTD，触发混杂模式则在文档开始前不声明DTD，或者在DOCTYPE前加入XML声明。

7. 在Windows系统下，按F12打开开发者调试工具，或者右键检查。查看网页源代码直接对页面右键点击选择。

8. 用正确的标签做正确的事情。HTML语义化可以让页面内容结构化，便于浏览器解析和搜索引擎解析，并提高代码的可维护性和可重用性。比如少用无语义的div，多用有语义的header，section，footer等。

9. 锚点是文档中某行的一个记号，类似书签，用于链接到文档中某个位置。当定义锚点后，可以创建跳到该锚点的链接。使用a元素创建锚点时指定name属性可以创建，对其他元素可以指定id为其命名。

10. 结构标签专门用于标识页面的不同结构，相对于使用div元素而言，结构标签可以实现语义化。常用的比如header页眉，nav导航栏，section文档中一个具体组成，article独立于文档的其他部分内容，footer脚注，aside额外组成，如广告栏侧边栏和相关引用信息。