一个典型的Web页面有页眉(header),页脚(footer),导航(navigation),正文(central area)和侧栏(side bar)。现在如果是在HTML 4中,HTML部分中的上述这些专用名词需要使用DIV标签来描述。

但是,如果是在HTML 5,可以专门为这些区域创建特定的元素名,让HTML更具可读性。

以下是形成页面结构的HTML 5元素的更多细节。

  • <header>:表现HTML的标题数据。
  • <footer>:页面的页脚部分。
  • <nav>:页面中的导航元素。
  • <article>:正文内容。
  • <section>:用在正文中定义section或区段内容。
  • <aside>:表现页面侧边栏内容。

HTML 5的页面结构和HTML 4或早先的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. ...

随机推荐

  1. 年底获奖人太多?奖状可以用Smartbi电子表格这么做!

    又到一年年终时,你的年终奖到手了吗?奖金没领到,发个奖状压压惊 今天给大家分享年终奖相关的年终奖状的批量套打功能,保证你的奖状及时到手! 示例说明 现有多个人员的奖励需要通知,需要生成可翻页的奖状.并 ...

  2. shell中echo基础及高级用法详解-渐入佳境

    --作者:飞翔的小胖猪 --创建时间:2021年2月19日 1.1 基础用法 echo命令用来输出文本,在shell脚本中用来输出提示信息用的比较多. 单引号:原样输出所有的内容,不用转义就能输出特殊 ...

  3. Eclipse Debug 调试步骤及注意事项

    debug方法 第一步:打开java代码文件,在左侧双击鼠标设置断点,或者在左侧右键点击Toggle Breakpoint 第二步:点击eclipse上方的"蜘蛛"按钮,点击deb ...

  4. Qt:QDateTimeEdit

    0.说明 QDateTimeEdit类提供了一个用于编辑Date和Time的Widget,它就像下边这样 QDateTimeEdit允许用户使用键盘编辑Date.或者用方向键来增加或减少Date.Ti ...

  5. Java 替换PDF中的字体

    文档中可通过应用不同的字体来呈现不一样的视觉效果,通过字体来实现文档布局.排版等设计需要.应用字体时,可在创建文档时指定字体,也可以用新字体去替换文档中已有的字体.下面,以Java代码展示如何来替换P ...

  6. [ Skill ] 文件读写 & IO 句柄

    https://www.cnblogs.com/yeungchie/ 在 Skill 中使用一种叫做 ioport 类型的变量来操作文件.不过我一般更习惯称为 IO 句柄 (IO/File Handl ...

  7. laravel 7 登录

    1:路由,展示登录表单 Route::group(['prefix'=>'day','namespace'=>'day18'],function (){ // 登录 Route::get( ...

  8. Nginx解决跨域问题No 'Access-Control-Allow-Origin'

    使用nginx在server块下的location块下为请求添加请求头来解决跨域 add_header 'Access-Control-Allow-Origin' '*'; add_header 'A ...

  9. 一些JDK自带的性能分析利器

    有时候碰到服务器CPU飙升或者程序卡死之类的问题,一般都不太好定位.这类bug一般都隐藏的比较深并且还可能是偶发性的,比较棘手. 对于此类问题,一般我们都有固定的分析流程.借助于JDK自带的一些分析工 ...

  10. CentOS7.5环境下Docker环境搭建

    1. 安装wget工具: yum install wget -y 2. 使用wget工具从docker官网下载yum源: wget -P /etc/yum.repos.d/ https://downl ...