HTML-图片标签/超链接/超文本

img标签
src属性：图片的路径或者图片的地址
alt属性：图片名称，百度等搜索引擎根据alt字段搜到图片，有利于seo，图片路径错误时，会展示alt内容
图片位置需要与html文件同级，否则找不到路径
img元素是行内元素

<img src="image.jpg" alt="image">

相对路径/绝对路径
相对路径：
./当前位置
../当前位置的上一级
/下一级

<img src="./image.jpg" alt="image">
<img src="/html/image.jpg" alt="">

绝对路径：
分为本地路径（几乎不使用）和网络路径

<img src="https://p0.ssl.qhimgs1.com/sdr/400__/t04cf1bbcdf96e68656.jpg" alt="">

常见图片格式
jpg/png/bmp/gif/webp/base64

超链接
a标签：
href属性是超链接要跳转的地址
可以是网址，也可以是内部网页（相对路径）
target属性：_blank是新页面打开 _self在当前页面打开。

a标签是行内元素

a标签不可以嵌套a标签

1、标签还可以跳转文件，href直接用文件的相对路径即可
2、download属性触发下载，image是下载的文件名

<a href="/html/image.jpg" target="_blank" download="image">下载图片</a>

3、a标签跳转锚点
name只有写在a标签才是锚点

//a标签跳转
<a href="#three">看第三张图</a>
//要跳转的锚点位置
<a name="three"></a>

另一种写法(推荐写法)：
使用id定位锚点，注意id最好不要使用数字开头

<a href="#atm">看第三张图</a>
<img id = "atm" src="/html/image.jpg" alt="">

4、回到顶部

<a href="#">回到顶部</a>

5、刷新页面

<a href="">刷新页面</a>

6、还可以写相对路径跳转其他页面某个锚点

<a href="./other.html#atm">看其他页面</a>

7、href还可以写js脚本

<a href="javascript:alert(666)">点我弹框</a>

<a href="javascript:">点了什么也不做</a>

8、唤起指定应用
href里：
tel:拨打电话
mallto:给谁发送邮件
sms:给谁发短信
Ctrl + Shift + Delete 清除浏览器缓存
超文本真正含义
是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。