最近学习css、xhtml【读书摘记心得】

我们知道字体 这个东西，就是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>
<label for="name">用户名</label>
<input id="name"/>
<label for="password">密码</label>
<input type="password" id="password">
<input type="submit " />



<div id="login_form">
<h3>登录</h3>
<div>
<label for="name">用户名</label>
<input id="name"/>
</div>
<div>
<label for="password">密码</label>
<input type="password" id="password">
</div>
<div><input type="submit " /></div>
</div>

 

 

 

这里的div 就是为了使代码结构更好的，这里很多人肯定是为了 div 可以换行所以用 div ，那如果那些 input 也可以达到换行的效果是不是我们就不用 div 了呢？不！也要用，因为 div 是用来分隔内容的，是使代码更加结构化的，不要想着换行这些和结构无关的东西！

但是呢，这里有一个问题，就是如果我们都用div 来做节点或是分隔很容易产生语义模糊的地方，比如我们都用 div 做登录表单的节点，又用 div 做资料展示的节点等等，有时不用做节点，用作行元素也用 div 就像上面的登录表单里面的 div 一样，这个时候就混淆了，要是用 css 的话还得分号作为节点的 div 改怎么样，作为行的 div 改怎么样， padding 不同啊， magin 也不一样啊！还得设个 class ，这样觉得怪怪的，语义就不简洁了呀！貌似 xhtml2.0 有一个什么 section和 line 的，而且还保留了div ，是不是可以解决这个问题呢？要研究一下……

 

我之前在写html 的时候，经常看到别人用什么 strong 和 em 的标记，我觉得那样不好，因为我知道 font 不好，因为把表现和结构混在一起了，而 strong 会使字体变粗，我就觉得这样也是把表现和结构耦合了，其实这么想是大错特错的。 Em 和 strong 并不是为了表现，而是为了强调内容，本质上还是内容。而我们完全可以取消掉 strong 的默认 css 样式让 strong 不显示粗体。而且就算 storng 没有任何额外的视觉效果我们还是要写 strong ，因为那是语义和内容上的，是为了强调，而视觉效果则是 xhtml 编写人员意想不到的效果。

 

什么时候用table ，当结构侧重于列（或是有趋势扩展成多列的情况）时用 table 。什么时候用 ol/li ，当结构侧重于产生级（文件夹树的结构，或是有趋势扩展成级的结构）时用 ol/li 。