html5新增主体结构元素有哪些?_各自的用途与使用

更新日期: 2019-01-02阅读: 3.9k标签: html5

html5新增元素:article元素,aside元素,nav元素,section元素,footer元素,header元素,figure元素,figcaption元素


article元素

代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

该元素可嵌套使用;

可用来表示插件。


aside元素

用来表示当前页面或者文章的附属信息部分

可包含于当前页面或蛀牙内容相关的引用、侧边栏、广告、导航

以及其他类似的有区别于主要内容的部分

 

nav元素

可以用作页面导航的连接组

其中的导航元素连接到其他页面或当前页面的其他部分

并非所有链接组都要放进nav元素,只需将主要的、基本的放进即可

应用场景:传统导航条、侧边栏导航、页内导航、翻页导航

h5中不要用menu元素代替nav元素,menu元素使用在发出命令的菜单上,是一个交互元素


section元素

用于对网站或应用程序中页面上的内容进行分块

一个section元素通常由内容及标题组成

但当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。

section元素强调分段或分块,一块内容分为几段或几块;

article元素强调独立性,一块内容独立完整;

没有标题内容区域块,不要用section


header元素

<header> 标签定义文档的页眉(介绍信息)

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中,可以定义多个 <header> 元素。


footer元素

标签定义文档或节的页脚。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

可以在一个文档中使用多个 <footer> 元素。


figure元素

用作文档中插图的图像,标签规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关


figcaption元素

<figure>标签内部还可以添加<figcaption>图题,其包含了对图片的完整说明。

相对figure元素可以看做<p>标签


怎么使用  

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 内联样式表 -->
<style>
* {
margin: 0;
padding: 0;
}

.box {
width: 80%;
text-align: center;
font-size: 30px;
margin: 10px auto;
}

header {
width: 100%;
height: 100px;
outline: 1px solid red;
line-height: 100px;
}

.box1 {
width: 100%;
position: relative;
height: 550px;
}

nav {
width: 70%;
height: 50px;
outline: 1px solid black;
position: absolute;
left: 0px;
top: 0px;
line-height: 50px;
}

aside {
width: 30%;
height: 50px;
outline: 1px solid blue;
position: absolute;
right: 0px;
top: 0px;
line-height: 50px;
}

article {
width: 70%;
height: 500px;
outline: 1px pink solid;
position: absolute;
left: 0px;
top: 50px;
line-height: 500px;
}

section {
width: 30%;
height: 500px;
outline: 1px yellow solid;
position: absolute;
right: 0px;
top: 50px;
line-height: 500px;
}

footer {
width: 100%;
height: 100px;
outline: 1px solid rebeccapurple;
line-height: 100px;
}
</style>
</head>

<body>
<div class="box">
<header>我是网页的头部</header>
<div class="box1">
<nav> 我是左边的导航栏</nav>
<aside>我是右边的导航栏</aside>
<article>我是主体内容</article>
<section>我是右边的侧边栏</section>
</div>
<footer>我是底部</footer>
</div>
</body>

</html>



链接: https://www.fly63.com/article/detial/1741

提示用户升级浏览器代码 不支持HTML5,请升级浏览器

javascript提示用户升级浏览器代码],低于ie9的浏览器提示.倾向于提示用户升级浏览器,而不是为了兼容老版浏览器.

HTML5的WebSocket的API,WebSocket API简介

由于实际工作中很少接触WebSocket,因为很少有业务需求要用到WebSocket。WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

HTML5全局属性汇总

HTML5全局属性:可以用来配置所有元素共有的行为,这种属性称为全局属性,可以用在任何一个元素身上。包括:accesskey属性、class属性、contenteditable属性、dir属性、draggable属性、dropzone属性、hidden属性等

一起来看 HTML 5.2 中新的原生元素 <dialog>

HTML 5.2 正式成为 W3C 的推荐标准(REC),其中,推出了一个新的原生模态对话框元素 <dialog>,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素

HTML5新特性总结

HTML5发布于2014年,设计目的是为了在移动端支持多媒体。语义化标签:section和article标签都是独立的分块标签,section跟随意,article表示单独的文字单元。

HTML5程序员需要掌握的重要技能

现在参加HTML5培训的人很多,但是能学到什么东西还有很多的小伙伴不是很清楚,本篇文章就带读者看一下一名专业的HTML5程序员需要掌握哪些技能。

HTML5行业的发展预测

现在的互联网市场上,HTML5在快速地成长,甚至是未来几年里将会有很多公司进入HTML5这个领域,HTML5也会像传统的Flex,Flash,Silverlight和Objective-C那样,更容易出现在任何一个设备中,形成一套自己独有的生态系统

html5中dialog标签的使用

在html5版本中新增了很多实用有语义的标签,今天要介绍的就是html5版本新增的其中一个标签,即<dialog>标签。接下来我们就一起来看看该标签的用法吧!

html5中details标签作用

HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。目前只有 Chrome 和 Safari 6 支持 <details> 标签。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!