《Head First HTML&CSS》学习笔记 第四章：连接起来Web镇之旅

第四章：连接起来——Web镇之旅

章节总结：

• 要把网站发布到Web上，通常最好的办法就是找一家托管公司 来托管你的Web页面。
• 域名是一个唯一的名字，如baidu.com或mi.com，用来唯一标识网醒。
• 托管公司可能会为你的域创建一个或多个Web服务器。服务器通常命名为“www”。
• 文件传输协议 FTP 是向服务器传输web页面和内容的常用方法。
• FTP应用（如WS_FTP）提供了一个图形用户界面，使FTP的使用更为容易。
• URL是统一资源定位符 或Web地址，可以用来标识Web上的任何资源。
• 典型的URL由一个协议、一个网站名和资源的一个绝对地址组成。
• HTTP是一个请求和响应协议，用来在Web服务器和浏览器之间传送Web页面。
• 浏览器使用file协议从你的计算机读取页面。
• 绝对路径是从根文件夹到一个文件的路径。
• “index.html”和“default.htm”都是默认页面。如果指定一个目录而没有指定文件名，则Web服务器会查找一个默认页面返回到浏览器。
• <a>元素的href属性中可以使用相对路径或URL来链接其他Web页面。
• 对于你的网站中的其他页面，最好使用相对路径，对外部链接才使用URL。
• 可以用id属性在页面中创建一个目标。
• 使用#后面加一个目标记，可以链接到页面中的那个位置。
• 为了便于访问，可以在<a>元素中使用title属性提供链接的一个描述。
• 使用target属性在另一个浏览器窗口中打开链接。

  【注意】对于使用各种不同设备和浏览器的用户，target属性可能会有问题。

我的体会：

一、托管公司：
当你想要在Web上发布网页的时候，需要找一家托管公司来获取一个在Web上全天候工作的服务器。

选择托管公司时需要考虑的几点：

• 技术支持：是否有一个好的系统来处理技术问题；
• 数据传输：在一定时间内向访问者发送的页面和数据量；
• 备份：是否为你的页面和数据进行备份；
• 域名：定价中是否包含域名；
• 可靠性：能保证网站正常运行；
• 赠品：比如Email地址、论坛或脚本语言支持。（这对将来会很重要）

二、域名：

• 域名是唯一的，可以用来定位你的网站。

  例如：www.baidu.com ：
  www 是域中一个特定服务器的名字；
  baidu.com则为域名。

• 域名可以用于多个网站。

  例如：www.starbuzz.com 、corporate.starbuzz.com、employees.starbuzz.com等等。

• 在注册域名的时候，可以通过找到提供域名注册服务的公司来查看想要注册的域名是否已被占用。

三、FTP（File Transfer Protocol）文件传输协议：

• 一些常见的windows端的FTP应用：

  • Smart FTP
  • Cyberduck

• 传输本地文件夹到Web服务器的方法：

  1. 使用FTP连接到你的服务器；
  2. 使用 cd 命令把当前目录切换到文件传输的目标目录；（即进入目录）
  3. 使用 put 命令将文件从计算机中上传到服务器；
  4. 还可以用 mkdir 命令在服务器上创建一个新目录；
  5. 还可以用 get 命令从服务器获取文件到计算机中。

  • 如书中所示：

• 常见的FTP命令：

  • dir ：获取当前目录的文件列表；
  • cd ：切换到另一个目录；
  • .. ：上层目录；
  • pwd ：显示当前目录；
  • put 文件名：将指定文件从计算机传送到服务器；
  • get 文件名：从服务器获得指定文件并传回计算机；
  • 【注意 】使用 put / get 时，文件名要带上后缀。

四、URL（Uniform Resource Locators）统一资源定位符：

• 输入的Web地址称为URL；
• URL是一个全局地址，可以用来定位Web上的任意资源，包括HTML页面、音频、视频和很多其他形式的Web内容。
• 除了指定资源的获取，URL也能指定用来获取资源的协议。
• URL的协议部分告诉浏览器应当以什么方法来获取资源，网站部分则告诉浏览器要从互联网上的哪个计算机获取资源，绝对路径则告诉服务器要找哪个页面组成。

  以知乎热搜的网站为例：https://www.zhihu.com/hot
https 为 HTTPS 协议（即更安全的HTTP）；
  www.zhihu.com 为 网站部分
  /hot 则为资源的一个 绝对路径

• 如果需要链接到Web上的资源，只需要将它的URL作为<a>元素中作为 href 的属性值即可。

  例如：

  <p>
  	<a href="mission.html">Read about our Mission</a>. <!--相对路径-->
  	<br>
  		 Read the <a href="http://wickedlysmart.com/buzz/#Coffee">Caffeine Buzz</a>. <!--绝对路径-->
   </p>
  

• 通常Web上的所有东西都会传送到一个默认端口（80），如果没有指定端口，则默认为80。
• 而有的URL在网址后面会有:8000，如：http://www.mydomain.com:8000/index.html 。
  这一般多见于测试服务器。

五、绝对路径：

• 绝对路径会告诉服务器如何从根文件夹到达某个特定的页面或文件。（与相对路径类似，只不过不是从计算机本地的根文件夹开始寻找，而是从服务器端的根文件夹开始）
• 当在浏览器中单击了一个相对链接的时候，浏览器后台会根据这个相对路径去和所单击页面的路径创建一个绝对路径。
• 所有Web服务器看到的都是绝对路径。
• 关于绝对路径的编写格式与相对路径类似。但是从根文件夹出发的时候不要忘记加 / 。

  假设下图使用 HTTP 协议，且服务器为 www ，则其URL写为：
  http://www.mytravel.com/new/images/beijing.jpg
  其中，/new/images/beijing.jpg 即为其绝对路径。

• 链接页面有两种方法：相对路径和URL；
  相对路径只能用来链接同一网站内的页面，而URL通常用来链接其他网站。

六、HTTP（HyperText Transfer Protocol）超文本传输协议：

• HTTP是Web上传输超文本文档的公认的一种方法（协议）。
• 如果当无法找到资源，则服务器会向浏览器报告“404错误”。
• 通常默认文件名为 index.html 或 default.htm 【通常结尾没有“l”】，当然，这取决于是哪种类型的服务器。还有一些其他可能的默认文件名比如 index.php 。
• 如果服务器接收到一个末尾没有 / 的请求，而且这个目录也的确存在，则服务器会自动加上这个末尾的斜线。

七、其他协议：

• 浏览器从计算机本地读取文件时会用file协议。
• 文件的URL有三个斜线而不是两个。如：file:///study/chapter4/summary/contact.html

  类比：如果删去一个HTTP URL中的网站名，那么也能得到三个斜线

• 除了FTP、HTTP，还有其他协议，如mail协议，可以通过Email发送数据。

八、添加标题以便访问：

• <a>元素有一个title属性，可以用来提供链接信息，鼠标在此处停留一秒就可看到。
• 可以为任何元素增加title属性，这是一个工具提示。
• 通常建议title的属性值与所链接的Web页面的<title>元素值相同，不过你也可以提供你更好地理解。
• 进一步完善链接的技巧：

  • 链接标签简洁化，可以在title属性中提供额外信息，不要把大段文字放在链接里。
  • 保证链接的标签有意义，让用户看一眼就明白这个链接的目的。
  • 不要把链接混着放在一起，这会导致用户很难区分。

九、链接到页面中的某个特定点：

• <a>元素中的 id 属性可以允许直接访问页面中的一个特定点。
• id 必须是唯一的。
• 可以为任何元素增加 id 属性。
• 要链接到页面中的一个特定目标，只需在链接最后加一个#，再加上目标标识符即可。

例如：<a href="myweb.html#study">See Study</a>
其中，study为 目标标示符（目标锚名），在myweb.html界面应该有一块地方为：
<h2 id="study">Study<h2>的代码与之呼应。

• id 的命名规则与C++变量的命名规则相同，且尽量不加空格。如果想要分隔单词的意思，则可以使用- 、 _等代替空格。
• 在 href 和 id 中要是用相同大小写的字母，所以尽量都用小写，更方便一些。
• 没有目标 id 就无法定位至该处。

十、链接到一个新窗口

• 当需要链接到一个新窗口时，在 <a> 元素中使用 target 属性，并以 _blank 作为目标即可。

  即： <a target="_blank" href="需要新窗口打开的网址"> New blank </a>

• 如果把 target 属性指定为其他，例如"study"，则有相同目标名"study"的所有连接都会在同一窗口中打开。