分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

Html5主要新增主体结构元素

发布时间:2023-09-06 01:36责任编辑:郭大石关键词:暂无标签

article

代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章,一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。

article元素是可以嵌套使用的

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>for article</title></head><body> ???<article> ???????<header> ???????????<h1>这是一个头部</h1> ???????????<p>我是底部的注解</p> ???????</header> ???????<!--嵌套使用的article--> ???????<article> ???????????<header> ???????????????<h1>作者</h1> ???????????</header> ???????????<p>评论</p> ???????????<footer> ???????????????time ???????????</footer> ???????</article> ???????<footer> ???????????这是底部 ???????</footer> ???</article> ???<!--提供插件作用的article--> ???<!--递归显示页面--> ???<article> ???????<h1>这是一个内嵌页面</h1> ???????<object> ???????????<embed src = "#" width = 600 height = 400></embed> ???????</object> ???</article></body></html>

显示效果:

section

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。

用法有以下几点需要注意:

  • 不要将section元素作为设置样式的页面容器
  • 如果article元素、aside元素、nav元素更符合使用条件,那不要使用section元素
  • 没有标题内容不要使用section元素

nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。

nav元素应用场景:

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

html中导航栏

<div> ???<ul> ???????<li><a href="#"></a> ???????<li><a href="#"></a> ???????<li><a href="#"></a> ???</ul></div>

html5中导航栏

<nav> ???<ul> ???????<li><a href="#"></a> ???????<li><a href="#"></a> ???????<li><a href="#"></a> ???</ul></nav>

另外:不要用menu元素代替nav元素进行使用,加为menu元素更多使用在交互命令菜单之中,而不是导航。

aside

aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。

time元素与微格式

  • 微格式

自用html5元素的class属性添加附属信息的格式

附加的信息可以是发布时间,电话号码等等

微格式并不是html5才出现,在之前的html之中已经有了使用,但是在对时间的编译上会出现错误歧义。而html5新增的time元素改变了这一点·

  • time元素用法如下
<time datetime="2017-07-29">2017-07-29</time><time datetime="2017-07-29T20:00">2017-07-29</time> #T代表时间<time datetime="2017-07-29T20:00Z">2017-07-29</time> #Z代表UTC时间<time datetime="2017-07-29T20:00+09:00">2017-07-29</time> #'+09:00'代表时差
  • pubdate属性

boolean类型,用于time元素

代表当前时间为文章的发布时间

Html5主要新增主体结构元素

原文地址:https://www.cnblogs.com/oneTOinf/p/8283907.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved