%h2= "2.1 页面语义化简介"

%h3= "header 导航引导信息"
%header
  %h3= "这是一本HTML5移动开发书籍"
  %p= "本章主要介绍HTML5新标签"

%h3= "footer  & nav  文档章节末尾部分  nav 导航"
%footer
  %nav
    %ul
      %li= "私隐信息"
      %li= "版权信息"
      %li= "关于我们"
      %li= "联系我们"

%h3= "aside  装饰非正文的内容 例如 广告 侧边栏"
%aside
  %p= "广告栏"

%h3= "article 文档 页面 显示独立一块文章内容"
%article
  %header
    %h3= "HTML5新元素article实例标题"
    %p= "article 内容区域"
    %footer
      %ul
        %li= "文章标签1"
        %li= "文章标签2"

%h3= "section 文档中的节 如 页眉 章节 页脚 文档中其他部分"
%article
  %section
    %h3= "Apple"
    %p= "iPhone 手机内置移动web浏览器是Safari"

  %section
    %h3= "Google"
    %p= "Android 手机内置移动web浏览器是Android Browser"

%h3= "hgroup 对网页或区段的标题进行组合 副标题 标题行"
%header
  %hgroup
    %h3= "这是一本HTML5移动开发书籍"
    %h4= "本章主要介绍HTML5新标签"

%h2= "2.1.2 HTML5新元素"
%html5
  %ul
    %li= "audio 音频"
    %li= "canvas 画布"
    %li= "command 命令"
    %li= "datalist 下拉列表"
    %li= "details 元素详细内容"
    %li= "dialog 对话框"
    %li= "keygen 表单里一个声称的键值"
    %li= "mark 有标记的文本"
    %li= "output 输出类型"
    %li= "progress 任务的过程"
    %li= "source 媒体资源"
    %li= "video 视频内容"

------------------------------------------------------------------------------------------------------------------------------

移动设备HTML5 页面布局

2.1 页面语义化简介

header 导航引导信息

这是一本HTML5移动开发书籍

本章主要介绍HTML5新标签

footer & nav 文档章节末尾部分 nav 导航

• 私隐信息
• 版权信息
• 关于我们
• 联系我们

aside 装饰非正文的内容 例如 广告 侧边栏

广告栏

article 文档 页面 显示独立一块文章内容

HTML5新元素article实例标题

article 内容区域

• 文章标签1
• 文章标签2

section 文档中的节 如 页眉 章节 页脚 文档中其他部分

Apple

iPhone 手机内置移动web浏览器是Safari

Google

Android 手机内置移动web浏览器是Android Browser

hgroup 对网页或区段的标题进行组合 副标题 标题行

这是一本HTML5移动开发书籍

本章主要介绍HTML5新标签

2.1.2 页面语义化简介

• audio 音频
• canvas 画布
• command 命令
• datalist 下拉列表
• details 元素详细内容
• dialog 对话框
• keygen 表单里一个声称的键值
• mark 有标记的文本
• output 输出类型
• progress 任务的过程
• source 媒体资源
• video 视频内容