标签：style blog http color java 使用 os strong
本系列源自《编写高质量代码-web前端开发修炼之道》
HTML，CSS，JavaScript三者中，HTML作为结构，CSS作为修饰，JavaScript作为控制。不管是在前端还是后台，结构都是非常重要的，使用HTML时必须要考虑语义化。
<div class="container"> <h2>标签的语义<a href="#">更多>></a></h2> <p>段落一的内容.....<strong>重要部分</strong>......</p> <p>段落二的内容.....<strong>重要部分</strong>......</p> <p>段落三的内容很长长长长长长长长长长长长长长长长长长长长.</p> </div>
<style type="text/css">
.container{
width: 400px;
margin: 0 auto;
background-color: #ff0;
}
h2{
position: relative;
border-bottom: 1px dashed #333;
}
h2 a{
position: absolute;
right: 0;
top: 0;
}
p{
text-indent: 2em;
line-height: 150%;
margin: 0 0 1em 0;
}
strong{
color:red;
font-weight: normal;
}
</style><div class="container"> <div class="title"> <h2>标签的语义</h2> <a href="#">更多>></a> </div> <p>段落一的内容.....<strong>重要部分</strong>......</p> <p>段落二的内容.....<strong>重要部分</strong>......</p> <p>段落三的内容很长长长长长长长长长长长长长长长长长长长长.</p> </div>CSS代码就不贴了，将锚点从标题中提出来，同时在二者外再加一个div块，表示他们形式上应该属于一个整体。方案二结构看起来要清晰的多。
<form action="" method="" class="fieldset">
<fieldset>
<legend>登录表单</legend>
<p>
<label for="name">账号：</label>
<input type="text" id="name"/>
</p>
<p>
<label for="pw">密码：</label>
<input type="text" id="pw"/>
</p>
<input type="submit" value="登录" class="subBtn">
</fieldset>
</form>
<table> <caption>表格标题</caption> <thead> <tr> <th>实现方式</th> <th>代码量</th> <th>搜索引擎友好</th> <th>特殊终端兼容</th> </tr> </thead> <tbody> <tr> <th>table 布局</th> <td>多</td> <td>差</td> <td>一般</td> </tr> <tr> <th>乱用标签</th> <td>多</td> <td>差</td> <td>一般</td> </tr> </tbody> </table>
标签：style blog http color java 使用 os strong
原文地址：http://blog.csdn.net/liquanfeng326/article/details/38360961
