HTML超链接、锚链接

超链接和锚链接的区别，就是超链接需要跳砖页面；锚链接不需要，在同一页面中跳转到某个位置。

不管是超链接，还是锚链接，都是用a元素。

超链接：超链接的使用就是在href中加入网址，如果是图片超链接就是在a元素中加一个img元素

需要注意的是，超链接的字体大小，颜色，下划线等样式设定都是用css属性来控制的，html的元素表示的语义，a元素只是表示内容是一个链接的文字或者图片

文字超链接、图片超链接-以百度，百度百科为例，点击即可跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div a{font-size: 2em;}div a img{width: 500px;height: 500px;}</style>
</head>
<body><div><a href="http://www.baidu.com">百度</a><a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281"><img src="./imgs/Solar.webp" alt="Solar"></a></div>
</body>
</html>

锚链接-这里用到vscode中英文字符生成工具lorem

要设置锚链接，首先要给锚链接连接到的位置定位，即设置id属性；其次，在a元素中的href属性中实现跳转到该id位置即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="#chapter1">章节1</a><a href="#chapter2">章节2</a><a href="#chapter3">章节3</a><a href="#chapter4">章节4</a><a href="#chapter5">章节5</a><a href="#chapter6">章节6</a><h2 id="chapter1">章节1</h2><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae corporis, ducimus vel totam architecto blanditiis aliquam quasi eveniet ullam, quaerat placeat odit pariatur alias sunt ipsa, deserunt expedita incidunt cupiditate itaque corrupti mollitia officiis. Magni corrupti saepe accusamus nihil, aperiam dolorum dolores libero iure iste veniam corporis quam odit cumque voluptatibus consectetur labore doloribus sit architecto iusto doloremque ut laborum ad voluptatum. Perspiciatis earum assumenda modi, cupiditate, corporis suscipit possimus qui ut nam sunt doloremque eius. Quia dolorem obcaecati labore asperiores earum a tempora repudiandae! Laudantium nesciunt vero id consequatur accusantium hic! Dicta, assumenda non itaque quod quae nobis placeat?</p><h2 id="chapter2">章节2</h2><p>Error quisquam possimus voluptatibus dolores sequi eaque cupiditate, alias esse ab nihil enim rem facilis nemo delectus a optio. Voluptatibus quia eligendi ea corporis hic distinctio suscipit amet, tenetur corrupti voluptas totam ad quaerat nihil sapiente rerum eius at numquam deserunt. Architecto impedit ipsa ullam quam accusantium optio perspiciatis maiores, illum officia rem autem, error dignissimos repudiandae cumque aliquid harum laboriosam. Ex necessitatibus incidunt eius sint soluta possimus tempore, nihil consequuntur explicabo consectetur, similique doloremque omnis quae excepturi. Hic, cupiditate expedita excepturi dolore quos quae. Odio vitae, adipisci incidunt molestiae hic esse quaerat aliquid velit inventore mollitia, veritatis corporis iste.</p><h2 id="chapter3">章节3</h2><p>Sunt distinctio a, culpa reiciendis nihil praesentium cupiditate officia inventore officiis! Corporis et explicabo fuga expedita aperiam repudiandae hic assumenda debitis tempora pariatur facere blanditiis quo esse, vitae magnam voluptates, impedit corrupti quis deleniti eligendi? Corrupti quibusdam commodi ab, suscipit illum quisquam reprehenderit doloremque, corporis sit facere sequi. Eos sint tempora omnis explicabo, praesentium odio saepe natus voluptatibus doloribus ducimus accusantium obcaecati veritatis, quis numquam, sit unde accusamus id ipsam sed maxime consectetur? Aliquam enim quam quasi a dolor. Maxime reprehenderit culpa, sed omnis quos molestiae sit, nobis veritatis officia ut magni architecto laboriosam veniam perspiciatis. Cupiditate, minima exercitationem. Aut.</p><h2 id="chapter4">章节4</h2><p>Natus velit quod ipsum saepe ipsam tempora at quibusdam dicta! At minima soluta vel quod accusantium itaque, esse suscipit odit, corporis doloremque commodi, ut sit non ducimus maxime ratione sunt nostrum cumque assumenda! Dolorum incidunt cum et quidem ipsam, dicta eos necessitatibus, laudantium debitis voluptatibus voluptates dignissimos. Voluptatum vel iusto pariatur obcaecati soluta voluptatibus ea eveniet quae est ad. Tempore reiciendis libero et nesciunt, quas molestias aliquam tempora suscipit, inventore laudantium earum fuga eius itaque debitis delectus culpa reprehenderit. Rem repudiandae possimus porro accusantium ipsa dignissimos aliquam temporibus, delectus vitae sapiente provident neque ullam quidem dicta accusamus animi nesciunt cupiditate?</p><h2 id="chapter5">章节5</h2><p>Libero vel possimus aut consequatur perferendis non autem sit exercitationem, architecto ea perspiciatis similique ipsa veniam quia provident, iste ut explicabo ullam velit repellendus corporis! Aspernatur, tenetur sint. Ipsam repellendus ab qui impedit laudantium quam quis natus, ullam exercitationem illo? At iste ab nam alias, accusamus aliquid quibusdam soluta dolorem repudiandae ut molestiae voluptatum dolores doloremque facilis similique veritatis, et magnam nulla. Maiores facilis labore minima unde velit porro odit, et totam earum. Quibusdam totam, sapiente praesentium quidem deleniti at aliquam repellendus animi nisi, nam quia maxime officiis laudantium magni fugiat. Animi rem nobis natus eligendi, numquam nam rerum incidunt.</p><h2 id="chapter6">章节6</h2><p>Officia dolorem blanditiis consequatur autem minima assumenda distinctio impedit quos consequuntur inventore. Ad, possimus molestias. Ad placeat id minus odit praesentium necessitatibus nostrum aperiam, quod culpa. Non, maiores quam. Et hic provident unde facere necessitatibus iusto earum. Esse repellat sapiente dolore, veritatis voluptatem amet delectus. Saepe autem similique exercitationem enim, eos quam delectus? Esse, magni. Voluptatem nemo est maxime, nobis fugit inventore harum dolore nam officia reprehenderit magni dignissimos sapiente quaerat ea minus, voluptatibus odio hic modi libero placeat nostrum at quidem natus veniam. Placeat iure esse dolores modi. Itaque vero, perspiciatis laborum ratione minima nam laudantium quae dolore distinctio.</p>
</body>
</html>

HTML超链接、锚链接相关推荐

前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
什么是HTML超链接？锚链接？
什么是HTML超链接?锚链接? HTML超链接 1.超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 当把鼠标指针移动到网页中的某 ...
herf(超链接、锚链接)
HTML style="color: brown; font-family: 正体; font-size: xx-large; font-weight: bolder;" href ...
超链接的应用——锚链接
锚链接常用于目标页内容很多,需定位到目标页内容中的某个具体位置时.例如网上常见的某个学习教程,当单击教程的章节目录时,将跳到应对章节的内容介绍处. 实现从A页面的甲位置中转到本页中的乙位置,步骤如下: ...
html中锚链接作用和特点,HTMLa标签作为锚链接
1. 什么是锚链接? 标签主要作为超链接和锚链接使用.超链接主要指不同html页面之间的跳转,而锚链接指的是同一页面之间的跳转. 锚链接的两种效果: 在当前页面中跳转.:通过元素的ID进行跳转网页中 ...
figma button_如何在Figma中创建锚链接
figma button Anchor Links aren't the most exciting interaction to design, but they are a crucial des ...
HTML-a锚链接-00
锚链接锚链接:给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转.比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就可以利用锚链接. 首先我们要创建一个锚点,也就是说,使用 ...
JS 获取链接(url)参数以及锚链接（anchor）结合富ajax的应用（ajax前进/后退的问题）...
1. JavaScript获取url链接的方法: <script language="javascript">document.write(window.locatio ...
html5对锚的更改,HTML5之锚链接
锚链接一般用于本页面的跳转,比如页面太长,到了尾部要瞬间到顶部,就可以用锚链接. 如下图所示: 示例:点击"数码男装女装电影音乐会通信阅读美容旅游"等就能跳转到相关 ...

HTML超链接、锚链接

HTML超链接、锚链接相关推荐

最新文章

热门文章