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. TChart-图表编辑器的测试

    最近不知怎么的,想研究一下图表.先上效果图: 功能代码: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Class ...

  2. jquery form表单赋值封装

    ;!(function ($) { $.fn.setFormValue = function (options) { var $this = $(this); $.each(options, func ...

  3. React Hooks 笔记1

    useState const [state, setSate] = useState(initialState) 特征: setState 标识稳定,组件重新渲染时不会变化,useState 返回的第 ...

  4. 题解 AT4556 【12/22】

    题目传送门. ___________ 主要思路 我们可以使用\(C++\)语言中的\(string\)字符串来解. 先定义一个字符串\(s\),并输入\(s\). string s; cin>& ...

  5. 1级搭建类107-Oracle 18c 单实例 FS（华为云）公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列除特定项目目前不对外发布,仅作为博客记录,其他公开.如学员在 ...

  6. DFS-B - Dr. Evil Underscores

    B - Dr. Evil Underscores Today, as a friendship gift, Bakry gave Badawy nn integers a1,a2,…,ana1,a2, ...

  7. 3.Docker 操作镜像

    获取镜像 之前提到过,Docker Hub 上有大量的高质量的镜像可以用,这里我们就说一下怎么获取这些镜像. 从 Docker 镜像仓库获取镜像的命令是 docker pull.其命令格式为: doc ...

  8. Laravel通过用户名和密码查询

    一.如果要检查要验证的用户数据是否正确,可以使用: if (Auth::validate($credentials)) { // } 二.但是如果您想通过用户和密码从数据库中获取用户,您可以使用: / ...

  9. 一步步教你如何在ubuntu虚拟机中安装QEMU并模拟arm 开发环境（二）rootfs制作

    过了,一天,周又到了,博主终于可以拿出时间来把上一次没有给大家展示完了的内容今天在这里一并展示给大家,希望和大家共同进步,共同学习,同时我也虔诚的希望各位业界的朋友把自己的工作经验拿出来大家一起分享, ...

  10. （转）java中新生代和老年代

    转自:http://blog.csdn.net/lojze_ly/article/details/49456255 聊聊JVM的年轻代 1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不 ...