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

时间 2019-11-17

标签 head html css 项目实践中学到东西栏目 HTML 繁體版

原文原文链接

1.组织的重要性。css

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

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

而后每一个文件夹都要有一个文件夹说明。说明这个文件夹是基于什么缘由创建的，存的都是什么东西，做用是什么，以及用来记录将来想在这加什么需求；html5

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

2.bug的查找程序员

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

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

打开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样式表对全部页面增长样式。但因为公司有不少分部，这些分部但愿以本身的方式对样式有所调整。另外休闲室经营者们也但愿对样式有一些控制，，好比：

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

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

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

能够看到，咱们必需要弄三个样式表，而不能这样弄：

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

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.关于判断条件。

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

知乎是一个大网站，出现这种低级的错误不该该啊。阿里巴巴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提到的例子。