HTML基础知识3-超链接（a）标签以及图片（img）标签

最新推荐文章于 2022-08-13 17:05:23 发布
VIP文章 最新推荐文章于 2022-08-13 17:05:23 发布
阅读量2.7k 收藏 6
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45353963/article/details/109745395
版权

一：a标签
又叫做：超链接标签
　　　　所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
　　　　
实例：

<a href="http://www.baidu.com" target="_blank" >百度</a>

<!DOCTYPE html>
<html lang="en,ch">
    <head>
        <meta charset="UTF-8">
        <title>超链接标签</title>
    </head>
最低0.47元/天 解锁文章
你的欢欢
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML入门之超链接
weixin_42892129的博客
02-14 1683
一、超链接简介 在HTML中，使用a标签来实现超链接。 1.href属性 用于设置超链接地址 2.target属性 用于设置链接打开方式 target属性取值如下表： 属性值 打开方式 _self 默认值，在当前窗口打开链接 _blank 在新窗口打开链接 _parent 在父窗口打开链接 _top 在顶层窗口打开超链接 二、外部连接 设置外部链接时，将href属性值设置为外部链接的网络地址。 语法： <a href="外部链接地址">文本或图片</a&gt
详解HTML的a标签（超链接标签）
weixin_30784141的博客
04-07 1万+
1、什么是<a>标签 　　<a> 标签定义超链接，用于从一张页面链接到另一张页面。　　<a> 元素最重要的属性是 href 属性，它指示链接的目标。 2、<a>标签的几个重要属性 2.1、href 　　规定链接指向的页面的 URL。 　　1. 链接https、http地址：　　 　　<a href="https://baidu.com...
EXCEL超链接图片用网页打开设置方法
05-02
解决EXCEL超链接图片用网页打开设置方法
【CSS】a标签超链接的各种样式及实现方法
热门推荐
qq_40818233的博客
07-28 2万+
       做前端的应该都知道，&lt;a&gt;标签是我们经常用到的标签，而且&lt;a&gt;标签的功能强大，下面就让我来汇总下&lt;a&gt;标签有哪些功能吧。 一、超链接        &lt;a&gt;标签最简单的应用无外乎就是超链接功能了，用&lt;a&gt;标签嵌套一段文本，一段图像均可以实现超链接功能。下面上图                         ...
HTML超链接和图片的插入
xh7531的博客
01-09 4374
HTML超链接 HTML标签里，<a>就是用来超链接的，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。 在超链接<a>中有 href 和 target 这两个属性，href 就是我们想要连接的目标，而 target 就是窗口的打开方式。 在 target 中最常用的两个，_self 和 _b
【HTML】超链接 a 标签用法
qq_45677671的博客
03-31 3091
超链接 标签使用方法及案例
图片标签与超链接标签
GWHMYS的博客
11-28 760
图片标签与超链接标签
前端学习--常用标签及属性（超链接a标签与img图片标签）
此鱼非闲鱼也的博客
01-15 3458
属性 值 描述 alt text 图片尚未加载出来时显示的提示信息。 src URL 显示图片的加载路径。 title text 鼠标移动到图片上的显示的提示信息 height px 图片的高度，单位像素 width px 图片的宽度，单位像素
Html前端基础（form表单、img标签、a href标签、id的作用）
Viewinfinitely的博客
04-23 2748
文章目录一、img标签二、a标签（带href）三、form表单 本篇主要分析Html前端开发中的img图片标签、a href超链接标签、form表单标签，其中form是重点 一、img标签 1、标签嵌套的规则： 不能在内联标签内嵌套块标签 2、img下的属性： img标签： src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片...
HTML常用标签（a标签/img标签/table标签）
m0_72552013的博客
08-13 1794
用于初步学习html的一些常用标签，主要为a标签，img标签，table标签。
解决EXCEL超链接图片用网页打开设置方法
05-01
解决EXCEL超链接图片用网页打开设置方法
06-超链接标签.html
12-19
06-超链接标签.html
html a标签-超链接中confirm方法使用介绍
12-12
代码如下:<a>删除</a>
HTML的标签 a标签超链接
01-07
HTML的标签 a标签超链接 超链接十分简单，共有三种 链接到本站点的其他站点 虚拟超链接 连接到其他站点 超链接a标签 三种超链接 链接到本站点的其他站点 标签1 连接到其他站点 带有协议部分名字 虚拟超链接 虚拟...
HTML超链接a标签_动力节点Java学院整理
09-28
<a>是超链接标签，什么是超链接呢？这篇文章主要介绍了HTML超链接a标签的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html超链接a标签的href跳转跟onclick之间执行顺序示例介绍
09-28
html超链接a标签的href跳转跟onclick之间执行关系：如果onclick返回false，则a不进行跳转，如果onclick返回true，则a跳转，感兴趣的朋友可以了解下本
HTML基础知识2-＜body＞＜/body＞中常用标签及含义
qq_45353963的博客
11-15 2077
1.代码 直接上代码，生动形象 <html lang="en"> <head> <meta charset="UTF-8"> <title id="0">我的第一个HTML文档</title> </head> <body> <b>加粗</b> <br> <i>斜体</i> <br> <u&gt
HTML基础知识5-文档声明标签，lang属性用法以及字符集
qq_45353963的博客
11-19 1332
HTML最基本的标签莫过于文档声明标签 <!DOCTYPE> 标签 这个声明标签的作用就是告诉我们的浏览器使用哪种HTML版本来显示网页 完整结构如以下代码所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
帮我用HTML写一下下面的作业 学生全面了解并掌握 Web 应用开发基础知识HTML5、CSS3等◇并能够综合应用开发网页。通过实验项目作品◇以考查学生的动手能力和解决问题的能力 结合专业课程◇从项目1、2、3、4四个项目中任选两个完成项目作品。 (1）项目1（通过表格制作商城首页，为了方便学生掌握表格的属性及其应用◇通过设置表格的宽高、对齐方式、表格的行标签的宽高和背景色等属性◇使页面内容简单整齐地排列出来。)、+ ◇2）项目2◇实现网页中的买家评论信息◇合理的嵌套使用各种标签◇实现改变网页内容的样式以及在网页中整齐地展示买家评论的内容。)、+ (3）项目3◇通过表单实现酒店筛选页面◇可以通过表单将信息列出让用户筛选◇掌握文本框、下拉菜单、单选框、复选框的使用。）说◇4）项目4◇设置网页中图片的属性◇通过 HTML 与 CSS 共同实现◇掌握＜ img ＞标签的各种属性◇给图片添加超链接的方法。◇+ 完成自选的两个项目作品◇提交项目作品源代码和运行效果。
最新发布
05-25
<!DOCTYPE html> <html> <head> <title>Web应用开发基础知识实验项目</title> <meta charset="UTF-8"> <style> table { width: 80%; margin: 0 auto; border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px; text-align: center; } th { background-color: #ccc; } .comment { margin-top: 30px; border: 1px solid black; padding: 10px; width: 50%; margin: 0 auto; } .comment h3 { font-size: 24px; text-align: center; } .comment p { font-size: 18px; line-height: 1.5; text-indent: 2em; } form { width: 80%; margin: 0 auto; margin-top: 30px; } label { display: block; margin-top: 10px; font-size: 18px; } input[type="text"], select { margin-top: 5px; padding: 5px; font-size: 18px; border: 1px solid black; border-radius: 5px; } input[type="submit"] { margin-top: 20px; padding: 10px; font-size: 18px; background-color: #ccc; border: none; border-radius: 5px; cursor: pointer; } img { display: block; margin: 0 auto; width: 50%; height: auto; } </style> </head> <body> <h1>Web应用开发基础知识实验项目</h1> <h2>项目1：商城首页</h2> <table> <tr> <th>商品名称</th> <th>价格</th> <th>库存</th> <th>购买</th> </tr> <tr> <td>商品1</td> <td>100元</td> <td>1000件</td> <td><button>购买</button></td> </tr> <tr> <td>商品2</td> <td>200元</td> <td>500件</td> <td><button>购买</button></td> </tr> <tr> <td>商品3</td> <td>300元</td> <td>200件</td> <td><button>购买</button></td> </tr> </table> <h2>项目2：买家评论</h2> <div class="comment"> <h3>买家评论</h3> <p>这个商品真的很不错，质量超好，价格也很实惠，值得购买！</p> </div> <h2>项目3：酒店筛选页面</h2> <form> <label for="location">地点：</label> <input type="text" id="location" name="location"> <label for="price">价格：</label> <select id="price" name="price"> <option value="">请选择</option> <option value="1">100元以下</option> <option value="2">100-200元</option> <option value="3">200-300元</option> <option value="4">300元以上</option> </select> <label for="room-type">房型：</label> <input type="radio" id="single" name="room-type" value="single"> <label for="single">单人房</label> <input type="radio" id="double" name="room-type" value="double"> <label for="double">双人房</label> <label for="wifi">WiFi：</label> <input type="checkbox" id="wifi" name="wifi" value="1"> <label for="wifi">有</label> <input type="checkbox" id="no-wifi" name="wifi" value="0"> <label for="no-wifi">无</label> <input type="submit" value="筛选"> </form> <h2>项目4：网页中的图片</h2> <a href="https://www.example.com"><img src="example.jpg" alt="示例图片"></a> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值