1.图片处理

(1) 图片格式

  • 网络带宽成本很高，图片处理在保证用户体验好的前提下，文件尺寸也要尽可能小
  • 图片属性静态文件，不要放在WEB服务器上，而放在云储存服务器上并使用CDN加速
  • 以JPEG类型优先使用，文件尺寸更小
  • 小图片使用PNG，清晰度更高，因为文件尺寸小，文件也不会太大
  • 网页图标建议使用css字体构建

Snipaste_2021-03-23_15-18-50.png

(2) 使用图片

  1. <img src='图片的路径' alt='图片碎掉的提示信息'>
  3. src路径问题：
  5.       1.绝对路径：从盘符一层一层向下寻找。
  7.       2.相对路径：以当前输入代码文件为基准，找它身边的文件。
  9.               (1) 进文件夹(进门)：文件夹名/文件名.扩展名
  11.               (2) 出文件夹(出门)：../文件夹名/文件名.扩展名
  13.  alt提示信息：
  15.       alt为图片碎掉时的提示信息，现阶段只有网速过慢时图片会碎掉。
  16.   为了避免交互感不友好，会进行提示信息写入。现阶段也负责为读屏
  17.   软件提供图片解读。

2.网页链接

在网站的使用过程中，页面上存在很多的超级链接，无数个超级链接交织在一起形成了互联网络。不能通过一个页面展示所有内容时，我们可以使用超级链接进行页面的跳转展示。

<a href='跳转的路径' target='跳转方式'>超级链接内容</a>
<!-- 
        跳转的路径：

                    1.本地跳转：大部分自己编写的前端项目，需要跳转的页面都是在本地的。按照路径寻找方式进行设置。

                    2.外联跳转：一些超级链接跳转的页面是网上的页面，那么我们需要在编写时进行设置超本本传输协议。
                                            <a href="http://www.baidu.com">链接</a>

        跳转的方式：

                    1.target='_blank'                     始终在新的空白页进行打开超级链接

                    2.target='_new'                         只在一个新的空白页进行打开超级链接

        超级链接的内容：

                    文字、字母、数字、符号、图片都可以作为超级链接。
-->

3.超级链接的功能

(1) 锚点功能

<!--
        锚点功能设置：

                1.在想跳转的标签用id起一个名字。

                2.在a链接href处敲入#id名。
-->
<h1 id='名'>内容</h1>
....
....
....
<a href='#id名'>Top点我回到顶部</a>

(2) 在指定窗口打开超级链接

<!-- 
        在指定窗口打开超级链接：

                1.在想跳转的窗口(iframe)用name起名字。

                2.a链接正常编写，加入target属性，敲入name名。
-->

(3) 特殊功能

<!-- 调用手机拨打电话功能 -->
<a href='tel:13333333333'>拨打13333333333</a>

<!-- 调用手机发送短信功能 -->
<a href='sms:13333333333'>发送至13333333333</a>

<!-- 调用手机邮件功能 -->
<a href='mailto:1923382497@qq.com'>发送右键给我</a>

<!-- 下载文件 -->
<a href="https://www.hljphp.com/HLJPHP-201905072207.zip">下载</a>