浅析移动设备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字体效果的设置方法小结
Jun 13 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
js动态设置鼠标事件示例代码
2013/10/30 Javascript
node.js中watch机制详解
2014/11/17 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
机关职员工作检讨书
2014/10/23 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
劳动仲裁调解书
2015/05/20 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
python 镜像环境搭建总结
2022/09/23 Python