H5

学习目标：

1.统一资源定位符
2.绝对路径与相对路径
3.链接标签以及属性
4.锚链接
5.图片标签img以及属性
6.图像地图

学习内容：

1.统一资源定位符(URL)
 (1) URL(Uniform Resource Locator)的中文全称是"统一资源定位符".URL是文档在web或者internet上的地址,一般用在超链接当中.尽管URL看起来很长很复杂,但它是由4个部分构成,即协议名、主机名、文件夹名(路径)和文件名.
 (2) 例如: http://www.tsinghua.edu.cn/publish/th/index.html 
                 http是协议名,www.tsinghua.edu.cn是主机名,publish/th是文件夹名(th文件夹在publish文件夹下),index.html是文件名

2. 绝对路径与相对路径
  (1) URL大致可以分为两类: 绝对URL和相对URL
  ① 绝对URL: 包含了URL的全部信息,包括协议名、主机名、文件夹名和文件名 
  ② 相对URL: 通常只包含文件夹名和文件名,如果是在当前文件夹下,那么连文件夹名都不需要. 
 (2) 相对路径: ① 同级寻找,直接写地址就可以;
                         ② 同级往下找: 如:文件夹/地址;
                         ③ 跳出文件目录寻找上一级: ../ 

3. 内部链接与外部链接
  (1) 内部链接: 内部链接是指链接的对象是在同一个网站中的资源.与自身网站页面有关的链接被称为内部链接.
  (2) 外部链接: 外部链接是指跳转到当前网站之外的资源中. http://wwwbaiducom   

4. 链接标签
   (1) 超链接: 是指从一个网页指向一个目标的链接关系,这个目标可以是网页、图片等.
   
   (2) href用来指定链接的地址,可以是网页文件,也可以是图片. 空链接用"#"表示; title: 鼠标移上去提示的信息.

5. target属性
   (1) ① target: 用来定义链接打开的目标窗口.
   ② 属性值可以是 _blank、_self、_top、_parent
   ③ _self在原窗口中打开,为默认值.
   ④ _blank在新窗口中打开.
   (2) ① self
   ② blank

6.锚链接
  (1) 给页面当中的某个特定位置添加标记,可以通过a链接直接指向这个位置,经常用在页面内容比较多的情况.
  (2) <a href="#锚点名"></a>
       <a id="锚点名"></a>
       或者:
       <a href="#锚点名"></a>
       <a name="锚点名"></a>

7. 锚链接步骤 
步骤: (1) 首先建立锚点.
             名称可以是数字或英文,或者两者的混合,最好区分大小写 
             同一个网页中可以有无数个锚点,但是不能有相同名称的两个锚点 
         (2) ① 创建到锚点的链接,需要用#号以及锚点的名称作为href属性值.
              ② 链接到其他页面中的锚点: <a href="链接的文件地址#锚点名称">...</a>

8. 图片标签img 
  (1) <img> 单标签 
  (2) 属性: ① src表示"源"的意思."src"属性的值是所要显示图像的URL.
                ② width 宽度 
                ③ height 高度 
                ④ alt 给图像显示一个"交互文本".一般用于图片加载失败时的文本提示. 
                ⑤ title 鼠标移过时显示的文字(对SEO有帮助)
                ⑥ border 给图片加一个边框

9. 图片的超链接 
  (1) 用图片做链接
  (2) 当然不止仅仅可以把文字作为超链接,把图片做成超链接也是可以的,只要在<a>标签内嵌套一个<img>即可.
  (3) <a href="">
         <img src="">
       </a> 
   (4) 图片与文字的对齐方式: align: top/bottom/middle

10. 常用的图片格式
   (1) jpeg/jpg: 有损压缩,适合大图,压缩比率好
        一种图像压缩格式,用于摄影或者连续色调图像的高级格式.可包含数百万种颜色.
   (2) png: 无损压缩,支持透明压缩(最大限度还原图片清晰度),适合小图 
       一种非破坏性的网页图像文件格式,提供了将图像文件以最小的方式压缩却又不造成图像失真的技术. 
   (3) gif: 有损压缩,支持透明压缩;压缩比率不是很好;支持动态效果.
       图像交换格式,最多可使用256种颜色,最适合显示色调不连续或具有大面积单一颜色的图像,例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像.

11. 电子邮件的链接 
   (1) 链接到一个邮件,在安装邮件客服端程序后才能工作.
   (2) 例: <p>
                这是邮件链接:
                <a href="mailto:2199449063@qq.com">给我写邮件</a>
             </p>

12. 滚动标签marquee
    (1) <marquee>滚动文字或图像</marquee>
    (2) 滚动的方式:
       ① <marquee behavior="slide">...</marquee> 只滚动一次就停止 
       ② <marquee behavior="scroll">...</marquee> 循环滚动,默认效果
       ③ <marquee behavior="alternate">...</marquee> 来回交替进行滚动 
    (3) 滚动的方向:
       ① <marquee direction="down">...</marquee> 向下
       ② <marquee direction="up">...</marquee> 向上
       ③ <marquee direction="right">...</marquee> 向右
       ④ <marquee direction="left">...</marquee> 向左

13. 滚动次数 
   (1) <marquee loop="2">...</marquee> 默认值是-1,滚动会不断的循环下去 
   (2) 滚动的区间:
       ① <marquee width="180">...</marquee> 设定宽度
       ② <marquee height="30">...</marquee> 设定高度
   (3) scrollamount 设定移动速度

14. 创建热点区域(图像地图)了解 
   (1) 图像地图: 效果的实质是把一幅图片划分为不同的作用区域,再让不同的区域连接不同的地址.
   (2) <img src="" border="0" usemap="#map1">
        <map name="map1">
            <area shape="rect" coords="23,28,111,81" href="#">
            <area shape="circle" coords="23,28,81" href="#">
            <area shape="poly" coords="23,28,81,321,37,89" href="#">
        </map>
   (3) area 元素永远嵌套在map元素内部.area元素可定义图像映射中的区域.
   (4) <img>中的usemap属性可引用<map>中的id或name属性(取决于浏览器),所以我们应同时向<map>添加id和name属性.
   (5) 可选的属性
      ① coords 坐标值 定义可点击区域(对鼠标敏感的区域)的坐标
      ② href     URL     定义此区域的目标URL.
      ③ shape  default 定义区域的形状
      ④ rect     矩形
      ⑤ circle   圆形
      ⑥ poly    多边形

学习产出：

一. 1. 绝对路径与相对路径
      2. 超链接<a>
      3. target属性
      4. 锚链接

二. 1. 图片标签
2. 图片作为超链接
3. 图片对齐方式

三. 1. 重点: (1) 超链接标签的使用和属性
(2) 图片标签的使用和属性
(3) 相对路径
2. 难点: (1) 相对路径
(2) 图像地图