笔记说明
《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知识讲到这里就结束了。