（6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

1.内联元素的外边距、内边距与块元素稍有不同。

如果一个内联元素四周都增加外边距，只能看到左边和右边会增加空间；你也可以对内联元素的上下增加内边距，不过这个内边距不会影响包围它的其他内联元素的间距——所有内边距会与其他内联元素重叠（即这个内边距在一群内联元素里表现的不是叠加，而是公用一个最大的，而且这个样式效果必须在上下有块元素时才能体现。）

 

2.

header.top img#headerSlogan{
  float: right;
}

这是一个最佳实践：实际上，这个选择器不需要增加.top也可以正确地选择元素（众多header标签只有一个属于top类），不过这样一来，就能在CSS中更清楚地看出我们选择的是哪一个headerSlogan。

 

3.关于视频的格式

一个视频文件包含两个部分：一个视频部分和一个音频部分，每个部分都使用一种特定的编码类型来编码（这样可以缩小数据大小，并能更高效地播放）；包含视频和音频编码的文件也有自己的格式和格式名，这种文件称容器。

大多数情况下，并没有一种得到大家共识的编码。

现在主要有三个竞争（2013年）对手在争霸视频web界（如果你只关心apple设备（例子），那么只支持一种格式也可以；如果是多种设备，就不能只支持一种）：

1.WebM容器和其包含的Vp8视频编码、Vorbis音频编码。

   其由Google设计，扩展名是webm。

2.MP4容器和其包含的H.264视频编码、AAC音频编码。

   H.264由MPEG-LA公司授权，有很多债H.264，每一种分别称为一个profle。

3.Ogg容器和其包含的Theora视频编码、Vorbis音频编码。

   Theora是一个开源编解码器（编解码器=codec），扩展名为.ogv。

 

4.table中如果一行没有足够的元素（即某行的列数比其它行少），就会导致不能正确的对齐（少的那个会被后面的填补，即最后空的列会从后面开始空）。

 

5.

<p>
        Extra:<br>
        <input type="checkbox" name="extras[]" value="giftwrap">Gift wrap<br>
        <input type="checkbox" name="extras[]" value="caralog" checked>Include catalog with order
</p>

为什么这里的name有“[]”？

首先，这是合法的；之所以这样写，是因为编写这一段的脚本语言php希望得到一点提示，想知道一个表单变量可能包含多少个值。提供这个提示的做法就是在名字后加“[]”——虽然暂时用不到，记录一下也是好的。

 

6.form中的method属性值，POST和GET的区别。

首先，两者的目地都是一样的——将表单数据从浏览器发到服务器。

简单地说，POST会打包表单变量，在后台发到服务器；GET也是打包变量，但却是通过加在网页URL后面的方式给服务器发送。使用GET和使用POST，表面上的区别可以用一个例子说明：

原URL（即action的值）：

http://starbuzzcoffee.com/processorder.php

使用POST时，提交数据后URL不变，而用了GET，URL就会变成：

http://starbuzzcoffee.com/processorder.php?beans=Kenya&beatype=ground&.......

注意，浏览器输入网址的字符串是有长度限制的（注意，是浏览器的原因，不同浏览器其长度限制不同，这不是HTML的锅）。

那么，一旦表单数据过大，用GET传输时超过了这个字符串上限会发生什么（尤其要考虑有textarea的表单）？

从根本上讨论，或者说解释这两个方式的区别，目前的我很难理解——我看了几篇文章，没一个能让我全盘接受（好处是看了好几篇后可以选择性吸收——可能某点在文章A里是没提到的B里却提到了，可能某点在A里和在B里不一样等等）。

一开始我是不理解为什么POST不可以被标记为书签，为什么GET可以（现在知道了——这里说的标记为书签是指能不能把你输入到表单的内容保存在本地，由于POST发出去后你输入的内容就不见了；而GET则是在发出后写在URL后面，你输入的内容还在。），然而网上的答案就直说了哪个可以哪个不可以（其它的区别也是一样的，比如直接说GET波POST更安全，又或者说“更安全”是扯淡的等等）。

 

说到底，我觉得是要正确理解“GET的页面”和“POST的页面”的区别。

要说清楚这两个区别，首先要说清楚一个概念——你输入内容的页面和没输入内容的页面是两种东西。

当你进入一个有表单的页面时，假如其URL是"www.haha.com"，你把这个URL分享给朋友，朋友进入这个页面看到的所有内容将和你看到的一摸一样；

此时你在表单里输入你的名字，没有提交，URL还是“www.haha.com”，此时有两种情况：

1.这个表单的method值是POST。你把这个URL分享给朋友，朋友看到的是和你不一样的页面（页面表单里没有你的名字，除此之外一摸一样）。

2.这个表单的method值是GET。你把这个URL分享给朋友，朋友看到的页面和你的还是不一样（GET能本地缓存（应该没有“联网缓存”）——在某些应用里，关闭网页后再次进入，你会看到一个有你名字的表单。QQ空间网页版就是这样，你在说说处输入内容但不发布，重新打开时你还能看到那个没发布的内容。当然，你清除浏览器的Cookie和网站记录后再次进入这个页面就看不到未发布的内容了）。

现在，你把表单提交了（注意，有时候你可能都不知道自己提交了这个表单，比如百度搜索里，回车就是提交~），有两种情况：

1.表单的method是POST，URL变成了“www.haha.com/nimei.php”。此时页面被刷新，你的数据被提交服务器脚本返回给你一个新页面。此时就算你“后退”到“www.haha.com”也看不到你原来输入了内容的那个表单了；你把这个网页分享给朋友，朋友是看不到你的页面的（你这个页面必须是提交相同的数据后才能看到），这也是为什么你登陆微博后，直接复制地址栏的URL发给别人，别人看不到这个网页的原因。

2.表单的method是GET，URL变成了“www.haha.com/nimei.php?name="haha"&.....”。此时页面被刷新，同样得到一个新页面。如果你“后退”，你能看到原来输入了内容的表单；你可以保存为书签，关闭后再次打开能看到保存书签时的网页（因为URL里有你发给服务器脚本的所有数据，就相当于再次发送给服务器脚本相同的数据，返回的页面自然也就一样——服务器脚本处理这些数据得到的结果还是一样的话）；你可以把这个页面分享给朋友，朋友打开后能看到一摸一样的页面（理由和书签里说的一样）

 

 

但我觉得有一篇文章里的一个思想值得我深思和警醒：http://www.nowamagic.net/librarys/veda/detail/1919里最后几段所说的：

所以我对于GET和POST的理解，是纯粹地来源于HTTP协议。他们只有一点根本区别，简单点儿说，一个用于获取数据，一个用于修改数据。具体的请参考RFC文档。

如果一个人一开始就做Web开发，很可能把HTML对HTTP协议的使用方式，当成HTTP协议的唯一的合理使用方式。从而犯了以偏概全的错误。

可能有人会觉得我钻牛角尖。我只是不喜欢模棱两可，不喜欢边界不清、概念不明，不喜欢“拿来主义”，也不喜欢被其它喜欢钻牛角尖的人奚落得无地自容。

 

最后，这两个值什么时候该用哪个呢？

参考https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form的这一段即可：

method浏览器使用这种 HTTP 方式来提交 form. 可能的值有:

• post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
• get: 指的是 HTTP GET 方法; 表单数据会附加在 URI action 属性中并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。

这个值可以被 <button> 或者 <input> 元素中的 formmethod 属性重载（覆盖）。

（里面的两篇英文链接“POST方法”“GET方法”有空自己翻译翻译）

在使用上，总结为：

1.语义上，POST主要用于提交数据，改变服务器里的资源状态（比如登陆、注册等）；GET主要用于获取数据，不会改变服务器里的资源状态（比如获取一篇文章

   阅读，跳转页面等）——虽然两者都要提交数据和获取数据。

2.反正你必须和后端交流表单里的name和vule的命名问题，自己先大概确定用哪个，然后顺口问问行不行。

3.有大量文本内容需要发送时（比如textarea<input>），不能用GET，因为每个浏览器对地址栏的字符串长度有限制（注意，规范本身并没有这种限制，是浏览器的 

    锅）。为什么浏览器或者服务器会有这种限制？见：https://kb.cnblogs.com/page/188928/

4.想创建一个可以被分享的表单，用GET——比如你在淘宝里搜索“HTML5”，你想把这个页面分享给朋友，于是你直接复制了URL。如果这个页面是用POST创建 

   的，你这么做是没用的，朋友看不到你搜索了“HTML5”的页面。必须是GET创建的页面，朋友才能看到。

 （参考https://www.zhihu.com/question/28586791/answer/41779918）

5.GET可以被加入书签，收录进搜索引擎，能被缓存（缓存过的页面再次打开能更快）；POST都不能。

 

 

在两者的特点上，总结为：

1.HTML5里，form的method值只能是POST或GET。

2.没有设置method的值时，默认是GET。

3.GET和POST安全性差不多的，讨论这个不如直接用https。

4.method值为POST时，是把数据打包，并作为请求（注意，这里是请求，意味着属于应用层，而不是传输层）的一部分发给服务器脚本；method值为GET时，是把数据通过"？"和"&"分割数据的形式，拼接在URL后面再提交给服务器脚本。

 

以上我谈论的POST和GET是指HTML里的——再多我也不懂了。

 

最后，有人推荐我看《图解http》，当我看到下面这几段时就恍然大悟了：

TCP/IP 协议族里重要的一点就是分层。TCP/IP 协议族按层次分别分为以下 4 层：应用层、传输层、网络层 和数据链路层。
把 TCP/IP 层次化是有好处的。比如，如果互联网只由一个协议统筹，某个地方需要改变设计时，就必须把所 有部分整体替换掉。而分层之后只需把变动的层替换掉即可。把各层之间的接口部分规划好之后，每个层次 内部的设计就能够自由改动了。
值得一提的是，层次化之后，设计也变得相对简单了。处于应用层上的应用可以只考虑分派给自己的任务

.........

应用层决定了向用户提供应用服务时通信的活动。
TCP/IP 协议族内预存了各类通用的应用服务。比如，FTP（File Transfer Protocol，文件传输协议）和 DNS（Domain Name System，域名系统）服务就是其中两类。
HTTP 协议也处于该层。

...........

利用 TCP/IP 协议族进行网络通信时，会通过分层顺序与对方进行通信。发送端从应用层往下走，接收端则往 应用层往上走。
我们用 HTTP 举例来说明，首先作为发送端的客户端在应用层（HTTP 协议）发出一个想看某个 Web 页面的 HTTP 请求。
接着，为了传输方便，在传输层（TCP 协议）把从应用层处收到的数据（HTTP 请求报文）进行分割，并在 各个报文上打上标记序号及端口号后转发给网络层。
在网络层（IP 协议），增加作为通信目的地的 MAC 地址后转发给链路层。这样一来，发往网络的通信请求 就准备齐全了。
接收端的服务器在链路层接收到数据，按序往上层发送，一直到应用层。当传输到应用层，才能算真正接收 到由客户端发送过来的 HTTP 请求。

 

通过上面的阅读，你会发现考虑什么安全性是完全错误的，因为http所做的就只是应用层的工作，POST、GET的区别就是应用层上的区别，也就是其语义上的区别——GET用于获取，POST用于提交数据。

但是，就算是这也，上面我提到的特点和应用上的区别还是存在的，这些之所以存在，是因为受到环境的限制和应用的需要，而非是POST和GET的区别：

使用3：浏览器的锅；

使用4、5：语义的锅——GET是为了获取页面而存在，获取的方式被规定为无副作用的获取（无副作用就是靠特定4实现的）。而其它一系列的分享、加书签、缓存等具体的应用方向，是基于无副作用扩展开来的；

特点的1、2就不说了，存粹是规定。

特点3就更不用说了，安全性不在考虑范围，那是其它层面的事。

 

 

7.开发商特定的CSS属性

浏览器制造商通常会为他们的浏览器增加新的功能来测试新特性，或者实现一直在考虑但还没有得到标准组织批准的CSS扩展。在这些情况下，开发商会创建类似这样的CSS属性：

div{
  transform:rotate(45deg);                
/*首先要列出的是通用属性，以保证属性得到支持，或者至少将来得到支持*/
  -webkit-transform: rotate(45deg);   
/*webit是safari和chrome的开发商标识符*/
  -moz-transform: rotate(45deg);     
 /*moz是Mozilla的开发商标识符*/
  -o-transform: rotate(45deg);         
 /*o是Opera的开发商标识符*/
  -ms-transform: rotate(45deg);      
 /*ms是IE的开发商标识符*/
}

通常可以在各个浏览器的开发文档和发行说明中找到这些开发商特定的属性。

 

 

这本书的读书笔记到此为止。

在HTML5与CSS的学习上，本来我打算下一步是看《HTML5权威指南》，但通过这段时间的学习，我发现在Web开发这一块，书籍的主要作用应该是入门，而不是进阶——因为Web开发自2015年前后，很多东西才开始真正立为标准，而一本成熟的书，其局限的时间必然是其成书时间前3~4年的“成熟”。恰恰在Web开发中，当下的重要性在进阶中是比过去重要许多的！所以我决定，只看HTML5权威指南的部分章节，目地非“学习”而是“回顾历史”，学其思想。具体的使用上，我将在项目开发中用到什么学什么，当遇到我的第一个瓶颈时，再考虑书籍。

鉴于所看章节只有部分，就不另外开文章记录了，直接在这里记上即可。

《HTML5权威指南》

美·Adam Freeman著；牛化成、刘美英等著。

人民邮电出版社，2014年第一版。

 

HTML与CSS的区别，以及为什么分离样式和结构，我就不再记录了，已经是老生常谈的内容。

6.1 语义与呈现分离——————这一节相当有用，记录所耗时间过长，遂决定把这部分独立存为一个文档作为链接放在文章里。

“HTML就成了一个‘双速’标准。一部分元素（特别是新元素）只有语义方面的作用；而另一部分元素（特别是那些名字只有一个字母的）因为招牌如此之老，新标准在呈现与含义分离的原则上也只得向其屈服——尽管它不愿坦然承认这一点。

从下一章开始，在阅读元素说明的时候，对新思维和老路子之间的这种敏感关系最好要心里有数。它确实有助于解释读者碰到的一些琐碎的怪象。

我的建议是：在语义方面要求严格点不为过，只要有条件，尽量避用那些就有浓重呈现意味或存粹起呈现作用的元素。定义一个自定义类然后借助它应用所需样式并不复杂。只要做到样式的采用是以内容类型为依据而不是随心所欲，你至少也保持了一颗向着语义的心。”

————————在这让我想到了一个东西： css rest，对于这个的讨论，见：

HTML5 css reset    到底该不该用 CSS reset？