《Head First HTML与CSS》项目实践中学到的东西

1.组织的重要性。

首先是要建立两个根文件夹，一个存上线页面的资源，一个存测试页面的资源。所有改动内容都在测试页面的文件夹中进行，在这个文件夹中进行测试、W3C语法检测后（HTML检测网站：https://validator.w3.org/#validate_by_uri；CSS检测网站：https://jigsaw.w3.org/css-validator/），再把测试文件夹的资源覆盖上线文件夹。（这一条只适用于静态网页，即没有任何输入的页面。如果是存着数据的，应该不是这样直接覆盖（数据也被覆盖了~）。）

（验证工具中的“Using experimental feature:HTML5 Conformance Checker”=使用实验性特性：HTML5符合性检查工具，这是指验证工具正在根据HTML5标准检查你的HTML，不过由于HTML5标准不是最终版本（还在加特性），验证工具很可能会改变，所以验证页面的结果也不是固定的。）

然后每个文件夹都要有一个文件夹说明。说明这个文件夹是基于什么原因建立的，存的都是什么东西，作用是什么，以及用来记录未来想在这加什么需求；

其次，依靠建立不同的文件夹来组织网页的结构，但是不能滥用这一点（滥用反而不利于维护）。

2.bug的查找

浏览器的开发者模式是一个很好的调试方式。在那可以看到任意标签的样式表、布局等内容。

有些浏览器对路径中的字符个数会做出限制，所以一个大型网站的开发要注意这一点。

打开A页面——修改A页面成A1——查询A页面的元素继承，会发现结果是A1中修改后的结果，但是，页面效果不刷新是不会变成A1的效果的。

3.页面构建

block元素通常用作Web页面中的主要构建模块，而inline元素往往用来标记小段内容。设计一个页面时，一般先从较大的block元素开始，然后在完善页面时再加入inline元素。（block和inline是一个坑，详见http://www.cnblogs.com/wuduojia/p/7763025.html第4）

设计页面的时，对于一些布局上的效果（其实就是CSS样式），要先分析是怎么做到的——比如是左外边距加长了？还是上内边距变小了之类的。

如果你确实希望页面在多种浏览器上有一致的外观，就需要在大量浏览器中对页面进行测试和知道一些特定的规则（典范）的CSS技巧——不过要记住，这些工作都是需要花费时间的，精益求精的代价有时是得不偿失的，要权衡。

要了解每个需求的根源，即为什么要有这个功能——举个例子，因为我知道这个页面里的某个<img>只是装饰作用，所以我不必费心思想她的alt属性要怎么写，也不必再把其分成缩略图和高清大图分开存放调用。这一切都是建立在我知道这个图有什么用的基础上的。网站页同理！只有清楚了这一点，才能知道哪些地方要费尽心思优化，哪些地方用力过猛只能得不偿失（又比如不要因为别人告诉你要写一个按钮，然后你就只写一个按钮。努力在更高层次上去理解为什么。如果你持续关注为什么，你对你的团队和公司会有更大价值——参考于拥抱大前端 盘点那些值得你了解的最佳开发实践）。所以，团队的需求沟通很重要！要好好利用这里的“为什么”去提出问题，在团队沟通中搞明白，知道在寻求帮助之前要在某件事上花多少时间，也知道要问什么问题以阐明需求来推进项目。

不要过度实现或者一遍遍重构，争取所谓的“完美代码”，应该优先弄“可交付的代码”；必须利用经验和本能来知道什么时候要专注于架构和完美，什么时候就只是把事情搞定。 人的精力有限，很多东西不是在一天的每个时候都能做到的，一个人也不可能在所有计算机方面的工作都做到那些，毕竟是人不是神。

自低向上构建程序的时候也不是什么都不考虑，在实现一个功能的时候想想有哪些实现方式，这些实现方式对后面要构建的东西有什么影响？从而决定到底用什么方式实现。

Richard Feynman, 挑战者号, 软件工程这篇文章值得警醒。

正常情况下，建立同系列的网页就像给同一间房装修一样，要保持风格上的一致。

4.为什么HTML不能乱造轮子，而C++中提倡造轮子。

其实是一样的意思，只不过表面看起来不一样而已：

C++中，内容多，功能大，适合造轮子。而很多轮子别人已经弄过了，搞不好弄得很好，或者很符合你的要求，那么就没必要造了，去看看源码就好了——当然，如果你觉得不好（有缺点之类），或者不符合你的要求（没有你想要的功能），那么就再造一个，这就是“提倡造轮子”的意思。不能乱搞——比如有了int，你何必再搞一个新的数据类型int-1.0？

而在HTML中，很多时候你想到的黑科技，其实是你自己没把HTML和CSS分离开，或者说没有把结构和表现分离开，比如用<p>实现列表功能，实际上列表功能有对应的标签实现——大多数时候，已经有专门的元素标签能解决你的问题了，或者CSS能解决了，是你自己不知道或者理解的不好没想到而已。

综上所述，决定了两者能不能造轮子的理由是一样的：是不是已经有了相应的“轮子“？这个”轮子“满足自己的需求么？这个轮子对于自己的需求有什么副作用？这个副作用不可以接受？

向HTML和CSS学习————C++写的代码，把底层逻辑与应用的表面设计分离编写

5.绝对路径和相对路径，在浏览器解析、响应等方面有区别么？什么时候用绝对路径，什么时候用相对路径？

这就涉及到很多问题了，两种路径各有利弊。我接触不多，先写一点知道的。

1.告诉别人网址时，只说域名会更好一点：

因为域名输入后浏览器会自动寻找完整的URL，如果世界上只有你这么一个域名，那么就一定能找对。此时不管你换没换托管公司（比如你从www.wuduojia,cn换成了home.wuduojia.cn），只要输入wuduojia.cn就能进入正确的地方，当然这个前提是没有和你重复的URL（比如www.wuduojia.cn和home.wuduojia.cn只存在一个，不然就会找不到正确的了（在这里虽然域名唯一，但是实际上存在的网址有两个了））；

再就是，如果你的默认主页改了，只输入wuduojia.cn也会被浏览器自动转到wuduojia.cn/index.html(默认主页名字，这里的index.html只是一个例子），（如果你告诉别人的是wuduojia.cn/index.html，以后你突然改成wuduojia.cn/default.htm，别人就进不去了。）

2.使用相对链接来链接同一网站的页面，使用URL来链接其他网站上的页面：

“....一个问题是，如果一个web页面中有很多URL，她们会很难管理：URL很长，不容易编辑，而且也会影响HTML的可读性........如果一个网站都使用URL链接到本地页面，移动这个网站或者改变他的名字时，就必须修改所有这些URL来反映新的网站位置...推荐用相对链接来链接同一网站中的页面，用URL来链接其他网站页面。"

————————《Head first HTML与CSS》P145

URL的书写还涉及到要不要把协议写上去，详见：CSS和js链接方式用//代替http://有什么好处？（里面有个答主说外链要加全，我想知道万一外链也变了咋办……）

参考https://www.zhihu.com/question/68422353/answer/269384908?utm_source=qq&utm_medium=social，里面提到，由于链接写了http，导致部分网站因为这个原因不想升级为https。

6.http://www.wuduojia.cn:8000/index.html——这里的8000是什么？

8000是一个可以放在HTTP URL中的可选端口。通常Web上的所有东西都会传送到一个默认端口（80）,不过有时Web服务器会配置为在另外一个不同的端口接收请求（比如8000）——这种情况经常在测试服务器上出现。

7.不要把链接放到一起，用户很难区分放在一起的链接。

8.target标签与用户习惯。

我自己的网站完全是根据自己喜好来决定用不用target标签，但是对于一个面对用户而不是面向自己的网页，这个标签用不用、怎么用，就需要仔细调查、权衡了。

9.有必要了解各个浏览器（或者说主流浏览器）的内置默认样式和各个标签的默认内外边距是否存在、边框样式。很多CSS属性，都是有浏览器默认样式的，比如你没规定是白色背景，但是默认的就是白色背景；比如你没规定字体颜色、大小，但是显示的时候这些都是确定的——这就意味着这些都是有默认样式的，且这些东西在不同浏览器中有不同的默认值。

10.不同的浏览器在处理页面的方式上会存在细微的差别（这个差别指默认的样式），这种差别不止出现在不同浏览器上，还会出现在网速差和网速快上（比如图片的加载）、不同屏幕尺寸上（大部分情况指移动端和桌面端，比如你的样式建立在1080p上，而移动端比这个小），etc。

所以测试是重要的一个必做事项，不单单是不同浏览器间的测试，还要加上不同端的、不同网速上，这个在以后实际遇到了再说，目前只考虑不同浏览器（后面会考虑不同端、不同分辨率、不同设备等），又一个网站值得使用，可以测试页面在不同端的兼容情况：https://coolshell.cn/articles/757.html

11.在文件夹中直接看图片分辨率，这样更方便写<img>——在文件夹最上边的名称处右键-其它-在分辨率上打勾，即可实现。

12.关于图片。

实测1250x550的图片基本填充整个edge浏览器的页面，firefox开发者版本则在高度上高过一个页面一点——但是在浏览器本身大小不一时，同一格式的页面也会发生变化，这里的“填充整个页面”是指浏览器铺满整个屏幕时的尺寸（屏幕尺寸为14英寸，型号：Thinkpad x1 carbon2017）（2017.11.2）；

越来越多的人在移动设备上查看Web页面，太大的图像会影响这些设备上的数据使用；

使用visual studio2017自带的visual studio version selector可以改变图片的分辨率和查找颜色代号——当然，我用的是老版的Photoshop，一切切图功能都有；

想好图片是在HTML中用<img>加还是用<link>链接后在CSS选择器中用属性background-image加——这两点是不一样的：

1.<img>中加，可以通过alt属性提供可替换的文本以及为视力障碍者提供服务；用CSS的 background-image加，就不能有可替换的文本和为视力障碍症提供服务了。那么该如何选择？当你的某个图片只是装饰效果，如果用<img>则alt值要为空才不影响页面的表达（当然这就意味着，这张图片加载不出来对页面也没什么问题），这时候用CSS的 background-image就更好一点，这样可以省去图片的alt说明和width和height的值（该属性不需要这些东西）。

13.对于每一个我想把握的页面效果，必须用CSS显示地声明，否则就有可能被浏览器的默认样式给暗中改了（详见（3）《Head First HTML与CSS》学习笔记---CSS入门中的2）。

14.确定自己的缩进风格。我决定缩进2格。

注意在修改代码时，复制粘贴或者剪切粘贴会破坏代码的对齐！要及时修正。

15.一般都用<link>链接外部样式，把样式集中在一个CSS文件中。比如：

<!--这是一个HTML文件的<head>的部分代码-->
    <style>
      h1,h2{
        font-family: sans-serif;
        color: gray;
      }
      h1{
        border-bottom: 1px solid black;
      }
    </style>

——————————————————————————————————————————————————————————————————————————————————————————————————————————我是分割线
/*这是一个CSS文件的部分代码*/
     p{ color: maroon;}

注意，在HTML的代码中，下划线效果是独立出来写的，因为不希望h2也有下划线——先把统一的样式写了（比如第一段选择器样式h1，h2），再写单独的（比如第二段选择器样式h1）

这样做的好处在于，对于一些你希望统一格式的标签，可以一起修改（如果你分开写，每次修改的时候就要把所有选择器都修改一遍，一是麻烦，二是容易出错。），所以其实真正的意思是：对于多个页面都要保持一致的样式，写成CSS文件用<link>引入；对于始终只用于某个页面的样式，用<style>写在该页面的HTML中——这两种情况可能单独发生，也可能同时发生。

17.关于字体的大小和特殊字体的选择。

1.大多数PC上都有Verdana字体和Arial，对于font-family的最后一个候选字体，应当指定最全面的通用“sans-serif”或“serif”——即让浏览器为我们选择一个sans-serif或者serif系列的字体。《Head First HTML与CSS》推荐的候选字体系列是：

font-family： Verdana，Geneva，Arial，sans-serif；

2.获取Web字体需要时间，所以第一次获取时页面性能会受影响——移动设备和小型设备很可能不支持Web字体（注意，是不支持而不是没有。没有可以通过下载解决，不支持的话没有办法解决。）；每一个额外的字体都会额外增加页面的加载时间，所以如果页面中有多个Web字体，Web页面加载会很慢！所以，一般不是特别需要，不要用特殊字体。

3.用百分数或者em来定义相对的字体大小——这样字体大小是根据父元素的大小来定义的，就可以做到“用户看你的Web页面时，都能调整字体大小以方便阅读”。em和百分数区别？

参考的CSS代码（建议不要用像素px，因为有些浏览器在调整像素大小时会有麻烦）：

body{
    font-size: small;
}
h1{
    font-size: 150%;
}
h2{
    font-size: 100%;
}

这样做会有如下效果：

one：因为是相对于body字体大小定义其他元素的字体大小，所以改变Web页面的字体大小会很容易——只需要改变body字体大小，其他的元素就会自动按比例改变。

two：假设你的用户想调整页面上字体的大小，页面上的所有字体也都会自动调整大小——如果你是一个用户，所有这一切都在后台发生。当你增大文本大小时，所有文本都会变大，因为所有元素都会相对地调整大小。

那么，何时用px呢？

对于不同的浏览器，关键字的默认大小是不一样的（比如font-size属性的值small、medium等），所以如果大小很重要，就应该考虑用像素大小来指定（如果是font-weight属性定义的粗细，就是用数值而不是关键字，其他的属性也是类似的想法）！

什么时候用em什么时候用数字呢？

具体的例子看《Head First HTML与CSS》的CSS属性的5中对line-height属性用em还是用数字的讨论。在这总结一下就是：要时刻注意自己的想法和代码表达的意思是不是一样的！要做到这一点，不光是要注意到，还要能清楚每一个规则的真正意思是什么，就比如这里的em和数字——这也是为什么有了em还要有数字的区别，这种区别在字体中没区别，但是在line-height属性中就有区别了。

18盒模型与页面效果

有些页面效果是盒模型导致的，比如用外边距营造出左边、右边的缩进效果，详见：《Head First HTML与CSS》的CSS属性的5.

19.CSS属性重复写会覆盖，所以要想同时使用一个属性的效果，必须写在一起，比如：

h3 {
  text-decoration: underline，overline；
}

但是，有时候我们又必须分开写来覆盖，以达到想要的页面效果：

.guarantee{    
  margin: 30px;
  margin-right: 250px;/*这里只是覆盖了左外边距，其他方向的外边距还是30px*/
}

20.类与id

想要对多个元素使用某个样式，用class——因为多个元素可以共用一个类名，比如：

一个元素拥有不同的类，就能定义不同的样式：把<h1>放在“products”类中，这个类定义字体大小、粗细；再放到“specials”类中，如果这个商品降价，就让这个类把<h1>变成红色。

如果只有一个元素需要加样式，或者页面上只有一个元素，就用id——因为id是用来唯一命名元素的（一个元素只能有一个id，每个id的名字都是文档中唯一的）。

为什么要这样呢？

假设你在和一个团队共同开发一个Web项目。某个团队成员看到一个类时，他会认为其它元素可以重用这个类（就可能进行增加新样式之类的行为了）；如果看到的是一个id，就会知道这对应一个唯一的元素；

如果要在一个页面上指定元素位置，就需要每个要定位的元素有唯一的id；

div是放在类里还是id里？

用书上的一个例子说明：假设你的音乐播放列表页面中有很多唱片区，你可以把组成唱片的所有元素放在一个div中，然后把这些div放在一个“albums”（单词意味唱片）类中。这样可以标识唱片在哪里，而且可以利用类对她们同时指定样式。不仅如此，你还可以为每个唱片指定一个唯一的id，从而能为它单独的应用额外的样式。

上面的所有总结起来就是：对于希望成组指定样式或者在某些功能上多个地方要保持一致的元素，用class（这并不是说用了一个就不用另一个了！比如功能a、b、c是要一致的，那么我们给p元素加一个class；而功能d是p元素特有的，我们再加一个id来实现）。

21.混合样式表的重要性。

混合样式表比单一样式表强在哪里呢？

1.当你为一个网站进行样式设计时，你必须允许别人为某个页面的部分内容进行特别的样式设计，此时一个样式表就不够了。让我们来看这么一个例子：

假设Head First休闲室开张了，有了特许经营权，完成了首次公开募股。这将是一个庞大的公司网站，有数百个页面，显然你希望利用外部CSS样式表对所有页面增加样式。但由于公司有很多分部，这些分部希望以自己的方式对样式有所调整。另外休闲室经营者们也希望对样式有一些控制，，比如：

总公司：我们已经建立了公司网站使用的所有主要样式，包括字体、颜色等。（这一般是网站主要建立者弄的，目地在于方便地设定所有页面的效果。虽然这种效果是统一、没有区别的）

饮料部：我们会用总公司的颜色和字体，但是饮料页面我们要弄不同的行高（这是就要加一个样式表，用来覆盖行高——但是其它的效果，比如字体、颜色还是和总公司的一样。现在饮料的页面有两个样式表了）。

西雅图休闲室（饮料部的一部分）：我们的客户很年轻，追求时尚，所以对颜色有不同的要求，增加了一点特殊的颜色效果（现在，我们要弄一个新的样式表覆盖前面定义的颜色——现在西雅图休闲室的饮料页面有三个样式表了）

可以看到，我们必须要弄三个样式表，而不能这样弄：

饮料部：我直接把总公司的样式表改成我所需要的（把颜色改了，保留其它的样式），做成一个新的样式表，这样我的外部样式表只有一个！——这样做，以后饮料部要改变新加变化时，又要去改这个样式表；某天总公司的字体都改了，又要再改一次。如果是两个样式表，每次改自己需求的时候，只需要改自己加的那个样式表。公司改字体的时候，只需要去改公司的样式表。

2. 你可能想针对将要显示页面的设备类型（pc桌面、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本）来调整页面的样式。要做到这一点，需要在<link>元素中增加一个media属性或者直接在CSS中增加媒体查询。详见：《Head First HTML与CSS》的HTML标签、属性的9或者《Head First HTML与CSS》的CSS属性的6.

要密切关注指定设备的最佳实践。

3.混合样式表可以避免把所有规则都放在一个文件中导致CSS变得非常庞大，这不利于代码阅读，比如：

要为不同的媒体类型和特征指定不同的CSS规则，使用<link>还是@media？

两个都行，不过要注意：如果所有规则都放在一个文件，再用@media分开，CSS文件会变得非常庞大。通过为不同的媒体类型使用不同的<link>元素，就能按照媒体类型在不同文件中组织CSS——所以，媒体文件很大时，用<link>好。

22.关于判断条件。

判断条件最好别用“==”，因为很容易出错，下面举例子：

1.

知乎是一个大网站，出现这种低级的错误不应该啊。阿里巴巴JAVA开发手册中有一条：【强制】在高并发场景中，避免使用“等于”判断作为做中断或退出的条件。

说明：如果并发控制没有处理好，容易产生等值判断被“击穿”的情况，使用大于或小于的区间判断条件来代替。

比如：库存数=0退出，由于并发，成为-1，导致永远无法退出。

这像《白夜追凶》一样，大家分析一下案情。案情的奇怪之处是截图中的-2，是在我明显几秒后点击产生的，并发的错误不太可能，有可能是架构上的缓存问题，或者是故意而为之？

作者：孤尽

链接：https://www.zhihu.com/question/67945212/answer/258076356

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2.适配屏幕时，不用模糊的定义，要说清楚设备类型和分辨率。

@media screen and （min-device-width： 481px）{/*如果设备宽度大于481*/
  #guarantee{
    margin-right： 250px；
  {
}
@media screen and （min-device-width： 1000px）{/*如果设备宽度大于1000*/
  #guarantee{
    margin-right： 20px；
  {
}

这个例子中，如果设备是一样的，但是宽度大于1000，会有什么后果呢？

当CSS是：

h1{
    color: blue;
}

效果:

当CSS是：

h1{
    color: blue;
}
@media screen and (min-device-width: 10px){
  h1{
      color: red;
  }
}

效果：

当CSS是：

h1{
    color: blue;
}
@media screen and (min-device-width: 10px){
  h1{
      color: red;
  }
}
@media screen and (min-device-width: 20px){
    h1{
        color: grey;
    }
  }

效果：

当CSS是：

h1{
    color: blue;
}
@media screen and (min-device-width: 20px){
  h1{
        color: grey;
  }
}
@media screen and (min-device-width: 10px){
  h1{
      color: red;
  }
}

效果是：

由此可见，会被覆盖。所以，最好就是定义明确一点，毕竟市面上的手机、平板的设备类型和尺寸大小是基本固定的！

又或者，写的时候避免这种模糊的定义。

23.功能设计该如何设计

我在学习中发现，一些涉及设计的东西要考虑的方向不是那么简单的，比如：

1.把用户当傻子，考虑越多越好。

2.正常情况下会发生什么，根据正常的情况设置需求。

很多情况下，这两点要同时考虑又或者只考虑其中一个。

比如在设计用户输入数据的系统时，就考虑第一点别考虑第二点——你永远也不知道用户会输入什么奇葩的数据让你写的判断条件之类的东西崩溃（比如这篇文章中22提到的例子）

而在考虑样式的顺序时，要抛弃第一点，只考虑第二点，详见（4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类中关于a元素链接色的讨论。

24.如何看待一些所谓的“准则”，“规范”

首先，这些约定俗成的东西进过无数程序员的实践所推崇的东西一定是有其可之处的，比如推荐a链接的伪类样式顺序是link、visited、hover、focus、active，就蕴含着用户交互的考虑。所以我觉得要学要用，但是前提是搞懂为什么是这样的规范，即思考其出现的原因，毕竟我觉得没什么东西是放之四海而皆准的，这种东西血多了，想多了，就能帮助我更上一层楼。这种东西上哪学呢？一个是书，一个是自己创造，一个是模仿网站的时候思考自己和原网站的区别的原因（最好这个网站是那种工业化标准的网站——当然也不能看轻自己，说不定有时候会是自己对呢！）。

关于网站的选择，知乎上又一个问题可以参考，不知道有没有人回答：工业级别的网页？

每看完一本书，都要把期间学到的所有准则、规范、黑科技之类的东西总结一番！这个要列入自己的学习方法里。不能只在这里出现。

25.注意浮动的顺序，详见（5）《Head First HTML与CSS》学习笔记---布局与定位关于浮动的讨论。

26.这个系列的读书笔记里我多次引用了这个网站中对CSS属性和HTML标签的解释作为参考，但是根据知乎上某个大佬的意思，这个网址并不十分靠谱。我推测是为了让入门者不陷入细节的考量，简化了一些重要的东西，导致不准确。这一点将在我全面地阅读CSS权威指南和HTML5权威指南后，在专门的分区里针对这个读书笔记系列的两边文章（1、2）进行修正.

27.对于一些特定用途的标签，不能随便地放在文档流里。

比如，我们要把一个a元素内容为图片的内容作为页面上一个固定链接时，不能乱放这个标签。应当考虑到，如果不支持固定定位的浏览器在顾客手里时，这个乱放的a标签就会让页面显示不友好，所以我们应当把它放在文档流的最后（页脚之前），这样它在HTML中的位置在重要内容后面，对结构的影响就很小了。

28.标签语义化的作用：

1.对于浏览器、搜索引擎和构建Web页面的应用来说，只要它们愿意，利用这些含义，就能更明智地确定如何处理页面的不同部分。

2.开发人员也能更容易理解你的页面。

29.实现某个样式效果时，想一想有多少种实现的办法，哪种办法更好，为什么？

比如，书里P629提到的例子。