《css3实战》读书笔记第一章基于CSS需求而编写的HTML.

笔记说明

《CSS3实战手册第3版(影印版)》可以消除Web设计工作的痛苦，并且带给你：HTML——重新入门。如果你是HTML新手，你会学到如何以CSS友好的方式进行基本页面构造。若你是HTML高手，你将学会如何像CSS设计者那样思考。

全书共18章，五大部分600来页。

可能是出版方认为本书英文很好懂，所以就不找译者翻译了。

本来为作为一个行外人及英语渣，看这书会是很艰难的过程。但读过之后发现，相比一些拙劣的中文翻译书，居然觉得轻松了很多。

不同于一般CSS书枯燥的“选择器-盒模型-文字效果-其它属性”这样罗列一大堆类似说明手册的文字，”本书从编写良好的html结构开始说起，讲述了CSS3基本规则，布局排版，进展，手把手教读者做出符合h5规范的网页。作者本职是做网络出版物，因此，他的设计风格带有鲜明的出版物特性。

似乎了解css用法的人再读这书有点浪费时间。但是其中大量的tips，扩展阅读穿插其中，篇幅容纳不下的话还给出了文章链接。让你明白很多平时不知其所以然的操作。实例主要用于让读者去实践本书的思想，而不是讲述操作。我觉得，上过几堂速成课，只知道用法，做出貌似不错的效果，并不能算入门。真正入门，应该研究一两本类似这样的书。读完之后少能够辨别出初学者，或者学艺不精者写的代码。就算达到目的了。

第一章编写可供CSS调用的html

开头都会说的html的黑历史——过去与现在：

语义标签如h1等早在html语言诞生之初就有了，对Web文档有初步的的支持——但是，设计者通常用标签的自带效果来作效果，因为展示内容的需要，出现了乱用的情况。另一方面table布局的不合理性，让开发者不得不直接切图这种落后的方式做网页。——而到现在，html终于被公认应该执行网页骨架的职能，而不是拿去干其他事情。所有需要担心的样式问题，用CSS去解决吧。

html

思考结构：逻辑关系主次架构，不要在行间加无谓的东西。

简化的html结构对搜索引擎是友好的。搜索引擎遍历整个页面才能简历索引，当结构过于复杂，爬虫可能没兴趣再读下去。

注意两个标签的作用：——div和span

div和span是万能的行级标签。你可以用它设计你想的任何效果（如果可以实现的话）。前者用于包装块状元素，后者则常用于包装文本。

除了万能容器标签以外，H5提供了多种语义化方案。懂得它们将大大提升网页的内涵。比如h1就是用于网页中最主体的内容。其它举例如下：

一组相关的元素都可以用<section>包裹。
侧边栏可以用<aside>
<footer>定义一组通常放在网页尾部的元素
<nav>一般用来做主导航。
<figure>是用来包裹图片元素的容器。作为图片描述内容，应该使用<figcaption>

......

相对于万能标签来说，h5标签的大大增强了语义。对谷歌来说，更喜欢开发者使用这些标签，然而，IE8及以前的浏览器都不能完全支持它们。解决方案是：引入js插件让他们支持。

<!--[if lt IE 9]>

            <script src="scripts/html5.min.js"></script>

            <script src="scripts/respond.min.js"></script>

        <![endif]-->

规划好你的页面

比如最简单一个两列式布局，相似的内容合并在一个模块。头部——header，主体——article，边栏——aside/section，尾部——footer，最后再把上述的内容用一个section包起来

废弃的标签

<font>已经过时。后面会讲到。
<b>和<i>尽量用<strong>和<em>代替。尽管html4尝试废弃这两个标签，但h5又把他们捡回来了。对于只是让它外观看上去是这样，但不是实质性强调的内容，还是可以用。对于出版物标题上的斜体，用<cite>就再好不过了。
<table>不是没有用，但表格本来不是专门作页面布局的。
尽量避免在<body>上做文章。
用margin，不滥用<br>：因为浏览器可以自动给你的标记间插入其它空格（space），如果还不满意，就用margin去调整它吧。

作为总结就是：不要乱用——对于不适应设计要求的标签，尽可能用CSS去控制它们。而不是再建新的标签尝试控制样式。

验证你的网页:

xhtml要求所有元素必须被闭合，基本的元素必须放在指定的标签——比如说title必须放head标记内，而h5放松了这方面的语法要求，实际上，如果开发者忘掉这些规则。甚至导致网页不能如预期显示，甚至导致CSS停止工作。为此，可以去http://validator.w3.org/ 验证你的网页是否规范。

几个提示

如果你对于html结构还是不得要领，可以尝试这些做法：

重要的内容尽可能放到h标记里去——重要事情说三遍。同级内容放一块。高级标题不要放到低级标题里。
文本段落放到p标记里
诸如标题组，导航栏放到ul-li里面去。
诸如目录这样的内容，用有序列表oi-li去控制
对于引用，独立成段的用<blocquote>，段内引用使用<q>
类似版权声明，作者联系等，用<adress>就再好不过了
所有用标记，标记属性实现的样式，CSS全部都能做到
对于可能被识别的代码，又不想用code标记的，用div或span包装，再做样式化处理。别乱用其它的标记（作者建议）
div也不是滥用的：能用语义化的就用语义化标签。
对于非自闭合标签，强烈建议闭合。而少数自闭合标记，建议不予闭合。（如<br>、<img>等）
最后一点，做完之后拿去网上check一下。

论Doctype的重要性

HTML的行为是由公开声明决定的——即所谓的DTD。DTD控制了你的代码如何被解释，被哪个版本的语言解释。

事实上这和CSS紧密相关。如果你抛开不顾doctype声明不顾，浏览器就会进入quirk模式。简单地说，浏览器会按远古时代的的网页方式（譬如IE5）去解释你的代码。

所幸h5的doctype声明简单多了

<!doctype html>

让IE8只是IE8

IE8解释网页的行为总体来说比较诡异。可能回退到IE7甚至更早的版本——比如用户的不当操作，quirk模式等等——为了阻止这种诡异行为，让IE8始终在正常模式下工作——应该在header标签内加上：

<!--低版本浏览器模拟渲染-->

        <meta http-equiv="X-UA-Compatible" content="IE=Edge">

IE6、7或8？这是个问题

结论就是看情况.一个是国家，一个是用户群体。至少，IE8还是不能忽略的。

跨浏览器测试

根据客户来选择浏览器版本。

ie可以装个多版本测试工具，同时再装若干主流浏览器，safari可以找下windows版，或者在chrome下简单模拟一下。

基础HTML知识讲到这里就结束了。