网页页面设计方案中典型的header编码构造

日期:2021-03-16 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码


网页页面中header一部分1般坐落于最上端(有时依据必须也会坐落于某1侧,无论它在网页页面中的部位怎样,在XHTML编码中它一直优于其它元素先载入),內容关键包含网站名字(Logo,次级题目将会是网站的1句标语等)和网站的导航栏一部分。在实行Web规范的当代互联网中,Web中针对header的编码构造好像早已趋于平稳化。下面是1个典型的header编码构造:
<div id="header">
<h1>dudo blog</h1>
<ul>
<li>主页</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
</ul>
</div>
这段编码大家能够根据加上CSS编码来完成多种多样合理布局款式。
之因此说是典型的合理布局方法,由于它既够简约又有词义。<h1></h1>表明了标识內容在网页页面中的功效和关键层级,<ul>、<li>无编码序列表列出了站内的全部关键內容归类,并根据<li>标识表明它们是同级邻近的,这些,诸这般类。查询更多本站CSS实例教程。
可是大家要考虑到考虑到。导航栏(也便是大家的menu)在网页页面应当处在甚么样的部位呢?和一般文字相比,它们毫无疑问会处在更高級的部位之上。或这么说,导航栏(menu)应当和网站题目的关联更为亲密无间1些。在大家上面的编码构造中,大家看不出menu和<h>之间的关联来,或说这些<ul>、<li>标识与<h1>的关联和footer中的<ul>、<li>与<h1>的关联沒有任何差别。
因而大家要换1个方法来表述这个词义。大家很非常容易就会想起应用<dl>、<dt>、<dd>。<dl>来界定1个目录,<dt><dd>表明附设关联。因而上面的header一部分大家能够这样来写:
<div id="header">
<dl>
<dt>dudo blog</dt>
<dd>主页</dd>
<dd>CSS</dd>
<dd>XHTML</dd>
<dd>JavaScript</dd>
</dl>
</div>
假如你也有其它的內容要在header中出現,则能够相互配合<ul>、<li>1起应用:
<div id="header">
<dl>
<dt>dudo blog</dt>
<dd id="siteMenu">
<ul>
<li>主页</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
</ul>
</dd>
<dd id="userMenu">
<ul>
<li>添加个人收藏</li>
<li>设为主页</li>
<li>Engling Version</div>
</ul>
</dd>
</dl>
</div>
这段编码好像更为圆润1点。大家只从编码就可以看出题目与导航栏的关联,便是<dt>、<dl>的关联。
这好像有1个难题:<h1></h1>沒有了!是的,大家以便表述题目和导航栏(menu)之间的关联舍弃了<h1>的应用。这里,我对是不是要在网站题目中应用<h1>持怀疑心态。以我的见解,<h1>不可该出現在网页页面內容的外围。而大家常常这么去应用(我也常常去这样应用)是以便提升你的“网站题目”在网页页面中的关键水平。假如针对主页来讲能够这么做的话,那末针对子网页页面来讲,网页页面的內容才是最关键的。有人这么去了解<h1>的应用:网站题目处在最高层级,因此它应当应用<h1>,而网页页面中的全部必须应用题目的地区都应当应用<h2>、<h3>这些。按这类说法,<h1>好像只能在1个网页页面中出現1次。最先,W3C针对<h>题目的要求中沒有这1条,其次,导航栏(menu)要比文章内容题目级別要高(由于网站的文件目录便是:网站——归类(用menu来表明)——文章内容)因此导航栏应当用2级题目<h2>,充其量文章内容的题目也只能用个<h3>。这无疑是1种过多词义化,大家依据自身的了解授予了标识不具备的含意。收看本站更多网页页面制做实例教程。
要想突显题目的关键,只用1个方式充足:在<head>中特定<title>...<title>的內容便可。因而,本人提议,在<header>中的设计方案编码构造应用<dl>、<dt>、<dd>要比应用<h1>和<ul>更具词义。假如你感觉网站的题目一部分就应当用<h1>来表明,那末能够在<dt>中嵌套循环<h1>,有效的词义表述而提升标识其实不和编码简约标准矛盾。那末上面的编码
<div id="header">
<dl>
<dt>
<h1>dudo blog</h1>
</dt>
<dd id="siteMenu">
<ul>
<li>主页</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
</ul>
</dd>
<dd id="userMenu">
<ul>
<li>添加个人收藏</li>
<li>设为主页</li>
<li>Engling Version</div>
</ul>
</dd>
</dl>
</div>
友谊提示:本文纯属1家之言,水平比较有限,缪误免不了,因此您在转载此文时1定要注明出自www.dudo.org 以防替我挨拍。
原文联接:http://www.dudo.org/article.asp?id=242
上一篇:网站优化seo要留意的事宜有什么 返回下一篇:没有了