浅析移动设备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 相关文章推荐
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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高级OOP技术演示
2009/08/27 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php单例模式的简单实现方法
2016/06/10 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
介绍一下#error预处理
2015/09/25 面试题
煤矿班组长岗位职责
2013/12/29 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
大专护理专业自荐信
2015/03/25 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript