Web前端面试必备：HTML、CSS与浏览器兼容性解析

"这是一份关于web前端面试的题目集，涵盖了HTML、CSS以及相关标准、模式、元素分类、盒模型、CSS引入方式、选择器优先级等方面的基础知识。" 在Web前端开发中，理解并掌握HTML和CSS是至关重要的。WEB标准和W3C规范的遵循有助于创建更优化、可访问且易于维护的网站。这包括正确闭合标签、使用小写字母、避免嵌套混乱、分离结构和表现，以及利用外部样式表和脚本。这样做不仅可以提高搜索引擎的抓取效率，还能使网页在不同设备和浏览器上呈现良好，加快页面加载速度。 XHTML与HTML的主要区别在于XHTML是一种严格遵循XML规则的语言，要求所有元素必须正确嵌套、关闭，并且标签名称全部小写。XHTML文档还需要一个根元素，以符合XML的规范。 DOCTYPE声明用于指明文档使用的规范，例如HTML或XHTML。不同的DOCTYPE会导致浏览器进入严格模式或混杂模式，影响元素的渲染方式。严格模式按照标准来解析页面，而混杂模式则会模拟旧版本浏览器的行为，可能包含一些非标准的特性。 在HTML中，元素分为块级元素（如div、h1-h6、form等）和行内元素（如a、span、input、select等）。CSS盒模型包括内容(content)、边框(border)、内边距(padding)和外边距(margin)，它定义了元素占用的空间。 CSS引入有四种方式：内联（在HTML元素中直接设置）、内嵌（在`<style>`标签中）、外链（通过`<link>`标签引入外部CSS文件）和导入（使用`@import`规则）。其中，`link`标签不受JavaScript影响，而`@import`则可以在CSS2.1及以下版本的浏览器中出现问题。 CSS选择符包括标签选择符、类选择符、ID选择符等，部分属性如字体、颜色等可以继承。优先级计算遵循ID选择符 > 类选择符 > 标签选择符，而`!important`声明的优先级最高。 前端页面通常由结构层（HTML，定义内容和结构）、表示层（CSS，控制样式和布局）和行为层（JavaScript，实现交互和动态效果）构成。 CSS语句的基本结构是选择器后面跟着一对大括号，其中包含了属性和对应的值，如：`.className { color: red; font-size: 16px; }`。 在测试页面时，常见的浏览器包括IE（使用Trident内核）、Firefox（Gecko内核）、Chrome（WebKit内核）和Opera（Presto内核，但现代版本已改为Blink内核）。针对IE6的常见问题，比如双边距BUG，可以通过设置`display`属性来解决；3像素问题通常涉及浮动元素，可使用`display:inline-block`或调整`margin`；超链接的`hover`状态失效，需确保正确的CSS声明顺序，即`link visited hover active`。