快捷搜索:

网页设计中典型的header代码结构

页面中header部分一样平常位于最上端(无意偶尔根据必要也会位于某一侧,不管它在页面中的位置若何,在XHTML代码中它老是优于其它元素先加载),内容主要包括网站名称(Logo,次级标题可能是网站的一句口号等)和网站的导航部分。在执行Web标准的今世收集中,Web中对付header的代码布局彷佛已经趋于稳定化。下面是一个范例的header代码布局:

dudo 博客

首页

CSS

XHTML

JavaScript

这段代码我们可以经由过程添加CSS代码来实现多种结构样式。

之以是说是范例的结构要领,由于它既够简洁又有语义。阐清楚明了标签内容在页面中的感化和紧张层次,、

无序列表列出了站内的所有主要内容分类,并经由过程

标签阐明它们是同级相邻的,等等,诸如斯类

然则我们要斟酌斟酌。导航(也便是我们的menu)在页面应该处于什么样的位置呢?和通俗文真相比,它们肯定会处于更高档的位置之上。或者这么说,导航(menu)应该和网站标题的关系加倍亲密一些。在我们上面的代码布局中,我们看不出menu和之间的关系来,或者说这些、

标签与的关系和footer中的、

与的关系没有任何差别。

是以我们要换一个要领来表达这个语义。我们很轻易就会想到应用、、。来定义一个列表,阐明隶属关系。是以上面的header部分我们可以这样来写:

dudo 博客

首页

CSS

XHTML

JavaScript

假如你还有其它的内容要在header中呈现,则可以共同、

一路应用:

dudo 博客

首页

CSS

XHTML

JavaScript

加入收藏

设为首页

Engling Version

这段代码彷佛加倍饱满一点。我们只从代码就能看出标题与导航的关系,便是、的关系。

这彷佛有一个问题:没有了!是的,我们为了表达标题和导航(menu)之间的关系放弃了的应用。这里,我对是否要在网站标题中应用持狐疑立场。以我的不雅点,不应该呈现在页面内容的外围。而我们常常这么去应用(我也常常去这样应用)是为了前进你的“网站标题”在页面中的紧张程度。假如对付首页来说可以这么做的话,那么对付子页面来说,页面的内容才是最紧张的。有人这么去理解的应用:网站标题处于最高层次,以是它应该应用,而页面中的所有必要应用标题的地方都应该应用、等等。按这种说法,彷佛只能在一个页面中呈现一次。首先,W3C对付标题的规定中没有这一条,其次,导航(menu)要比文章标题级别要高(由于网站的目录便是:网站——分类(用menu来表示)——文章)以是导航应该用二级标题,充其量文章的标题也只能用个。这无疑是一种过度语义化,我们根据自己的理解付与了标签不具有的含义。不雅看本站更多。

要想凸起标题的紧张,只用一个措施足够:在中指定...的内容即可。是以,小我建议,在中的设计代码布局应用、、要比应用和更具语义。假如你感觉网站的标题部分就应该用来表示,那么可以在中嵌套,合理的语义表达而增添标签并反面代码简洁原则冲突。那么上面的代码

dudo 博客

首页

CSS

XHTML

JavaScript

加入收藏

设为首页

Engling Version

友情提醒:本文纯属一家之言,水平有限,谬误难免,以是您在转载此文时必然要注明出自www.dudo.org 以免替我挨拍。

原文连接:

您可能还会对下面的文章感兴趣: