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

时间:2021-08-31 11:13:14

笔记说明

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