当前位置:   article > 正文

#WEB前端(HTML属性)

#WEB前端(HTML属性)

1.实验:a,img


2.IDE:VSCODE 


3.记录: 

a:

href插入超链接

默认情况下在本窗口打开链接,

target可以设置打开的窗口,parent在父窗口打开,blank新开串口打开,top在顶层串口打开,self为默认在本窗口打开

img:

插入图片

可以插入图片链接(src)和加载失败时显示的内容(alt)

可以设置图片的宽和高

运行效果:


4.代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>HTML属性</title>
  7. </head>
  8. <body>
  9. <a href="https://docs.geeksman.com">极客侠网址</a> <!超链接,默认为_self(在本窗口打开超链接)>
  10. <p><a href="https://docs.geeksman.com" target="_blank">在新窗口打开极客侠网址</a></p>
  11. <p><a href="https://docs.geeksman.com" target="_parent">在父窗口打开极客侠网址</a></p> <!target规定在哪个窗口打开超链接>
  12. <p><a href="https://docs.geeksman.com" target="_self">在本窗口打开极客侠网址</a></p>
  13. <p><a href="https://docs.geeksman.com" target="_top">在顶层窗口打开极客侠网址</a></p>
  14. <hr> <!分割线>
  15. <! src为图片的链接,alt为图片无法加载时显示的内容>
  16. <img src="https://ts4.cn.mm.bing.net/th?id=OIP-C.fFLzAD27IMu3Y07d2l2nIAHaLH&w=204&h=306&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2" alt="图片加载出错">
  17. <hr>
  18. <img src="超级马里奥.jpg" alt="出错了"> <!DOCTYPE html 直接加载同一路径下的图片>
  19. <hr>
  20. <img src="超级马里奥.jpg" alt="出错了" width="400" height="200"> <!DOCTYPE html 直接加载同一路径下的图片,设置显示的宽度和高度>
  21. </body>
  22. </html>

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号