HTML系列（5）：<a>、<img>、<table>

DongHao
414 阅读5分钟

一、<a>

a 标签表示一个超链接，用户点击超链接，就可以跳转到指定的网址，如：

<a href="http://www.baidu.com">百度</a>

a 标签除了可以包裹文本，也可以包裹其他元素，如图片、段落等，但是不可以再包裹另一个 a 标签，如：

<a href="http://www.baidu.com">
  <a href="http://www.taobao.com">淘宝</a>
</a>

以上代码，虽然不会报错，点击链接也会跳转到淘宝首页，但是浏览器会渲染一个多余的 a 标签，如下图所示：

1. href 属性

href 属性指定了链接指向的网址，它的取值，主要分为以下几种：

  • 网址
  • 路径
  • 伪协议
  • 空、#、id

网址

网址又可以分为有协议的网址和无协议的网址，如：

<!-- 有协议的网址 -->
<a href="http://www.baidu.com">百度</a>
<a href="https://www.baidu.com">百度</a>

<!-- 无协议的网址 -->
<a href="//www.baidu.com">百度</a>

对于无协议的网址，浏览器会自动选择使用 http 协议还是 https 协议，过程如下：

  1. 浏览器自动在链接前加上 http 协议，此时的链接是 http://www.baidu.com ，但该链接并不是百度最终的地址，于是返回状态码 307，重定向到 https://www.baidu.com 。

  1. 浏览器再次发送请求，此时的链接是 https://www.baidu.com ，这是正确的链接，于是返回状态码 200，表示请求成功。

路径

路径可以使用绝对路径或相对路径。

<!-- 绝对路径 -->
<a href="/a/b/c.html">链接</a>

<!-- 相对路径 -->
<a href="a/b/c.html">链接</a>
<a href="index.html">链接</a>
<a href="./index.html">链接</a>

以上代码，绝对路径与相对路径的差别在于，绝对路径最开头多了个 /，这个 / 表示根目录，它会从项目的根目录出发，寻找对应的文件。而相对路径则是从当前位置出发，寻找对应的文件。

前提是，必须在项目的根目录开启 http 服务，使用 http 协议访问 html 文件，/ 才表示项目的根目录。如果是双击打开 html 文件，使用的就是 file 协议，/ 就不是项目的根目录，而是指盘符（如 C盘、D盘）。

伪协议

这里介绍三种伪协议，分别是：

  • javascript:;
<a href="javascript:;">链接</a>
<a href="javascript:alert('哈哈');">链接</a>

以上第一行代码，点击第一行的链接，不会有任何反应，什么事都不会做；点击第二行的链接，会执行其中的 js 代码。

  • mailto:邮箱
<a href="mailto:286084845@qq.com">发邮件给我</a>

以上代码，会打开计算机的邮件客户端，并自动填入邮件发送地址。

  • tel:手机号
<a href="tel:13812345678">联系我</a>

以上代码，在手机端，当点击链接时，会打开系统的拨号键盘，并自动填入手机号。

空、#、id

<!-- 空 -->
<a href="">链接</a>

以上代码，当点击链接时，页面会刷新。

<!-- # -->
<a href="#">链接</a>

以上代码，当点击链接时，页面会自动跳转到页面的顶部，前提是当前页面是个长页面。

<!-- id -->
<a href="#xxx">链接</a>

以上代码，当点击链接时，会跳转到该 id 所在元素的位置。

2. target 属性

target 属性指定如何打开链接，它的取值主要有以下几种：

  • _blank
  • _self
  • _top
  • _parent
  • 指定窗口
  • 指定 iframe

_blank

<a href="http://www.baidu.com" target="_blank">百度</a>

以上代码，会在新的窗口打开链接。

_self

<a href="http://www.baidu.com" target="_self">百度</a>

以上代码，会在当前窗口打开链接。

_top、_parent

如下面三张图所示，在 index.html 中引入了 iframe1，在 iframe1 中引入了 iframe2，iframe2 中有一个 a 标签。

当 iframe2 中的 a 标签的 target 属性值为 _parent，点击链接时，会在父窗口(iframe1)中打开链接；当 target 属性值为 _top，点击链接时，会在顶部窗口( index.html 所在窗口)中打开链接。

指定窗口

<a href="http://www.baidu.com" target="xxx">百度</a>
<a href="http://www.taobao.com" target="xxx">淘宝</a>

以上代码，如果有窗口名字为 xxx，那么两个链接都在 xxx 窗口中打开，新打开的页面会覆盖旧页面。如果没有 xxx 窗口，浏览器会创建一个新窗口为 xxx。

可以打开新窗口的控制台，输入以下代码，验证该窗口名称。

window.name

指定 iframe

<a href="http://www.baidu.com" target="xxx">百度</a>
<a href="http://www.taobao.com" target="yyy">淘宝</a>

<hr>
<iframe name="xxx" src="" frameborder="0"></iframe>

<hr>
<iframe name="yyy" src="" frameborder="0"></iframe>

以上代码，当点击百度的链接时，会在 name 为 xxx 的 iframe 中打开；当点击淘宝的链接时，会在 name 为 yyy 的 iframe 中打开。

3. download 属性

download 属性指定当前链接用于下载，而不是跳转到另一个地址。

<a href="xxx.pdf" download>下载</a>

以上代码，当点击链接时，会下载 xxx.pdf 文件。

download 属性也可以指定下载的文件名称，如：

<a href="xxx.pdf" download="yyy">下载</a>

以上代码，当点击链接时，会下载 xxx.pdf 文件，但文件名称不再是 xxx，而是 yyy。

使用 download 属性需要注意的问题：

  • a 标签的链接要与当前网址同源
  • 不是所有浏览器(包括移动端浏览器)都支持该属性

二、img

img 标签的作用是发出 get 请求，展示一张图片。

1. src 属性

src 属性指定了图片的地址。

<img src="demo.jpg">

2. width、height 属性

width、height 属性指定了图片的宽高。

如果只设置 width 属性，那么 height 属性会自适应；如果只设置 height 属性，那么 width 属性会自适应。

width 属性和 height 属性不用带单位，在 HTML5 中单位是像素，在 HTML4 中单位可以是像素也可以是百分比。

<img width="400" src="demo.jpg">

3. alt 属性

alt 属性指定了图片不显示时的替代文字。

<img src="demo.jpg" alt="一张图片">

4. onload 事件、onerror 事件

onload 事件在图片加载成功时执行，onerror 事件在图片加载失败时执行。

<img id="xxx" src="demo.jpg" alt="一张图片">

<script>
let xxx = document.getElementById('xxx')
xxx.onload = function () {
  console.log('图片加载成功')
}
xxx.onerror = function () {
  console.log('图片加载失败')
  xxx.src = '/404.jpg'
}
</script>

以上代码，当图片加载失败时，让 img 的 src 属性重新指向 "404.jpg"，以此作为图片加载失败的备用方案。

5. 响应式设置

将图片最大宽度设置为 100%，图片就是响应式的了。

img {
  max-width: 100%;
}

三、table

table 标签用来展示一个表格。

1. thead、tbody、tfoot

table 标签中只能有三个子元素，即 thead、tbody、tfoot。如果没有写这三个标签，浏览器会自动加上。这三个标签在源码中顺序可以不固定，但是浏览器是按照固定顺序渲染的。

<table>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

2. tr、th、td

tr 表示行，th 表示表头，td 表示单元格。

<table>
  <thead>
    <tr><th>1</th></tr>
  </thead>
  <tbody>
    <tr><td>2</td></tr>
  </tbody>
  <tfoot>
    <tr><td>3</td></tr>
  </tfoot>
</table>

3. 相关的样式设置

  • table-layout：设置表格布局算法
table {
  table-layout: auto;   /* 根据内容，自动计算列的宽度 */
  table-layout: fixed;  /* 列的宽度尽量等宽 */
}
  • border-collapse：合并表格边框
table {
  border-collapse: collapse;
}
  • border-spacing：设置单元格边框之间的距离
table {
  border-spacing: 0;
}



转载请注明出处～～

avatar
文章
阅读
粉丝