AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

HTML5 新增文档结构相关元素示例

2017-11-14 1127
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

 HTML5中多了许多与文档结构相关的元素，以下是示例 (注释都在代码中了）：

HTML5页面：


  
  
    

   
   
  1. <!-- 以下这一行定义了这个html页面是html 5 --> 
    2. 

   
   
  2. <!DOCTYPE html> 
    3. 

   
   
  3.  
    4. 

   
   
  4. <link rel="stylesheet" href="css/common.css" type="text/css"> 
    5. 

   
   
  5. <body> 
    6. 

   
   
  6. <h1>HTML5 文档结构DEMO</h1> 
    7. 

   
   
  7.  
    8. 

   
   
  8. <!-- 这里用nav定义了全局页面导航 --> 
    9. 

   
   
  9. <nav> 
    10. 

   
   
  10.  <ul> 
    11. 

   
   
  11.    <li><a href="/">主页</a></li> 
    12. 

   
   
  12.    <li><a href="/myaccount">我的账号</a></li> 
    13. 

   
   
  13.  </ul> 
    14. 

   
   
  14. </nav> 
    15. 

   
   
  15.  
    16. 

   
   
  16. <!-- article元素代表了文档，页面或者应用程序中独立的完整的并且可以被外部引用的内容 --> 
    17. 

   
   
  17. <article> 
    18. 

   
   
  18.  
    19. 

   
   
  19.    <!-- 这个header元素具有引导和导航作用，网页中可以拥有任意数目的header--> 
    20. 

   
   
  20.     <header> 
    21. 

   
   
  21.      
    22. 

   
   
  22.     <!-- 如果一个区块有多个标题，那么hgroup则可以为这些标题/子标题分组 --> 
    23. 

   
   
  23.     <hgroup> 
    24. 

   
   
  24.     <!-- 一般标题都应该放在header元素中 --> 
    25. 

   
   
  25.     <h3>苹果</h3> 
    26. 

   
   
  26.     <h4>好吃的苹果</h4> 
    27. 

   
   
  27.     </hgroup> 
    28. 

   
   
  28.     <p>发表日期： 
    29. 

   
   
  29.     <time pubdate datetime="2012/5/5">2012/5/5</time> 
    30. 

   
   
  30.     </p> 
    31. 

   
   
  31.      
    32. 

   
   
  32.     <!-- 这里的nav定义了页内导航，它的超链接指向了页面内某块，用id选择器语法标识 --> 
    33. 

   
   
  33.     <nav> 
    34. 

   
   
  34.     <ul> 
    35. 

   
   
  35.    <li><a href="#apple">苹果介绍</a></li> 
    36. 

   
   
  36.  </ul> 
    37. 

   
   
  37.     </nav> 
    38. 

   
   
  38.     </header> 
    39. 

   
   
  39.      
    40. 

   
   
  40.     <!-- 这块是这个article的正文部分 --> 
    41. 

   
   
  41.     <p> 
    42. 

   
   
  42.     <b>苹果</b>，苹果1，苹果2，苹果3，苹果4 
    43. 

   
   
  43.     </p> 
    44. 

   
   
  44.  
    45. 

   
   
  45.      
    46. 

   
   
  46.     <!-- 这里的section元素表明对页面的内容进行分块，它不是article(强调独立)，它只是article的内容块（强调分块），它也有标题和内容 --> 
    47. 

   
   
  47.     <!-- section元素可以加id,这样可以被引用，比如超链接的指向 --> 
    48. 

   
   
  48.     <section id="apple"> 
    49. 

   
   
  49.     <!-- section也有标题而且推荐使用标题 --> 
    50. 

   
   
  50.      <h3>评论</h3>      
    51. 

   
   
  51.      <!-- 这里演示了article的嵌套 ，所以下面部分的article表示局部内容，而不是整体内容，它作为section的内容部分--> 
    52. 

   
   
  52.      <article> 
    53. 

   
   
  53.         <header> 
    54. 

   
   
  54.          <h4>发布者：charles.wang</h4> 
    55. 

   
   
  55.          <p> 
    56. 

   
   
  56.          <!-- time元素是HTML5中新增的元素，表示24小时中的某个时刻或者时期，允许带时差 --> 
    57. 

   
   
  57.          <!-- datetime属性不会显示在网页中，但是会被浏览器读到，日期和时间用T分隔，时间可以带时差(+ -号） --> 
    58. 

   
   
  58.          <!-- pubdate属性代表了这article的发布时间，这个属性是可选的 --> 
    59. 

   
   
  59.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
    60. 

   
   
  60.                1小时前 
    61. 

   
   
  61.           </time> 
    62. 

   
   
  62.          </p> 
    63. 

   
   
  63.         </header> 
    64. 

   
   
  64.         <p> 
    65. 

   
   
  65.         我喜欢苹果，因为很好吃 
    66. 

   
   
  66.         </p> 
    67. 

   
   
  67.          
    68. 

   
   
  68.      </article> 
    69. 

   
   
  69.       
    70. 

   
   
  70.      <article> 
    71. 

   
   
  71.       <header> 
    72. 

   
   
  72.       <h4>发布者：charles.wang</h4> 
    73. 

   
   
  73.        <p> 
    74. 

   
   
  74.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
    75. 

   
   
  75.                1小时前 
    76. 

   
   
  76.           </time> 
    77. 

   
   
  77.          </p> 
    78. 

   
   
  78.       </header> 
    79. 

   
   
  79.       <p> 
    80. 

   
   
  80.       我喜欢苹果那种红彤彤的感觉 
    81. 

   
   
  81.       </p> 
    82. 

   
   
  82.       
    83. 

   
   
  83.      </article> 
    84. 

   
   
  84.           
    85. 

   
   
  85.     </section> 
    86. 

   
   
  86. </article> 
    87. 

   
   
  87.  
    88. 

   
   
  88. <!-- footer表示为上层内容区块或者根区块做一个页脚，footer个数不受限制，article,section,全局都可以设置footer --> 
    89. 

   
   
  89. <footer> 
    90. 

   
   
  90. <ul> 
    91. 

   
   
  91. <li>版权信息:Charles</li> 
    92. 

   
   
  92. <li>站点地图</li> 
    93. 

   
   
  93. <li>联系方式</li> 
    94. 

   
   
  94.  
    95. 

   
   
  95. <!-- address用于在文档中呈现联系信息 --> 
    96. 

   
   
  96. <address> 
    97. 

   
   
  97.  <a title="文章作者：Charles"  href="http://supercharles888.blog.51cto.com">Charles</a> 
    98. 

   
   
  98.  发表于<time datetime="2012/5/5">2012年5 月5日</time> 
    99. 

   
   
  99. </address> 
    100. 

   
   
  100. </ul> 
    101. 

   
   
  101. </footer> 
    102. 

   
   
  102.  
    103. 

   
   
  103. </body> 
    104.

CSS页面：

 


  
  
    

   
   
  1. /********************************************************************************** 
    2. 

   
   
  2. * @CopyRight: Charles Wang (Tech Lead) 
    3. 

   
   
  3. * mailto: charles_wang888@126.com 
    4. 

   
   
  4. * This file is only for studying purpose instead of commercial purpose 
    5. 

   
   
  5. * 
    6. 

   
   
  6. **********************************************************************************/ 
    7. 

   
   
  7. @CHARSET "UTF-8"; 
    8. 

   
   
  8.  
    9. 

   
   
  9. /* 
    10. 

   
   
  10. * 追加block声明，让浏览器页面当使用这些HTML5新增元素时候都使用块方式显示 
    11. 

   
   
  11. */ 
    12. 

   
   
  12. article,aside,dialog,figure,footer,header,legend,nav,section {display:block;} 
    13. 

   
   
  13.  
    14. 

   
   
  14. /* 
    15. 

   
   
  15. * 其他样式，也就是为每个元素单独定义样式 
    16. 

   
   
  16. */ 
    17. 

   
   
  17. nav{float:left; width:20%;} 
    18. 

   
   
  18. article{float:right; width:79%;} 
    19. 

   
   
  19. header{display:block; color:yellow; text-align:left;} 
    20. 

   
   
  20. article header{color:blue; text-align:left;} 
    21.

最后效果图：

 





本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/852852，如需转载请自行联系原作者

文章标签：
HTML5
移动开发
前端开发
定位技术
关键词：
HTML元素
HTML文档元素
HTML文档
HTML结构
HTML结构元素
余二五
目录
相关文章
蓝易云
|
4月前
|
XML 前端开发 C#
C#编程实践：解析HTML文档并执行元素匹配
通过上述步骤，可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集，可以处理各种HTML解析任务。
蓝易云
268 19
蓝易云
|
7月前
|
移动开发 前端开发 JavaScript
HTML表单验证：确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用，便可以确保用户输入的数值符合特定的格式要求。特别要注意，在实际的生产环境中，仅仅依靠前端验证是不够的。为了安全起见，后端也应该实施相应的验证措施，以防止不匹配格式的数据通过其他手段提交到服务器。
蓝易云
436 74
34789737
|
8月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧，涵盖条件渲染（v-if/v-show）、列表渲染（v-for）、动态组件（:is）、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议，如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件，可提高代码复用性和维护性。文中还附有具体示例代码，帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
34789737
209 19
34789737
|
8月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案，包括条件渲染（v-if/v-show）、动态组件（component :is）、手动挂载（$mount）及 Vuex 状态管理等方法。通过实例分析，如动态表单生成器与全局模态框服务，展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项，帮助开发者根据需求选择最佳方式，在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例，便于理解和实践。
34789737
244 2
double2li
|
缓存 开发者
如何: 通过HTML文档对象模型访问文档中的ActiveX控件的属性 .
如何: 通过HTML文档对象模型访问文档中的ActiveX控件的属性   此文章的信息应用于: Microsoft Internet Explorer (编程) 版本4.0, 4.01, 4.01 SP1, 4.01 SP2, 5, 5.01, 5.5,6.0 概要 CSDN文档中心文章 用 MSHTML 的一点经验 111222（原作） 说明了如何访问在HTML文档对象模型中的网页的元素、内容。
double2li
1055 0
游客vx6uejvd6s6ck
|
7月前
|
移动开发 前端开发 JavaScript
征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具，采用HTML5实现，仅供学习参考。核心功能通过JavaScript构建，包含虚拟数据生成、权重分配及信用因素分析（如还款记录、信用使用率等）。
游客vx6uejvd6s6ck
1891 4
游客vx6uejvd6s6ck
|
7月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
这是一款纯前端实现的多平台虚拟评论生成器，支持抖音、快手、小红书风格，适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局，利用IndexedDB存储数据，CSS Variables切换主题。
游客vx6uejvd6s6ck
1154 2
游客vx6uejvd6s6ck
|
7月前
|
前端开发 JavaScript
个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现，包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
游客vx6uejvd6s6ck
767 0
游客vx6uejvd6s6ck
|
7月前
|
存储 前端开发 安全
病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器，旨在为医学教学和软件开发测试提供数据支持，严格遵守《医疗机构病历管理规定》。
游客vx6uejvd6s6ck
3455 5

热门文章

最新文章

  • 1
    JQuery属性与样式——.html()和.text()
  • 2
    黄聪：如何使用CodeSmith批量生成代码(转：http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)
  • 3
    HTML5网页3D场景制作之Three.js初体验-制作3D字体
  • 4
    Waud.js – 使用HTML5降级处理的Web音频库
  • 5
    HTML+CSS静态博客
  • 6
    HTML_链接
  • 7
    HTML4和HTML5之间的10个主要不同
  • 8
    HTML5网站大观：精美的 HTML5 商业网站设计案例
  • 9
    html和xml的区别
  • 10
    php 去除html标记--strip_tags与htmlspecialchars的区别详解
  • 1
    基于 Cloudflare Workers 构建高性能知识库镜像服务：反向代理与 HTML 动态重写实践
    896
  • 2
    C#编程实践：解析HTML文档并执行元素匹配
    268
  • 3
    响应式企业网站源码JavaL/PHP带后台管理​：Bootstrap HTML5模板
    1039
  • 4
    精选HTML、JavaScript、ASP代码片段集锦
    222
  • 5
    HTML表单验证：确认input元素输入为具有特定整数和小数位数的数值。
    436
  • 6
    阻止HTML input元素（type='number'）中输入字母'e'的方法。
    318
  • 7
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    2585
  • 8
    个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
    767
  • 9
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
    1478
  • 10
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
    1891

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践
    • 下一篇
    附部署代码｜云数据库RDS 全托管 Supabase服务：小白轻松搞定开发AI应用