浅析移动设备HTML5页面布局


Posted in HTML / CSS onDecember 01, 2015

我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子。
在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。
下面简单介绍一下这个元素:
1.header
header>元素定义文档的页面组合,通 常是一些引导和导航信息,标签内通常包含 secti- on的头部信息,如h1~h6 或 hgroup等。

复制代码
代码如下:

<header>

<h1>HTML5布局学习</h1>

<P>勤学苦练</p>
</header>

与下面的代码是一致的:

复制代码
代码如下:

<div class=”header”>

<h1>HTML5布局学习</h1>

<P>勤学苦练</p>
</div>

2.footer
<footer>元素定义文档或章节的末尾部分 包含一些章节的基本信息,如作者信息,相关连 及版权信息。 一个页面上可以使用多个 header 和footer,也可以插入一些别的元素,比如div ul 等。

复制代码
代码如下:

<footer>

<p>隐私信息</p>

<p>关于我们</p>
</footer>

3.nav
<nav>元素用于定义构建导航,显示导航 链接,用于放入一些当前页面的主要导航链接。

复制代码
代码如下:

<footer>

<nav>

<ul>

<li>隐私信息</li>

<li>版权信息</li>

<li>关于我们</li>

<li>联系我们</li>

</ul>

</nav>
</footer>

4.aside
<aside>元素用于定义一个页面的区域, 用来表示包含页面相关的主要内容,用于装载非 正文的主要内容,如广告栏,侧边栏等。
5.article

<article>元素表示文档,页面,用来显示一块独立的文章内容,如一则网站新闻,一偏博客文章等。

复制代码
代码如下:

<article>

<header>

<h1>HTML5新元素</h1>

<p>article 新元素</p>

<footer>

<ul>

<li>文章标签1</li>

<li>文章标签2</li>

</ul>

</footer>

</header>

</article>

6.section

 <section>元素第一位文章中的节,比如章节,页眉,页脚。

复制代码
代码如下:

<article>

<section>

<h1></h1>

<p></p>

</section>

<section>

<h1></h1>

<p></p>

</section>

</article>

7.hgroup

<hgroup>定义为对网页或区段的标题元素进行组合,通常使用多级别的h1~h6标签节点进行分组。

复制代码
代码如下:

<header>

<hgroup>

<h1></h1>

<h2></h2>

</hgroup>

</header>

实际上,除了我们介绍的语义标签外,在HTML5的标准中还定义了更多不同语义的标签。
* audio:定义音频内容。
* canvas:定义画布功能。
* command:定义一个命令按钮。
* datalist:定义一个下拉列表。
* details:定义一个元素的详细内容。
* dialog:定义一个对话框。
* keygen:定义表单里一个声称的键值。
* mark:定义有标记的文本。
* output:定义一些输出类型。
* progress:定义任务的过程。
* source:定义媒体资源。
* video:定义一个视频内容。
虽然HTML5标准中新增了很多新的元素,但实际上在移动Web应用中使用的机会并不多。
audio及video等标签虽然可以在移动Web应用中得到实践,但由于其性能、兼容性以及页面渲染等原因,它们还不能很好地应用到智能手机以及平板电脑的Web浏览器上。

HTML / CSS 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 #HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 #HTML / CSS
HTML5标签使用方法详解
Nov 27 #HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 #HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 #HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 #HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 #HTML / CSS
You might like
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
python操作MongoDB基础知识
2013/11/01 Python
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python实现句子翻译功能
2017/11/14 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
查看Django和flask版本的方法
2018/05/14 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
初一生物教学反思
2014/01/18 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
保护环境倡议书范文
2014/05/13 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
大学生简短的自我评价
2014/09/12 职场文书
项目经理岗位职责
2015/01/31 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书