第30篇：实战：完整单页网站

第30篇实战完整单页网站这是 HTML 核心标签学习的终极实战本篇将综合运用前面所学的所有知识从零搭建一个完整的企业介绍单页网站。当你完成这个项目意味着你已经掌握了 HTML 的核心技能。学习目标能综合运用所有 HTML 标签搭建完整网站能理解单页网站SPA 静态版的结构设计能实现锚点导航让页面内跳转顺畅能编写语义化、可访问性良好的完整页面具备独立搭建静态网站的能力核心知识点一、单页网站的结构设计单页网站Single Page Website将所有内容放在一个 HTML 文件中通过锚点导航跳转到不同区域单页网站结构 ├── header — 固定导航栏 │ └── nav — 锚点导航链接 ├── main │ ├── #home — 首页 Banner 区 │ ├── #about — 关于我们 │ ├── #services — 服务/产品 │ ├── #team — 团队介绍 │ └── #contact — 联系方式 表单 └── footer — 页脚二、锚点导航锚点导航让用户点击导航链接后页面平滑滚动到对应区域!-- 导航链接 --navulliahref#home首页/a/liliahref#about关于我们/a/liliahref#services服务项目/a/liliahref#team团队介绍/a/liliahref#contact联系我们/a/li/ul/nav!-- 对应区域 --sectionidhome.../sectionsectionidabout.../sectionsectionidservices.../section原理href#about会跳转到页面中idabout的元素位置。三、各区域详解1. 首页 Banner 区Banner 是网站的门面通常包含大标题、副标题和行动号召按钮sectionidhomeclassbannerh1星火科技/h1p用技术点亮未来用创新改变世界/pahref#contactclasscta-button立即咨询/aahref#services了解服务/a/section2. 关于我们sectionidabouth2关于我们/h2articleh3我们的使命/h3p致力于为企业提供最前沿的技术解决方案...内容略/p/articlearticleh3我们的愿景/h3p成为行业领先的数字化服务提供商...内容略/p/article!-- 数据统计 --dldt服务客户/dtdd500/dddt项目交付/dtdd1200/dddt团队规模/dtdd80/dd/dl/section3. 服务/产品展示区sectionidservicesh2服务项目/h2divclassservice-gridarticleclassservice-cardfigureimgsrcicon-web.pngaltwidth60height60/figureh3网站开发/h3p响应式网站设计与开发...描述/pahref#了解详情 →/a/articlearticleclassservice-cardfigureimgsrcicon-app.pngaltwidth60height60/figureh3移动应用/h3piOS 和 Android 原生应用开发...描述/pahref#了解详情 →/a/article!-- 更多服务卡片... --/div/section4. 团队介绍sectionidteamh2核心团队/h2divclassteam-gridarticleclassmemberfigureimgsrcmember1.jpgalt李明 - CEOwidth150height150figcaption李明/figcaption/figureh3李明/h3pstrong创始人 CEO/strong/pp10年互联网行业经验...简介/p/article!-- 更多成员... --/div/section5. 联系方式 表单sectionidcontacth2联系我们/h2divclasscontact-wrapper!-- 联系信息 --addressclasscontact-infoh3联系方式/h3p 北京市海淀区中关村大街1号/ppahreftel:861012345678010-1234-5678/a/pp✉️ahrefmailto:contactxinghuo.comcontactxinghuo.com/a/pp 周一至周五 9:00 - 18:00/p/address!-- 留言表单 --formaction/contactmethodPOSTclasscontact-formh3在线留言/h3divclassform-grouplabelforcontact-name您的姓名 */labelinputtypetextidcontact-namenamenamerequired/divdivclassform-grouplabelforcontact-email电子邮箱 */labelinputtypeemailidcontact-emailnameemailrequired/divdivclassform-grouplabelforcontact-subject咨询主题/labelselectidcontact-subjectnamesubjectoptionvalue请选择.../optionoptionvalueweb网站开发/optionoptionvalueapp移动应用/optionoptionvalueother其他/option/select/divdivclassform-grouplabelforcontact-message留言内容 */labeltextareaidcontact-messagenamemessagerows5required/textarea/divbuttontypesubmit提交留言/button/form/div/section四、标签综合运用对照表本项目中使用到的标签标签在本项目中的用途header固定导航栏nav锚点导航菜单main页面主体内容section各个内容区域首页、关于、服务等article服务卡片、团队成员aside可选侧边提示信息footer页脚版权信息h1网站名称页面唯一h2各区域标题h3卡片标题、子标题p段落文字a导航链接、锚点跳转、外部链接imgLogo、团队头像、服务图标figurefigcaption图片及说明ul/ol/dl导航菜单、列表、定义列表form联系表单input表单输入框label表单标签selectoption下拉选择textarea多行文本输入button提交按钮、CTA按钮address联系信息strong/em强调文字mark高亮关键词blockquote客户评价引用cite引用来源time时间信息hr分隔线br换行动手练习练习 1创建你自己的单页网站基于配套代码创建属于你自己的单页网站替换公司名称、Logo 和标语修改关于我们的内容替换服务项目为你熟悉的领域添加真实的团队成员信息修改联系方式练习 2增加新区域为网站增加以下区域之一客户案例展示 3-4 个客户项目用 article figure价格表用 table 展示不同服务套餐的价格对比常见问题用 details/summary 实现可折叠的 FAQ练习 3代码质量检查用 W3C Validator 验证 HTML 代码检查所有图片是否有 alt 属性检查文档大纲是否合理浏览器插件HTML5 Outliner测试在不同设备上的显示效果常见误区 ⚠️误区真相“单页网站就是只有一个 section”可以有多个 section通过锚点导航“锚点导航需要 JavaScript”纯 HTML 的href#id就能实现“单页网站不需要 footer”需要放版权、备案信息、社交链接“所有内容都用 div 包”要用语义化标签这是本项目的重点“图片装饰性的也要写 alt”装饰性图片 alt“”“form 必须放到单独页面”可以嵌入到单页网站的联系区域“单页网站不利于 SEO”合理使用语义化标签和标题层级可以改善“这个项目后就学完 HTML 了”HTML 基础已掌握但还有表单验证、SEO、性能等进阶内容速查卡片 单页网站结构模板!DOCTYPEhtmlhtmllangzh-CNhead...SEO 元数据.../headbodyheadernav.../nav/headermainsectionidhome.../sectionsectionidabout.../sectionsectionidservices.../sectionsectionidteam.../sectionsectionidcontact.../section/mainfooter.../footer/body/html锚点导航模板!-- 导航 --ahref#section-id链接文字/a!-- 目标区域 --sectionidsection-id.../section学习里程碑检查完成本项目后你应该已经掌握✅ HTML5 文档骨架 ✅ 语义化标签header/nav/main/article/section/aside/footer ✅ 文本标签h1-h6/p/span/strong/em/mark ✅ 链接标签a 的 href/target/rel/mailto/tel/锚点 ✅ 图片标签img 的 src/alt/width/height ✅ 列表标签ul/ol/dl/li/dt/dd ✅ 表格标签table/thead/tbody/tr/th/td/caption ✅ 表单标签form/input/label/select/textarea/button ✅ 表单验证required/pattern/minlength/type ✅ 多媒体标签audio/video/figure/figcaption ✅ 高级语义time/address/blockquote/cite/data ✅ 容器标签div/span 的正确使用场景扩展阅读MDN: HTML 基础MDN: HTML 元素参考W3C HTML 规范英文HTML5 Doctor英文语义化指南Can I Use浏览器兼容性查询W3C Markup Validator代码验证工具恭喜你完成第30篇后你已经掌握了 HTML 的核心技能。接下来可以进入 第31篇AI时代的前端工作流学习如何用 AI 工具辅助 HTML 开发。