探索肌肤之美：从自然裸想到艺术呈现

整合所有HTML核心元素、网页开发高频布局区块含英雄区相关按HTML语义化元素和网页布局区块术语分类成两个表格包含名称、解释、用途三列定义精准且贴合实际开发场景可直接对照代码参考使用文末用图形化直观表示各名称的位置方便理解。

表格使用说明两个表格分别对应HTML基础语义化元素和网页布局区块术语所有概念的解释聚焦核心定义用途贴合实际开发场景覆盖PC/移动端、企业站/电商站布局区块术语以英雄区Hero Section为核心包含其上下游关联区块是前端开发高频使用的标准化术语可直接作为开发参考手册。

HTML5核心语义化元素表名称解释用途html整个HTML文档的根元素包裹所有页面内容作为页面最外层容器必须指定lang语言属性包含head和bodyhead页面头部元信息容器无可视内容存放页面标题、编码、CSS样式、JS脚本、SEO、视口设置等元数据body页面可视内容的根容器包裹所有用户能看到的元素文字、图片、按钮、布局区块等title页面标题标签属于head子元素定义浏览器标签栏/书签显示的标题是SEO核心元素描述页面核心内容meta页面元数据标签无闭合标签指定页面编码UTF-

SEO描述/关键词、移动端视口适配等link外部资源链接标签无闭合标签引入CSS样式表、设置网站favicon图标、预加载资源等scriptJS代码容器/外部JS引入标签编写或引入JavaScript代码实现页面交互、动态效果等header页面/任意模块的头部容器存放页面/模块的logo、标题、导航栏等页面顶部或模块顶部均可使用nav网站专属导航区域存放页面主要跳转链接首页、关于我们等一个页面可设置多个navmain页面唯一的核心内容区域包裹页面核心业务内容排除头部、底部、侧边栏等次要内容一个页面仅一个section有明确主题的独立章节/区块划分页面内容模块如产品介绍、新闻列表需配合标题标签h1-h6使用article独立的、可单独分发的内容容器存放文章、新闻、评论、商品卡片等脱离页面仍有完整语义和使用价值aside页面侧边栏/辅助内容区域存放与主内容相关的次要信息如相关推荐、布局术语、筛选栏、广告footer页面/任意模块的底部容器存放版权信息、备案号、联系方式、底部导航等页面底部或模块底部均可使用div无明确语义的通用块级容器用于无专属语义的布局包裹配合CSS实现任意布局效果HTML5前主流布局标签h1~h6标题层级标签h1最高h6最低定义页面/模块的语义化标题帮助搜索引擎/浏览器识别内容结构一个页面仅一个h1p段落文本容器包裹一段完整的文字内容自动区分段落并生成上下留白最常用的文本标签span无明确语义的通用行内容器包裹行内文本的一部分单独设置样式颜色、字体等不独占一行不影响布局br强制换行标签无闭合标签用于文本的自然换行如诗歌、地址不可用于布局留白布局用CSShr水平分隔线标签无闭合标签表示内容主题的切换语义化标签非单纯样式样式可通过CSS修改ul无序列表容器存放无先后顺序的列表项默认带项目符号配合li使用如导航、商品列表ol有序列表容器存放有先后顺序的列表项默认带数字编号配合li使用如步骤、排名、教程li列表项标签ul/ol的唯一子元素包裹列表的单个内容可嵌套任意HTML元素div、a、img等dl定义列表容器专用于“术语-解释”场景配合dt术语和dd解释使用用于展示词汇、概念、术语等的定义说明dt定义列表的术语/标题标签表示定义列表中的待解释术语一个dl可包含多个dt一个dt可对应多个dddd定义列表的解释/描述标签解释对应dt的内容默认左侧缩进与dt一一对应或一多对应a超链接标签核心交互元素实现页面跳转、锚点链接、文件下载行内元素可通过CSS改为块级img图片标签无闭合标签行内块元素展示图片必须设置src图片地址和alt替代文本无障碍/图片加载失败用video视频播放容器播放MP4/WEBM等格式视频支持controls控制栏、autoplay自动播放等属性audio音频播放容器播放MP3/WAV等格式音频用法同video仅显示音频控制栏无视觉播放区域button按钮交互元素实现用户点击操作分普通按钮、提交按钮、重置按钮自带原生按钮样式input表单输入框无闭合标签通过type属性实现多种输入功能文本、密码、复选框、文件上传等表单核心元素form表单容器包裹所有表单元素通过action提交地址和methodGET/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 基础入门

嘿呦一二呦-嘿呦一二呦应用