【前端学习之HTML&CSS】-- HTML第六篇 -- a元素与路径

本文链接：https://blog.csdn.net/lc1852109/article/details/123376809

【前端学习之HTML&CSS】-- 第六篇 – a元素与路径

文章目录

【前端学习之HTML&CSS】-- 第六篇 -- a元素与路径
前言
a元素
路径
总结

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

lc own

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章主要介绍了a元素与路径，a元素是网页中用来制作超链接的元素，想要实现网站跳转的基本功能，就需要了解a元素的使用，而路径的书写则是超链接、目录、图片等多种元素都必须要理解的重要方法。
lc own

a元素

含义：超链接，HTML的关键；

1. href属性

全称：hyper reference；

普通链接：跳转地址，即网站网址；要写全，即包括https://

	<!-- 网址链接 -->
    <a href="https://space.bilibili.com/123883164?spm_id_from=333.1007.0.0">
        昭诩
    </a>

锚链接：跳转某个锚点：即类似于博客的目录跳转到对应字段位置；
【锚链接、同个网页，其实本质上还是跳转了地址，只不过属于同一个页面】

	<!-- 锚链接/目录 -->
    <!-- a*6>{章节$} -->
    <!-- a[href="#chapter$"]*6>{章节$} -->
    <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.</p>
    <h2 id="chapter2">章节2</h2>
    <p>Quo consequuntur, aperiam obcaecati numquam dolore eligendi quibusdam?</p>
    <h2 id="chapter3">章节3</h2>
    <p>Ab animi quo distinctio, optio vel vitae? Voluptatem.</p>
    <h2 id="chapter4">章节4</h2>
    <p>Beatae dolores voluptas ab aspernatur porro vitae consequuntur!</p>
    <h2 id="chapter5">章节5</h2>
    <p>Atque eius hic earum doloremque illum, voluptatem dolores.</p>
    <h2 id="chapter6">章节6</h2>
    <p>Ratione architecto cumque repellendus ducimus adipisci minima inventore!</p>

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

效果如下：
lc own
3. 功能链接：点击后，触发某个功能

执行JS代码,javascript: ；
发送邮件，mailto: ;
【需要用户本地计算机上安装邮件发送软件，eg：exchange】
拨打电话，tel: ;
【此功能需要在移动端上触发，或PC端有拨号软件可以拨打电话】

	<!-- 功能链接1：js代码 -->
    <a href="javascript:alert('你好~')">
        弹出:你好!
    </a>

    <!-- 功能链接2：发送邮件 -->
    <a href="mailto:2342342342@qq.com">
        点击给我发送邮件
    </a>
    <!-- 这里看不到功能，需要用户本地计算机上安装邮件发送软件，eg：exchange -->
    
    <!-- 功能链接3：拨打电话 -->
    <a href="tel:13955683279">
        点击给我拨打电话
    </a>
    <!-- 此功能需要在手机上触发，或PC端有应用可以拨打电话 -->

2. id属性：全局属性

含义：表示元素在文档中的唯一编号；

3. target属性

含义：表示跳转窗口位置;
默认情况下，点击超链接跳转后，新页面会覆盖当前页面，即新页面位置就是当前窗口

target的取值；

_self：在当前页面窗口中打开（默认值）；
_blank：在新窗口中打开；

	<!-- target属性 -->
    <a href="https://douyu.com" target="_blank">
        斗鱼直播
    </a>

4. title属性：全局属性

含义：在鼠标指上去时显示的内容（提示文字）；

lc own

路径

路径不仅仅只涉及到a元素，包含图片、视频、音频等元素也会涉及到路径，故需单独讲解；

1. 站内资源和站外资源

站内资源：当前网站的资源（此网站对应文件夹内资源）；站外资源：非当前网站的资源；

2. 绝对路径和相对路径

绝对路径–站外资源、相对路径–站内资源（绝对也可）

绝对路径的书写格式

url地址:

协议名://主机名:端口号/路径
schema://host:port/path

eg.https://mid.hao123.com/mid
eg.http://127.0.0.1:5500/06/index.html
eg.http://www.renren.com:80/

协议名：http(旧/不安全网站)、https、file(本地文件)
主机名：域名(网站通常使用)、IP地址(eg.127.0.0.1)
端口号：5500、普通网站中的端口号省略

协议是HTTP协议，默认端口号是80，协议是HTTPS，默认端口号是443

当跳转目标和的当前页面的协议相同时，可以省略协议

相对路径书写格式

lc own

开头：
1 ./ ，表示当前资源所在的目录；
2 …/ , 表示返回上一级目录；

举例：文件包含关系见下：
lc own
相对路径写法： 相对路径中./可以省略

    <!-- 站内资源--相对路径 -->
    <a href="./subhtmls/a.html">
        subhtmls -> a.html
    </a>
    <!-- ./后会自动提供后续 -->
    
    <!-- 返回上一级目录 -->
    <a href="../index.html">
        index.html
    </a>