HTML5新增的结构有哪些,具体可以怎么使用,这篇文章会详细的告诉你。
HTML5 新增的主体结构元素:
article 元素
section 元素
nav
aside元素
time元素
pudate属性
元素详解:
article 元素
可以内嵌 ,可以表示插件
<article> <h1>这是一个内嵌页面</h1> <object> <embed src="#" width = "600" height = "400"</embed> </object> </article>
section 元素
通常不推荐没有标题内容使用section元素
不要与article元素混淆
总结:不要将section元素作为设置样式的页面容器
如果article、aside、nav元素更符合使用条件,那不要说seciton元素
没有标题内容的,不要使用section元素
nav
用作页面导航的连接组,其中的导航元素连接到其他页面或当前页面的其他部分。将主要的、基本的连接组放进nav元素即可
应用场景:
传统导航条
侧边栏导航
页内导航
翻页操作
html5中不要使用menu 元素代替 nav元素
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <nav> <ul> <li><a href = "#">主页</a></li> <li><a href = "#">开发文档</a></li> </ul> </nav> <article> <header> <h1>html5和css3的历史</h1> <nav> <ul> <li><a href = "#">HTML5历史</a></li> <li><a href = "#">CSS3历史</a></li> </ul> </nav> </header> <section> <h1>HTML5历史</h1> <p>....</p> </section> <section> <h1>css3历史</h1> <p>....</p> </section> <footer> <a href = "#">删除</a> <a href = "#">修改</a> </footer> </article> <footer> <p><small>版权声明:</small></p> </footer> </body> </html>
aside元素
表示当前页面或者文字的附属信息部分
包含先关的引用、侧边栏、逛逛、导航条等
<html> <head> <meta charset="UTF-8"> <title>aside元素</title> </head> <body> <header> <h1>js入门</h1> </header> <article> <h1>语法</h1> <p>文章的正文。。。。。。</p> <aside> <h1>名词解释</h1> <p>这是一个对语言来说很重要的内容体</p> </aside> </article> <aside> <nav> <h2>评论</h2> <ul> <li><a href = "#">2015-3-10</a></li> <li><a href = "#" >大牛:真希望可以好好的学习一下</a></li> </ul> </nav> </aside> </body> </html>
time元素
24小时
<html> <head> <meta charset="UTF-8"> <title>Time元素</title> </head> <body> <time datatime = "2017-10-09">2017-10-09</time> <time datatime = "2017-10-09T20:00">2017-10-09</time> <time datatime = "2017-10-09T20:00Z">2017-10-09</time> <time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time> </body> </html>
pudate属性
<html> <head> <meta charset="UTF-8"> <title>update属性</title> </head> <body> <article> <header> <h1>苹果</h1> <p>发布日期 <time datetime="2017-10-09" pubudate>2015-10-09</time></p> <p>舞会时间 <time datetime ="2015-10-09">2015-10-09</time></p> </header> </article> </body> </html>
【相关推荐】
以上是HTML5新增的结构元素有哪些?HTML5新增的结构元素的用法(推荐)的详细内容。更多信息请关注PHP中文网其他相关文章!

本文解释了如何使用&lt; audio&gt;元素,包括用于格式选择的最佳实践(MP3,OGG Vorbis),文件优化和JavaScript控件用于播放。 它强调使用多个音频f

本文解释了如何创建和验证HTML5表格。 它详细介绍了&gt;元素,输入类型(文本,电子邮件,编号等)和属性(必需,模式,最小,最大)。 HTML5的优势比旧方法形成

本文讨论了使用HTML5页面可见性API来检测页面可见性,提高用户体验并优化资源使用情况。关键方面包括暂停媒体,减少CPU负载以及基于可见性变化管理分析。

本文讨论了使用视口元标记来控制移动设备上的页面缩放,重点是宽度和初始尺度之类的设置,以获得最佳响应和性能。

本文讨论了使用GeOlocation API管理用户位置隐私和权限,并强调要求权限,确保数据安全性并遵守隐私法律的最佳实践。

本文使用JavaScript详细介绍了创建Interactive HTML5游戏。 它涵盖了游戏设计,HTML结构,CSS样式,JavaScript逻辑(包括事件处理和动画)以及音频集成。 必需的JavaScript库(Phaser,Pi

本文介绍了如何使用HTML5拖放API来创建交互式用户界面,详细介绍了使元素可拖动的步骤,处理关键事件并通过自定义反馈来增强用户体验。它还讨论了一个常见的陷阱

本文解释了HTML5 Websockets API,用于实时双向客户服务器通信。 它详细详细介绍了客户端(JavaScript)和服务器端(Python/Flask)的实现,以应对可伸缩性,状态管理,一个挑战


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver Mac版
视觉化网页开发工具

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

记事本++7.3.1
好用且免费的代码编辑器