HTML 5布局

HTML5 布局学习笔记HTML5 引入了多个语义化标签使网页结构更清晰、更易读同时提升了 SEO 和可访问性。以下是 HTML5 布局的核心知识点一、核心语义化标签1.header- 页眉headerh1网站标题/h1nav导航菜单/nav/header用于页面或区块的头部可包含标题、导航、Logo 等2.nav- 导航navulliahref#home首页/a/liliahref#about关于/a/li/ul/nav专门用于主要导航链接不是所有链接都需要放在nav中3.main- 主要内容mainarticle文章主体内容/article/main页面唯一的主要内容区域不应包含在header、footer、aside中4.article- 独立文章articleh2文章标题/h2p文章内容.../p/article独立可分发的内容博客文章、新闻等可嵌套使用5.section- 章节sectionh3章节标题/h3p章节内容/p/section文档中的主题分组通常包含标题6.aside- 侧边栏asideh4相关文章/h4ul.../ul/aside与主内容间接相关的内容侧边栏、广告、引用等7.footer- 页脚footerp© 2024 公司名称/pahref#contact联系我们/a/footer页面或区块的底部包含版权、联系方式等二、完整布局示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleHTML5 布局示例/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Arial,sans-serif;}header, footer{background:#333;color:white;padding:1rem;}nav ul{list-style:none;display:flex;gap:1rem;}nav a{color:white;text-decoration:none;}.container{display:flex;max-width:1200px;margin:0 auto;}main{flex:3;padding:2rem;}aside{flex:1;padding:1rem;background:#f4f4f4;}article{margin-bottom:2rem;}section{margin:2rem 0;}/style/headbodyheaderh1我的网站/h1navulliahref#home首页/a/liliahref#articles文章/a/liliahref#about关于/a/li/ul/nav/headerdivclasscontainermainarticleh2HTML5 新特性/h2pHTML5 引入了多个语义化标签.../p/articlesectionh3布局技巧/h3p使用 Flexbox 和 Grid 实现响应式布局.../p/section/mainasideh4热门文章/h4ulliahref#文章 1/a/liliahref#文章 2/a/li/ul/aside/divfooterp© 2024 版权所有/p/footer/body/html三、最佳实践语义优先选择最合适的标签表达内容含义层级清晰合理使用section和article组织内容唯一性main标签在页面中只出现一次可访问性语义化标签提升屏幕阅读器体验SEO 优化搜索引擎更理解语义化结构四、与传统布局对比传统方式HTML5 方式优势div idheaderheader语义明确div classnavnav结构清晰div idcontentmain内容突出div classsidebaraside关系明确div idfooterfooter含义清晰五、注意事项不要过度使用section内容分组要有明确主题article和section的区别前者独立可分发后者是主题分组移动端优先配合响应式设计使用渐进增强考虑旧浏览器兼容性可添加 polyfill掌握这些语义化标签能让你的代码更专业、更易维护同时提升用户体验和搜索引擎排名