（1）《Head First HTML与CSS》学习笔记---HTML基本概念

落日映苍穹つ 2023-05-29 11:39 20阅读 0赞

## 前言： ##

1.     这本书并没有面面俱到，涵盖所有内容，只提供作为初学者真正需要的东西：基本知识和信心。所以这不是唯一的参考书。（我买了一本《HTML5权威指南》作为参考书和这本一起看，但还是以本书为第一个月的主要学习书籍，权威指南将在看完这本后再认真看一遍）

2.     慢一点看，虽然这本书页数多但实际内容并没有页数那么夸张。慢才是真正的快，慢才能多思考和留充足的时间写代码。

3.     记笔记。

4.     睡前就别看书了，放松一下，我的办法是打dnf怪物猎人OL。目前的作息基本上是：

7：00起床吃早餐看新闻，9：00开始学习；

12：00吃午饭，吃完后看技术文章，13：30午觉；

14：30起床洗漱，14：00开始看书；

17：00吃晚饭，吃完散步一会，洗澡整理内务.18：30看书；

22：30停下放松，23：30上床睡觉。

周末会选一天休息，打打王者、跑步锻炼或者看电影、出去和同学聚餐等。

5.     先用半个月用txt写代码把整本书过一遍，然后使用atom再过一遍，这里一系列的文章都是第二遍的产物。为什么要先txt过一遍而不是直接用更方便的IDE？

因为在真正掌握HTML与CSS之前，尽管那些工具很棒，但是工具本身为了实现便捷性，隐藏了很多具体的、细节的东西，这些东西是重要的；

通过一个用户界面修改代码比直接改原始的HTML与CSS麻烦得多；

（.....不过代码量上来以后，框架的好处就会很快显示出来：无需小心翼翼，只要框架没bug，js算就给他算一下了，无伤大雅，总比操作失误DOM刷新/项目代码太乱，太难维护来得强太多了。反正么，大家电脑现在谁不是8G内存，泰坦xxoo，i5i7？.....为了让代码更好维护，程序员少掉头发，更有时间泡妞约炮，伟大的先贤发明了各种框架来代替我们手动操作DOM——这句话当作使用IDE的原因也是可行的。出自：[方正的回答][Link 1]）

语言的标准改变时，工具不一定能马上更新，此时你若懂了那些东西，这些改变就不会影响你。

6.     这本书的基本脉络是：

HTML的基本概念——基于标准的HTML5——核心的HTML标签、属性和CSS属性。

7.     好的Web页面都是页面结构和页面表现清晰分离的：HTML负责建立结构，CSS负责指定样式。

8.     准备多个浏览器对代码进行测试，这能让我了解到不同浏览器之间的差异和获得一些如何创建适用于多种不同浏览器的页面经验。

在此我准备了2个浏览器：火狐开发者版本、IE10.本来想加上一个主流的360，但是360是全家桶，装了太卡只好作罢，等着以后有钱了买台二手用来专职测试再说。

9.     别指望本书的例子都很简洁、健壮，为了方便学习，这些例子的注重方面是简单。

10.   有些Brain Power练习根本没有所谓的正确答案；有些则是通过这个过程让你确定你的答案是否正确，以及在何种情况下正确；有些则是给你提示，指明正确方向。

11.   Safari图书在线，一个按需提供资源的数字图书馆：

[https://www.safaribooksonline.com/?utm\_source=my&utm\_medium=referral&utm\_campaign=classic][https_www.safaribooksonline.com_utm_source_my_utm_medium_referral_utm_campaign_classic]

12.   我的笔记同样不会“面面俱到地”记录所有东西，只记我认为我会忘记的、重要的东西和思考产物。

13.   本书是2013年9月第一版，2017年9月北京第15次印刷。

## HTML的基础概念 ##

1.     HyperText Markup Language=HTML=超文本标记语言

2.    HTML的标记告诉浏览器哪些文本是标题，哪些文本是段落，哪些文本需要强调，或者图像要出现在哪里——这就是前面说的结构而不是表现，同时也是超文本标记语言中“标记”（ML）一词的来源；

顺便提一下，一般“元素”指包含了代码的标签。

HT的来源是一个强大的<a>标签，她使我们摆脱了单个页面的束缚，链接到其他页面。

3.     单纯使用HTML语言时，浏览器会使用默认的样式来表现结构。

注意，这个“默认的样式”在不同浏览器上可能是不同的，比如<q>元素，有些浏览器上的样式会加引号，有些不会。

4.     Web是基于没有任何特殊格式字符的文本文件创建的（正因此，所以特殊格式的字符要想写入HTML，必须用特殊的代号表示，参考：[http://www.w3school.com.cn/tags/html\_ref\_symbols.html][http_www.w3school.com.cn_tags_html_ref_symbols.html]）

5.    使用Txt格式（文本文档）写HTML时可能会遇到乱码的情况（即txt文件中的代码正确，但是网页显示却是乱码的情况），这是因为txt有时候默认保存的编码不是utf-8，这就导致你保存的txt文件不是utf-8的编码，在浏览器读取txt文件的时候就会读成乱码，导致网页显示也变成了乱码（注意，页面代码中<mate>指定的utf-8是指让浏览器以utf-8的编码格式来读取文件，但是如果txt文件本身就不是以utf-8保存的话，也是读成乱码的），这一点可以在乱码页面用开发者模式看到（开发者模式下，你的代码是乱码），例图如下：

![1055830-20171031175334590-236985479.jpg][]

解决的办法是，把相应的HTML文件另存为utf-8编码的文件——这样才能使文件格式与浏览器的解析格式一致。

一般是更改<img>属性和增加<mate>标签时会出现这种情况。

注意看的话，会发现英文和一些符号没有乱码，只是中文变成了乱码（这也是为什么要存为utf-8的原因：UTF\-8就是在互联网上使用最广的一种unicode的实现方式,这是为传输而设计的编码,并使编码无国界,这样就可以显示全世界上所有文化的字符了。）——这也是导致页面内容中数字和结构正常输出，文字内容却乱码的原因。

6.     Cascading Style Sheet=CSS=层叠样式表

7.     CSS的语法与HTML完全不同。

8.     就像不能用数学写诗，不能用英语算账一样，你不会用CSS来创建结构，或者使用HTML创建样式，因为这并不是当初设计她们的初衷。尽管这意味着你得学习两种语言，但你会发现，由于每个语言各有其擅长的方面，与试图使用一种语言兼顾这两方面的工作相比，实际上学习两种语言让她们各司其职反而更为容易（这与C 有点不一样，C 是什么都能干，至于干的方便不方便等问题就不好说了。）。

9.   网页信息、网页内容、网页结构、网页样式是不同的东西。

网页信息在<head>标签中，网页内容在<body>标签中，网页结构由HTML建立，网页样式由CSS建立。

11.   atom里的atom-html-preview插件有点问题，有时候无法预览到图片和链接的地址页面......重启可以解决。

12.   不是所有标签都能作为内嵌元素，详细请看[这][Link 2]。

13.   代码更新后要刷新浏览器页面才能更新代码更改后的效果。

14.   有的时候链接里使用中文会出现乱码，遇到这种就去相应文件另存为吧，和上面说的那个乱码情况一样。

15.   不同的操作系统使用不同的文件分隔符，Windows使用“\\“，但在Web上我们选择了一个通用的分隔符：/，所以不管你是什么系统，在HTML的路径中都要使用/

注意，这里的文件分隔符是指路径中的那个，和标签中的/没有关系！

16.   为网站选择的文件名和文件夹名中不要使用空格。可以用C 中的命名规则来命名（比如IAmWiner）。

这有一个疑问——为什么有些命名可以有空格，有些不能有？（参考各个语言，不要止于HTML）

17.   使用短引用标签<q>的原因：增加页面结构——即原来直接当作文本的话，引用的内容就是一个普通文本。在使用标签后就是告诉浏览器这是一个短引用，这样在搜索包含引用的网页时才能搜到；还有就是可以通过CSS来改变这个短引用的样式（而不是改整个文本）。

18.   block元素（又称块元素）<blockquote>与inline元素（又称内联元素）<q>的区别：

1.语义上看，<blockquote>是长引用，<q>是短引用。

2.语法上看，<blockquote>是一个”容器元素“，她是一个全新的块区域，就像<h1>、<head>一样，在样式上是前后各有一个换行；

<q>则是一个”行内元素“，她是依托于块元素的，是在块元素中的，在样式上前后没有换行。

我们在分析一个页面结构的时候，往往会一个块一个块地去分解页面，这里的块含了<head>、<h1>、<blockquote>、<p>等，不包括<q>。

在这里要注意，“换行”有两种，一种是结构上的换行，即区分不同结构需要的换行(包括HTML标签<br>实现的那种换行）；另一种是样式上的换行，这种换行是为了表达效果，也就是样式效果需要的换行（比如CSS中的white-space属性）。

要时刻记得，标签或者说元素都是为了结构服务的（在结构中，换行是区分整体和部分的办法，毕竟对于纯文本，就算是作者，仅仅通过标点符号也很难区分部分和整体——不管是谁都需要一定的视觉信息才能做到。但是这种视觉信息更多的是为结构服务而不是样式，更多的<br>讨论见[http://www.cnblogs.com/wuduojia/p/7763025.html][http_www.cnblogs.com_wuduojia_p_7763025.html]中的第二点。）

（block和inline是一个坑，详见20）

19.   为什么在<q>中用<blockquote>没有任何意义：

首先，这样使用想表达的结构是：引用的引用，即引用的句子中又引用了新的句子。这样的结构注定了一个语义：除了第一个引用，后面的所有引用都是隶属于第一个引用的，即不能独立出去（换句话说就是引用里的引用都属于第一个引用的范畴，都依托于第一个引用）。而<q>是一个不能独立出去的引用，把他作为第一个引用后的任何一个引用都是正确的；<blockquote>则是要独立出去的，所以不能作为第一个引用外的任何一个后面的引用。

所以语义上这样做没有任何意义——语法上也不允许（在W3c语法验证过）。

20.   在我看来，有些inline元素的属性是继承其父block元素的，所以在这些inline元素中某些属性是直接继承的，或者是干脆就不存在。这一点以后再验证对不对。

（这是错误的看法，现在已经不再有inline和block了，详见12）

21.   在我看来，列表既然是块元素，那么页面构造时应该是如图左侧这样划分，而不是右侧那样：

![1055830-20171101104417638-891871172.jpg][]

而<ol>和<ul>元素设计为只能包含<li>元素。（当然，<li>中可以包含别的元素）

22.   只有计算机或设备安装了正确的字体，浏览器才能正确显示你想要的字符——实际上并不能保证这一点，所以不是所有字符都能显示正确（把字符改成特殊字体也成立——特殊字体指微软雅黑、宋体等）。

特殊字符要用字符实体替代才能在HTML代码中以文本形式输出到页面。

23.   <a>根据上下文可以当inline元素也可以当block元素；

img是inline元素——为什么？我总结到了[http://www.cnblogs.com/wuduojia/p/7763025.html][http_www.cnblogs.com_wuduojia_p_7763025.html]里的第4点\*（注意回答的时间，在15年的时候，已经不再有inline和block这种划分了（参考12）！）。

24.   www.wuduojia.cn是一个网站名，wuduojia.cn是一个域名——可以创建使用相同域名的其他网站，比如corporate.wuduojia.cn

浏览器中输入的地址称为URL（统一资源定位符=Uniform Resource Locators），其包括了一个协议（HTTP）、一个网站名（www.wuduojia.cn）、资源的绝对地址（即绝对路径）

“Http：”是获取资源的协议，是一个请求和响应协议。URL不止可以指定资源的位置，还可以用来获取资源的协议。HTTP=HyperText Transfer Protocol=超文本传输协议

获取页面的过程：协议告诉浏览器要用什么方法获取资源（大部分情况都是HTTP协议），网站部分告诉浏览器从互联网上的哪个计算机获取资源，最后绝对路径告诉服务器我们要的是哪个页面。

“ftp”是文件传输协议（File Transfer Protocol），是向服务器传输web页面和内容的常用方法。

这里请看书《图解HTTP》

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[Link 1]: https://www.zhihu.com/question/67479886/answer/253247996
[https_www.safaribooksonline.com_utm_source_my_utm_medium_referral_utm_campaign_classic]: https://www.safaribooksonline.com/?utm_source=my&utm_medium=referral&utm_campaign=classic
[http_www.w3school.com.cn_tags_html_ref_symbols.html]: http://www.w3school.com.cn/tags/html_ref_symbols.html
[1055830-20171031175334590-236985479.jpg]: https://images2017.cnblogs.com/blog/1055830/201710/1055830-20171031175334590-236985479.jpg
[Link 2]: https://www.zhihu.com/question/34952563/answer/60672228
[http_www.cnblogs.com_wuduojia_p_7763025.html]: http://www.cnblogs.com/wuduojia/p/7763025.html
[1055830-20171101104417638-891871172.jpg]: https://images2017.cnblogs.com/blog/1055830/201711/1055830-20171101104417638-891871172.jpg