最前端

我的工作,我的生活,点点滴滴...

标签 ‘ html

CSS类是HTML标签的扩展?

sexy css

CSS类的命名是一件麻烦的事,有人提到了CSS类命名的语义化[1],这个建议从某些方面来说确实比以结构来命名CSS类好多了。而且我发觉语义化的CSS类甚至成为了HTML标签的一个扩展,HTML标签是有限的,而网页有语义的部分是无限的,使用HTML的语义化只能是基于有限的HTML标签及其属性来实现语义化。比如:

<div class="logo">
<h1 class="blog-name"><a href="http://www.bq69.com">最前端的生活</a></h1>
<h2 class="blog-description">关注web前端,关心web前端工程师</h2>
</div>

h1的语义能说明这是一个一级标题,h2的语义能说明这是一个二级标题,如果我需要一个详细的语义呢,比如:“博客的名字”,“博客的描述”等,显示h1,h2是不足够的。从上面的代码HTML标签h1,h2的语义,搜索引擎知道了两个标题;而从CSS类logo,blog-name,blog-description得知这个博客的logo,标题和博客描述(注:请先忘记header的部分标签,另外我我相信google能做到这个)。

不知道CSS类从这个方面来看,能不能算是HTML标签的扩展,但我相信CSS类的语义化的确有利于SEO的。

参考资料

像维基百科一样去写文章

[TOC]
wiki logo

像维基百科一样去写文章。

一级标题

二级标题

三级标题

二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容,二级标题内容。

  1. 加强
    <strong>加强</strong>
  2. 着重
    <em>着重</em>
  3. 删除
    <del datetime="2011-05-24T12:21:35+00:00">删除</del>
  4. 站内链接
    <a href="http://dc.sina.com.cn/blog">站内链接</a>
  5. 站外链接
    <a class="external" href="http://baidu.com">站外链接</a>
  6. 上标内容上标
    <span>上标内容</span><sup>上标</sup>
  7. 链接上标内容链接上标 参考内容1[1] 参考内容2[2] 参考内容3[3] 参考内容4[4]
    <span>链接上标内容</span><sup><a href="http://dc.sina.com.cn/blog">链接上标</a></sup>
    参考内容1<sup class="reference" id="cite-ref-1"><a href="#cite-note-1">[1]</a></sup>
    参考内容2<sup class="reference" id="cite-ref-2"><a href="#cite-note-2">[2]</a></sup>
    参考内容3<sup class="reference" id="cite-ref-3"><a href="#cite-note-3">[3]</a></sup>
    参考内容4<sup class="reference" id="cite-ref-4"><a href="#cite-note-4">[4]</a></sup>
  8. 下标内容下标
    <span>下标内容</span><sub>下标</sub>
  9. 链接下标内容链接下标
    <span>链接下标内容</span><sub><a href="http://dc.sina.com.cn/blog">链接下标</a></sub>
  10. 附加文字
    <i>附加文字</i>
  11. 标注
    <ins datetime="2011-05-24T12:21:35+00:00" >标注</ins>
  12. 引用内容,HTMLHTML缩写引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容。

    <blockquote>
    <p>引用内容,<abbr title="How To Make Love">HTML</abbr><i>HTML缩写</i>引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容,引用内容。</p>
    <footer><cite>引用自<a href="http://www.bq69.com">最前端的生活</a>的文章</cite> </footer>
    </blockquote>

参考资料

  <h2 class="reference-title">参考资料</h2>
  <div class="reference-link" >
  <ol>
  <li id="cite-note-1"><b><a href="#cite-ref-1">^</a></b> <a class="external" href="http://www.bq69.com">参考文章1</a></li>
  <li id="cite-note-2"><b><a href="#cite-ref-2">^</a></b> <a class="external" href="http://www.bq69.com">参考文章2</a></li>
  <li id="cite-note-3"><b><a href="#cite-ref-3">^</a></b> <i  title="连接到英文网页" >(英文)</i> <a class="external" href="http://www.bq69.com">参考文章3</a></li>
   <li id="cite-note-4"><b><a href="#cite-ref-4">^</a></b> <i  title="连接到英文网页" >(英文)</i> <a class="external" href="http://www.bq69.com">参考文章4</a></li>
  </ol>
  </div>

扩展阅读

<h2 class="recommend-title">扩展阅读</h2>
<div class="recommend-link" >
<ol>
<li><a class="external" href="http://www.bq69.com">扩展阅读1</a></li>
<li><a class="external" href="http://www.bq69.com">扩展阅读2</a></li>
<li><a class="external" href="http://www.bq69.com">扩展阅读3</a></li>
<li><i title="连接到英文网页" >(英文)</i> <a class="external" href="http://www.bq69.com">扩展阅读4</a></li>
</ol>
</div>