HTML 链接语法

最新推荐文章于 2024-07-22 09:00:00 发布

小张的前端日常

最新推荐文章于 2024-07-22 09:00:00 发布

阅读量142

点赞数

分类专栏：前端-html5 文章标签： html 前端

本文链接：https://blog.csdn.net/m0_51989086/article/details/134254361

版权

前端-html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中<a>元素创建链接的语法，包括href、target、title和rel属性。区分了src和href在引用资源上的不同，以及alt属性在图片和SEO中的作用。还探讨了IFrame和音视频播放的使用方法。

摘要由CSDN通过智能技术生成

以下是 HTML 中创建链接的基本语法和属性：code><a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

<a href="跳转目标" target ="目标窗口的弹出方式">文本或图像</a>

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。

target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。

title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。

rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

锚点链接：当我们点击链接，可以快速定位到页面中的某个位置

1.在链接文本的 href 属性中，设置属性为 #名字的形式，如 <a href="#two">第2集</a>

2.找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如： <h3 id="two">第二集介绍</h3>

（开始位置设置 <a href ="#id"> </a> ,目标位置设置 <a href ="# " id =" one" ></a>）

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

相对路径和绝对路径

绝对路径：绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用以下语句：

<body backround="E:\book\网页布局\代码\第2章\bg.jpg" >

相对路径：所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，“s1.htm” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.htm”来说，是在同一个目录的，那么要在“s1.htm”文件里使用以下代码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。

Img 图片标签，属于替换元素（介于块元素和行内元素之间，具有两种元素的特点）用来引入外部图片

引入一道前端面试题：

src与href的区别：

src：src用于引用资源，替换当前元素

src用于引用资源，替换当前元素，用于img，script，iframe上，src是页面内容不可缺少的一部分。当浏览器解析到src，会暂停其他资源的下载和处理（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议将js脚本放在底部而不是头部的原因

href：href用于在当前文档和引用资源之间确认联系

href标识超文本引用，用在link和a元素上，href是引用和网页关联，是在当前元素和引用资源之间建立联系，若在文档中添加href，浏览器会识别该文档为css文件，就会下载资源并且不会停止对当前文档的处理，这也是为什么建议使用link方式加载css，而不是@import方式

总结： src 是用目标内容替换当前内容,href 是让当前内容与目标内容产生联系。

属性：

src 用来指定外部图片的路径，通常可以理解为用目标内容替换掉当前内容

Alt 作用一：图片的描述，默认情况下不会显示，当图片无法正常加载时会显示

作用二：搜索引擎会根据 alt 中的内容来识别图片，如果不写 alt 属性则图片不会被搜索引擎给收录。

Iframe: 内联框架，引入外部的其他页面，替换元素，