HTML面试题&知识点汇总

目录

• 问题&答案
  • DOCTYPE作用？标准模式与兼容模式各有什么区别?
  • HTML5 为什么只需要写 ""？
  • 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
  • 页面导入样式时，使用link和@import有什么区别？
• 参考资料
• 结束语

问题&答案

DOCTYPE作用？标准模式与兼容模式各有什么区别?

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

---

HTML5 为什么只需要写 ""？

• HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照html应该的方式来运行）。

• 而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

• SGML，标准通用标记语言是一种十分严格的庞大的标记语言，早在万维网发明之前"通用标言"就已存在。举个例子，HTML5允许用户自定义属性，并且约定以"data-"开头，而在SGML中，属性需要挨个进行列举，这样子的话那写出来的DTD将是无穷无尽的。(原文：For example, there is no SGML way to capture the HTML5 rule that any attribute name that starts with "data-" and complies with certain general rules is valid. In SGML, attributes need to be listed individually, so a DTD would need to be infinite.)

---

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为"block"，则为"块级"元素。span默认display属性值为"inline"，是"行内"元素。而空元素如字面意思，就是没有内容的元素，他们往往没有关闭标签(也可以认为是自己关闭自己，如<br />)。
• 行内元素有：<a><b><span><img><input><select><strong>
• 块级元素有：<div><ul><ol><li><dl><dt><dd><h1><h2><h3><h4><h5><h6><p>
• 常见的空元素：<br /><hr /><img /><input /><link /><meta/>
• 鲜为人知的是：<area><base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

---

页面导入样式时，使用link和@import有什么区别？

• link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
• 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
• 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
• 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
• link标签只能在html文件中使用，而@import在html文件和css文件中都可以使用。如下所示：

/*	在css文件中直接使用即可
 	而在html文件中则需要放在<style type='text/css'></style>中使用
	这也解释了上面那条为何Javascript DOM无法直接操作@import，因为DOM是操作文档元素的，
	@import并不像link那样是一个单独的文档元素
*/
	@import url(blog.css);

---

参考资料

1. 前端开发面试题
2. 2019寒冬中的深圳前端面试分享(附笔试题)。
3. Web前端常见面试题汇总
4. 40个常见的HTML5 面试问题及答案
5. HTML5有DTD吗

结束语

A:"You can you up，no can no bb."

B:"怎么我评论一道菜好不好吃还得先会做饭吗。"