您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 移動前端 >> 瀏覽設計教程

Div標簽在網(wǎng)站建設中的一些規(guī)范

圖趣從事網(wǎng)站建設行業(yè)已有5年有余,今天抽出點時間與各位站長們分享下個人多年來對DIV+CSS的架構的一些規(guī)范和經(jīng)驗。先說下概念,div是一個塊級元素,同時也意味著自動換行。它后面經(jīng)常跟隨著class或者id這樣的元素,亦或是兩者。主要的差異是class用于元素組,而id用于標識唯一的元素。常規(guī)的網(wǎng)站架構通常為:

div定義一個頭部通用。為規(guī)范化,通常命名為header。

div定義主題框架,為規(guī)范化,通常命名為content或者wrapper。

div定義腳步框架,為規(guī)范化,同化成命名為footer。

在定義為header的div中應出現(xiàn)一個h1標簽,用于詮釋整個網(wǎng)站的內(nèi)容,應包括網(wǎng)站的主關鍵詞。接著用ul無序標簽做導航排列列表。h2標簽來說可以出現(xiàn)1-3次,接著就是權重依次降低的h3標簽,在主頁可用于小版塊的標題。

下面是在做前端架構中必須注意的一些問題。

一是不要對Heading標簽胡亂使用,h1到h6html里面一共有6種Heading標簽,作用依次減少,標題標簽不僅能幫助訪客清晰的了解網(wǎng)站的結構和一大段未讀文字的大義,也能幫助搜索引擎更好的了解網(wǎng)頁的結構;

二是應該正規(guī)Heading標簽的使用方法,比如現(xiàn)在筆者看到很多的網(wǎng)站無法正確將Heading標簽進行分級。比如在內(nèi)容頁里面,將網(wǎng)站的標題定義在h1中,也就是網(wǎng)站的通用頭部。h2作為一篇文章的標題出現(xiàn),在主頁中可以作為對主頁或者整個網(wǎng)站的表述出現(xiàn)。那么文章中的目錄或者主頁中的小欄目統(tǒng)一用來描述,這樣一來就可以將Heading標簽標準化,不管對于搜索引擎還是用戶都會有所幫助。

三是應當讓定義的Heading標簽規(guī)范,讓用戶看到標簽能對頁面產(chǎn)生一定的了解;

四是很多站長經(jīng)常出現(xiàn)的問題:泛濫使用Heading標簽,而忽略對strong和em標簽的使用。

隨著網(wǎng)頁設計技術的進步和人們對用戶體驗的要求越來越高,將前端工作分割為平面設計和頁面重構已是大勢所趨。作為專業(yè)的頁面重構人員應該在平時的工作中多反思多總結,在無規(guī)范中尋找規(guī)范,在規(guī)范中尋求創(chuàng)新,只有這樣才能使得行業(yè)越來越規(guī)范,也才能進一步提升訪客的用戶體驗。

這里大家可以移步到之前圖趣分享的網(wǎng)頁前端-網(wǎng)頁切圖命名規(guī)范。。

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd1412.html
網(wǎng)頁設計中高質(zhì)量flash轉高清gif
網(wǎng)頁前端IE-BUG系列-3像素縫隙錯誤,也稱文本慢跑錯誤
圖趣網(wǎng)微信
建議反饋
×