HTML5 布局元素

元素类型

块级元素

独占一行，不和其他元素待在一起
可以设置宽高
用来对网页进行布局，承载内容

行内元素

不会独占一行，可以和其他元素待在一行
不可以设置宽高，宽高由里面的内容决定

行内块级元素

不会独占一行，可以和其他元素待在一行
可以设置宽高

通过设置元素display属性，元素类型可以相互转换

div标签

定义文档中的区块，可以把文档分割为独立的，不同的部分
可以嵌套任何元素，包括div标签
用来承载内容，相当于一个容易。没有其他任何样式

header和footer标签

header：定义文档的页眉，通常用于设置一个页面的标题部分，通常包含标题，LOGO，导航等；
footer：定义文档的页脚，通常用于设置一个页面的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
header和footer标签属于div标签的变种，功能和div标签一样
header和footer标签有很强的语义，使得网页结构更清晰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新的布局元素header/footer</title><style type="text/css">body{height: 1000px}header{width: 100%; height:10%; background: green;}footer{width: 100%; height:10%; background: blue;}#div0{width: 100%; height:80%;}#div1{width: 20%; height: 100%; background: bisque; float: left;}#div2{width: 80%; height: 100%; background: beige; float: left;}</style>
</head>
<body><header>我是头部</header><div id = "div0"><div id="div1">我是侧边栏</div><div id="div2">我是主体内容</div></div><footer>我是底部</footer>
</body>
</html>

nav和aside标签

nav：定义导航栏；通常用它给超链接分组用来定义导航栏，包括主导航栏，和侧边导航栏
aside：定义侧边栏；通常用于显示侧边栏或者补充的内容、目录、索引等
nav和aside标签属于div标签的变种，功能和div标签一样
nav和aside标签有很强的语义，使得网页结构更清晰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>nav标签</title><style type="text/css">nav{width: 100%; height: 40px; background: bisque; text-align: center;}li{display: inline}a{text-decoration: none}</style>
</head>
<body><nav><li><a href="">首页</a></li><li><a href="">网页2</a></li><li><a href="">网页3</a></li><li><a href="">网页4</a></li></nav><p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p></aside>
</body>
</html>

section和article标签

section：对页面上的内容进行分块，通常由内容及其标题组成；典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分
article：定义独立的，完整的，可以独自被外部引用的内容；比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等；一般对于完整的内容(有头部，主体，尾部)才使用article标签，如果只是一段内容的话，应该使用section标签
section和article标签属于div标签的变种，功能和div标签一样
section和article标签有很强的语义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>article 标签</title>
</head>
<body><article><header><h3>文章标题</h3><h5>作者：JS Boom</h5></header><p>我是正文<br>*******************<br>*******************<br></p><article><header><h4>网友A评论</h4></header><p>评论内容*******************</p><footer>发布时间：2020.1.4</footer></article><article><header><h4>网友B评论</h4></header><p>评论内容*******************</p><footer>发布时间：2020.1.4</footer></article><footer><p>我的文章尾部：阅读：399 评论：90</p></footer></article><section><h1>section标签</h1><p>section区块的主体部分</p></section>
</body>
</html>

hgroup 标签

hgroup：通常用来给标题分组；一般放在header中，但是并非强制要求，也不是绝对的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hgroup和address</title>
</head>
<body><hgroup><h1>我是主标题</h1><h2>我是副标题</h2></hgroup>
</body>
</html>

address 标签

address：通常用来说明作者的联系信息，例如名字，email，电话，地址等；标签中的内容会以斜体显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hgroup和address</title>
</head>
<body><address>作者：Chasing light邮箱：Chasinglight@123.com</address>
</body>
</html>

figure 标签

figure：是一个媒体标签，也是对其他媒体标签进行组合，比如：图像、图表等等

figcaption 标签

figcaption：用来给figure标签定义标题；其应该被置于 figure 标签的第一个或最后一个子元素的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>figure and figcaption</title>
</head>
<body><h2>写真</h2><p>这是一张写真</p><figure><img src="haha.jpg" alt="写真"><img src="heiha.jpg" alt="写真"><figcaption>收藏的写真</figcaption></figure>
</body>
</html>

HTML5 布局元素相关推荐

HTML5新布局元素布局,HTML5新的布局元素
HTML5相对于HTML4新增了一些布局元素新增布局标签的优点: ⒈更加注重文档的结构内容而不是以什么形式展现出来 ⒉对人的友好,更加语义化,增加代码的可读性 ⒊对计算机友好,浏览器更容易解析新增 ...
HTML5结构元素总结
HTML5结构元素: HTML 5中新增了section.article.nav.aside.header和footer等结构元素.运用这些结构元素,可以让网页的整体布局更加直观和明确.更富有语义化. ...
html5--2.9新的布局元素(5)-hgroup/address
html5--2.9新的布局元素(5)-hgroup/address 学习要点了解hgroup/address元素的语义和用法通过实例理解hgroup/address元素的用法对照新元素布局与d ...
html主题部分标签,html5 section元素标签
html5 元素标签 HTML标签元素教程篇在HTML5中新增加标签. 一.section介绍与语法结构 section英文翻译为: 部分.段.截面.章节.章.分段等意思 html5 section ...
html5插件教程,HTML5教程 | HTML5 time元素
HTML5 time元素是用于定义页面的日期和时间的语义元素. 基本的time元素 time元素包含2个部分的日期信息.一个部分是给机器阅读的,另一个部分是给人阅读的.下面是一个简单的time元素的示 ...
html5+调用safari,Safari浏览器不酷，HTML5无效元素; JavaScript是
我使用JavaScript来生成一个图像对象,然后使用jQuery来改变它的属性,包括一个.load函数.在找到Safari(ver 5.0.5)的错误控制台(当最后不难发现时最令人沮丧)之后,我们发 ...
《HTML5多媒体应用开发》——第2章　HTML5多媒体元素2.1　Web多媒体历史
本节书摘来自异步社区<HTML5多媒体应用开发>一书中的第2章,第2.1节,作者: [爱]Ian Devlin 更多章节内容可以访问云栖社区"异步社区"公众号查看. 第 ...
下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...

HTML5 布局元素

元素类型

div标签

header和footer标签

nav和aside标签

section和article标签

hgroup 标签

address 标签

figure 标签

figcaption 标签

HTML5 布局元素相关推荐

最新文章

热门文章