HTML非主流标签使用

在我们平时所写的ASP.NET中，我们更多的是去使用服务器端控件:<asp:>。与此同时，我们却忽略了很多HTML元素的使用。

在这章，让我们来简单的对HTML的一些元素的标准来做简单的回顾。

1. <q> 和 <blockquote>

对于这两个元素，我想很多经常去使用.NET服务器端控件，以及Visual Studio或者DW等可视化工具的人，应该对他们已经忘记的差不多了。在这里，我们来做个简单的复习。

首先我们回忆两个概念，在HTML中的内联元素和块元素。在这里我说下我的理解:

块元素常用的作用是用来其他的元素，他最典型的标志就是把自己所包围的元素内容与其他的块元素分开。

而内联元素是基于语义的元素，也就是说，内联元素常作用于段内，来对某一句话，或者某一块的元素来做一个语义上的特殊标记。

好，概念弄清了。我们就来看<q>和<blockquote>，他们都表示引用。区别呢:用上面的概念去解释：<q>是一个内联元素，而<blockquote>是一个块元素。

举个很简单的例子：

先看个使用<blockquote>的例子：

李白曾经写过这样一首诗：
<blockquote>
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。
</blockquote>

 

然后看下<q>的使用：

孔子曾曰：<q>三人行，必有我师焉</q>

通过这两个例子，我们可以看出了两者的区别，也就是说，<blockquote>常用于是长段，整段的引用。而<q>更常用于的是小引用。

2. 关于列表

关于列表，你还能说出几种呢？

不要告诉我<asp:BulletedList>，我说的是HTML元素。

也许你会告诉我<ul>,<ol>。只有这两种么？NoNoNoNo!

在HTML元素中，关于列表，其实一共有三种：ul(unordered list),ol(orderedlist),dl(definition list)。

这个很简单，随便写两行代码就过了：

请选出你最喜欢的数字：
<ol>
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li>                          
</ol>

我喜欢的人有：
<ul>
    <li>爸爸</li>
    <li>妈妈</li>
    <li>爷爷</li>
    <li>奶奶</li>
</ul>

下面是一些定义：
<dl>
    <dt>人</dt>
    <dd>人是一种高级动物</dd>
    <dt>动物</dt>
    <dd>动物是一种低级的人</dd>
</dl>

 其实对上面的这些元素，我们完全可以去取代他们，用其他的形式来将他们表示出来。但是建议，用与你所表达的最接近的HTML元素去表达你的含义！

3. 关于<em>

若干年后的今天，你还记得这个非主流元素么？

让我们前往w3cschool去看看：

<em>:所强调的文字。

在这里，我不想去谈这个元素的用法。只是用这个来引出话题。

关于你代码的浏览器适应问题。

我们知道，虽然W3C一致去致力于浏览器的标准，但是至今仍然是效果不大。IE,Firefox等等浏览器都有着自己的标准和表现形式。

那么，我们怎么样去让自己的代码更适应每个浏览器的标准呢？

用<em>来说：强调。我没有做过测试，因为我的电脑上只装了IE浏览器。我在这里只是做个比方。很有可能出现这样一种情况。IE中表达强调的方式是把字体加粗，而Firefox表达强调的方式是把字体倾斜。我个人的意见是，让浏览器自己去解析我们的表达意愿，而不是让我们去强行给浏览器加入表达形式。

原因呢？我在这里插点题外话。在面试的时候，经常会碰到一些莫名其妙的问题，比如两个我认为基本差不多的东西，面试官会问我：让你选择的话，你会用哪个呢？我常常给出的答案都是我认为两者是差不多的，但是如果一定让我做出个选择，我选择A，因为A是他们自己厂商所推出支持的，我想一个公司肯定会对自己所推出的概念做出最大的支持和最大程度的优化。

当然，我的回答其实是废话，也有投机取巧之嫌，但是我认为，让一个产品去按照他自己的标准办事总是最好的。就像古代的无为之治，才是最好的治理国家的方式！

另外，老赵说：语义和样式要分开写。这点提醒了我，另外一个这样去做的原因，就是可维护性。你的后续程序员或者当你的网站需要更改样式时，使用更匹配的标签可以让你的代码灵活性更高！

我现在所能想起来的，关于HTML的一些细节和标准问题，只有这些了。

这里都是一些很基础的问题，我之所以放在首页，是希望提醒一直活在高层的大家，别忘了这些基本的概念和知识。

然后，在最后，我希望大家能帮忙想一些关于HTML细节和标准方面的问题。让我们共同去回忆这些我们快淡忘了的非主流标签。

转自：http://www.ok22.org/art_detail.aspx?id=172