HTML/CSS 基础知识点总结（2025版）
笔记目录
一、HTML5 核心知识点
1.1 新语义化标签
HTML5 摒弃了传统以 div 为主的无意义布局方式，引入了一系列具有明确语义的标签，既能提升页面的可访问性，也有助于搜索引擎理解页面结构，是前端规范化开发的基础。
常用语义化标签及用途
- header：用于定义页面或区域的头部，通常包含标题、导航等内容
- nav：专门用于包裹网站的导航菜单，区分普通内容与导航区域
- main：表示页面的核心内容区域，一个页面仅能有一个 main 标签
- article：代表独立的、可复用的内容块，如文章、笔记、评论等
- section：用于划分内容区块，通常包含一个主题性的标题
- aside：侧边栏内容，多用来展示与主内容相关的补充信息
- footer：页面或区域的底部，通常包含版权、联系方式等信息
使用语义化标签的核心价值：提升代码可读性、便于团队协作维护、优化SEO效果、增强无障碍访问体验。
1.2 表单新特性
HTML5 对表单功能进行了大幅增强，无需编写复杂的JavaScript代码，即可实现基础的表单验证和更好的用户体验，是前端开发中提升效率的重要特性。
核心新特性分类
新输入类型
邮箱、电话、网址、数字、日期、时间、滑块、颜色选择等专用输入类型，浏览器会自动适配输入方式和基础验证
实用新属性
必填验证、占位提示、自动聚焦、正则验证、数值范围限制等属性，简化表单开发流程
原生验证
浏览器自带的表单验证功能，可自定义提示文字，减少前端验证代码量
二、CSS3 核心知识点
2.1 Flex 弹性布局
Flex 布局是一维的布局模型，专注于解决行或列方向的布局问题，相比传统的浮动布局，更简洁、更易维护，是现代前端布局的核心方式之一。
核心属性分类
- 容器属性：控制整体布局方向、项目对齐方式、换行规则等核心逻辑
- 项目属性：调整单个项目的缩放比例、基准尺寸、自身对齐方式等
Flex 布局的优势在于能够快速实现居中对齐、等分布局、自适应空间分配等常见需求，大幅降低布局代码的复杂度。
2.2 Grid 网格布局
Grid 布局是二维的布局模型，可同时控制行和列的布局规则，适合构建复杂的页面整体布局，弥补了 Flex 布局在二维布局场景下的不足。
Flex 与 Grid 的选择原则：一维布局（单行/单列）用 Flex，二维布局（多行多列）用 Grid，两者结合使用可覆盖绝大多数布局场景。
2.3 响应式设计
响应式设计是适配不同设备屏幕的核心方案，通过灵活的布局规则，让页面在手机、平板、电脑等不同设备上都能有良好的展示效果。
核心实现方式
- 媒体查询：根据不同的屏幕宽度设置差异化的样式规则
- 弹性单位：使用相对单位（如rem、em、vw/vh）替代固定像素值
- 流体布局：宽度采用百分比等相对值，让元素随容器自适应
三、常见问题与解决方案
3.1 浏览器兼容性
不同浏览器对HTML5和CSS3特性的支持程度存在差异，是前端开发中常见的问题，需要针对性的解决方案来保证页面展示效果一致。
兼容性解决策略
- CSS前缀：为不同浏览器添加专属前缀（如-webkit-、-moz-等），确保特性生效
- 自动化工具：使用autoprefixer等工具自动添加浏览器前缀，提升开发效率
- 兼容库：针对低版本IE浏览器，使用HTML5 Shiv和Respond.js等库实现特性兼容
- 渐进增强：优先实现核心功能，再为现代浏览器添加高级特性
3.2 移动端适配
移动端设备屏幕尺寸多样，适配不当会导致页面展示错乱、交互体验差等问题，是前端开发中必须重点关注的环节。
核心适配技巧
视口设置
通过meta标签设置视口宽度为设备宽度，初始缩放比例为1，确保页面在移动端正常显示
点击延迟处理
解决移动端点击300ms延迟问题，可通过CSS属性或专用库优化
高清屏幕适配
针对Retina屏幕，使用2倍/3倍图，保证图片和界面元素清晰显示
触摸交互优化
适配移动端触摸事件，优化点击、滑动等交互体验
学习总结
HTML5和CSS3是前端开发的基础核心，语义化标签提升了代码的规范性，Flex/Grid布局解决了传统布局的痛点，响应式设计则保证了多设备的适配性。在实际开发中，既要掌握核心特性的使用，也要重视浏览器兼容性和移动端适配问题，通过合理的技术方案，构建稳定、美观、易用的前端页面。