笔记说明
《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>
代替。尽管html4尝试废弃这两个标签，但h5又把他们捡回来了。对于只是让它外观看上去是这样，但不是实质性强调的内容，还是可以用。对于出版物标题上的斜体，用<em>
就再好不过了。<cite>
不是没有用，但表格本来不是专门作页面布局的。<table>- 尽量避免在
上做文章。<body> - 用margin，不滥用
：因为浏览器可以自动给你的标记间插入其它空格（space），如果还不满意，就用margin去调整它吧。<br>
作为总结就是：不要乱用——对于不适应设计要求的标签，尽可能用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知识讲到这里就结束了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
