web3-HTTP协议和媒体设计
- 了解Http协议和服务，理解URL
- 掌握web图像处理策略
一、了解Http协议和服务，理解URL
（一）HTTP: HyperText Transfer Protocol
超文本传输协议
HTTP是一个简单的 “请求—响应” 协议
就是通过URL帮助你寻找服务器上的资源
响应完成就立即断开连接，不保持连接状态
资源：如HTML文件、图片等。
（二）URL: Uniform Resource Locator
统一资源定位符，又俗称网址。
URL = 协议 + 网站名 + 绝对路径
网站名 = 服务器名 + 域名
域名为什么叫域名，不叫网站名？
因为一个域名下可以有多个网站
- 两个特殊文件
- 你的URL可以只写到文件的目录
- index.html和default.htm（被unix系统识别）- 这是目录下的默认文件名，任何目录的默认页面。
- 默认文件名可以在服务器那一端修改。
| 当你输入 | www.startbuzzcoffee.com |
|---|---|
| 浏览器为你补全(黄色部分)，符合协议才可以访问服务器 | http:// www.startbuzzcoffee.com / |
| 然后是服务器知道的事(红色部分) | http:// www.startbuzzcoffee.com / index.html |
问：我见过这样的URL:
http://www.some.com:8080/index.html，其中“8080”是什么？
答：“8080”是你在HTTP中输入的可选端口，可能是为了测试，通常网上的所有东西都是传送到一个默认端口（80），相当于电话号码。
- URL可以作为链接目标
<a href="http://www.baidu.com">Baidu</a>
如何使用<a>元素创建登陆点？
(1)找到网页中需要创建登陆点的地方
(2)用<a>元素把它围起来
(3) 使用<a>元素的 id 属性定义登陆点的标识名
- 具体而言：
设置抛锚点：
<h3 id="Coffee">Coffee</h3>
设置连接点：
<p>Read the <a href="http://wickedlysmart.com/buzz#Coffee" title="Read all about caffeine on the Buzz">Caffine Buzz</a>
title是很好的工具提示，id是很好的锚！
问：设置id可以有空格嘛？
答：不可以，且有必要区分大小写。
问：可以链接到同一网页中的不同部分吗？
答：可以。例如：
<a href="#top">Back to Top</a>
前提是同一网页上有 id 为 “top” 的元素。
注意：在简写链接网站时，不要忘写最后一个"/":"http://wickedlysmart.com/buzz/#Coffee"
可是有个问题，不加/好像也可以-因为浏览器比较先进0.0
- 链接到一个新窗口
使用 target 属性。
例如：取值为 “_blank”: 每次都打开新窗口。
<p>Read about <a target="_blank" href="mission.html" title="Read more about Starbuzz Coffee's important mission">our Mission</a></p>
问：Target 怎么理解？
答：告诉浏览器新窗口的窗口名。如果你起coffee，那么，所有target为coffee的链接都会在同一个窗口中打开。如果你起“coffee”，那么所有target的coffee的链接都会在同一个窗口中打开。因为找不到id，就自动打开新页面。
- anchor锚（<a>）的几个属性总结：
| href | title | target |
|---|---|---|
| 指定超链接，可以在同一网页，也可以指定其他网页，“#”转到指定“id”位置 | 当鼠标移至选项时，会显示提示 | 一般目标新建窗口，其属性值为“_blank” |
二、掌握web图像处理策略
- 图片：选择格式
| JPEG | GIF | PNG |
|---|---|---|
可在照片中获得最好的效果，适合照片 |
适合几种纯色组成的图像，如 logo、剪贴画、和含有小段文字的图像 |
不支持动画，分为PNG-8, PNG-24, PNG-32 |
| 可用1600万种不同颜色显示图片 | 最多支持256种颜色 | IE6只支持png8格式的图片透明效果 |
| 一种“有损”格式，文件缩小时会丢失信息 | 一种“无损”格式 | 无损压缩 |
| 不支持透明 | 允许背景颜色透明 |
布尔透明vs.256阶alpha，透明效果很好 |
问：怎样链接一个网页上的图片？
答：在图像旁边又一个“复制图像链接”
问：怎么理解<img>是空元素？
答：img的内容是图像，但图像其实不是html文件的一部分。
- 总是提供可选项
如果图片下载失败，我们会得到：
——一个白色图片框，中间打个叉。
怎么提供可选项？
使用\<alt>属性，在图片打不开时提供备用选项。
- img 的几个属性总结：
| src | alt | height | width |
|---|---|---|---|
| 指定图片源source，支持URL | 图片不能正确显示时，提供文字说明 | 指定图片的高度，属性值即使是属性也需要加双引号 |
指定图片的宽度 |
\<img>元素是等网页下载完成后一张一张下载的。
可以用\<a>包围\<img>来为图片...