DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML代碼編寫的常用5個原則以及原因
HTML代碼編寫的常用5個原則以及原因
編輯:HTML和Xhtml     

網頁制作poluoluo文章簡介:每一個編程人員在編寫代碼方面都因個人喜好而擁有自己的編寫風格。我們沒有必要都用相同的方式制作文檔頁面。有時決定用一個標簽元素,而其他的編程人員可能選擇其他的解決方案。在這篇文章裡我列舉了5個我最常用的編寫偏好並說明我的理由。

每一個編程人員在編寫代碼方面都因個人喜好而擁有自己的編寫風格。我們沒有必要都用相同的方式制作文檔頁面。有時決定用一個標簽元素,而其他的編程人員可能選擇其他的解決方案。在這篇文章裡我列舉了5個我最常用的編寫偏好並說明我的理由。

一、導航:無序列表 對 其它標簽元素
miaobao04
用最常用的“無序列表“來寫導航的理由是顯而易見的,它代表一列鏈接,這本身就有足夠的理由應選擇列表標簽。但需要移除list列表的默認樣式,以使其更有意義。
另一個好處可能超出你的想象:你建立一個list列表,同時裡面添加a鏈接,用css可以控制定義list列表裡面一串元素。

<ul><li><a href="#">收集分享</a></li></ul>

二、路徑(面包屑):p段落標簽 對 list列表標簽
miaobao

我們可以一起探討這個問題,如果你有其它更好的方式請告訴我們。就我個人而言,我更喜歡用如下的代碼寫路徑(面包屑)。(然而我不經常使用>>符號)。

<p id="breadcrumbs"><a href="#">首頁</a> » <a href="#">關於我們</a> </p>

網站路徑(面包屑)在某一頁面裡面是有層級關系的,按道理說應該嵌套list列表來顯示層級關系,但是如果你的list的列表裡面只有一項的話你是怎麼看待這種情況的?我個人感覺應該將網頁路徑(面包屑)顯示在一行裡面。

三、Button 對 Input
我已經記不清最後一次使用input type=”submit”是什麼時候了,但我很久以前就不這麼使用了,原因有兩個:為什麼button元素非要輸入type=”submit”,botton就是它本身的元素,在代碼裡面botton很容易識別,並且用css很容易定義(不是所有的老版本的浏覽器支持這個元素標簽屬性)。並且它也允許我們在它裡面寫入其他標簽元素,這樣擴展了我們對它可塑性的可能性。

<button type="submit">Submit Form</button>

四、留言:有序列表(ol) 對 無序列表(ul)
miaobao02
list列表真的很棒!有3種不同類型(有序、無序和定義列表),它們各有各的用途。可能你對何時使用有序列表(ol),何時使用無序列表(ul)有所疑惑,因為它們什麼時候使用都是講得通的。留言有點像是教科書裡面按時間的先後順序排列整齊的例子,向上自然排序。每一個評論留言都對應著一個固定的時間,所以留言評論結構應該用有序列表(ol)。

<ol>
	<li>
	<ul>
	<li><img src="path-to-gravatar.gif" alt="Author's name" /></li>
	<li><a href="url-to-authors-homepage.html">Author's name</a></li>

	<li>posted on date-goes-here</li>
	</ul>
	<div>Comment text goes here...</div>
	</li>
</ol>

五、label/input:div 對 其他標簽元素
miaobao03
給label/input外鑲嵌父結構,什麼標簽元素才是最好的選擇那?

<label for="contactName">Your Name</label>
<input type="text" name="contactName" id="contactName"  />

使用恰當的標簽代碼在以前是可以探討的,但現在我還是選擇了用div來鑲嵌label/input,label和與之相關聯的被看做一個整體。div元素擁有很廣的語義特性,同時它可以適應任何形勢。

<div>
	<label for="contactName">Your Name</label>
	<input type="text" name="contactName" id="contactName"  />
</div>

中文原文:我的5個html編寫偏好
英文原文:My Top 5 HTML Coding Preferences

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved