1、header:标记头部区域的内容

、footer:标记页脚区域的内容

、section：Web页面中的一块区域

4、article:独立的文章内容区域

5、aside：相关侧边内容或者引文区域

6、nav:导航类内容区域

另外分享一个网站，用于输出。https://gsnedders.html5.org/outliner/（转自麦子学院）

其中把UTF-8改为gdk

articleDemo：
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <section>

     <h1>字母内容</h1>

     <p>其中全部内容</p>

     <section>

         <h2>A的内容</h2>

         <p>Aa</p>

     </section>

     <section>

         <h2>B的内容</h2>

         <p>Bb</p>

     </section>

 </section>

 <section>

     <h1>数字内容</h1>

     <p>其中内容</p>

     <section>

         <h2>1的内容</h2>

         <p>一</p>

     </section>

     <section>

         <h2>2的内容</h2>

         <p>二</p>

     </section>

 </section>

 </body>

 </html>

sectionDemo：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <nav>

 <!--<nav>用于创建连接-->

     <ul>

         <li>

             <a href="navDemo01.html">首页</a>

             <!--格式：<a href="链接点">名称</a>-->

         </li>

     </ul>

     <ul>

         <li>

             <a href="articleDemo01.html">article</a>

         </li>

     </ul>

     <ul>

         <li>

             <a href="asideDemo01.html">aside</a>

         </li>

     </ul>

     <footer>

         <a href="/">版权信息</a>

         <a href="/">站点帮助</a>

         <a href="/">练习我们</a>

     </footer>

 </nav>

 </body>

 </html>

navDemo

HTML 5中的结构元素的更多相关文章

  1. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  2. 第一章 用HTML5中的结构元素构建网站

    1.当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素. 2.section是需要标题的,而nav或aside没有标题也是可以的. 3.html5轮廓工具 htt ...

  3. 【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)

    主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑 ...

  4. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  5. matlab学习笔记12_2创建结构体数组,访问标量结构体,访问非标量结构体数组的属性,访问嵌套结构体中的数据，访问非标量结构体数组中多个元素的字段

    一起来学matlab-matlab学习笔记12 12_2 结构体 创建结构体数组,访问标量结构体,访问非标量结构体数组的属性,访问嵌套结构体中的数据,访问非标量结构体数组中多个元素的字段 觉得有用的话 ...

  6. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  7. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  8. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  9. HTML5结构元素

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

随机推荐

  1. 简单的文件上传的下载（动态web项目）

    1.在页面中定义一个form表单,如下: <!-- 文件上传 --> <form action="${pageContext.request.contextPath}/Fi ...

  2. TCP的带宽估计和丢包恢复

    一.带宽估计 TCP的带宽估计主要通过拥塞控制算法实现,用到两个变量: 1.cwnd     TCP对当前链路可用带宽的估计 2.ssthreash   拥塞控制算法“假想”出来的可用带宽值 二.丢包 ...

  3. waitpid使用的一点问题

    使用waipid的时候遇到了一个奇怪的问题,将情况简化后描述一下. 有关waitpid的基本介绍参见这里一下:http://www.cnblogs.com/mickole/p/3187770.html ...

  4. Java执行过程

    Java的运行原理 在Java中引入了虚拟机的概念,即在机器和编译程序之间加入了一层抽象的虚拟的机器.这台虚拟的机器在任何平台上都提供给编译程序一个的共同的接口.编译程序只需要面向虚拟机,生成虚拟机能 ...

  5. 262. Trips and Users

    问题描述 解决方案 -- case when 的效率比if的效率高 -- select Trips.Request_at as 'Day', -- round(sum(case Trips.Statu ...

  6. node_Express安装及检验

    Express安装及检验 因为自己在学习express的安装是时候,遇到了很多问题,相信第一次尝试的你们也会遇到一些安装不成功的问题吧,下面是我查阅了一些资料及借鉴了一些技术大神的经验写的总结,希望可 ...

  7. 如何理解python中的if __name__=='main'的作用

    一. 一个浅显易懂的比喻 我们在学习python编程时,不可避免的会遇到if __name__=='main'这样的语句,它到底有什么作用呢? <如何简单地理解Python中的if __name ...

  8. coco2d-js 节点的属性和动作

    记录一些coco简单的属性和动作,位置,锚点,透明度,大小,移动等 /*属性*/ if(!true){ var sprite1 = new cc.Sprite(res.Sp1); var sprite ...

  9. (转)msys2使用教程

    一.安装 官方下载地址 http://www.msys2.org/ 指定好安装路径(一般D根目录即可),一路下一步就好. 二.配置国内镜像.设置窗体修改颜色 使用[清华大学开源软件镜像站]中的地址,修 ...

  10. uva1315 Crazy tea party（找规律）

    题意就是说把顺时针排的1到n换成逆时针排的需要的最少交换步数. 如果是线形的一串数,需要的交换次数就是个冒泡排序的交换次数:n*(n-1)/2,或者用a[i]=(i-1)+a[i-1]推出来. 对于环 ...