HTML5 新增的主体结构元素

分别说明article、aside、section、nav元素。

article元素：

<!DOCTYPE html>
<html>
<headlang="en"><title>article元素</title><metacharset="utf-8">
</head>
<body><!--article元素代表文档、页面或应用程序中独立的、完整的、可以独立被外部引用的内容。它可以是一篇博客或者报刊中的一篇文章，一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。article元素可以嵌套使用，也可以用来表示插件。--><article><header><h1>这是一个标题</h1><p>Hello</p></header><article><header>作者</header><p>评论</p><footer>time</footer></article><footer><p>这是底部</p></footer></article><article><h1>这是一个内嵌页面</h1><object><embedsrc="#"width="800"height="400"></embed></object></article>
</body>
</html>

aside元素：

<!DOCTYPE html>
<html>
<headlang="en"><title>aside元素</title><metacharset="utf-8">
</head>
<body><!--aside元素用来表示当前页面或文章的附属信息部分，它可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。--><header><h1>这就是一个头部</h1></header><article><h1>html的故事</h1><p>这里面是正文。</p><aside><h1>html的解释</h1><p>它是一种超文本标记语言。</p></aside></article><aside><nav><h2>评论</h2><ul><li><ahref="#">评论的时间</a></li><li><ahref="#">评论的内容</a></li></ul></nav></aside>
</body>
</html>

section元素：

<!DOCTYPE html>
<html>
<headlang="en"><title>section元素</title><metacharset="utf-8">
</head>
<body><!--section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由其内容及标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。--><section><h1>苹果</h1><p>这是一种水果，吃起来脆脆的、甜甜的。</p></section><br/><br/><article><h1>苹果</h1><p>这是一种水果，吃起来脆脆的、甜甜的。</p><section><h2>红富士</h2><p>个大、圆润、富有色泽感</p></section><section><h2>某品牌</h2><p>个小、灰暗、无色泽</p></section></article><br/><br/><!--section与article的区别section的作用强调对文章或页面进行分段、分块，而article元素强调独立性--><section><h1>水果</h1><article><h2>香蕉</h2><p>成熟时外表多为黄色</p></article><article><h2>橙子</h2><p>富含维生素C</p></article><article><h2>木瓜</h2><p>据说可以丰胸</p></article></section><!--section使用总结：1、不要将section元素作为设置样式的页面容器，那是div的工作。2、如果使用article、aside、nav元素更符合使用条件，那就不要使用section元素。3、没有标题内容，不要使用section元素。-->
</body>
</html>

nav元素：

<!DOCTYPE html>
<html>
<headlang="en"><title>nav元素</title><metacharset="utf-8">
</head>
<body><!--nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。nav的应用场景：传统导航栏、侧边导航栏、页内导航、翻页操作。--><nav><ul><li><ahref="#">主页</a></li><li><ahref="#">开发文档</a></li></ul></nav><article><header><h1>HTML5和CSS3的历史</h1><nav><ul><li><ahref="#">HTML5的历史</a></li><li><ahref="#">CSS3的历史</a></li></ul></nav></header></article><section><h1>HTML5的由来</h1><p>这里面是内容</p></section><section><h1>CSS3的由来</h1><p>这里面是内容</p></section><footer><ahref="#">删除</a><ahref="#">修改</a></footer><footer><p><small>版权声明</small></p></footer><!--HTML5中不能使用menu元素代替nav元素-->
</body>
</html>

转载于:https://www.cnblogs.com/bob-yu/p/5447301.html

HTML5 新增的主体结构元素相关推荐

HTML5新增的主体结构元素
article元素 section元素 nav元素 aside元素 time元素与微格式 pubdate属性 1.article元素代码片段: <!DOCTYPE html> <h ...
HTML5新增的结构元素和网页元素
1.什么是HTML5 HTML5是用于取代HTML和XHTML的标准版本新特性: 新的语义化标签,比如header.footer.nav 新的表单控件,比如email.url.search 用于绘画 ...
html5新增了哪些表单元素,HTML5新增表单元素
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签其type类型主要有有以下几种:type="tel"用 ...
HTML5 新增的结构元素——能用不代表用对了
我们需要让标签语义化,清晰的结构,更好的 seo,利于特殊终端的阅读(无障碍),此时 html5 标签的作用就很明显了,并不是说能用就好.于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查 ...
获取h5的id属性_js：获取元素的值（id、标签、html5新增、特殊元素的获取）
1.根据id获取 (1)getElementById() 方法获取元素 console.log(uname); console.log(typeofuname); } 2020-07-22 getE ...
表单补充，labed标签，html5新增表单元素和语义
<h2>label标签的使用</h2>  <label> ...
HTML5的非主体结构元素（header、footer、hgroup、assress）
header元素 footer元素 hgroup元素 address元素网页编排规则 1.header元素代码演示: <!DOCTYPE html> <html lang=&qu ...
HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...

HTML5 新增的主体结构元素

HTML5 新增的主体结构元素相关推荐

最新文章

热门文章