html語義化- form表單
摒棄table，不是指單純的使用div+css，而是使用語義化的Xhtml頁面結構+與結構隔離的css樣式：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html語義化-form表單</title>
<style type="text/css">
form{
background-color:#ccc;
}
fieldset{
border:none;
padding:0;
margin:0;
}
legend{
display:none;
}
p{
margin:0;
padding:0;
}
</style>
</head>
<body>
<!-- 語義化表單 -->
<form action="" target="_self" method="post">
<fieldset>
<legend>登陸表單</legend>
<p>
<label for="userName">使用者名稱</label>:<input type="text" id="userName"/>
</p>
<p>
<label for="password">密 碼</label>:<input type="text" id="password"/>
</p>
<input type="submit" value="登陸"/>
</fieldset>
</form>
<br /><br />
<!-- 非語義化表單 -->
<form action="" target="_self" method="post">
<div>
使用者名稱:<input type="text" id="userName"/>
</div>
<div>
密 碼:<input type="text" id="password"/>
</div>
<input type="submit" value="登陸"/>
</form>
</body>
</html>
兩個表單，一樣的表現，不一樣的結構，不一樣的製作水準;
如果你不是搜尋引擎或者萬眾矚目的網站，請不要吝嗇有助於語義化的程式碼。