前台开发之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	变量