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. Postman使用技巧

    Postman是什么 Postman是chrome的一款插件,用于做接口请求测试,无论是前端,后台还是测试人员,都可以用postman来测试接口,用起来非常方便. Postman安装 官网下载(翻墙) ...

  2. 与soul上的一个妹子聊天有感

    写此篇的原因: 妹子说,我考上公务员了~,当时自己自己顿时哽咽了,不知道说什么,习惯性的说了句,恭喜恭喜啊.感受到妹子的欢喜与喜悦,我也没必要打扰她的兴致,她开心就好了嘛. 每个人的成就都是自己奋斗的 ...

  3. springBoot代码和依赖分开打包

    目的: 1.分离代码和依赖(包括第三方的引入包) 2.分离配置文件到外部 3.修改/META-INF/MANIFEST.MF中加载依赖包的位置和启动类,包含第三方依赖jar包 先查看项目的结构 由于我 ...

  4. 4.Docker Compose 部署 Nexus

    什么是 Nexus Nexus 是一个强大的 Maven 仓库管理器,极大地简化了内部仓库的维护和外部仓库的访问.2016 年 4 月 6 日 Nexus 3.0 版本发布,相较 2.x 版本有了很大 ...

  5. [POI2008] PLA-Postering - 单调栈

    给你 \(n\) 个相连的矩形建筑,让你用最少海报把他们覆盖掉,海报不能重叠,也不可以高出被覆盖的矩形. Solution 考虑维护一个单调递增的栈,每次插入时弹掉所有比自己高的,如果自己和末端一样高 ...

  6. 回溯经典（指定位置N皇后问题）

    N皇后问题自不必多说,这道题的先行条件是在放置的时候已经指定了一个棋子的位置. 输入第一行为N,第二行为指定棋子的坐标(x,y):输出方案总数以及按字典序升序的各种方案. 思路: 首先是回溯,其次对待 ...

  7. xlrd模块-读取Execl表格

    #xlrd模块 读取execl表格 import xlrd Execl = xlrd.open_workbook(r'Z:\Python学习\python26期视频\day76(allure参数.读e ...

  8. 本机添加多IP绑定网站

    查询IP 显示为1个IP 点击更改适配器 点击高级 进行添加IP 点击添加 ipconfig 查看效果 注~!:在IIS中可以在这里添加多IP然后绑定

  9. IntelliJ IDEA 2019.1.3 最新破解教程【最强 可用至2099年】

    本文包括最新[2019.1.2]安装 和[2018.3.2](推荐)安装 ①IntelliJ IDEA 2018.3.2安装永久安装[最强]  一. 在官网下载IDEA安装包  链接:https:// ...

  10. Codeforces1295D. Same GCDs （欧拉函数）

    https://codeforces.com/contest/1295/problem/D 设gcd(a,m)= n,那么找gcd(a +x ,m)= n个数,其实就等于找gcd((a+x)/n,m/ ...