HTML5 结构标签
一、定义标题栏:header
header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,因此整个页面的标题应该放在页面的开头。
header 定义文档的页眉,在一个网页中可以多次使用 header 元素。
语法&案例:
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h2>文章标题</h2>
</header>
<p>文章正文</p>
</article>
二、定义标题组:hgroup
hgroup 元素可以为标题或者子标题进行分组,通常与 h1~h6 元素组合使用,一个内容块中的标题及其子标题可以通过 hgroup 元素组成一组。但是,如果文章只有一个主标题,不需要此元素。
语法:
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
</header>
三、定义导航块:nav
nav 元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当期页面的其他部分。只需要将主要的、基本的链接组放进 nav 元素即可。
语法:
<nav> 语义 :定义导航栏 </nav>
四、定义侧边栏:aside
asdie 元素用来表示当前页面或文章的附属信息部分,可以包含当前页面或主要内容相关的引用、侧边栏,以及其他类似的有别于主要内容的部分。
主要由以下两种用法:
1、作为主要内容的附属信息部分
2、作为页面或站点全局的附属信息部分
语法:
<aside>定义其所处内容之外的内容</aside>
五、定义主要区域:main
main 元素表示网页中的主要内容。该区域应该为每一个网页中所特有的内容,不能包含整个网站的导航图、版权信息等整个网站内部的共同内容。
每个网页内部只能放置一个 main 元素。不能将 main 元素放置在任何 article、aside、footer、header 或 nav 元素内部。
语法:
<main>网页的主要内容</main>
六、定义文章块:article
article 元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。
语法:
<article> 语义: 定义文章</article>
七、定义内容块:section
section 元素用于对网站或应用程序中页面上的内容进行分区,section 元素关注内容的独立性。
语法:
<section> 语义: 定义区域</section>
八、定义脚注栏:footer
footer 元素可以作为内容块的脚注,可以在内容块中添加注释,或者在网页中添加版权信息等。脚注信息有很多形式,如作者、相关阅读链接及版权信息等。
在页面中可以重复使用 footer 元素。
语法案例:
<footer>
<ul>
<li>关于</li>
<li>导航</li>
<li>联系</li>
</ul>
</footer>
更多的标签学习请参考这里:http://www.w3school.com.cn/html5/index.asp
HTML5 结构标签的更多相关文章
- HTML5结构标签
<!DOCTYPE html> <!-- ↑ 文档声明.HTML5已经简化为上述样式! 注意:文档声明必须有!而且必须在文档页面的第一行! HTML4.01之前的文档声明: &l ...
- HTML5结构化标签
一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...
- HTML5新增结构标签
引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...
- HTML5新结构标签和移动端页面布局
--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...
- HTML5的新结构标签
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...
- html5新结构标签
html5新结构标签 <header> 定义 section 或 page 的页眉,也就是定义头部的标签. <footer> 定义 section 或 page 的页脚. & ...
- HTML5结构元素
前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...
- HTML5所有标签汇总
来自lampbrother兄弟连HTML5与CSS3教程.<xmp> 结构标签:(块状元素) 有意义的div<article> 标记定义一篇文章<header&g ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
随机推荐
- 第06组 Beta冲刺(4/4)
队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11990575.html 作业博客 : https://edu.cnblogs.com/campus/ ...
- Python常用模块大全
Python常用模块大全 os模块: os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有文件 os.c ...
- linux学习(3):linux常用命令大全
Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短 ...
- mysql 如何减少InnoDB关闭时间
原文连接: https://www.percona.com/blog/2009/04/15/how-to-decrease-innodb-shutdown-times/ 有时,运行InnoDB的MyS ...
- Spring cloud微服务安全实战-7-7自定义metrics监控指标(2)
Gauge用来显示单词一个数的 勾选,这里编程仪表盘 设置仪表盘的最大值.最小值 保存 直接保存 保存成功的提示 返回 这就是我们做的一个简单的仪表盘 这个不适合我们的counter,因为没有最大值 ...
- matlab学习笔记6--性能剖析
一起来学matlab-matlab学习笔记6 性能剖析 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张德丰等著 感谢张老师的书籍, ...
- 【翻译】Flink Table Api & SQL —Streaming 概念 —— 表中的模式匹配 Beta版
本文翻译自官网:Detecting Patterns in Tables Beta https://ci.apache.org/projects/flink/flink-docs-release-1 ...
- Pytest单元测试框架-测试用例运行规则
1.Pytest测试用例运行规则 在pytest单元测试框架下面执行用例,需要满足以下几个特点: 1. 文件名以test_*.py开头或者*_test.py 2. 测试类.测试函数以test开头 3. ...
- [LeetCode] 636. Exclusive Time of Functions 函数的独家时间
Given the running logs of n functions that are executed in a nonpreemptive single threaded CPU, find ...
- Lyrics of the song 99 Bottles of Beer
99 bottles of beer on the wall, 99 bottles of beer.Take one down and pass it around, 98 bottles of b ...