HTML的页面结构

以下为命名的规范:

  1. header:标题头部区域的内容(用于页面或页面中的一块区域)

  2. footer:标记脚步区域的内容(用于整个页面或页面的一块区域)

  3. nav:导航类复杂内容

以上3个常用,以下3个不常用

  1. section:Web页面中的一块独立区域

  2. article:独立的文字内容

  3. aside:相关内容或应用(常用于侧边栏)

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>页面结构分析</title>
</head>
<body>

<header>
   <h2>网页头部</h2>
</header>

<section>
   <h2>网页主体</h2>
</section>

<footer>
   <h2>网页脚部</h2>
</footer>

</body>
</html>

HTML的页面结构的更多相关文章

  1. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  2. html5页面结构

    我是html5初学者,最近闲来无事,和各位一起学些下html5. 开发环境 jdk1.6,tomcat6,开发工具eclipse. 新建一个web工程,创建一个index.jsp页面.页面代码如下. ...

  3. 前端HTML之页面结构

    前端工作一年了,期间由于工作需要,也做了一些产品的设计,因为自己的目标就是做编程,所以婉拒了与产品相关的一些任务,打算主要把精力放到编程这方面. PS:2015年1月进军编程行业. 废话不多讲,这一年 ...

  4. [HTML/HTML5]3 页面结构

    在HTML5之前,主要的容器元素是div元素,但在HTML5中提供了数种其它容器元素供我们使用. 因此,当组织Web页面结构时,首先使用HTML将内容分成多部分,然后在对其使用CSS应用样式和格式. ...

  5. 【转】移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  6. 移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  7. 页面结构化在 Android 上的尝试

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/M45DM5Ix7a2fmrsE8VPvxg 作者:b ...

  8. 基于easyui开发Web版Activiti流程定制器详解(四)——页面结构(下)

    题外话: 这两天周末在家陪老婆和儿子没上来更新请大家见谅!上一篇介绍了调色板和画布区的页面结构,这篇讲解一下属性区的结构也是定制器最重要的一个页面. 属性区整体页面结构如图:  在这个区域可以定义工作 ...

  9. 基于easyui开发Web版Activiti流程定制器详解(三)——页面结构(上)

    上一篇介绍了定制器相关的文件,这篇我们来看看整个定制器的界面部分,了解了页面结构有助于更好的理解定制器的实现,那么现在开始吧! 首先,我们来看看整体的结构: 整体结构比较简单,主要包括三个部分: 1. ...

  10. 转:InnoDB Page Structure(InnoDB页面结构详解)

    InnoDB Page Structure(InnoDB页面结构详解) 此转载自登博的博客,给大家分享.

随机推荐

  1. Spring-Framework-官方文档阅读(一)Spring IoC Container

    通读Spring IoC容器官方文档,对IoC容器有一个大致的了解. 环境 JDK1.8 Spring Framework Version :4.3.18.RELEASE 容器概述 接口org.spr ...

  2. Spark学习之路 (二十三)SparkStreaming的官方文档[转]

    SparkCore.SparkSQL和SparkStreaming的类似之处 SparkStreaming的运行流程 1.我们在集群中的其中一台机器上提交我们的Application Jar,然后就会 ...

  3. @Autowired、@Resource、@Qualifier区别

    @Autowired 1.属于spring的注解,如果不想和Spring耦合的太紧,就不推荐使用. 2.默认情况下,要求依赖对象必须存在,不能为null.如果允许为空,那么设置属性值required为 ...

  4. Cloudera Manager和CDH版本的对应关系

    来源:https://www.cloudera.com/documentation/enterprise/release-notes/topics/rn_consolidated_pcm.html#c ...

  5. Netty中CompositeByteBuf的理解以及读写操作

    转载请注明出处 https://www.cnblogs.com/majianming/articles/the_composite_byte_buf_read_and_wite_operation_o ...

  6. 133.在django中使用memcached

    1. 在django中使用memcached,可以在settings.py文件中DATABASES变量下面配置CACHES缓存相关配置信息,只允许本机连接memcached就可以设置LOCATION为 ...

  7. 【转载】深入理解Java虚拟机笔记---运行时栈帧结构

    栈帧(Stack Frame)是用于支持虚拟机进行方法调用和方法执行的数据结构,它是虚拟机运行时数据区的虚拟机栈(Virtual Machine Stack)的栈元素.栈帧存储了方法的局部变量表,操作 ...

  8. 论文阅读笔记(四)【TIP2017】:Video-Based Pedestrian Re-Identification by Adaptive Spatio-Temporal Appearance Model

    Introduction (1)背景知识: ① 人脸识别是具有高可靠性的生物识别技术,但在低解析度(resolution)和姿态变化下效果很差. ② 步态(gait)是全身行为的生物识别特征,大部分步 ...

  9. [CF546C] Soldier and Cards - 模拟

    两个人玩牌,首先两个人都拿出自己手牌的最上面的进行拼点,两张拼点牌将都给拼点赢得人,这两张牌放入手牌的顺序是:先放对方的牌再放自己的.若最后有一个人没有手牌了,那么他就输了,求输出拼点的次数和赢得人的 ...

  10. Wannafly Camp 2020 Day 6I 你吓到我的马了.jpg - BFS

    暴力BFS即可 #include <bits/stdc++.h> using namespace std; int n,m,f[105][105]; char s[105][105]; s ...