Web前端笔试面试必看：HTML与CSS核心知识点解析
需积分: 10 149 浏览量
更新于2024-09-08
2
收藏 22KB DOCX 举报
"本文主要涵盖了Web前端笔试和面试中常见的技术问题，包括HTML、CSS以及浏览器兼容性等关键知识点。"
HTML部分：
1. Doctype声明用于定义文档类型，严格模式下浏览器按照W3C标准解析，混杂模式则遵循更宽松的旧规则，有利于向后兼容。
2. HTML5的简洁doctype是为了简化文档结构，只写<!DOCTYPE HTML>即可让浏览器进入标准模式。
3. 行内元素如span、a，块级元素如div、p，空元素如br、img没有结束标签。
4. link常用于引入外部样式表，支持CSS以及其他资源；@import只能在内部样式表中使用，且加载相对较慢。
5. 浏览器内核负责解析HTML、CSS，并渲染页面，例如 Trident（IE）、Gecko（Firefox）、Blink（Chrome、Opera）和WebKit（Safari）。
6. 常见的浏览器内核有Trident、Gecko、Blink和WebKit。
7. HTML5的新特性包括语义化标签、离线存储、canvas、geolocation等，移除了frame、frameset等元素。解决新标签兼容问题可借助JavaScript库如Modernizr或条件注释。
8. HTML5与HTML的主要区别在于前者增强了语义性、增加了新元素和API，支持离线存储、拖放等。
9. HTML语义化是指通过合适的标签描述内容结构，利于搜索引擎和辅助技术理解页面内容。
10. HTML5离线储存通过manifest文件指定资源，浏览器在在线时缓存，离线时读取缓存内容。
11. 浏览器根据manifest文件管理离线资源，离线时优先加载本地缓存，只有当资源不存在或更新时才会尝试网络请求。
12. cookies、sessionStorage和localStorage分别用于会话级、窗口级和站点级数据存储，cookies带大小限制且每次请求都会发送，而localStorage和sessionStorage仅在本地存储，不随请求发送。
13. iframe缺点包括性能损耗、SEO困难、加载控制复杂等。
14. Label用于绑定表单元素，提高可访问性，可用for属性或直接包裹元素。
15. form标签的autocomplete属性设为"off"可禁用自动完成功能。
16. 多标签页通信可通过WebSocket、localStorage事件、Broadcast Channel API等实现。
17. WebSocket兼容低版本浏览器可能需要polyfill或Flash fallback。
18. PageVisibility API可用于检测页面是否在用户视图中，优化资源加载和交互。
19. 实现圆形可点击区域，可以利用CSS的border-radius属性配合定位和大小调整。
20. 使用1px边框宽度，结合负margin和透明边框，可在不同模式下实现统一的1px线效果。
21. 验证码用于防止自动化脚本的恶意操作，如防止机器人注册、刷票等。
22. title用于设置页面标题，h1用于页面主标题；b是粗体，strong强调内容重要性；i是斜体，em表示强调。
CSS部分：
1. CSS盒模型包括content、padding、border和margin，IE低版本盒模型将border和padding包含在width内。
2. 选择符包括ID、class、tag、属性、伪类等，继承性主要与元素类型和属性相关。
3. CSS优先级计算：内联样式>id选择器>类/属性/伪类>标签，同级别按顺序出现次数决定。
4. CSS3新增伪类如:hover、:active、:focus、:target等。
5. 居中方法：div使用margin: auto，浮动元素添加clearfix，绝对定位的div设置left: 50%和transform: translateX(-50%)。
6. display属性值包括block、inline、none、inline-block等，分别用于控制元素布局和显示。
7. relative定位基于自身原本的位置，absolute基于最近非static祖先元素。
8. CSS3新特性如阴影、渐变、动画、多列布局、flexbox、grid等。
9. Flexbox适用于动态布局，如导航栏、卡片堆叠、响应式设计等，通过flex属性调整元素大小和位置。
10. 创建三角形利用边框塌陷和透明边框，设置宽高为0，只保留一个边框。
11. 品字布局通常采用Flexbox或Grid实现，分配三个容器并设置相应的justify-content和align-items。
12. 兼容性问题涉及浏览器对CSS新特性的支持，需关注vendor前缀、盒模型差异、浏览器特定hack等。
13. li与li之间的间距可以通过list-style、margin、padding等调整。
这些题目涵盖了前端开发中基础且重要的概念，有助于应聘者在笔试和面试中展示扎实的技术基础。
+、请解释一下 -- 的 9!616弹性盒布局模型:以及适用场景？
、用纯 -- 创建一个三角形的原理是什么？
、一个满屏品字布局如何设计
、常见兼容性问题？
、! 与 ! 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 ).# 的技巧？
、为什么要初始化 -- 样式。
'、.1,!8 的 ".""/1!# 计算方式跟正常流有什么不同？
(、-- 里的 ,1! 属性有个 !!., 属性值是干嘛用的？在不同浏览器下以后什
么区别？
*、," 跟 ,!.、%.&/"!!.,、&;2、;. 这些特性相互叠加后
会怎么样？
+、对 <9 规范块级格式化上下文：1!#0&%."/"6的理解？
、-- 权重优先级是如何计算的？
、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
、移动端的布局用过媒体查询吗？
、使用 -- 预处理器吗？喜欢那个？
剩余13页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
210 浏览量
2022-07-04 上传
2023-09-20 上传
2022-11-26 上传
2021-10-21 上传
2023-07-10 上传
尤夏
- 粉丝: 12
- 资源: 2
我的内容管理
展开
最新资源
- Voice-User-Interface:LaunchTech支持助理
- school-ms-netcorewebapi：学校管理系统-使用.NET Core构建的Web API
- OLgallery-开源
- 用于在Python中构建功能强大的交互式命令行应用程序的库-Python开发
- ThreatQ Extension-crx插件
- GeoDataViz-Toolkit:GeoDataViz工具包是一组资源，可通过设计引人注目的视觉效果来帮助您有效地传达数据。在此存储库中，我们正在共享资源，资产和其他有用的链接
- SQL-IMDb：关于IMDb数据集的各种约束SQL查询
- AlgaFoodAPI:藻类食品原料药
- wikiBB-开源
- 参考资料-基于SMS的单片机无线监控系统的设计.zip
- emptyproject-pwa：空项目：PWA + jComponent + Total.js
- React计算
- ux_ui_hw_17
- tamarux-开源
- pytest框架使编写小型测试变得容易，但可以扩展以支持复杂的功能测试-Python开发
- StellarTick-crx插件
