本文通过对比语义化与非语义化的HTML表单示例，阐述了摒弃table布局，采用XHTML结构与CSS样式分离的重要性。强调了语义化代码对于提升网页质量和搜索引擎优化的作用。
摒弃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>
两个表单，一样的表现，不一样的结构，不一样的制作水准;
如果你不是搜索引擎或者万众瞩目的网站，请不要吝啬有助于语义化的代码。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
