html+css前端第三天-CSDN博客

本文链接：https://blog.csdn.net/Echo323/article/details/127242212

a元素

超链接

href 属性

hyper reference:通常用于表示跳转地址

1.普通链接——跳转地址

2.锚链接——跳转某个锚点

实际应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 目录 -->
    <a href="">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="">章节3</a>
    <a href="">章节4</a>
    <a href="">章节5</a>
    <a href="">章节6</a>
     <h2>章节1</h2>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae sed placeat aut eos in consequatur quod totam illum ipsa perspiciatis numquam hic mollitia, et enim voluptatum vitae possimus ducimus! Vero?</p>
     <h2 id="chapter2">章节2</h2>
     <p>Saepe ut quisquam ducimus totam. Odio rerum corrupti unde neque explicabo soluta, sapiente distinctio esse itaque eligendi iste earum reiciendis doloribus consectetur consequuntur atque omnis quaerat exercitationem facilis deleniti totam.</p>
     <h2>章节3</h2>
     <p>Delectus deleniti accusantium impedit quas! Molestiae, impedit cupiditate voluptatibus consequatur doloribus mollitia dolorem facere nam dolore officiis sit laudantium blanditiis quo. Consequuntur rerum minus in cum. Provident animi unde fugiat!</p>
     <h2>章节4</h2>
     <p>Sint quo fugit fugiat magni molestiae sapiente in dicta impedit excepturi molestias nostrum obcaecati, quam iste corrupti similique cupiditate natus eaque perferendis, fuga odit? Alias esse temporibus quae cupiditate debitis.</p>
     <h2>章节5</h2>
     <p>Maxime, iusto at animi amet delectus tempore autem iste reiciendis! Doloribus eveniet minus sequi aliquid. Consectetur a optio pariatur aliquam quam! Minima beatae inventore ab totam dolores commodi assumenda illo!</p>
     <h2>章节6</h2>
     <p>Ab eaque earum sunt nulla eveniet error, ex, cum et voluptatibus officia beatae temporibus ad eius iure magnam adipisci? Reiciendis harum provident nesciunt, itaque aliquam suscipit quaerat consectetur corporis laboriosam!</p>
</body>
</html>

(（h2>{章节}）+p>lorem )*6

((h2[id="chapter$"]>{章节$})+p>lorem1000)*6

id属性：全局属性，表示文档的编号

<a href="#">回到顶部</a>

有用回到顶部，在做网页时

3.功能链接 ——点击后，触发某个功能

-执行JS代码 javascript：

-发送邮件 mailto:

要求用户计算机上安装有邮件发送软件:exchange

-拨打电话：tel:

要求用户计算机上安装有拨号软件，或使用移动端访问

target属性

表示跳转窗口位置

target的取值：

_self：在当前页面窗口打开，默认值

_blank:在新窗口中打开

target="_blank"

title="哈哈哈"

路径的写法

站内资源和站外资源

绝对路径和相对路径

站外资源：绝对路径

站外资源：相对路径 ./ 提示 ./../

绝对路径的书写格式： url地址：协议名://主机名：端口号/路径

图片元素

img属性

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字替代图片

和a元素联用

和map元素

map:地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar</title>
</head>
<body>
    <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281">
        <img  usemap="#solarMap" src="./solar.jpg" alt="太阳系图片">
    </a>
    <map name="solarMap">
        <area shape="circle" coords="255,146,32" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105"  target="_blank">
    </map>
</body>
</html>