"前端技术复习概览"
在前端开发中，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编写效率和可维护性。
以上知识点构成了前端开发的基础，学习和掌握它们对于成为一名合格的前端开发者至关重要。
我的内容管理
展开
