《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感

时间:2021-11-03 03:34:45

编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版

涉及到的知识点

1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

2. border-collapse 属性设置表格的边框是否被合并为一个单一的边框

描述
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。

3.:after 选择器在被选元素的内容后面插入内容。http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after_style

请使用 content 属性来指定要插入的内容。

p:after
{
content:"台词:-";
background-color:yellow;
color:red;
font-weight:bold;
}

4. zoom版本:IE5.5+专有属性 继承性: 语 

zoom : normal | number 
 参数:
normal :  使用对象的实际尺寸
number :  百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
说明:设置或检索对象的缩放比例。
 示例:http://www.divcss5.com/shouce/c_zoom.shtml
div {zoom : 0.75; } 
 
5.

widget 英[ˈwɪdʒɪt]
美[ˈwɪdʒɪt]
n. 小器具,装饰品,窗口小部件;
[例句]The secret is a little widget in the can.
奥秘在于易拉罐中的一个小玩意儿。

overlay 英[ˌəʊvəˈleɪ]
美[ˌoʊvərˈleɪ]
v. 覆盖; 镀金;
n. 覆盖物; 轮廓纸;
[例句]The floor was overlaid with rugs of oriental design.
地板上铺着东方风情的地毯。

stacked 英[stækt]
美[stækt]
v. 堆积( stack的过去式和过去分词 );
[例句]They are stacked neatly in piles of three.
它们每3个一组被整齐地码放在一起。

6.

<style type=”text/CSS”>
span{font-size:40px}
.test2{color:green}
.test{color:red}//覆盖前边的,显示红色
</style>
<span class=”test test2”>1234567890</span>

<style type=”text/CSS”>
span{font-size:40px}
.test2{color:green}
.test{color:red}//覆盖前边的,显示红色
</style>
<span class=”test2 test”>1234567890</span>

根据类在css中定义的位置,后边的覆盖前边的

另外,HTML标签的权重是1,如p。class的权重是10,如.test。id的权重是100,如#id。权重总合越大,越不容易被覆盖。

7.DTD全程Document Type Definition, 即文档类型定义。DTD是一种保证HTML文档格式正确的有效方法,可以通过比较HTML文档和DTD文件来看文档是否符合规范, 以及元素和标签使用是否正确。一个DTD文档包含元素的定义规则,元素可使用的属性,可使用的实体或符号规则。

8.

cite 英[saɪt]

美[saɪt]
vt. 引用,引证; [法] 传讯; 表扬; [军事] 传(或通)令嘉奖;
n. <口>例证,引文;

acronym 英[ˈækrənɪm]
美['ækrənɪm]
n. 首字母缩略词;

9.块级元素可以设置width、height属性。而行内元素设置width、height属性无效。

但奇怪的是,行内元素水平的padding-left、padding-right、margin-left、margin-right都能产生边距效果。而竖直方向的却不会产生边距效果。

我们可以通过修改display属性来切换块级元素和行内元素,如block或inline。

感想

如果让我就这个主题写一本书,我会写点什么呢?也许很少吧,也许无从下手吧。所以,多看书吧,满足一下自己的求知欲。