26. 实战个人简历页面经过前面 25 篇的学习你已经掌握了 HTML 的核心标签和语法。本篇是一堂综合实战课——我们将用纯 HTML配合少量内联 CSS从零搭建一份完整的个人简历页面。这份简历可以直接在浏览器中打开也可以作为求职时的在线简历模板。学习目标学会规划简历页面的整体结构个人信息区、教育经历、工作经历、技能列表、联系方式掌握 h1-h3 标题层级在简历中的合理运用熟练使用img标签插入头像和照片熟练使用a标签创建邮箱、电话和社交链接熟练使用ul/ol列表展示技能和项目经验理解并运用语义化容器标签header/main/section/footer/article/aside学会用time标签语义化标记时间学会用figure/figcaption组合展示图文内容学会用hr分隔线划分内容区块了解如何用少量内联 CSS 让简历看起来整洁专业核心知识一、简历页面的结构规划在动手写代码之前先想清楚简历要包含哪些内容、如何组织。一份典型的技术简历通常包含以下区块个人简历页面 ├── header头部 │ ├── 头像照片 │ ├── 姓名h1 │ ├── 职位/头衔 │ └── 联系方式邮箱、电话、社交链接 ├── main主体 │ ├── section个人简介 │ ├── section工作经历 │ ├── section教育经历 │ ├── section项目经验 │ ├── section专业技能 │ └── section获奖与证书 ├── aside侧边提示 └── footer页脚 └── 版权信息、更新时间为什么要这样规划清晰的结构不仅让你写代码时有条不紊更重要的是——搜索引擎和屏幕阅读器能更好地理解你的页面内容。这就是语义化的价值。二、语义化容器标签的运用HTML5 引入了一系列语义化标签让页面结构更加清晰。在简历页面中我们主要用到以下标签标签含义在简历中的用途header头部包裹姓名、头像、联系方式main主要内容包裹简历的核心内容区块section区块划分工作经历、教育经历等独立板块article独立文章每一段工作经历、每个项目经验aside侧边内容提示信息、补充说明footer页脚版权信息、最后更新时间代码示例语义化骨架!-- 页面主容器 --divclasscontainer!-- header个人信息头部 --header!-- 头像 姓名 联系方式 --/header!-- main简历主体内容 --mainsectionh2个人简介/h2p...简介内容.../p/sectionsectionh2工作经历/h2!-- 每段工作经历用一个 article --article...字节跳动.../articlearticle...美团.../article/section/mainasidep温馨提示.../p/asidefooterpcopy;2024 李明/p/footer/div逐行讲解div classcontainer用一个 div 包裹整个简历内容方便通过 CSS 控制整体宽度和居中。class是 CSS 选择器的钩子。header不是只能用在页面顶部——任何区块的头部都可以用。这里代表整个简历的头部。main一个页面只能有一个main它标记了文档的主要内容。搜索引擎会重点抓取这里的内容。section表示文档中的一个独立区块通常包含一个标题h2-h6。article表示独立的、可以独立分发或复用的内容。每段工作经历都可以看作一篇小文章。aside表示与主要内容间接相关的内容比如提示框、广告、侧边栏。footer表示页面或区块的底部信息。三、标题层级的合理运用简历中的标题层级应该清晰、有逻辑这不仅影响视觉效果也影响搜索引擎和屏幕阅读器的解析。!-- 页面级标题只有一个 h1 --h1李明/h1!-- 区块级标题每个 section 一个 h2 --sectionh2工作经历/h2article!-- 文章内子标题h3 --h3高级前端开发工程师 - 字节跳动/h3/article/section标题层级规则一个页面只有一个h1通常是姓名或简历标题h2用于主要区块工作经历、教育经历、项目经验等h3用于区块内的子项具体的公司名称职位不要跳级不要从 h1 直接跳到 h3中间要有 h2四、头像与图片figure figcaption简历通常需要一张个人照片。我们使用figure和figcaption来语义化地包裹图片。!-- figure独立的图文单元 --figure!-- img插入图片 --imgsrchttps://via.placeholder.com/120/3498db/ffffff?text头像alt李明的个人头像width120height120!-- figcaption图片的标题或说明 --figcaption个人证件照/figcaption/figure属性详解属性作用示例src图片路径URL 或本地路径srcphoto.jpgalt图片无法加载时的替代文本屏幕阅读器朗读的内容alt李明的个人头像width图片显示宽度像素width120height图片显示高度像素height120重要提示alt属性必须写而且要描述清楚图片内容。这不仅是为了 SEO更是为了让视障用户通过屏幕阅读器了解图片信息。五、联系方式链接mailto 和 tel简历中的联系方式不应该只是纯文本而应该做成可点击的链接方便 HR 一键联系你。!-- 邮箱链接点击后打开系统默认邮件客户端 --ahrefmailto:limingexample.comlimingexample.com/a!-- 电话链接在手机上点击直接拨号 --ahreftel:8613800138000138-0013-8000/a!-- 外部链接target_blank 在新标签页打开 --ahrefhttps://github.com/liming-devtarget_blankrelnoopener noreferrerGitHub主页/a链接协议速查协议写法效果邮件mailto:邮箱地址打开邮件客户端电话tel:86手机号手机端直接拨号网页https://网址打开网页下载https://网址/简历.pdf下载文件target_blank和relnoopener noreferrer的作用target_blank在新标签页打开链接避免用户离开你的简历页面relnoopener noreferrer安全最佳实践防止新页面通过window.opener操纵原页面六、列表的灵活运用简历中大量用到列表技能列表、工作职责、项目要点等。HTML 提供了三种列表1. 无序列表ul—— 技能、职责ulli负责公司核心产品的前端架构设计/lili主导前端性能优化项目/lili搭建前端组件库封装 60 通用组件/li/ul2. 有序列表ol—— 排名、步骤olli专业排名前 10%/lili获得校级优秀毕业生称号/lili担任计算机学院学生会技术部部长/li/ol3. 定义列表dl—— 技能分类dldtstrong前端基础/strong/dtddHTML5, CSS3, JavaScript, TypeScript/dddtstrong框架与库/strong/dtddVue.js, React, Element UI/dd/dl列表类型标签适用场景无序列表ul li技能列表、工作职责、项目要点有序列表ol li排名、成绩、步骤说明定义列表dl dt dd术语解释、技能分类七、time 标签语义化时间简历中充斥着各种日期入职时间、毕业时间、项目周期。用time标签包裹这些日期可以让机器搜索引擎、日历应用更好地理解。!-- datetime 属性使用 ISO 8601 格式YYYY-MM-DD 或 YYYY-MM --ptimedatetime2021-032021年3月/time- 至今/pptimedatetime2018-072018年7月/time-timedatetime2021-022021年2月/time/pdatetime属性格式规范精度格式示例年月日YYYY-MM-DD2024-06-01年月YYYY-MM2024-06年份YYYY2024完整时间YYYY-MM-DDTHH:MM:SS2024-06-01T09:30:00八、hr 分隔线hrHorizontal Rule用于在内容区块之间创建视觉分隔。sectionh2工作经历/h2!-- 工作经历内容 --/section!-- 分隔线 --hrsectionh2教育经历/h2!-- 教育经历内容 --/section在 CSS 中可以对hr进行美化比如改变颜色、粗细、甚至用渐变背景替代默认样式。九、少量内联 CSS 让简历变美观读者还没有系统学习 CSS但一份裸奔的 HTML 简历看起来太简陋了。我们用少量内联样式让简历整洁专业。样式代码放在head中的style标签里headstyle/* 页面整体设置 */body{font-family:PingFang SC,Microsoft YaHei,sans-serif;background-color:#f5f5f5;/* 浅灰背景 */color:#333;/* 深灰文字 */line-height:1.6;/* 舒适行高 */margin:0;padding:0;}/* 内容区容器白色卡片效果 */.container{max-width:800px;/* 最大宽度 */margin:40px auto;/* 上下40px左右居中 */background-color:#fff;/* 白色背景 */padding:50px;/* 内边距 */border-radius:8px;/* 圆角 */box-shadow:0 2px 10pxrgba(0,0,0,0.1);/* 阴影 */}/* 标题样式 */h2{color:#2c3e50;border-bottom:2px solid #3498db;/* 底部蓝色边框 */padding-bottom:8px;font-size:20px;}/* 链接样式 */a{color:#3498db;text-decoration:none;/* 去除下划线 */}a:hover{text-decoration:underline;/* 悬停时显示下划线 */}/style/head关键 CSS 概念速览属性作用示例font-family字体PingFang SC, Microsoft YaHei, sans-serifbackground-color背景色#f5f5f5color文字颜色#333max-width最大宽度800pxmargin外边距40px auto上下40左右自动居中padding内边距50pxborder-radius圆角8pxbox-shadow阴影0 2px 10px rgba(0,0,0,0.1)text-decoration文本装饰none/underline十、完整简历代码结构回顾把以上所有知识点组合起来一份完整简历的 HTML 结构如下!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title李明 - 前端开发工程师简历/titlestyle/* CSS 样式代码 *//style/headbodydivclasscontainerheaderfigureimgsrc...alt头像width120height120figcaption个人证件照/figcaption/figureh1李明/h1p前端开发工程师 | 5年经验/pdivahrefmailto:...邮箱/aahreftel:...电话/aahrefhttps://...target_blankGitHub/a/div/headermainsectionh2个人简介/h2.../sectionhrsectionh2工作经历/h2articleh3高级前端开发 - 字节跳动/h3timedatetime2021-032021年3月/timeulli.../li/ul/article/sectionhrsectionh2教育经历/h2.../sectionhrsectionh2项目经验/h2.../sectionhrsectionh2专业技能/h2.../sectionasidep温馨提示.../p/aside/mainfooterpcopy;2024 李明. 保留所有权利。/p/footer/div/body/html动手练习练习 1替换个人信息入门级打开配套代码resume.html将以下信息替换为你自己的真实信息姓名h1标签内职位和年限job-title类所在的p标签邮箱地址mailto:链接电话号码tel:链接社交链接GitHub、博客等提示mailto:和tel:后面的内容要替换成你自己的链接文字也要同步修改。练习 2添加一段实习经历进阶级在工作经历 section 中新增一个article填写你的一段实习或兼职经历。要求使用h3作为职位和公司名使用time标签标记起止时间使用ul li列出 2-3 条工作职责确保时间线按倒序排列最新的经历在最前面参考结构articleh3前端实习生 - XX公司/h3ptimedatetime2023-072023年7月/time-timedatetime2023-092023年9月/time/pulli职责1.../lili职责2.../li/ul/article练习 3添加一个项目经验挑战级在项目经验 section 中新增一个带有project-card类的article描述你做过的一个项目。要求项目名用h3项目周期用time标签项目简介用p标签技术栈和职责用ul li尝试将项目中的某个关键词做成链接比如链接到 GitHub 仓库或在线演示地址常见误区误区真相用div包裹所有内容不用语义化标签语义化标签header/main/section等让页面结构清晰有利于 SEO 和无障碍访问页面放多个h1标签一个页面应该只有一个h1通常是姓名或页面主标题img标签不写alt属性alt是必须的它描述图片内容供屏幕阅读器朗读和 SEO 抓取联系方式只写纯文本不做成链接邮箱用mailto:、电话用tel:做成链接方便 HR 一键联系工作经历按正序排列最早的在前简历应该按倒序排列最新的经历放在最前面所有链接都用target_blank只有指向外部网站的链接才需要新标签页打开页面内锚点链接不需要用br标签做列表或段落分隔列表用ul/ol段落分隔用p或hrbr只用于同一段内的换行内联样式写得过多过复杂内联样式只用于简单修饰复杂样式应放在独立的.css文件中速查卡片简历页面结构速查div classcontainer header 头像 姓名 联系方式 /header main section 个人简介 /section hr section 工作经历 (article x n) /section hr section 教育经历 /section hr section 项目经验 (article x n) /section hr section 专业技能 /section /main aside 提示/补充信息 /aside footer 版权信息 /footer /div链接协议速查类型代码示例用户点击后邮件a hrefmailto:xxxexample.com打开邮件客户端电话a hreftel:86138xxxx手机端直接拨号网页a hrefhttps://...打开网页下载a hrefresume.pdf download下载文件语义化标签速查标签用途出现次数header页面/区块头部1次页面级main主要内容区1次section内容区块多次article独立内容单元多次aside侧边/辅助内容0-1次footer页面/区块底部1次figure图文组合0-多次figcaption图片标题配合 figuretime时间标记多次hr水平分隔线多次扩展阅读MDN - HTML 语义化MDN -header元素MDN -main元素MDN -section元素MDN -article元素MDN -time元素MDN -figure和figcaptionMDN - 超链接详解
26. 实战：个人简历页面
发布时间：2026/6/11 5:14:56
26. 实战个人简历页面经过前面 25 篇的学习你已经掌握了 HTML 的核心标签和语法。本篇是一堂综合实战课——我们将用纯 HTML配合少量内联 CSS从零搭建一份完整的个人简历页面。这份简历可以直接在浏览器中打开也可以作为求职时的在线简历模板。学习目标学会规划简历页面的整体结构个人信息区、教育经历、工作经历、技能列表、联系方式掌握 h1-h3 标题层级在简历中的合理运用熟练使用img标签插入头像和照片熟练使用a标签创建邮箱、电话和社交链接熟练使用ul/ol列表展示技能和项目经验理解并运用语义化容器标签header/main/section/footer/article/aside学会用time标签语义化标记时间学会用figure/figcaption组合展示图文内容学会用hr分隔线划分内容区块了解如何用少量内联 CSS 让简历看起来整洁专业核心知识一、简历页面的结构规划在动手写代码之前先想清楚简历要包含哪些内容、如何组织。一份典型的技术简历通常包含以下区块个人简历页面 ├── header头部 │ ├── 头像照片 │ ├── 姓名h1 │ ├── 职位/头衔 │ └── 联系方式邮箱、电话、社交链接 ├── main主体 │ ├── section个人简介 │ ├── section工作经历 │ ├── section教育经历 │ ├── section项目经验 │ ├── section专业技能 │ └── section获奖与证书 ├── aside侧边提示 └── footer页脚 └── 版权信息、更新时间为什么要这样规划清晰的结构不仅让你写代码时有条不紊更重要的是——搜索引擎和屏幕阅读器能更好地理解你的页面内容。这就是语义化的价值。二、语义化容器标签的运用HTML5 引入了一系列语义化标签让页面结构更加清晰。在简历页面中我们主要用到以下标签标签含义在简历中的用途header头部包裹姓名、头像、联系方式main主要内容包裹简历的核心内容区块section区块划分工作经历、教育经历等独立板块article独立文章每一段工作经历、每个项目经验aside侧边内容提示信息、补充说明footer页脚版权信息、最后更新时间代码示例语义化骨架!-- 页面主容器 --divclasscontainer!-- header个人信息头部 --header!-- 头像 姓名 联系方式 --/header!-- main简历主体内容 --mainsectionh2个人简介/h2p...简介内容.../p/sectionsectionh2工作经历/h2!-- 每段工作经历用一个 article --article...字节跳动.../articlearticle...美团.../article/section/mainasidep温馨提示.../p/asidefooterpcopy;2024 李明/p/footer/div逐行讲解div classcontainer用一个 div 包裹整个简历内容方便通过 CSS 控制整体宽度和居中。class是 CSS 选择器的钩子。header不是只能用在页面顶部——任何区块的头部都可以用。这里代表整个简历的头部。main一个页面只能有一个main它标记了文档的主要内容。搜索引擎会重点抓取这里的内容。section表示文档中的一个独立区块通常包含一个标题h2-h6。article表示独立的、可以独立分发或复用的内容。每段工作经历都可以看作一篇小文章。aside表示与主要内容间接相关的内容比如提示框、广告、侧边栏。footer表示页面或区块的底部信息。三、标题层级的合理运用简历中的标题层级应该清晰、有逻辑这不仅影响视觉效果也影响搜索引擎和屏幕阅读器的解析。!-- 页面级标题只有一个 h1 --h1李明/h1!-- 区块级标题每个 section 一个 h2 --sectionh2工作经历/h2article!-- 文章内子标题h3 --h3高级前端开发工程师 - 字节跳动/h3/article/section标题层级规则一个页面只有一个h1通常是姓名或简历标题h2用于主要区块工作经历、教育经历、项目经验等h3用于区块内的子项具体的公司名称职位不要跳级不要从 h1 直接跳到 h3中间要有 h2四、头像与图片figure figcaption简历通常需要一张个人照片。我们使用figure和figcaption来语义化地包裹图片。!-- figure独立的图文单元 --figure!-- img插入图片 --imgsrchttps://via.placeholder.com/120/3498db/ffffff?text头像alt李明的个人头像width120height120!-- figcaption图片的标题或说明 --figcaption个人证件照/figcaption/figure属性详解属性作用示例src图片路径URL 或本地路径srcphoto.jpgalt图片无法加载时的替代文本屏幕阅读器朗读的内容alt李明的个人头像width图片显示宽度像素width120height图片显示高度像素height120重要提示alt属性必须写而且要描述清楚图片内容。这不仅是为了 SEO更是为了让视障用户通过屏幕阅读器了解图片信息。五、联系方式链接mailto 和 tel简历中的联系方式不应该只是纯文本而应该做成可点击的链接方便 HR 一键联系你。!-- 邮箱链接点击后打开系统默认邮件客户端 --ahrefmailto:limingexample.comlimingexample.com/a!-- 电话链接在手机上点击直接拨号 --ahreftel:8613800138000138-0013-8000/a!-- 外部链接target_blank 在新标签页打开 --ahrefhttps://github.com/liming-devtarget_blankrelnoopener noreferrerGitHub主页/a链接协议速查协议写法效果邮件mailto:邮箱地址打开邮件客户端电话tel:86手机号手机端直接拨号网页https://网址打开网页下载https://网址/简历.pdf下载文件target_blank和relnoopener noreferrer的作用target_blank在新标签页打开链接避免用户离开你的简历页面relnoopener noreferrer安全最佳实践防止新页面通过window.opener操纵原页面六、列表的灵活运用简历中大量用到列表技能列表、工作职责、项目要点等。HTML 提供了三种列表1. 无序列表ul—— 技能、职责ulli负责公司核心产品的前端架构设计/lili主导前端性能优化项目/lili搭建前端组件库封装 60 通用组件/li/ul2. 有序列表ol—— 排名、步骤olli专业排名前 10%/lili获得校级优秀毕业生称号/lili担任计算机学院学生会技术部部长/li/ol3. 定义列表dl—— 技能分类dldtstrong前端基础/strong/dtddHTML5, CSS3, JavaScript, TypeScript/dddtstrong框架与库/strong/dtddVue.js, React, Element UI/dd/dl列表类型标签适用场景无序列表ul li技能列表、工作职责、项目要点有序列表ol li排名、成绩、步骤说明定义列表dl dt dd术语解释、技能分类七、time 标签语义化时间简历中充斥着各种日期入职时间、毕业时间、项目周期。用time标签包裹这些日期可以让机器搜索引擎、日历应用更好地理解。!-- datetime 属性使用 ISO 8601 格式YYYY-MM-DD 或 YYYY-MM --ptimedatetime2021-032021年3月/time- 至今/pptimedatetime2018-072018年7月/time-timedatetime2021-022021年2月/time/pdatetime属性格式规范精度格式示例年月日YYYY-MM-DD2024-06-01年月YYYY-MM2024-06年份YYYY2024完整时间YYYY-MM-DDTHH:MM:SS2024-06-01T09:30:00八、hr 分隔线hrHorizontal Rule用于在内容区块之间创建视觉分隔。sectionh2工作经历/h2!-- 工作经历内容 --/section!-- 分隔线 --hrsectionh2教育经历/h2!-- 教育经历内容 --/section在 CSS 中可以对hr进行美化比如改变颜色、粗细、甚至用渐变背景替代默认样式。九、少量内联 CSS 让简历变美观读者还没有系统学习 CSS但一份裸奔的 HTML 简历看起来太简陋了。我们用少量内联样式让简历整洁专业。样式代码放在head中的style标签里headstyle/* 页面整体设置 */body{font-family:PingFang SC,Microsoft YaHei,sans-serif;background-color:#f5f5f5;/* 浅灰背景 */color:#333;/* 深灰文字 */line-height:1.6;/* 舒适行高 */margin:0;padding:0;}/* 内容区容器白色卡片效果 */.container{max-width:800px;/* 最大宽度 */margin:40px auto;/* 上下40px左右居中 */background-color:#fff;/* 白色背景 */padding:50px;/* 内边距 */border-radius:8px;/* 圆角 */box-shadow:0 2px 10pxrgba(0,0,0,0.1);/* 阴影 */}/* 标题样式 */h2{color:#2c3e50;border-bottom:2px solid #3498db;/* 底部蓝色边框 */padding-bottom:8px;font-size:20px;}/* 链接样式 */a{color:#3498db;text-decoration:none;/* 去除下划线 */}a:hover{text-decoration:underline;/* 悬停时显示下划线 */}/style/head关键 CSS 概念速览属性作用示例font-family字体PingFang SC, Microsoft YaHei, sans-serifbackground-color背景色#f5f5f5color文字颜色#333max-width最大宽度800pxmargin外边距40px auto上下40左右自动居中padding内边距50pxborder-radius圆角8pxbox-shadow阴影0 2px 10px rgba(0,0,0,0.1)text-decoration文本装饰none/underline十、完整简历代码结构回顾把以上所有知识点组合起来一份完整简历的 HTML 结构如下!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title李明 - 前端开发工程师简历/titlestyle/* CSS 样式代码 *//style/headbodydivclasscontainerheaderfigureimgsrc...alt头像width120height120figcaption个人证件照/figcaption/figureh1李明/h1p前端开发工程师 | 5年经验/pdivahrefmailto:...邮箱/aahreftel:...电话/aahrefhttps://...target_blankGitHub/a/div/headermainsectionh2个人简介/h2.../sectionhrsectionh2工作经历/h2articleh3高级前端开发 - 字节跳动/h3timedatetime2021-032021年3月/timeulli.../li/ul/article/sectionhrsectionh2教育经历/h2.../sectionhrsectionh2项目经验/h2.../sectionhrsectionh2专业技能/h2.../sectionasidep温馨提示.../p/aside/mainfooterpcopy;2024 李明. 保留所有权利。/p/footer/div/body/html动手练习练习 1替换个人信息入门级打开配套代码resume.html将以下信息替换为你自己的真实信息姓名h1标签内职位和年限job-title类所在的p标签邮箱地址mailto:链接电话号码tel:链接社交链接GitHub、博客等提示mailto:和tel:后面的内容要替换成你自己的链接文字也要同步修改。练习 2添加一段实习经历进阶级在工作经历 section 中新增一个article填写你的一段实习或兼职经历。要求使用h3作为职位和公司名使用time标签标记起止时间使用ul li列出 2-3 条工作职责确保时间线按倒序排列最新的经历在最前面参考结构articleh3前端实习生 - XX公司/h3ptimedatetime2023-072023年7月/time-timedatetime2023-092023年9月/time/pulli职责1.../lili职责2.../li/ul/article练习 3添加一个项目经验挑战级在项目经验 section 中新增一个带有project-card类的article描述你做过的一个项目。要求项目名用h3项目周期用time标签项目简介用p标签技术栈和职责用ul li尝试将项目中的某个关键词做成链接比如链接到 GitHub 仓库或在线演示地址常见误区误区真相用div包裹所有内容不用语义化标签语义化标签header/main/section等让页面结构清晰有利于 SEO 和无障碍访问页面放多个h1标签一个页面应该只有一个h1通常是姓名或页面主标题img标签不写alt属性alt是必须的它描述图片内容供屏幕阅读器朗读和 SEO 抓取联系方式只写纯文本不做成链接邮箱用mailto:、电话用tel:做成链接方便 HR 一键联系工作经历按正序排列最早的在前简历应该按倒序排列最新的经历放在最前面所有链接都用target_blank只有指向外部网站的链接才需要新标签页打开页面内锚点链接不需要用br标签做列表或段落分隔列表用ul/ol段落分隔用p或hrbr只用于同一段内的换行内联样式写得过多过复杂内联样式只用于简单修饰复杂样式应放在独立的.css文件中速查卡片简历页面结构速查div classcontainer header 头像 姓名 联系方式 /header main section 个人简介 /section hr section 工作经历 (article x n) /section hr section 教育经历 /section hr section 项目经验 (article x n) /section hr section 专业技能 /section /main aside 提示/补充信息 /aside footer 版权信息 /footer /div链接协议速查类型代码示例用户点击后邮件a hrefmailto:xxxexample.com打开邮件客户端电话a hreftel:86138xxxx手机端直接拨号网页a hrefhttps://...打开网页下载a hrefresume.pdf download下载文件语义化标签速查标签用途出现次数header页面/区块头部1次页面级main主要内容区1次section内容区块多次article独立内容单元多次aside侧边/辅助内容0-1次footer页面/区块底部1次figure图文组合0-多次figcaption图片标题配合 figuretime时间标记多次hr水平分隔线多次扩展阅读MDN - HTML 语义化MDN -header元素MDN -main元素MDN -section元素MDN -article元素MDN -time元素MDN -figure和figcaptionMDN - 超链接详解
