IT北瓜

（PS：还是来自于Neo翻译的HTML Dog CSS Tutorials的中文版的内容，假如你有兴趣你可以阅读不良标签和标准要点两篇文章…一口气看完了Neo翻译的HTML Dog CSS Tutorials的中文版HTML和CSS网页标准指南，真的不错，建议各位可以抽空看看~~~）

用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。

你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。

定位

定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。

static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。

relative很像static，但可用top、right、bottom和left属性来偏移原始位置。

absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。

fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中工作得很好，但IE不会。

用绝对定位布局

你可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则：

<div id="navigation">
    <ul>
        <li><a href="this.html">This</a></li>
        <li><a href="that.html">That</a></li>
        <li><a href="theOther.html">The Other</a></li>
    </ul>
</div>
<div id="content">
    <h1>Ra ra banjo banjo</h1>
    <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
    <p>(Ra ra banjo banjo)</p>
</div>

并且应用如下的CSS：

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
}
#content {
    margin-left: 10em;
}

你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。

实在是太容易了！然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，你可以为HTML增加“navigation2”块并且应用如下CSS：

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
}
#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 10em;
}
#content {
    margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

绝对定位元素的唯一副作用是，因为它们生活自己的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域，没有什么问题，但是，特别是使用长度和宽度的相对值时，你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做，与其绝对定位它们，不如浮动它们。

浮动

浮动将移动一个元素到同一线上的左边或者右边，而周围也会有内容浮动。

浮动经常用在定位一个页面内的小型的元素（在本站的原始默认CSS中HTML初级指南和CSS初级指南的“下一页”连接就是浮动到右边的。同样参阅伪元素中的:first-letter例子），但同样可以用在更大的块中，比如导航列。

拿下面的HTML例子，你可以应用随后的CSS：

#navigation {
    float: left;
    width: 10em;
}
#navigation2 {
    float: right;
    width: 10em;
}
#content {
    margin: 0 10em;
}

如果你不希望下一个元素环绕浮动对象，你可以使用clear（清除）属性。clear: left将清除左边元素，clear: right将清除右边元素，而clear: both会清除左边和右边。所以，举个例子，你需要一个页面脚注，你可以用id“footer”为HTML增加一个块，然后使用如下的CSS:

#footer {clear: both;}

嗯，你已经搞定了。一个脚注会出现在所有列的下边，不管任何一个列有多长。

/*
注意
我们已经大体上介绍了地位和浮动，着重强调了页面的“大”块，但请记住，这些方法也可以用在这些块内的任何元素。综合定位、浮动、边界、补白和边框，你可以再现任何的版式设计，在布局方面，没有CSS完成不了表格所能完成的的事情。

使用表格布局的唯一理由是你试图适应古老的浏览器。这也是CSS实际上显示其先进的地方──在文件大小上，高易用性的页面只相当基于表格的页面的一小部分。
*/

      （PS：本文与不良标签同样来自于Neo翻译的HTML Dog CSS Tutorials的中文版，阅读这样的文章真的是一种享受…）

这个教程给那些虽然已经了解HTML，但对经不起未来XHTML标准的考验，隐含在分离内容和表现后面含义还未觉醒的人们。

分离内容和表现

HTML从来就不是表现的手段，但从用户端结合元素来格式化文本，开发者从中找到操作布局的方法。CSS的强大，使得现在不再需要用HTML做任何表现了，而内容也可以完全从表现（CSS）中分离出来。

这样做有很多好处──通常可以压缩文件容量，有着用一个主要样式表就可控制整个网站而不是单个页面的灵活性，也可能使页面更易用，更具亲和力。

遵循这些基本原则基本上意味着你不应该在HTML内使用样式化的任何事物了。比如font的标签，比如bgcolor的属性不应该再使用。甚至在图像标签img内的边框属性border在XHTML 1.1中也是非法的了。别担心，过时的HTML可以样式化，CSS更可以样式化，而且可以做得更好。

不仅仅是从HTML内剥离表现，内容的结构意味着在适合的地方使用明确的HTML标签。比如，h1，h2等应用在标题上──而不仅仅是使用CSS使字体变大而已。

最佳指引就是一个可视化的浏览器上使用其默认的样式来呈现一个没有样式表（或者有样式表，但不支援样式表的文本浏览器，比如lynx——译者注）的页面。

表格不应该用在布局上──表格用来表示表格式的数据（我们已经不厌其烦地说了很多次──译者注）。也许对于已经习惯传统结构的HTMLer来说，完全改变有很大的技术难度。这个方法很大程度上压缩了文件，而且，基于这些显性代码，它变得更易用，更具亲和力。

关于更多，请阅读CSS高级指南的布局。

标签

在XHTML中所有的标签都必须小写和关闭。没有闭合标签的（如br和img）必须用英文半角正斜杠“/”在后面自关闭（如<br />）。注意在斜杠前应该有一个英文半角空格。

标记也必须是合式的，使元素正确嵌套（比如<strong><em>this</em></strong>，而不是<strong><em>this</strong></em>）。

所有的文档都要有html，head，title和body元素。也必须从文档类型声明开始。

文档主体应该从 p， h1，h2， h3，h4，h5，h6，div， pre，address，ins或者del开始。

属性

所有的属性必须是小写的，它们的值也要用英文半角引号括（"）起来。

精简属性是不允许的（比如<input type="checkbox" checked />）。按惯例，精简属性必须给出跟属性名称一样的值（如 <input type="checkbox" checked="checked" />）。

名字 name属性不再是合法的了（除了在表单元素中），应该使用id来代替。

目标属性target不是一个合法的属性。庆幸吧，它有些癫狂。

在img里，alt属性是必须的。

亲和力

为残障人士制做具有亲和力网页的理由是不证而明的。不仅是人道的，而且也对老年用户和五官功能减退的用户有利（想一想，有一天我们老了，视力消退，五官不灵，怎么浏览互联网？为年老积点德，现在就考虑亲和力吧！——译者注）。亲和力不仅与有严重残障人士方便，也使大部分少量消退功能（特别是视觉）的用户更为易用。

这个问题越来越牵涉法律问题了，比如美国的“508条款”的采用，试图积极推动强制使用亲和力；在英国，所有的政府网站必须有一个指定的亲和力程度。什么时候才可以有像在建筑物上的亲和措施的立法，以便普遍用在商业网站上？（中国还不知道什么时候有这种立法呢！但不等于我们就不要关注我们设计的网页的合法性。——译者注）

如果能遵循上述的建议，你的HTML应该已经具备了为残障用户服务的高度亲和力。还有更多的创作使你的亲和力更上一层楼，而且不难。见亲和连接和亲和表单指南。

      （PS：HTML Dog CSS Tutorials致力于教授最佳的XHTML与CSS布局，分为初级，中级，高级三个级别。是个很好的教程，还有Neo翻译的中文版，Leeo英文实在不行，所以看的是中文版，文章语言风趣幽默、通俗易懂，看起来你不会觉得累，至少我这么觉得，⊙﹏⊙b汗~~~不良标签一文内容也是来自Neo翻译的中文版，觉得这篇文章讲的内容很好，所以收藏了…）

这次着眼于一些童话世界和史前时代的HTML标签。它们是被HTML标准抛弃的不良、肮脏、十足丑陋的，胡乱荒谬的属性，只能部分地工作在一个次版本的浏览器上或者可以被新标签取代的标签。

有人建议我们不要歌颂标准尽管我们教授基于标准的HTML和CSS，但如果这样的话，用户（特别是初学者）会遭遇不良的入门方法和不良练习，同时他们并不知道哪里出错了。所以我们的答案是：一份拒绝不良标签的指南。

HTML已经尝试去除表现和朝向内容发展，导致这样一个基本原理：从表现（CSS）中分离出内容意义（HTML）。这将会给网页减肥，因为一个表现指令集合（以外部CSS文档的形式）可以应用到多个页面。这也会使网站更易于管理因为全局变动可以从修改一个单独的文件得到。

部分不良标签基本上是表现标签（比如small），它们可以用更有意义和更简单的CSS规则取代。其他的不仅用于表现，而且还是不必要的庞大（比如font标签）或者对可用性有害的可恶的（比如blink）。

标签

下面这些是你可能会经常碰到的可以有更好选择的标签：

• b 可以用来产生粗体元素。使用strong（意味着强烈强调）代替更有意义，或者用CSS来完成这项工作，增加font-weight: bold的规则，用来表明粗体元素。
• i可以用来产生斜体元素。使用em（表示强调），这也更有意义。或者可以用CSS来表现斜体：font-style: italic
• big可以产生更大字体。使用标题（如h1，h2等，当文本本来就是一个标题时）代替，增加了意义，或简单地在CSS中使用font-size属性，获取更多的控制权。
• small 可以产生小字体。CSS（font-size）再一次取得更多的控制权。
• hr 可用用来展现一条水平线。在CSS中用hr设计很少见，CSS的border-top，border-bottom属性或者朴素的图像做这个效果会更好。

上述的标签与最新的HTML标准尽管都兼容，但对内容却没有任何好标签应有的意义。They could be more useful but they aren’t particularly harmful, and might easily be mistaken for innocent butter-wouldn’t-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.

• u可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
• center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center，还有left、right和justify。
• menu用来创建菜单列表。它并没有ul做的完美，在因为无序列表更通用，ul高高地站在menu的尸体上。
• layer和div元素相似，都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作，所以再也没有什么用。
• blink或者marquee。大声说不！它们应该像本身意义一样被期待，但有着十分有限的支持，和，只会产生非常，非常恶心的笑话。
• font，可以用来定义元素的字体名称，尺寸和颜色，在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站（甚至新的也有）像满世界的瘟疫之蚁一样布满整个页面。大部分的font标签激增是从网页制作软件带来的，把font标签包括颜色和尺寸用在每一个元素。font标签被滥用到出现在当前的每一个重复元素的（如，每次你使用p元素），而CSS，则可以用一条简短的代码来应用重复元素，甚至控制整个网站。使用CSS方法，不仅可以使页面比被大量font标签寄生的更苗条，而且更容易维护因为你所需要做得只是改变CSS文件中的一行，而不是逐一修改每一个font标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。font标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。

属性

可能你认为你正在使用良好的标签，但还是有一些麻烦的寄生虫属性潜伏，它们随时会冒出来。

• name用来为一个元素指定一个名字，它在如input的表单元素中完全被接受，但在其它地方，name的工作已经被id属性取代。
• text和bgcolor可以在body起始标签中定义页面的基本文本颜色和背景颜色。CSS的color和background-color属性在应用到body选择符时也可以做到。
• background可以在body标签中指定一个背景图画。CSS会做得更好，用如background-image的属性来处理背景图片。
• link、alink、vlink在body标签中用来指定连接（未访问，激活和已访问）。CSS宝贝──:link、:active和:visited会做这项工作。
• align可以用来对齐某个元素的内容（比如 <div align="center">Stuff</div>），但是，像center标签，CSS的text-align属性是新的老板。
• target可以用不同的方式打开一个连接，最常用的是打开新窗口（比如<a href="wherever.html" target="_blank">Help me</a>）。看起来不错，但你不要对你的网站这样做。用户并不预期不可思议的东西（比如新窗口）出现，而且最常用的浏览工具是浏览器的后退按钮，如果你打开新窗口，这将不可用。它是非法和不易用的。

/*
注意
保留标签的表现属性如图像的width和height，表格的cellpadding和cellspacing，是由于这些元素经常使用不同的值。这不是完美的解决方案，但如果你的网页有大量的图像和表格，你没有其他的明智选择，只好使用它们。

最让人难以理解的表现属性是textarea标签，它仅有cols和rows两个合法属性，在最新的HTML版本中也是必须的。
*/

良好标签，不良使用

要进入你的卧室你可以弯腰通过一个狗洞，但等等，还有一扇有把手的为人类准备的门！哇，看——刚好适合一个进入。

使用HTML标签（好标签），无论相信与否（相信它！），有一个很好的的理由：你使用它们有一个好前提，你就会有一个更好的结果。

网页本身对用户来说，比起HTML标签语法语义更易用，屏幕阅读器常会在遇到一个ul标签或者有着h1或h2的标题标签时强调突出它们。

在HTML标签世界中最被滥用的就是表格了。表格常常用来布局，但表格应该仅仅只用来展示表格式数据，就如它们本身的设计意图。不用表格的布局方法不是追求开悟的某种禅，它不仅可以显著地为网页减肥，而且更易于维护和重新设计。

/*
注意
有时侯设计者还会用在这里提到的这些标签和属性（特别是用表格来布局）来做过渡型的设计──既可以工作在老版本的浏览器上（尤其是Netscape4），也可以工作在现代浏览器上。表格确实可以在CSS不称职的Netscape4上有更强的表现控制。很不幸，这些用户很少而且越来越少了，而展现表格布局的缺点一览无遗的移动设备用户越来越多。上述的无表格设计可以预防这些缺点，尽管对一小部分的用户有些许的表现改变，但还能在所有的浏览其中保持着完全的功能。
*/

框架

Goldilocks认为喝上一杯麦片粥是一个不错的注意，但三个硕大的肉食哺乳动物突然出现，把她丢出窗户。框架就是装麦片粥的杯子。它们看起来似乎不错，但已经到了濒危阶段而且很快就会消失。

大部分的网站并不是用框架，而一般用户也会把一个文档当作一页。

有些情况，如你要防止用户不能把特定的网页添加到书签，又如你希望用户用Email或即时聊天软件推荐特定的网页，又或你想把整个网站变得十分复杂，让使用屏幕阅读器的用户在框架之间频繁操作，还或者你想迷惑搜索引擎，够了够了，你使用框架吧！

总之，框架只会增加复杂性和丧失可用性。

/*
注意
只要你遵循下列规则，你不会在犯错上有前途：

1）一个标签或者属性就算只有一点点的跟表现搭上，都不要使用。那是CSS的事。并且CSS做得更好。

2）把标签使用在如它的名字所暗示的用途上。表格标签是用在表格式数据上的。标题标签是用在标题上的。等等等等。

3）特定的内容用恰当的标签。列表用list，标题用hx(x = 1 - 7)等等等等。
*/

引入jQuery框架和引入一个普通的js文件一个，很简单，就是在<head></head>之间插入：

<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>

其中，src路径根据实际做修改。很多人（包括我以前也是这样）最初在写一个html页面的时候都简单写成如下形式：

<html>
<head>
<title>jQuery学习笔记1——引入jQuery框架</title>
</head>

<body>
</body>
</html>

既没有声明文档类型，也没有设置页面编码，没有声明文档类型会出现奇奇怪怪的问题，而未正确设置页面编码则是导致中文乱码的常见因素。因此强烈建议声明文档类型DOCTYPE和设置正确编码charset，中文用户可以设置编码格式为gb2312或者GBK，但建议设置为国际化编码格式utf-8，完全代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery学习笔记1——引入jQuery框架</title>
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>

<body>
</body>
</html>

另外，建议在开发过程引入的jQuery为未压缩版jquery-1.3.2.js以方便调试，开发完成才使用min版，同时，如果项目是发布到网上的还建议利用Google Ajax Library API来加速常用js类库的载入，有两种方式：

第一种方式是直接载入js文件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

第二种是利用google提供的接口：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    //载入jQuery
    google.load("jquery", "1.3.2");
    google.setOnLoadCallback(function(){
        //加载完毕的回调函数
    });
    //除了load方法还有其他一些方法，详情请看官网
</script>

最后，试一下jQuery是否生效，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery学习笔记1——引入jQuery框架</title>
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
	    alert("jQuery学习笔记1——引入jQuery框");
	});
</script>
</head>

<body>
</body>
</html>

OK，笔记1就到此，请继续关注接下来的笔记，同时欢迎踊跃发言，( ^_^ )/~~拜拜。。。