我们知道字体 这个东西，就是font-family。世界上有很多的字体，但是并不是所有的操作系统就拥有世界上全部的字体。比如，我写一个font-family:"微软雅黑"，这个字体只有微软雅黑才有，到了ubuntu下面就没这个字体，那浏览器用什么字体显示呢？是不是就像显示乱码一样显示呢？

这个时候，浏览器想了一个方法，就是指定一种所有用户指定的字体都失效后最终代用的字体，叫通用字体族，就是sans-serif和serif。serif是衬线的意思，sans是没有的意思。关于衬线字体和非衬线字体，我这里就不多赘述了，在小字体时serif看得更加舒服清楚，但是serif由于衬线的缘故其艺术感和圆滑感不强，所以不适合做大字体的标题。而倒是sans－serif适合大字体显示。

?

以下为衬线字体

I love web design ???? I love web design

?

以下为非衬线字体

I love web design??? I love web design

?

但是呢，通用字体族具体对应哪一个字体其实是由浏览器自己决定的。我们在写font-family时，需要写出尽可能多的我们期望的字体，而不能依赖于通用字体族，因为谁也不知道到底那是什么字体。

?

而有关中文的字体问题也是存在的，比如 font-family："Comic San MS",黑体,sans-serif。

当我们打"我爱网页设计"时，会首先在Comic San MS中查找有没有那些汉字，结果得到的是一个缺字符就是没找到的意思，于是就又去黑体里找，找到了，就用黑体来显示。但是呢，在ie和opera下，当在Comic San MS中得到缺字符时，就直接调到最后一个通用字体族了，也就是黑体被安静地忽略了，这就是一个bug的地方。

?

而如果我们用英文字体来显示中文字体时会出现什么呢？在ubuntu下，所有的默认中文字符会被显示成幼圆，而在buuntu下可能就是仿宋。当浏览器得到缺字符时就去搜索操作系统默认的字体。

?

接下来我要讨论一个html 结构的问题

我们平时在写html，如果专业一点，我们在写xhtml的时候我们脑子里都在想些什么呢？我们是想着哦，这个div应该放在右边，那个div放在左边，于是应该先写左边的div，再写右边的div，然后再起一个#left_column的id，这简直就是一个2b行为。为什么，因为我们已经在布局了，而xhtml是没有布局的。我们考虑的应该是数据结构，比如网速比较慢的时候，浏览器会按照流的顺序加载html的dom，这个时候是按照你写html的顺序来加载的，如果你把比较重要的结构放在了最后，那么这个内容就会延迟很多才显示，我们完全可以把重要的放在前面写，然后再用css技巧比如说float或是别的手段来调节布局。我们在写html时千万不要想着布局，而是要想数据结构。

?

还有一个我们在网上看到的xhtml还有xml。这里的x是指什么？前者指的是html更加有xml的写法规范，更像一个xml。而xml的x指标记是可扩展的，一个<table>在xhtml里就是一个表格，而在xml里可能是一张桌子或是一个滑板这都有可能，所以是可扩展的，换句话说xhtml就是不怎么能扩展的。这里有一个双刃剑，可扩展的当然好，但是这会造成语义不明确，而xhtml语义就很明确，毕竟我们写给浏览器的代码不能是乱七八糟的一大堆我们随意意淫出来的标记，用xhtml还是比较靠谱的，这是一个折衷的方案。但是呢，有一个新的技术叫做xml+xsl我觉得这里的意思是把完全可扩展的数据结构转换成有特殊需要的语义标记。有兴趣的话可以看一下xml+xsl，xml可以转换成html或是wml或是其他的标记语言，但是我不喜欢用这个，这个太过于麻烦和死板了。

?

视觉元素不一定要对应一个xhtml中一个实实在在的元素。xhtml包含的是一个内容！因此我们在设计xhtml时不要老想着得到什么效果，而应该单纯想着信息的组织形式。这里css zengarden就做得非常好。

?

语义和结构是xhtml的两大核心。

?

?

关于 CSS

我们可以去看一下在 w3上关于 div 的定义是怎样的， The?div?element ， in?conjunction?with?the?id?and?class?attributes,offer?a?generic??mechanism?for?adding?structure?to?documents.The?element?define?content?to?be?block-level?but?impose?no?other?presentational?idioms?on?the?content. 这里明确写了 div 是用来 for?structure 的，而不是用来 for?layout 的。

现在我要谈一下什么是代码结构，什么是语义结构。我是这么看的，语义结构就是说我们就只看那些标记，我们能不能只看那些标记就知道那些标记代表了什么，有em 或是 strong 表示强调， p 表示一个段落， input 为输入框等等。但是呢，并不是说你看懂了那些标记的意思代码就完美了，这其实远远不够。比如我们写一个程序，我们没有用什么模块化的思想来写，只是随性而写，也不管什么面向对象或是函数的提取，统统写成一坨，当然程序员看了代码当然可以看得懂，但是代码结构不好。你没有用面向对象，没有提取什么函数，也没有暴露给外界接口即模块化做得不好，那么别人就很难用你的代码。同样，你 xhtml 代码结构不好，美工利用你写的 xhmtl 就很难着手，因为都混成一块儿了，没有做到结构的分离。好的代码结构不仅可以便于固定 xhtml ，还对 css 提供很高的自由度。

比如

<h3>登录</h3>
&