HTML元素+网页布局区块概念汇总表
整合所有HTML核心元素、网页开发高频布局区块（含英雄区相关），按HTML语义化元素和网页布局区块术语分类成两个表格，包含名称、解释、用途三列，定义精准且贴合实际开发场景，可直接对照代码参考使用，文末用图形化直观表示各名称的位置方便理解。
表格使用说明
- 两个表格分别对应HTML基础语义化元素和网页布局区块术语；
- 所有概念的解释聚焦核心定义，用途贴合实际开发场景，覆盖PC/移动端、企业站/电商站；
- 布局区块术语以英雄区（Hero Section）为核心，包含其上下游关联区块，是前端开发高频使用的标准化术语，可直接作为开发参考手册。
一、HTML5核心语义化元素表
名称 | 解释 | 用途 |
html | 整个HTML文档的根元素，包裹所有页面内容 | 作为页面最外层容器，必须指定lang语言属性，包含head和body |
head | 页面头部元信息容器，无可视内容 | 存放页面标题、编码、CSS样式、JS脚本、SEO、视口设置等元数据 |
body | 页面可视内容的根容器 | 包裹所有用户能看到的元素（文字、图片、按钮、布局区块等） |
title | 页面标题标签，属于head子元素 | 定义浏览器标签栏/书签显示的标题，是SEO核心元素，描述页面核心内容 |
meta | 页面元数据标签，无闭合标签 | 指定页面编码（UTF-8）、SEO描述/关键词、移动端视口适配等 |
link | 外部资源链接标签，无闭合标签 | 引入CSS样式表、设置网站favicon图标、预加载资源等 |
script | JS代码容器/外部JS引入标签 | 编写或引入JavaScript代码，实现页面交互、动态效果等 |
header | 页面/任意模块的头部容器 | 存放页面/模块的logo、标题、导航栏等，页面顶部或模块顶部均可使用 |
nav | 网站专属导航区域 | 存放页面主要跳转链接（首页、关于我们等），一个页面可设置多个nav |
main | 页面唯一的核心内容区域 | 包裹页面核心业务内容，排除头部、底部、侧边栏等次要内容，一个页面仅一个 |
section | 有明确主题的独立章节/区块 | 划分页面内容模块（如产品介绍、新闻列表），需配合标题标签（h1-h6）使用 |
article | 独立的、可单独分发的内容容器 | 存放文章、新闻、评论、商品卡片等，脱离页面仍有完整语义和使用价值 |
aside | 页面侧边栏/辅助内容区域 | 存放与主内容相关的次要信息（如相关推荐、布局术语、筛选栏、广告） |
footer | 页面/任意模块的底部容器 | 存放版权信息、备案号、联系方式、底部导航等，页面底部或模块底部均可使用 |
div | 无明确语义的通用块级容器 | 用于无专属语义的布局包裹，配合CSS实现任意布局效果，HTML5前主流布局标签 |
h1~h6 | 标题层级标签，h1最高，h6最低 | 定义页面/模块的语义化标题，帮助搜索引擎/浏览器识别内容结构，一个页面仅一个h1 |
p | 段落文本容器 | 包裹一段完整的文字内容，自动区分段落并生成上下留白，最常用的文本标签 |
span | 无明确语义的通用行内容器 | 包裹行内文本的一部分，单独设置样式（颜色、字体等），不独占一行，不影响布局 |
br | 强制换行标签，无闭合标签 | 用于文本的自然换行（如诗歌、地址），不可用于布局留白（布局用CSS） |
hr | 水平分隔线标签，无闭合标签 | 表示内容主题的切换，语义化标签，非单纯样式，样式可通过CSS修改 |
ul | 无序列表容器 | 存放无先后顺序的列表项，默认带项目符号，配合li使用（如导航、商品列表） |
ol | 有序列表容器 | 存放有先后顺序的列表项，默认带数字编号，配合li使用（如步骤、排名、教程） |
li | 列表项标签，ul/ol的唯一子元素 | 包裹列表的单个内容，可嵌套任意HTML元素（div、a、img等） |
dl | 定义列表容器，专用于“术语-解释”场景 | 配合dt（术语）和dd（解释）使用，用于展示词汇、概念、术语等的定义说明 |
dt | 定义列表的术语/标题标签 | 表示定义列表中的待解释术语，一个dl可包含多个dt，一个dt可对应多个dd |
dd | 定义列表的解释/描述标签 | 解释对应dt的内容，默认左侧缩进，与dt一一对应（或一多对应） |
a | 超链接标签，核心交互元素 | 实现页面跳转、锚点链接、文件下载，行内元素，可通过CSS改为块级 |
img | 图片标签，无闭合标签，行内块元素 | 展示图片，必须设置src（图片地址）和alt（替代文本，无障碍/图片加载失败用） |
video | 视频播放容器 | 播放MP4/WEBM等格式视频，支持controls（控制栏）、autoplay（自动播放）等属性 |
audio | 音频播放容器 | 播放MP3/WAV等格式音频，用法同video，仅显示音频控制栏，无视觉播放区域 |
button | 按钮交互元素 | 实现用户点击操作，分普通按钮、提交按钮、重置按钮，自带原生按钮样式 |
input | 表单输入框，无闭合标签 | 通过type属性实现多种输入功能（文本、密码、复选框、文件上传等），表单核心元素 |
form | 表单容器 | 包裹所有表单元素，通过action（提交地址）和method（GET/POST）实现用户数据提交 |
二、网页开发高频布局区块术语表（含英雄区核心）
名称 | 解释 | 用途 |
Hero Section（英雄区） | 网页核心视觉区域，位于header/nav后、main前，是用户第一眼看到的内容区 | 展示网站/产品核心标语、主banner图、核心CTA按钮，传递核心价值，引导用户操作 |
Banner区 | 广义包含英雄区，狭义指独立的轮播图/广告图区域，视觉冲击力强 | 电商/资讯站展示广告、活动、新品，企业站展示品牌形象，多配合轮播、点击跳转功能 |
CTA区（行动召唤区） | 引导用户完成核心操作的区域，通常包含醒目的按钮/文案 | 嵌套在英雄区/页面底部/侧边栏，实现“立即购买”“免费注册”“预约咨询”等核心转化 |
Cta Bar（行动召唤条） | 窄版轻量化CTA区，多为通栏设计 | 固定在页面顶部/底部，展示限时活动、客服入口、进度提醒，不遮挡主内容，提升转化 |
Feature区（功能特色区） | 英雄区后的核心内容区，聚焦产品/网站的核心功能、优势 | 用卡片式/图标式布局展示功能点，让用户快速了解产品/网站的核心价值 |
Benefit区（利益点区） | Feature区的延伸，侧重展示用户能获得的实际利益/价值 | 突出“限时优惠”“免费售后”“0元试用”等卖点，降低用户决策成本，提升转化意愿 |
Testimonial区（客户证言区） | 展示真实客户的评价、反馈、口碑的区域 | 增强品牌/产品的信任感，通常放在功能区后、转化区前，适合企业站/电商站 |
Case区（案例展示区） | 展示品牌/产品的成功案例、项目成果的区域 | 企业站/服务商核心区块，用图文/视频展示案例，证明产品/服务的实际效果 |
FAQ区（常见问题区） | 解答用户核心疑问、痛点的区域 | 放在转化区前、footer前，减少用户咨询成本，提升转化效率，适用于所有类型网站 |
About区（关于我们区） | 展示企业/品牌的简介、发展历程、核心价值观的区域 | 企业站核心区块，提升品牌认知度和可信度，通常放在主内容区中后段 |
Team区（团队展示区） | About区的子区块，展示核心团队成员、资质、履历 | 突出品牌的专业度，适合企业站、创业项目站，增强用户信任感 |
SPU区（商品列表区） | 电商站专属，展示同系列/同分类商品的核心信息列表 | 电商首页/分类页核心区块，展示商品主图、价格、标题，支持筛选/排序/分页 |
SKU区（商品规格区） | 电商站专属，商品详情页的核心区域 | 展示商品的具体规格（颜色、尺码、型号）、库存、价格，支持规格选择、加入购物车 |
Hot Sale区（热销商品区） | 电商站专属，展示爆款、热销、人气商品的区域 | 放在首页/分类页，利用从众心理提升销量，是电商站的核心流量转化区 |
Recommend区（推荐商品区） | 电商站专属，基于用户行为的个性化商品推荐区 | 展示“猜你喜欢”“为你推荐”“看过再看”，提升商品曝光和客单价，适配电商所有页面 |
Flash Sale区（秒杀区） | 电商站专属，展示限时、限量优惠商品的区域 | 配合倒计时、库存提醒，营造紧迫感，提升活动参与度和销量，适合电商大促 |
Coupon区（优惠券区） | 电商站专属，展示满减/立减/折扣优惠券的区域 | 支持优惠券领取/使用，提升客单价和下单率，适配电商首页/商品页/个人中心 |
Cart区（购物车区） | 电商站专属，存放用户已选商品的区域 | 展示商品数量、单价、总价，支持增删改、规格修改、结算，是电商交易的核心环节 |
Checkout区（结算区） | 电商站专属，购物车后的订单确认/支付区域 | 包含收货地址、支付方式、订单明细、金额结算，完成电商交易的最后一步 |
Sidebar（侧边栏） | 主内容两侧的辅助区域，分左侧/右侧侧边栏 | 展示分类、筛选、相关推荐、广告，适配PC端，提升内容曝光和导航效率 |
Breadcrumb（面包屑区） | 展示用户当前页面在网站中的位置层级的区域 | 放在页面顶部/导航下，支持返回上级页面，提升网站导航体验，适合层级复杂的网站 |
Pagination（分页区） | 展示列表页码的区域，通常为通栏设计 | 放在列表页底部（商品/新闻/评论），支持翻页，适配大量内容的列表展示 |
Search区（搜索区） | 包含搜索框/搜索按钮的区域，核心检索功能 | 放在header/nav内，支持用户检索内容，是电商/资讯/工具站的必备区块 |
Popup（弹窗区） | 悬浮在页面上方的独立区域，遮罩层覆盖主内容 | 展示登录/注册、优惠券、隐私政策、活动提醒，支持关闭，不影响主内容结构 |
Sticky Nav（粘性导航区） | 随页面滚动固定在顶部/底部的导航区域 | 让导航始终保持可见，提升用户操作体验，适配所有类型网站的PC/移动端 |
Footer Nav（底部导航区） | 嵌套在footer内的轻量化导航区域 | 展示次要链接（关于我们、联系方式、隐私政策），补充主导航，适配所有类型网站 |
Mobile Nav（移动端导航区） | 移动端专属导航，多为汉堡菜单形式 | 适配移动端小屏幕，点击展开/收起，展示核心导航链接，提升移动端操作体验 |
HTML编程 课程一、HTML 基础入门