浅析移动设备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中必须要知道的10个顶级命令
Apr 26 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python在文本开头插入一行的实例
2018/05/02 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
解析Python3中的Import
2019/10/13 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
信息技术毕业生自荐信范文
2014/03/13 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
人工作失职检讨书
2015/05/05 职场文书
致运动员的广播稿
2015/08/19 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL