前端面试题1-10

HTML常见题目

01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

声明帮助浏览器正确地显示网页

提示：请始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。

作用：

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了那么，那么就等同于开启了标准模式 -- 浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

02、HTML5为什么只需要写？

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

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

ps: 1  SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。
     2  DTD：文档类型定义(Document Type Definition)是一套关百于标记符的语法规则。

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

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：没有内容的HTML元素，例如：br、meta、hr、link、input、img

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

   1   link是XHTML标签,它不仅可以引入css文件，还可以引入网站图标或者设置媒体查询。

    @import是CSS提供的语法规则，只能用来加载css。

    @import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。

2 //引入css

//引入图标

//设置媒体查询

 3   link引入css文件，页面载入同时载入css文件，@import在页面完全载入之后载入css文件，在网络较慢情况下一开始会没有css样式。
 4   link在浏览器中没有兼容问题。@import在css2.1中提出，低版本浏览器会不支持。
 5   link中的css可以被javascript获取进而控制DOM，而@import不支持。

示例： 使用@import导入css