前端面试必备：HTML5特性、CSS3新貌与兼容性探讨

"前端面试宝典" 前端面试中，HTML、CSS和JavaScript是核心考察点。以下是这些领域的关键知识点： 1. **HTML** - HTML5特性：包括离线存储（localStorage）、拖放功能、画布（Canvas）、媒体元素、语义化标签（如<header>、<footer>、<article>等）等。 - 语义化：通过使用有意义的标签来增强网页结构，提高可读性和可访问性。 - 浏览器标准模式与怪异模式：标准模式遵循W3C标准，而怪异模式遵循早期浏览器的非标准解析规则。 - XHTML与HTML区别：XHTML更严格，要求所有标签闭合，语法类似XML；HTML则相对较宽松。 - `data-`属性：用于添加自定义数据，便于JavaScript操作，不被浏览器解析。 - Meta标签：常用于设置字符编码、viewport、刷新页面、SEO等。 - 废弃标签：如<frameset>、<frame>、<center>等。 - 兼容性问题：通常关注IE6-8，以及iOS与Android的差异，如input按钮样式、滚动穿透等。 2. **CSS** - 盒模型：包括content、padding、border和margin。 - `box-sizing`：控制元素的边框和内填充是否影响元素总尺寸。 - CSS3新特性：包括选择器（如:nth-child()）、过渡（transition）、动画（animation）、多列布局（columns）、Flexbox和Grid等。 - 隐藏元素：可以使用`display:none`、`visibility:hidden`、`opacity:0`或CSS3的`clip-path`。 - 居中布局：可以使用绝对定位、相对定位、Flexbox或Grid实现水平和垂直居中。 - `*{box-sizing:border-box;}`：让所有元素的边框和内填充包含在总宽度和高度内，简化布局计算。 - 浮动元素问题：可能导致父元素塌陷，使用clearfix解决，或者用Flexbox和Grid替代。 - `link`与`@import`：`link`是行内加载，`@import`是延迟加载，`link`支持CSS精灵，`@import`在某些场景下性能较差。 - CSS3 Flexbox：用于创建灵活的、响应式的布局，适用于一维布局（如导航栏、列表项等）。 - inline与inline-block：inline元素不会换行，inline-block兼具行内元素和块级元素特性，允许设置宽高但不换行。 面试时，理解并能灵活运用这些概念和技术是至关重要的。同时，面试者应准备应对实际项目中遇到的特定挑战和解决方案，展示出对前端开发的深入理解和实践经验。