前端面试必备：HTML与CSS知识详解

"前端面试题，包括HTML的相关知识点，如display:none、visibility:hidden和opacity:0的区别，HTML5新增标签，以及响应式布局的实现方法。" 在前端开发中，理解和掌握HTML元素的隐藏方式至关重要。这里主要讨论了`display:none`、`visibility:hidden`和`opacity:0`之间的区别： 1. **空间占据** - `display:none`隐藏后的元素不会占据任何空间，它会导致页面的回流和重绘。 - `visibility:hidden`的元素虽然看不见，但仍占据原有的空间，只触发重绘。 - `opacity:0`同样占据空间，只改变透明度而不影响布局。 2. **子元素继承** - `display:none`的隐藏状态不会传递给子元素，子元素也不会显示。 - `visibility:hidden`的状态会被子元素继承，子元素也会保持隐藏。 - `opacity:0`的透明度也会被子元素继承，无法通过设置子元素的透明度使它们重新显示。 3. **事件绑定** - `display:none`的元素及其事件都无法触发。 - `visibility:hidden`的元素上的事件同样不可触发。 - `opacity:0`的元素上的事件可以正常触发。 4. **动画效果** - `transition`不能应用于`display`的改变。 - `transition`也不能应用于`visibility`的变化。 - `transition`可用于`opacity`，可以实现平滑的透明度过渡。 HTML5带来了许多新特性，其中一些新增的标签和功能包括： - **语义化标签**：如<header>, <footer>, <nav>, <article>, <aside>等，提高了代码的可读性和搜索引擎优化（SEO）。 - **丰富的`<input>`类型**：添加了日期、电话、颜色、网址等输入类型，提供了更好的用户体验。 - **音频和视频**：`<audio>`和`<video>`标签使得在网页中嵌入多媒体内容变得简单。 - **拖放API**：允许用户在网页内直接拖放元素。 - **地理位置**：通过Geolocation API获取用户的位置信息。 - **Canvas画布**：用于绘制2D图形。 - **SVG**：用于创建可缩放的矢量图形。 - **Web Worker**：在后台执行计算任务，提高性能。 - **H5新特性**：还包括本地存储增强（如sessionStorage、localStorage和indexedDB），离线Web应用程序，表单的新功能，以及地理定位等。 响应式布局是现代Web设计的关键，主要有以下几种实现方式： 1. **百分比布局**：根据父元素大小调整元素的宽高，适用于大部分布局调整。 2. **媒体查询（Media Queries）**：根据设备特性如屏幕宽度应用不同的CSS样式。 3. **Flexbox（弹性盒布局）**：提供了一种更灵活的布局方式，元素可以在容器内自动排列。 4. **Grid布局**：允许二维布局，使得行和列的控制更为精确。 5. **响应式框架**：如Bootstrap、Foundation等，提供了预设的响应式组件和布局。 理解并熟练运用这些知识点，对于前端开发者来说，是构建现代、适应性强的Web应用的基础。