奇舞-链接与图片-笔记

HTML 链接

 <a href="http://www.w3.org">W3C</a>

链接地址

省略协议

//会查询本地路径
 <a href="//cdn.dribbble.com/users/849366/screenshots/4399080/20180323_blog_quotable-quotes_dribre_1x.png">查看图片</a>

省略协议和host

 <a href="/index.html">返回首页</a>

相对路径与绝对路径

    <a href="/a/b/c.html">绝对路径</a>
    <a href="a/b/c.html">相对路径</a>
    <a href="../../c.html">相对路径</a>

页面内链接(锚点)

    <a href="#test"></a>
    <a href="#test2"></a>
    <a href="#test3"></a>

链接目标

    <a href="http://www.w3.org" target="_self"> 当前窗口</a>
    <a href="http://www.w3.org" target="_blank"> 新窗口</a>
    <a href="http://www.w3.org" target="abc"> 新窗口</a>
    <a href="http://www.w3.org" target="abc"> 新窗口</a>

图片

    <img src="/path/to/img.jpg" alt="替代文字" width="300" height="200">
   <figure>
    <img src="/path/to/img.jpg" alt="替代文字">
    <figcaption>图片说明</figcaption>
   </figure>

指定图片宽高

• 不指定宽高：原图大小显示
• 指定宽度： 按比例缩放到指定宽度
• 指定高度：按比例缩放到指定高度
• 指定宽高： 强制按照指定宽高显示

常用图片格式

• jpg
  
  • 照片
• png
  
  • 色彩比较少使用
  • png24可以半透明
• gif
  
  • 无法半透明
  • 可以多帧做动画
• webp