本文档是关于前端开发中遇到的一些跨浏览器兼容性问题及HTML、CSS、JavaScript相关的知识点的总结。 1. **访问父元素的区别**: 在不同的浏览器中,访问DOM元素的父节点有不同的方法。在IE下,通常使用`obj.parentElement`,而在Firefox下则是`obj.parentNode`。由于两者都支持DOM,建议统一使用`obj.parentNode`来兼容不同的浏览器。 2. **innerText问题**: `innerText`属性在IE中正常工作,但在Firefox中可能不适用。为了解决这个问题,可以在非IE浏览器中使用`textContent`替代`innerText`。在处理文本内容时,需要注意这个差异,并进行适当的浏览器检测和适配。 3. **Table操作问题**: IE、Firefox和其他浏览器对表格操作的处理方式不同。例如,IE不允许直接对`table`和`tr`的`innerHTML`赋值,而添加新`tr`时,使用`appendChild`在IE中可能无效。为了解决这个问题,应将行插入到`<tbody>`元素中,而不是直接插入到`<table>`。 4. **HTML和CSS基础知识**: - Doctype声明用于指示浏览器使用哪种HTML或XHTML规范解析页面,影响页面的渲染模式。 - Quirks模式是浏览器以非标准方式渲染页面,而Standards模式遵循W3C标准。 - Div+CSS布局比Table布局具有更好的灵活性、可维护性和SEO优化。 - Alt和Title属性在`<img>`标签中,Alt是图像无法显示时的替代文本,Title是鼠标悬停时显示的提示信息。 - Strong和Em标签,Strong表示强调,通常加粗,Em表示语气强调,通常斜体。 5. **前端优化**: - 使用多个域名存储资源可以利用浏览器的并发下载能力,提高页面加载速度。 - 网页标准和制定机构(如W3C)确保了跨平台和跨浏览器的一致性,提高了可访问性和可维护性。 - Cookies、sessionStorage和localStorage在Web存储中的用途不同,Cookies适用于小量数据,sessionStorage用于单窗口/标签的数据存储,localStorage用于持久化存储。 - src引用外部资源,href链接到其他文档或位置。 - 图片优化方法包括压缩图片、使用CDN、懒加载等,以提高加载速度。 - SEO优化要考虑关键词、元标签、URL结构、内容质量等因素。 - 可通过CSS类、JavaScript直接修改DOM元素样式,或者使用CSS选择器选择元素并应用样式。 6. **CSS和JavaScript知识点**: - CSS选择器包括标签选择器、类选择器、ID选择器、属性选择器等。 - 使用`display:none`和`visibility:hidden`可以隐藏元素,前者不占据空间,后者仍占据空间。 - 超链接访问后,hover样式消失,可以通过CSS伪类`:visited`来解决。 - CSS Hack是为了应对浏览器差异,如针对IE6、7、8的特定样式写法。 - 行内元素的padding和margin可以设置,但效果可能不如块级元素明显。 - 透明度效果,rgba()可以设置透明颜色,opacity影响整个元素及其子元素。 - `vertical-align`和`text-align`可用于使元素在垂直和水平方向上对齐。 - 垂直居中浮动元素可以使用绝对定位、Flexbox或Grid布局实现。 - PX是固定单位,EM是相对单位,基于父元素的字体大小。 - CSS reset文件(如Eric Meyer Reset)清除浏览器默认样式,normalize.css则保留部分基本样式,保持一致的基础表现。 7. **预处理器**: Sass和LESS是CSS预处理器,它们允许使用变量、嵌套规则、混合和函数等功能,使CSS编写更加模块化和可维护。Sass支持SCSS语法,更接近CSS,LESS则使用.LSS扩展名。预处理器使得CSS更具编程特性,方便管理复杂的样式代码。 这些知识点涵盖了前端开发中常见的问题、最佳实践和优化策略,是开发者必备的基础技能。
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://profile-avatar.csdnimg.cn/d12f882c23104540902a973cc7bb623e_weixin_26749245.jpg!1)
- 粉丝: 24
- 资源: 3981
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Hadoop生态系统与MapReduce详解
- MDS系列三相整流桥模块技术规格与特性
- MFC编程:指针与句柄获取全面解析
- LM06:多模4G高速数据模块,支持GSM至TD-LTE
- 使用Gradle与Nexus构建私有仓库
- JAVA编程规范指南:命名规则与文件样式
- EMC VNX5500 存储系统日常维护指南
- 大数据驱动的互联网用户体验深度管理策略
- 改进型Booth算法:32位浮点阵列乘法器的高速设计与算法比较
- H3CNE网络认证重点知识整理
- Linux环境下MongoDB的详细安装教程
- 压缩文法的等价变换与多余规则删除
- BRMS入门指南:JBOSS安装与基础操作详解
- Win7环境下Android开发环境配置全攻略
- SHT10 C语言程序与LCD1602显示实例及精度校准
- 反垃圾邮件技术:现状与前景
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)