html5 移动页面,html5入门到精通,移动设备的html5页面布局
移动设备的html5页面布局
我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子。
HTML5标准添加的新元素当中,用于标识常见页面结构的包括:section、header、footer、nav、article和mark等。
header
元素定义文档的页面组合,通常是一些引导和导航信息。而定义中说明
标签内通常包含section的头部信息,如hl-h6或hgroup等,但这不是必需的。同时也可以包含列表、搜索框或主题相关的Logo。如下代码所示:
zzfriend.com,这是一个html5社区
这篇文章主要介绍HTML5新标签含义
实际上,这是一段带有含义的HTML标签,用来表示头部信息,里面还有h1和p的内容,而且与以下的页面代码是一致的。
zzfriend.com,这是一个html5社区
这篇文章主要介绍HTML5新标签含义
footer
元素定义文档或章节的末尾部分,通常包含一些章节的基本信息,如作者信息、相关链接及版权信息。而联系信息相关的内容一般会配合
标签。例如以下代码:
隐私信息|版权信息
关于我们|联系我们
需要注意的是,一个HTNfL页面上可以允许有一个或多个header和footer。
在footer标签内,不仅可以包含p标签等相关内容,同时也可以插入比如nav、ul、div等其他元素。因此需要根据实际情况而布局页面。从上述代码可以看出,虽然footer标签的内容插入了部分版权信息及相关的联系信息,但并不是带含义的内容,下面将介绍nav元素,它可以帮助此部分含有语义内容。
nav
元素定义为用来构建导航,显示导航链接。nav标签的主要作用是放入一些当前页面的主要导航链接,例如在页脚显示一个站点的导航链接。我们将刚才footer标签的实例代码稍微更改一下,以表达导航语义的性质,如下代码所示:
- 隐私信息
- 版权信息
- 联系我们
代码改写后,footer页脚内容在页面中已经表达出基本的含义,这就是一个页脚的导航链接列表.当然,nav标签并不仅限于使用在footer中,其具体使用的地方并没有严格的要求。一般情况下,作为导航标签,在页面中任意地方都可以使用nav元素。但是为了更好地对页面进行规划和被搜索引擎收录,建议在真正含有导航功能意义的地方,才使用nav元素标签。
aside
元素定义一个页面的区域,用来表示包含和页面相关的主要内容,其作用主要是装载非正文类的内容,例如广告、侧边栏等。在传统的WordPress博客模板中,其基本的布局主要是两栏或三栏布局。
移动设备的html5页面布局
上图所示的布局方式属于典型的博客页面布局,该布局的右侧边栏部分及区域都可以调整成前面提到的几个HTML5元素标签.
article
在HTML5规范中,article元素表示文档、页面,用来显示一块独立的文章内容,如一则网站新闻、一篇博客文章等。anicle标签是可以相互嵌套的。例如如下代码:
html5新元素article示例标题
article新元素内容区域
- 文章标签1
- 文章标签2
我们来解释一下上述代码。代码中使用article表示一篇文章主题内容元素,其内主要由三部分组成。其中header部分主要表示文章的头部信息,一般包含标题、时间、作者等信息,代码中使用h1元素表示文章的标题。第二部分目前使用p元素表示文章的主体内容。第三部分是footer,该部分一般包含文章标签等相关信息。
section
在HTML5规范中,section元素定义为文档中的节。比如章节、页眉、页脚或文档中的其他部分。
例如如下代码:
Apple
iPhone手机内置的web游览器是mobile safari
Android平台下自带的移动Web游览器是Android Browser
hgroup
HTML5将hgroup标签定义为对网页或区段的标题元素进行组合,通过使用多级别的hl—h6标签节点进行分组,例如副标题、标签行等。例如:
本网站是一个关于HTML5的网站
这篇文章主要介绍HTML5新元素
代码中,我们在header内使用hgroup元素表示一组信息。hgroup内共有hl和h2两部分元素内容,它们都分别表示为主标题和副标题等。
对于hgroup元素的用法,虽然没有严格的要求,但适当的使用hgroup元素对于SEO有一定的好处,因此hgroup标签内建议使用hl-h6标签。
更多的HTML5新元素
实际上,除了我们介绍的语义标签外,在HTML5的标准中还定义了更多不同语义的标签。
* audio:定义音频内容。
* canvas:定义画布功能。
* command:定义一个命令按钮。
* datalist:定义一个下拉列表。
* details:定义一个元素的详细内容。
* dialog:定义一个对话框。
* keygen:定义表单里一个声称的键值。
* mark:定义有标记的文本。
* output:定义一些输出类型。
* progress:定义任务的过程。
* source:定义媒体资源。
* video:定义一个视频内容。
虽然HTML5标准中新增了很多新的元素,但实际上在移动Web应用中使用的机会并不多。
audio及video等标签虽然可以在移动Web应用中得到实践,但由于其性能、兼容性以及页面渲染等原因,它们还不能很好地应用到智能手机以及平板电脑的Web浏览器上。
下一篇文章我们将探讨目前智能手机或平板电脑上的各种软件界面布局结构,以及如何将这些新元素应用到Web页面布局中。
相关文章:
html5入门到精通(一)-写在前面的
html5入门到精通(二)—移动互联网时代的Web技术
html5 移动页面,html5入门到精通,移动设备的html5页面布局相关推荐
- html与css3入门经典 周靖,HTML5与CSS3从入门到精通
HTML5与CSS3从入门到精通 语音 编辑 锁定 讨论 上传视频 本书针对HTML5和CSS3的*标准进行及时的更新和修订,包含的主题有:Inter和Web概念:创建HTML5网页:用CSS配置颜色 ...
- html5从基础到入门,Html5从入门到精通系列2:Html5基础
Html5从入门到精通系列2:Html5基础 (2015-04-04 11:36:53) 标签: html5 html5教程 html5视频教程 html5从入门到精通 2-1.1.HTML5简介.M ...
- HTML5+CSS3+JavaScript从入门到精通(标准版)
作者:未来科技 出版社:中国水利水电出版社 品牌:智博尚书 出版时间:2017-05-01 HTML5+CSS3+JavaScript从入门到精通(标准版)
- html5+css+javascript深入学习实录pdf,HTML5+CSS3+JavaScript从入门到精通 微课精编版.pdf...
作 者 :前端科技 出版发行 : 北京:清华大学出版社 , 2018.08 ISBN号 :978-7-302-50220-3 页 数 : 529 原书定价 : 79.80 主题词 : 超文本标记语言- ...
- 《HTML5移动应用开发入门经典》—— 2.4 HTML5中的HTML语法变化
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第2章,第2.4节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
- 你评论,我赠书~【TFS-CLUB社区 第9期赠书活动】〖HTML5+CSS3+JavaScript从入门到精通(微课精编版)(第2版)〗等你来拿
文章目录 ❤️
- 你评论,我赠书~【哈士奇赠书 - 15期】〖HTML5+CSS3+JavaScript从入门到精通(微课精编版)(第2版)〗等你来拿
文章目录 ❤️
- 阅读《Android 从入门到精通》(29)——四大布局
LinearLayout 类方法 RelativeLayout 类方法 TableLayout 类方法 AbsoluteLayout 类方法
- “卜算子·大数据”学习系列原创文章、源码——从入门到精通
大数据 big-data :white_check_mark: 转载请注明出处与作者信息(如下) 原创作者:王小雷 作品出自:https://github.com/wangxiaoleiAI/big- ...
- html+css+布局从入门到精通,CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版[48MB]...
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
最新文章
- 使用GitLab或者Github简单实用地将数据导入Colab的方法
- dll文件是什么语言编写的_Win7系统当中libeay32.dll文件丢失的解决方法是什么?...
- 画架构图的软件_程序员为什么要学会画技术架构图?
- how to identify keywords for search on Google Scholar?
- python json删除字段_如何使用python删除json对象?
- Spring Bean垃圾回收
- 炒冷饭系列:设计模式 单例模式
- Python笔记4 实例之批量修改文件名
- 编译原理活动记录(虎书)
- 软件实施工程师的发展前景
- SPH(光滑粒子流体动力学)流体模拟实现五:PCISPH
- gitgub代码汇总
- 金字塔图表 html,Highcharts 柱形图(柱状图及条形图)之 金字塔图 演示
- 极坐标解圆锥曲线三角形面积范围问题
- 【JavaWeb学习】HTML的基础标签
- FlexRay学习笔记_2
- Numpy中的数组变形操作01——reshape() 重塑, flatten()/reval() 扁平化
- 用java做一个能赚钱的微信群聊机器人(PC协议)
- ArcGIS在线应用介绍(4)辽宁省地理信息共享平台(公众版)
- idea设置背景颜色和侧边栏颜色为豆沙绿
热门文章
- 清单革命 <<读后感>> _(:з」∠)_
- ACRO2010__系统性综述: 达到缓解的AS患者能否停用TNF拮抗剂
- 《算法竞赛进阶指南》0.8总结与练习(1)
- allow_pickle什么意思_in pickle是什么意思
- Java启动参数(-, -X, -XX参数)详解
- AUTOCAD——偏移命令、移动命令
- 在Ubuntu 18中安装Pycharm及创建Pycharm快捷方式
- ps处理黑眼圈黑眼袋的方法集合
- 在Win7中设置PPT放映时显示备注
- 1N4001-1N4007 整流二极管比较