WEB学习笔记10-高可读性的HTML之HTML 语义化

实现如下所示工具栏：

做到标签语义化，首先要尽量减少使用<div>和<span>这两个标签。

分析：这是一个包含5个无序操作项的工具栏，因此应该使用符合语义的<ul>标签。如下：

<ul id ="reader_main_action" class="reader-main-action">
<li class="reader-action-library"></li>
<li class="reader-action-spliter"></li>
<li class="reader-action-toc"></li>
<li class="reader-action-spliter"></li>
<li class="reader-action-note"></li>
<li class="reader-action-bookmark"></li>
<li class="reader-action-hightlight"></li>
</ul>

但总共就5个操作项，而此方案使用了7个li标签，单纯从语义上看，两个分隔符和其他5个操作项具有同等重要的地位，故去掉两个多余的<li>，使用CSS实现分隔符的效果，改进如下：

<ul id ="reader_main_action" class="reader-main-action">
<li class="reader-action-library"></li>
<li class="reader-action-toc spliter"></li>
<li class="reader-action-note splite"></li>
<li class="reader-action-bookmark"></li>
<li class="reader-action-hightlight"></li>
</ul>

以上是使用CSS样式实现了分隔符的样式，以下是使用：before伪类实现的一种方式，当然如果考虑支持IE7以下浏览器，也可以使用设置背景图的方式。

.reader-main-action.spliter{
margin-left:30px;
}
.reader-main-action.spliter:before{
content:'|';
line-height:28px;
font-size:20px;
color:#888；
cursor:default;
text-indent:0;
float:left;
margin:0-20px;

}

以上方法是将无关内容彻底从HTML中分离出来，删除干扰语义的标签。但是，假设搜索引擎解析到这段HTML代码，从语义上只能分析出这5个操作项的工具栏，具体每个操作项的作用则不得而知，可以添加文字进一步说明，修改如下：

1 <ul id ="reader_main_action" class="reader-main-action">
2 <li class="reader-action-library">Library</li>
3 <li class="reader-action-toc spliter">toc</li>
4 <li class="reader-action-note splite">Note</li>
5 <li class="reader-action-bookmark">Bookmark</li>
6 <li class="reader-action-hightlight">Hightlight</li>
7 </ul>

由于操作项在界面中显示的是图标按钮，因此需要把文字隐藏起来，如下，CSS，即可实现文字的隐藏。

.reader-main-action li{
text-indent:-9999px;
}

验证HTML代码语义性，需要隐藏CSS代码，禁用CSS代码样式后，此方案显示效果如图：

注意：

　　1.在合适的地方使用适合的标签

　　　　<h>:标题，在网页中展示各层级的标题时使用；

　　　　<ul>/<ol>:列表，在展现各种数据列表或者菜单时使用

　　　　<p>,定义段落

　　　　<em>告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

　　　　<strong>用加粗的字体（相对于斜体）来显示其中的内容

　　　　<table>表格

　　　　<br>标签仅仅用于文本内容中的换行

　　　　<blockquote>定义块引用

　　　　<header>定义文档的页眉(介绍信息)

　　　　<footer>定义 section 或 document 的页脚

　　　　<article>定义一些来自外部的内容

　　　　<section>定义文档中的节

　　　　<nav>定义导航链接的部分

　　　　<aside>当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其它类似的有别与主要内容的部分

　　2.熟悉各标签上规范的属性，给HTML标签设置必要的属性

 　　　　<img>，alt是必须要设置的属性，因为<img>是自闭合标签，并没有包含可以解释说明图片的额外信息。

　　　　<!—alt属性除了对图片做解释说明之外，也作为图片在浏览器中未加载时显示的代替文字-->

　　　　<img src="/img/loading.gif" alt="data loading…" />

　　　　<!—title属性是对元素的解释说明，并且作为在浏览器中当鼠标移到元素上时显示的提示文本-->

　　　　<a href="" title=""></a>

　　3.样式和结构分离

　　　　CSS中的两个伪类:before和:after，适合以上分隔符的使用。

　　　　例：清除元素的浮动

<div id="main">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>
<div class="clear"></div>
</div>

　　　　对应的CSS样式为：

.sidebar { float: left; width:150px; }
.container { float:right; width:450px;}
.clear { clear:both; }

　　　　但是这种写法破坏了HTML代码的语义，并不是一种好的方案，应该删除这个多余的<div>元素，并改用CSS样式来实现，代码如下：

<div id="main clearfix">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>
</div>

　　　　对应的CSS类clearfix的声明为：

.clearfix {
*zoom: 1;
}
.clearfix:before，----before伪类
.clearfix:after {---after伪类
display: table;
content: "";
}
.clearfix:after {
clear: both;
}

 

　　　　另外，在构建页面的时候，经常会要添加图片，原则是，如果图片是作为页面内容的一部分，则应该使用<img>元素，如果图片仅仅是起装饰作用，则应该使用背景图方式。

　　4.给空标签中添加隐藏文字，用于说明标签的实际功能

　　　　把原来该用文字表达的效果替换为图片，建议给空标签添加一定的说明文字，并让文字隐藏起来，这样既提高了代码的语义，又满足了设计上的需求。一般可通过设置text-indent来达到隐藏文字的目的。