HTML入门笔记 03

• 网页中的图片分类
  • 用途分类
    • 内容图片
    • 修饰图片
  • 格式分类
    • gif-色彩表现少，解析速度快，支持动图，支持透明，是网页中修饰类图片的首选
    • jpg-色彩变现较多，不支持动图，也不支持透明，是网页中内容图片的首选
    • png-支持透明效果最好
    • webp-支持有损压缩和无损压缩，同样的分辨率，大小比 jpg、png 小 25% 以上
• 超链接<a href="" target="">文本、图片</a>
  • href
    • href没有值时，刷新本页面：<a href="">刷新本页面</a>，不建议值为空
    • href 值为绝对路径url：<a href="http://www.baidu.com">百度一下</a>
    • href值为相对路径（路径引入可参考img），可以访问相同根目录下的网页：<a href="网页文件名">去隔壁</a>
    • 如果在head 中设置<base href="http://www.taobao.com">，整个页面的空链接都会跳转到淘宝页面，绝对路径不会跳转，相对路径会和base设置的路径链接在一起，一般情况下页面都会出错
    • 锚链接：跳转到当前页面的某处，使用锚点，页面要有滚动条，href="#id值"
      • id属性，任何一个标签都可以设置id属性（值是惟一的），命名一般为字母或字母+数字或字母+符号（-、_）,不要以数字开头
    • href值可以是图片等，表示下载
  • target
    • target=_parent、_self、_top,新的页面覆盖当前页面
    • target=_blank，在新窗口中打开链接
      • 注：在head中设置<base target="_blank">，除非body中另有说明，否则会新窗口打开
• 图像地图<map>，<img>与<map>组合使用，可创建图像映射，即创建带有可供点击区域的图像地图，其中每一个区域都是超级链接，通过img中的usemap属性发生联系，即img的usemap值与map的name值相同
  • 代码输入如图，

    

  • <map>标签中<area shape="" coords="" href="">
    • shape(形状)，值分别为rect矩形、 circle圆形、 poly多边形
    • coords(坐标)，rect(4个点的x、y值)、 circle(圆心的x、y值、半径)、 poly(每个点的x、y值)
    • href 跳转的路径
    • target链接打开方式