HTML5 与 CSS 核心知识点总结

一、HTML5核心知识点

1. 语义化标签

定义：指使用具有明确语义含义的标签描述页面结构，替代传统无意义的<div>标签，提升代码可读性、可维护性，同时优化SEO（搜索引擎优化）和无障碍访问。

核心标签及作用：

<header>：页面或区块的页眉，通常包含标题、Logo、导航等

<nav>：导航容器，专门用于包裹页面导航链接，帮助搜索引擎识别核心导航区域

<section>：语义化区块，用于划分页面中相对独立的内容模块（如文章分段、功能区块）

<article>：独立完整的内容块（如博客文章、新闻报道、评论），可单独存在并被理解

<aside>：侧边栏内容，与主内容相关但非核心，如侧边导航、推荐阅读、作者信息

<footer>：页面或区块的页脚，通常包含版权信息、联系方式、备案号等

最佳实践：

避免过度嵌套，保持标签层级扁平化，减少DOM树复杂度

不滥用语义化标签，仅在符合标签语义的场景使用（如不将<nav>用于非导航内容）

结合ARIA属性增强无障碍性，适配特殊访问设备

2. 表单

HTML5新增特性：在传统表单基础上扩展了更多输入类型和属性，简化验证逻辑，提升用户体验和开发效率。

核心新增输入类型：

基础功能型：<input type=”email”>（邮箱验证）、<input type=”tel”>（电话输入）、<input type=”url”>（网址验证）、<input type=”number”>（数字输入）

便捷交互型：<input type=”date”>（日期选择器）、<input type=”time”>（时间选择器）、<input type=”color”>（颜色选择器）

搜索专用：<input type=”search”>（搜索框，支持清除按钮等默认交互）

核心新增属性：

验证相关：requir