一、定义标题栏: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 结构标签的更多相关文章

  1. HTML5结构标签

    <!DOCTYPE html> <!-- ↑ 文档声明.HTML5已经简化为上述样式! 注意:文档声明必须有!而且必须在文档页面的第一行!   HTML4.01之前的文档声明: &l ...

  2. HTML5结构化标签

    一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...

  3. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  4. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  5. HTML5的新结构标签

    在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...

  6. html5新结构标签

    html5新结构标签 <header>  定义 section 或 page 的页眉,也就是定义头部的标签. <footer> 定义 section 或 page 的页脚. & ...

  7. HTML5结构元素

    前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...

  8. HTML5所有标签汇总

    来自lampbrother兄弟连HTML5与CSS3教程.<xmp> 结构标签:(块状元素) 有意义的div<article>     标记定义一篇文章<header&g ...

  9. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

随机推荐

  1. ora-8176原因及解决方法

    在oracle undo_retention范围内,且_undo_autotune=false的情况下,一个语句执行的时候仍然发生ora-8176,语句如下: INSERT INTO XXX SELE ...

  2. PostgreSQL--with子句

    在PostgreSQL中,WITH查询提供了一种编写辅助语句的方法,以便在更大的查询中使用.它有助于将复杂的大型查询分解为更简单的表单,便于阅读.这些语句通常称为公共表表达式(Common Table ...

  3. 本地git工作流

    一:add后的回退代码 1.在原有已经的基础上,又新增加了一个小需求 经过修改,添加到暂存区. 这个时候,会存在modified文件: 2.然后,又说需求不需要存在了 可以进行丢弃 在reset后,需 ...

  4. Linux 常用操作和命令

    腾讯云部署 java web 环境:https://blog.csdn.net/niceLiuSir/article/details/78879844 Tomcat部署和配置:https://blog ...

  5. ASP.NET MVC下如何返回图片

    方式一: 首先,我们应当从控制器入手,控制器一般不都是return View的吗?那怎么返回图片? 当然,Controller类也没有return Image 的,上次我们的例子是返回JSON,其实我 ...

  6. pytorch torch.backends.cudnn设置作用

    cuDNN使用非确定性算法,并且可以使用torch.backends.cudnn.enabled = False来进行禁用 如果设置为torch.backends.cudnn.enabled =Tru ...

  7. matlab学习笔记5--低级文件输入输出函数

    一起来学matlab-matlab学习笔记5 低级文件输入输出函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张德丰等著 感谢张 ...

  8. server2008r2 安装CentOS

    一:安装CentOS 二:配置虚拟网络: 三:设置创建的虚拟机使用刚才创建的网卡: 四:运行CentOs,输入用户:root  密码:root,登录后输入: dhclient   自动获取IP ip ...

  9. java-统计一段句子中各单词出现的次数

    问题:统计一段句子中各单词出现的次数. 思路: 1.使用split方法将文章进行分割,我们这里以空格.逗号和句点为分隔符,然后存到一个字符串数组中. 2.创建一个hashMap集合,key是字符串类型 ...

  10. vue中$router以及$route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...