热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html5新标签布局应用指南

html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法。大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局,这是种非常高效的方法,可以将整

html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法。

大多数前端的朋友在设计网站时主要应用

标签构造盒子进行布局,这是种非常高效的方法,可以将整体的布局分拆成为各个部分的布局。在html5中我们可以省去更多的时间对盒子的属性进行设置。下面两图是对传统方法与HTML5布局方法的对比,可以看出,两种方法都能实现我们的设计思想。


alt
="Bok Choi" />
<figcaption>Bok Choifigcaption>
figure>
<hgroup>
<h2>Japanese Vegetarianh2>
<h3>Five week course in Londonh3>
hgroup>
<p>A five week introduction to traditional
Japanese vegetarian meals, teaching you a
selection of rice and noodle dishes.
p>
article>
a>

:figure提出的主要原因是在传统的html语言中我们对内容的补充说明需要利用其它标签,而figure与figcaption搭配使用可以增加代码的可读性(没错就是只有这个功能)

<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clarka>figcaption>
figure>

这些新的元素在旧版本浏览器中会被当做行内元素,所以为了保证页面的正常显示,可以加入以下代码:

css:
header, section, footer, aside, nav, article, figure
{
display: block;}
html:

 HTML的主要有点是能够让开发者更加语义化的开发页面,比如在HTML之前各个开发者对header都可能会按自己的习惯命名,而HTML5将头部都统一的命名为了,避免了开发者之间代码的复杂性。

 


推荐阅读
author-avatar
IKUN
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有