HTML--Boby部分之<img>标签
随笔记录方便自己和同路人查阅。
#------------------------------------------------我是可耻的分割线-------------------------------------------
<img>标签是用来显示图片的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <img src="2.jfif" alt="校花" /> </body> </html>
结果展示：
注意事项：图片需放在html同一目录，不然需要写上图片的相对路径
以上结果可以看出图片加载成功了，但是有点大，优化一下就上长和宽：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <img src="2.jfif" alt="校花" width="200px;" height="200px;" /> </body> </html>
结果展示：
给图片加超链接跳转功能，比如淘宝一点击商品图片就跳转到商品详情页：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <a href="s12.html"> <img src="2.jfif" alt="校花" width="200px;" height="200px;" /> </a> </body> </html>
跳转到的页面，HTML文件名称为s12.html，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <form> <p>个人简介：</p> <p>姓名：不知</p> <p>年龄：不详</p> <p>她是网络上下载的不知名校花，哈哈哈哈</p> </form> </body> </html>
效果展示：
打开网页显示照片，点击照片后跳转到超链接
注意：其中alt属性是文字描述，如果图片加载失败，就显示该文件，效果如下
Title标签是用来显示提示信息的，鼠标悬浮到图片显示该提示信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> </head> <body> <a href="s12.html"> <img src="2.jfif" title="大美女" alt="校花" width="200px;" height="200px;"/> </a> </body> </html>
结果展示：
