HTML5 移动设备页面布局 - 1

%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 视频内容