前端开发面试题：HTML, CSS, 和浏览器兼容性解析

"前端技术复习概览" 在前端开发中，HTML和CSS是构建网页的基础，而JavaScript则是赋予网页交互性的关键。本资源涉及到的【标题】"建立单选钮-the timeless way of building（eg）"关注的是在不同浏览器环境下创建单选按钮的方法，通过`document.createElement`函数和设置属性来实现。对于非IE浏览器，可以直接创建`<input>`元素并设置`type`、`name`和`value`属性；而在IE中，需要使用字符串拼接的方式创建完整的HTML片段。 【描述】中提到的标签包括"IT 前端 JS HTML JQuery"，涵盖了前端开发的主要技术栈。以下是一些相关的知识点： 1. **HTML和CSS**： - **DOCTYPE**：用于声明文档类型，帮助浏览器以正确的标准模式解析页面，避免Quirks模式。 - **Quirks模式**：浏览器按照旧的、非标准的渲染方式解析页面，与Standards模式（标准模式）相比，解析规则不一致。 - **div+css布局**：比table布局更灵活，易于维护和扩展，支持响应式设计，且页面加载速度更快。 - **img的alt与title**：`alt`提供图片无法显示时的文字替代，对SEO友好；`title`是鼠标悬停时显示的提示信息。 - **strong与em**：`strong`强调文本，通常加粗；`em`表示重要性或强调，通常斜体。 2. **前端优化**： - **多域名存储资源**：可以突破浏览器对同一域名下的并发请求限制，提高加载速度。 - **网页标准**：如W3C标准，确保跨浏览器兼容性，提升用户体验和可访问性。 - **cookies，sessionStorage和localStorage**：各有不同的应用场景，cookies在所有页面共享，sessionStorage仅限于当前会话，localStorage持久化存储。 - **src与href**：`src`用于引入外部资源，如图片、脚本等；`href`用于链接外部资源，如链接到其他页面。 - **图片优化**：延迟加载、雪碧图、响应式图像、压缩图片等方法可以改善用户体验。 - **HTML结构语义化**：使页面内容含义清晰，利于屏幕阅读器和搜索引擎理解。 - **SEO**：前端优化要考虑关键词布局、元标签、页面结构等，以提高搜索引擎排名。 3. **JavaScript**： - **创建DOM元素**：如示例中的创建单选按钮，使用`createElement`和`setAttribute`方法。 - **CSS选择器**：包括ID选择器、类选择器、标签选择器、属性选择器等，用于定位和操作DOM元素。 - **CSS隐藏元素**：`display:none`和`visibility:hidden`都可以隐藏元素，但前者不占用空间，后者仍保留位置。 - **CSS Hack**：针对不同浏览器的兼容性问题，如针对IE的特定CSS写法。 - **行内元素与块级元素**：行内元素（如`span`）不换行显示，块级元素（如`div`）独占一行，两者的`padding`和`margin`处理方式不同。 - **外边距重叠**：相邻块级元素的顶部或底部外边距可能合并，重叠后的结果取决于具体规则。 - **rgba()与opacity**：rgba()能设定透明度且不影响子元素，而opacity会影响整个元素及其所有子元素。 - **CSS垂直居中**：可以使用Flexbox、Grid布局，或者传统方法如绝对定位配合transform等实现。 - **px和em**：px是固定单位，em是相对单位，基于父元素字体大小。 - **CSS reset**：重置浏览器默认样式，如Eric Meyer Reset， Normalize.css则更注重保持部分默认样式，两者目标不同。 4. **预处理器**： - **Sass和LESS**：是CSS预处理器，允许使用变量、嵌套规则、混合等功能，提高CSS编写效率和可维护性。 以上知识点构成了前端开发的基础，学习和掌握它们对于成为一名合格的前端开发者至关重要。