浅析移动设备HTML5页面布局

1、浅析移动设备html5页面布局我们结合移动设备（手机和平板电脑）的特性，介绍 html5中新增的语义化标签元素，以及在移动web浏览器下 web页面布局的知识及例子。在html5标准添加的新元素中，用于常见页面结构的 包括headerfooterfooternavasideasidearticlesectionhgroup 。 下面简单介绍一下这个元素：1. headerheadergt;元素定义文档的页面组合，通常是一些引导 和导航信息，标签内通常包含secti-on的头部信息，如 hlh6 或 h group 等。代码如下：it;headerg t;it;hlgt ;html5 布局学习

2、1 t ;/hlgt:lt;pgt;勤学苦练 lt;/pgt;it ;/he adergt;与下面的代码是一致的：代码如下：it; divcl ass=v header ” gt;it:hl gt;html5 布局学习 it;/hlgt:1 t ;pgt;勤学苦练 1 t ;/pgt;lt;/divgt;2. foo terit;foo tergt;元素定义文档或章节的末尾部分包含一 些章节的基本信息，如作者信息，相关连及版权信息。一 个页面上可以使用多个header和f ooter,也可以插入一些 别的元素，比如di vul等。代码如下：1 t;footergt;it; pgt;隐私信息it

3、; /pgt;lt;pgt;关于我们 it;/pgt;it; /fo otergt;3. na vltjnavgt ;元素用于定义构建导航，显示导航链接，用 于放入一些当前页面的主要导航链接。代码如下：it ;footergt;1 t;navgt; ltjulgt;it; 1 igt;隐私信息 it ;/ligt;it; ligt;版权信息 it ;/ligt;it : ligt;关于我们 1 t;/ligt;1 t; ligt;联系我们it ;/ligt;it ;/ulgt;lt;/navgt;it ;/f ootergt;4. a sidelt;as idegt;元素用于定义一个页面的区域

4、，用来表示 包含页面相关的主要内容，用于装载非正文的主要内容， 如广告栏，侧边栏等。5. artic leit;arti clegt;元素表示文档，页面，用来显示一块独 立的文章内容，如一则网站新闻，一偏博客文章等。代码如下：rticlegt;it ;headergt;ltjhlgt ;ht ml5 新元素 it ;/h lgt;lt;pg t;article 新元素 lt;/pgt;it ;footergt;1 t;ulgt;it ; ligt;文章标签 1 it ;/ligt;it; ligt;文章标签 21t ;/ligt;lt;/ulgt;it :/footergt;it;/heade

5、rg t;it;/artic legt;6. sect ionit;sec tiongt;元素第一位文章中的节，比如章节，页 眉，页脚。代码如下：it;article gt;it;secti ongt;it ;hlg t; it ;/hlgt; lt;pgt;lt;/pgt;it;/sec tiongt;it; s ectiongt;it ;hlgt; it ;/h lgt;it;pgt;it;/pgt; lt;/sectiongt;it;/article gt:7. hgroupltjhgroup gt;定义为对网页或区段的标题元素进行组 合，通常使用多级别的hphe标签节点进行分组。代码如

6、下：it ;hea dergt;it; hg roupgt;lt;h lgt; it ;/hlg t;it ;h2gt; 1 t ;/h2gt;it;/hgroupgt;1 t;/headergt ;实际上，除了我们介绍的语义标签外，在h tml5的标 准中还定义了更多不同语义的标签。*audio:定义音频内容。canvas:定义画布功能。*com mand:定义一个命令按钮。*datalis t:定义一个下拉列表。*deta订s:定义一个元素的详细内容。dialog:定义一个对话框。*ke ygen:定义表单里一个声称的键值。*mar k:定义有标记的文本。output:定义一些输出类型。*prog ress:定义任务的过程。source:定义媒体资源。*vide o:定义一个视频内容。虽然html5标准中新增了很多新的元素，但实际上在 移动web应