image和a标签及路径

<img src="图像URL" />
  • 图像标签那个属性是必须要写的? img src 图片的路径
  • 图像标签中 alt 和 title 属性区别? alt 图片显示不出,文字就显示 title 鼠标经过图片的时候显示文字

单词缩写: anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
  1. href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
  2. target 用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。
    注意:
  • 外部链接 需要添加 http:// www.baidu.com
  • 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
  • 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
  • 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

路径分类符号说明
同一级路径只需输入图像文件的名称即可,如img src=“baidu.gif”
下一级路径“/”图像文件位于HTML文件同级文件夹下(例如文件夹名称为:images) 如img src=“images/baidu.gif”
上一级路径“…/”在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推, 如img src="…/baidu.gif" /
### HTML `a` 标签使用方法属性 #### 基本语法 `<a>` 标签用于创建超链接,其基本结构如下: ```html <a href="URL">Link Text</a> ``` 其中,`href` 属性指定了链接的目标地址。 #### 主要属性 - **`href`**: 定义了链接的目的地。可以是绝对 URL 或者相对路径[^2]。 ```html <a href="https://example.com">Visit Example</a> <!-- 绝对路径 --> <a href="/about.html">About Us</a> <!-- 相对路径 --> ``` - **`target`**: 控制点击链接后的打开方式,默认是在当前窗口或选项卡中加载目标文档。常用值有 `_blank`, `_self`, `_parent`, `_top`. ```html <a href="http://www.example.com" target="_blank">Open in new tab</a> ``` - **`download`**: 提示下载文件而不是导航至新页面。可指定下载时使用的文件名。 ```html <a href="path/to/file.pdf" download="newfilename.pdf">Download PDF</a> ``` - **`rel`**: 描述当前文档与被链接资源之间的关系。对于外部站点链接建议加上 `noopener noreferrer` 防止潜在的安全风险。 ```html <a href="https://external-site.com/" rel="noopener noreferrer">External Site</a> ``` - **`title`**: 添加额外的信息给用户当鼠标悬停于链接之上显示提示文字。 ```html <a href="help.html" title="Help Page Description">Get Help</a> ``` - **`alt`**: 虽然严格来说这不是 `<a>` 的标准属性而是图像 (`img`) 元素的一部分,但在某些情况下也可以应用于锚点来提供替代文本描述[^3]. ```html <a href="#"><img src="image.jpg" alt="Description of Image"></a> ``` #### CSS样式控制 默认状态下,`<a>` 是行内元素因此不能直接应用宽度高度等尺寸相关的CSS规则除非将其转换成块状或者行内块状展示模式: ```css /* 将 a 设置为 block */ a { display: block; } /* 或者作为 inline-block 显示 */ a { display: inline-block; } ``` 一旦设置了 `display:block|inline-block` 后就可以自由调整大小并施加更多布局特性[^1]: ```css a.block-link { width: 200px; height: 50px; background-color: lightblue; text-align: center; line-height: 50px; /* 中心垂直居中文本 */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值