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. 安装AB到CentOS（YUM）

    运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:httpd-tools-2.4.6 硬件要求:无 安装过程 1.安装YUM-EPEL源 HTTP ...

  2. jsp环境搭建

    jsp开发环境需要JDK与Tomcat,需先下载JDK组件与tomcat组件 JDK地址:https://www.oracle.com/technetwork/java/javase/download ...

  3. Costco这样的超级零售商，能不能干掉电商？

    名创优品创始人叶国富曾说过,Costco只是没有来到中国(大陆),如果它来了,中国现在的零售业全部都会"死光".叶国富的话,似乎一语成箴. 随着Costco正式入华,其正在彻底搅动 ...

  4. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

  5. from selenium.webdriver.chrome.options import Options中add_argument 常用参数表收集

    chrome_options.add_argument("xxx") 序号 参数 说明 1 --allow-outdated-plugins 不停用过期的插件. 2 --allow ...

  6. Arcgis runtime sdk .net 二次开发

    前段时间研究了下 arcgis runtime sdk .net 二次开发··这里做个笔记 runtime版本为100.6 基于WPF 开发 命名空间引入 xmlns:esri="http: ...

  7. 使用ESLint+Prettier来统一前端代码风格

    Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...

  8. beego——view 模板语法

    一.基本语法 go统一使用{{和}}作为左右标签,没有其它的标签符号. 使用"."来访问当前位置的上下文,使用"$"来引用当前模板根级的上下文,使用$var来访 ...

  9. ArrayList、LinkedList区别(jdk8)

    /** * jdk8 * ArrayList:底层动态数组实现(未初始化指定数组长度) * add():添加元素时,才初始化数组长度为10.容量不够时,动态扩容策略为: 原容量 + 原容量*0.5 * ...

  10. FC-NVMe阅读摘要（一）

    首字母缩写 IU Information Unit BLS Basic Link Service ELS Extended Link Service PLOGI N_Port Login PRLI   ...