HTML+CSS部分前端面试题知识点总结（一）
2018-01-27 本文已影响53人
西柚喃木
这是从极客校园的某个课程上看到的。今天先总结一部分。
1.WEB标准以及对W3C的理解与认识
- WEB标准不是某一个标准，而是一系列标准的集合。
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
这些标准大部分由万维网联盟（W3C）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。 - W3C即万维网联盟。
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。
姆·伯纳斯·李（Tim Berners-Lee）是万维网联盟创始人发明者被称为互联网之父。万维网联盟，建立于 1994 年，是一个国际性的联盟，其宗旨是投身于"引领 web 以激发其全部潜能"。- W3C是作为成员国机构组织
- W3C的工作是进行标准化网络
- W3C创建和维护的WWW标准
- W3C标准有W3C建议
2.XHTML和HTML的区别
XHTML和HTML最重要的区别如下：
文档结构
- XHTML DOCTYPE 是强制性的
- <html> 中的 XML namespace 属性是强制性的
- <html>、<head>、<title> 以及 <body> 也是强制性
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
总的来说，XHTML是与 HTML 4.01 几乎相同的，但更严格更纯净，以 XML 应用的方式定义的 HTML，得到了所有主流浏览器的支持。
3.DOCTYPE是什么（important！）？什么是严格模式和混杂模式，如何触发两种模式？
- <!DOCTYPE> 声明不是 HTML 标签；<!DOCTYPE>声明叫做文件类型定义（DTD），它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<!DOCTYPE> 声明没有结束标签。且对大小写不敏感。
HTML 4.01中有三种<!DOCTYPE> 声明。在 HTML5 中只有一种：<!DOCTYPE html>。 -
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
触发：
1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
4.行内元素有什么？块级元素有什么？CSS盒模型是什么？
- 常用行内元素：a,b,br,i,span,input,select
- 常用块级元素：div,p,h1,h2,h3,h4,form,ul
-
CSS盒模型：
CSS盒模型
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
5.CSS引入方式？link和@import的区别？
- 行内样式（style）、内部样式表（style标签中写）、外部样式表（link）。
- 1、link属于html标签，而@import是css提供的。
2、页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
3、link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
4、link方式样式的权重高于@import的。
@import的书写方式：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
其中，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。
从字节优化的角度来看@import url(style.css)最值得推荐。
