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>
【相关推荐】
html的基础元素,让你零基础学习HTML
什么是HTML文件?HTML文件的初步认识
以上就是HTML5新增的结构元素有哪些?HTML5新增的结构元素的用法(推荐)的详细内容,更多请关注双恒网络其它相关文章!
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
云资源网 » HTML5新增的结构元素有哪些?HTML5新增的结构元素的用法(推荐)
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
云资源网 » HTML5新增的结构元素有哪些?HTML5新增的结构元素的用法(推荐)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 你们有qq群吗怎么加入?