前台开发之HTML定义语义化
目的：搜索引擎看不到社觉效果，只能看到代码，通过标签判断内容的语义。通过语义化能让搜索引擎更好识别网页内容。
制作页面步骤：先确定HTML，确定语义的标签，再来选用合适的CSS。
如何确定网页语义是否良好？
去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。
语义化几个关键点：
1.每张网页都必须有一个h1来表示大标题，且一张网页里面只存在一个h1标记。
2.标题与内容
注：只有当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。
(1).单标题内容
<div id="gy" class="mod">
<div class="hd clearfix">
<h2 class="mod-title">网易公司新闻</h2>
</div>
<div class="bd">
<ul class="mod-list sub-list dotline">
<li class="title"><a href="http://tech.163.com/11/1103/11/7HUD3AVS000915BF.html">网易企业邮获最高级安全认证</a></li>
…
</ul>
<ul class="mod-list sub-list">
<li><a href="http://media.163.com/">[传媒]</a> <a target="_blank" href="http://media.163.com/11/1104/10/7I0PG0JM00762H91.html">电视节目生存的底线</a></li>…
</ul>
</div>
</div>
(2).多标题内容
<h2 class="tab-hd tab-u-9 clearfix">
<span class="tab-u current"><a href="http://book.163.com/special/vip_book/">原创</a></span>
<span class="tab-u"><a href="http://book.163.com/special/vip_book/">全本</a></span>
</h2>
<div class="bd tab-bd display-control">
<div class="tab-con current">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200260003/000BNZFL.html?wangshou1"><img src="http://img3.cache.netease.com/book/2011/11/5/20111105085539de923.jpg" alt="天书：神秘家族的字符" title="天书：神秘家族的字符" height="90" width="120" /><cite>天书：神秘家族的字符</cite></a>
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200260001/000BNYbZ.html?wangshou1">无法呼吸：精神病院里的杀手</a></h3>
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200260002/000BNZAV.html?wangshou1">[悬疑]诡闻档案：解密731部队</a></li>…
</ul>
</div>
<ul class="mod-list main-list">
<li><a href="http://book.163.com/special/vip_book/?wangshou1">[网易原创]</a> <a target="_blank" href="http://data.book.163.com/book/home/009200260001/000BNYeO.html">冥间阴乐:民国农家棺中女尸离奇蒸发</a></li>…
</ul>
<ul class="mod-list specialTopic-list">
<li><a href="http://book.163.com/special/minghun/?wangshou1"><em class='fB'>微活动</em></a> | <a target="_blank" href="http://book.163.com/special/minghun/">周德东《冥婚》拍电影 你来选主角</a></li>…
</ul>
</div>
<div class="tab-con">
<div class="imgText-temp-1 dotline clearfix">
<div class="mod-img main-img">
<a href="http://data.book.163.com/book/home/009200010002/000BIUGA.html"><img src="http://img6.cache.netease.com/book/2011/11/5/201111050939467f195.jpg" alt="罂粟美人的致命诱惑" title="罂粟美人的致命诱惑" height="90" width="120" /><cite>罂粟美人的致命诱惑</cite></a>
</div>
<h3 class="main-title"><a href="http://data.book.163.com/book/home/009200010009/000BHVZQ.html">大禁地：凶杀案引出帝王陵寝</a></h3>
<ul class="mod-list main-list">
<li><a href="http://data.book.163.com/book/home/009200010013/000BEKaV.html">权色：副省长对女色失去兴趣</a></li>…
</ul>
</div>
<ul class="mod-list main-list">
<li><a href="http://t.163.com/zt/book/xyjd06"><em class='cBlack fB'>诡故事</em></a> |<a target="_blank" href="http://t.163.com/zt/book/xyjd06"> 悬疑基地第六期：镜中灵魂的另一面</a></li>…
</ul>
</div>
</div>
</div>
结合网易的代码，个人觉得像一般的标题和内容，理想结构应该是：
单标签
<div id=”news”>
<div class=”hd”><h2>标题</h2> 更多>></div>
<div class=”bd”>内容</div>
</div>
多标签
<div id=”news”>
<h2 class=”tab-hd”><span class="tab-u current">体育< span > < span class="tab-u " >娱乐</ span ></h2>
<div class=”hd tab-bd”>内容</div>
</div>
3.表单
(1).表单域要用filedset标签包起来，并用legend标签说明表单的用途。
(2).每个input标签对应的说明文本都需要使用label标签并且通过为input设置id属性，在label标签中设置for=”someid” 说明文本和相应的input关联起来
例：
<form action=”” method=””>
<fieldset>
<legend>登录表单</legend>
<p><label for=”username”>用户名</label><input type=”text” name=”username” id=”username/></p>
…
</filedset>
</form>
4.表格
作用：展示二维数据。
表格标题要用caption,表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般单无格要区分开，表头用th,一般单元格用td
例：
<table>
<caption>二维数据展示</caption>
<thead>
<th>标题</th> …
</thead>
<tbody>
<td>标题对应的内容</td>
</tbody>
<tfoot>
<td>底部相关信息</td>
</tfoot>
</table>
语义化标签注意的其它问题：
尽可能少地使用无语义标签div和span
在语义不明显的情况下，可用p和div，尽量用p，因为p默认情况 下有上下间距，去样式后的可读性更好，对兼特殊终端有利
不要使用纯样式标签，例如b\font\u改用CSS设置。语义上需要强调的文本可以包在strong或em标签里。
附: 标签语义中英文对照表
标签名 |
英文全拼 |
中文翻译 |
a |
anchor |
锚 |
abbr |
abbreviation |
缩写词 |
acronym |
acronym |
取首字母的缩写词 |
address |
address |
地址 |
b |
bold |
粗体 |
big |
big |
变大 |
blockquote |
block quotation |
区块引用于 |
br |
break |
换行 |
caption |
caption |
标题 |
center |
center |
居中 |
dd |
definition description |
定义描述 |
del |
delete |
删除 |
div |
division |
分隔 |
dl |
definition list |
定义列表 |
dt |
definition term |
定义术语 |
em |
emphasized |
加重 |
fieldset |
fieldset |
域集 |
font |
font |
字体 |
h1~h6 |
header1~header6 |
标题1~标题6 |
hr |
horizontal rule |
水平尺 |
i |
italic |
斜体 |
ins |
inserted |
插入 |
legend |
legend |
图标 |
li |
list item |
列表项目 |
ol |
ordered list |
排序列表 |
p |
paragraph |
段落 |
pre |
preformatted |
预定义格式 |
s |
strikethrough |
删除线 |
small |
small |
变小 |
span |
span |
范围 |
strong |
strong |
加重 |
sub |
subscripted |
下表 |
sup |
superscripted |
上标 |
u |
underlined |
下划线 |
ul |
unordered list |
不排序列表 |
var |
variable |
变量 |
