区块元素和超连结

news2025/1/22 18:59:49

DIV (区块元素)

<div>元素（HTML 文件区块元素）是无标签语意的容器元素，虽然它不代表任何意义，却是使用最多的标签之一，主要用来把相似或者被划分为同一区块的内容包在同个div 内，以便后续添加css 样式或让JavaScript 进行互动。

<div>是一个区块元素，预设会独占一整行的空间，也就是说当我们利用<div>将不会<a>、<input>等标签包住时，后面的元素会从下一行开始排列。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>这是页面标题</title>
  </head>
  <body>
    <div>
		<!-- 里面可以放任何标签，也可以放 另一个 div -->
	</div>
  </body>
</html>

超连结

超连结，是指将某段文字连结至网路页面、档案、图片、或信箱等地方的连结，，例如透过点选关键文字，使用者可以从网页中跳到别的页面，在HTML 中，超连结的基本写法为<a href="要连结的 URL">要显示的连结文字或图片</a>

超连结<a>常见属性：

href：是超连结中必要也是最重要的属性，让浏览器知道点选标签中的内容后要做什么
target：指定打开连结的位置，预设为_self(在当前分页中打开)，常见的还有_blank(在新分页中打开)
download：点击连结时指定浏览器下载url 的档案，download 的属性值可以预设下载档案的档名，若省略则使用原始档名，例如download="下载档名"

前面我们说到超连结有许多不同的功能，主要是依照 href 来控制，接下来就来看看常见的超连结用法吧！

普通文字连结跳转

<a href="https://www.google.com/" target="_blank">去看看 Google 吧</a>

图片连结跳转
若想以图片当作超连结，可以在 <a> 标签中放入图片。

<a href="https://www.google.com/" target="_blank">
    <img src="./img.png">
</a>

Email 超连结
在href 属性中加入 mmailto: 可将连结直接跳转至预设的邮件编辑器写信。

<a href="mailto:123@gmail.com">我的信箱</a>

电话超连结
在href 属性中加入 tel: 时，若设备允许通话会跳转至通话介面。


<a href="tel:1370000000">我的电话</a>

页面锚点
<a> 标签中有个特别的功能叫页面锚点，可以跳往同页面的某区块，只要将href 的属性值设为#+该区块的id就能实现此功能。

<a href="#detail">跳到明细</a>

<div id="detail">这是明细</div>

除此之外，<a href="#"></a>为回到最上；<a href=""></a>为重整页面。

路径- Path

路径，是指某个档案存放的位置，当我们需要引入图片或者文件时，需要路径才可以找到要引入的档案并正确显示。路径又分为绝对路径和相对路径，简单来说，相对路径就像问路时有人跟你说：前面路口左转，红绿灯再右转就到了，会因为你目前所在的位置不同而有所改变。而绝对路径就像是门牌地址，不管你现在在哪，就是要到那个地址就对了。

- 相对路径
  - 指的是目标档案相对于目前目录的路径，会随着目前目录的不同而发生改变
  - 常用的开头有./-> 当前位置的资料夹；../-> 上一层资料夹
  - 相对路径表示范例
    - ./test.html ( 同一档案目录下的test.html 档案 )
    - ../index/test.html ( 上层目录下的test.html 档案 )
    - ../../index/home/test.html ( 上上层目录下的home 目录下的test.html 档案 )
- 绝对路径
  - 指的是一个绝对的位置，只要目标档案没有被移动，绝对路径都会一样
  - 绝对路径表示范例
    - D:/index/test.html ( 电脑D槽中的index 目录下的test.html 档案 )
    - https://upload.wikimedia.org/wikipedia.svg.png ( 网路上某一固定位置)