其实有很多html tags是极富于语义的,而在table布局大行其道后,很多语义化的标签就慢慢的被人们淡忘了。比如可能很多人一次都没见过的标签:dl, dt, dd, cite, q, dfn, ins, del, var等等。
1. dl, dt, dd系列定义列表
网站重构让很多人知道了ul, ol和li,但是在列表的家族里面还有一个dl,就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
如:<strong><dl></dl></strong><dt>Dog</dt><dd>A carnivorous mammal of the family Canidae.</dd><strong></strong>
2. cite和q, 良好引用
在写blog的时候,经常是要引用一些blogger的话语,那么可以用cite标签。一般的blog程序后代自带的blockquote,是用来引用大段的话,还必须包含块级元素,比如div, p等等。而且blockquote也自带一个cite属性,可以以URI标注资料的来源。cite标签则主要用来引用某人的话,如:<p>And <strong><cite></cite></strong>Bob<strong></strong> said <q>No, I think it's a banana</q>.</p>
3. dfn, 下定义
比如:<p><strong><dfn title="Microsoft web browser"></dfn></strong>Internet Explorer<strong></strong> is the most popular browser used underwater.</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2046" title="免费语音克隆"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680030960517.png" alt="免费语音克隆" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2046" title="免费语音克隆">免费语音克隆</a>
<p>这是一个提供免费语音克隆服务的平台,用户只需上传或录制一段 5 秒以上的清晰语音样本,平台即可生成与用户声音高度一致的 AI 语音克隆。</p>
</div>
<a href="/ai/2046" title="免费语音克隆" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
4. ins, del, 插入和删除
知道del,就不要再用<s></s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。如:<p>It really was <strong><ins cite="rarara.html" datetime="20031024"></ins></strong>very<strong></strong> good.</p>
5. code, 表示是计算机代码
本文所用到的标签,都用和包围了起来,表示是计算机代码。而默认情况下,这些代码会用打字体表示。
6.button, 少用Inputbutton默认的表现和input type="submit"是一致的。从命名上来看,用作按钮当然以button为首选咯。
这边谈及的还很少吧,但是我觉得是在写Blog时候比较常用的。RSS相对于html优势就在于清晰和简单的语义定义,其实html还是有很多有意义的标签,可以参考w3.org的相关页面。










