HTML常用标签-CFANZ编程社区

HTML常用的几个标签a、img、table，用法如下

a标签的用法

a标签主要是跳转到外部链接，跳转到内部锚点，跳转到邮箱或者电话等，
其中href属性表示要跳转到的链接或者位置，
target属性表示从哪里打开链接，比如从当前页面，新页面或者指定页面等，
还有两个不常用的属性是download、rel=noopener

1. a标签中href属性的用法

href的取值可以是网址、路径、伪协议、以及#+id,分别如下

<a href="https://google.com">google</a>
网址，通过点击google跳转到google的官网
<a href="a/b/c.html">c.html</a>
路径，跳转到c.html页面，绝对路径和相对路径都可以，
重点是要通过输入网址打开文件，而不是在资源管理器中打开

伪协议

<a href="javascript:alert(123);">javascript伪协议</a>
点击上面的链接会执行href中的js操作
<a href="javascript:;">空的伪协议</a>
点击这个链接，页面不会发生任何变化, 它和href="#"的区别是，后者会虽然也不会刷新页面，但是会跳到页面顶部

至于#+id, 在页面过长的情况下，通过给某个标签设置id，a标签就可以通过href="#id"关联到这个标签，进而通过点击直接让页面到达这个id的位置

2. a标签的target用法

target取值有以下几个:
"_target" 表示在新页面打开链接,
"_self" 表示默认值,在当前页面打开链接
"_top" 表示在顶部打开
"_parent" 表示在父级窗口打开
target还可以取自定义的值，假如两个链接的target都等于xxx,那么这两个点击这两个链接的话会在同一个页面打开

img标签的用法

img标签的作用是通过get请求展示图片，它的属性有

src 图片的引入地址，可以是本地也可以是网上的
alt 是图片加载失败后才显示的
width、height是图片的大小，一般来说设置一个够了，另一个会自适应，它的取值不需要带px单位

img标签有两个事件，onload图片加载成功调用的，onerror图片加载失败调用的

img标签要做到手机端和pc端都能正常查看的话，给它加上一个最大百分比宽度样式就可以了

<style>
  img { max-width: 100%;}
</style>

table标签的用法

table标签主要用来制作表格，它里面只包括三个标签thead(表头)、tbody(表的主体)、tfoot(表尾)，如下

<table>
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th></th>
      </tr>
    </tfoot>
  </table>

注：

tr 是table row 的简写，表示行
th 是table head 的简写，表示表头或表尾的一格数据，默认加粗
td 是table data 的简写，表示一格数据

与table相关的样式

border-spacing: border之间的间隙
border-collapse: border之间是否合并
以上两个样式都需要设置的，不设置的情况下，表格呈现出来的样式如下

通过设置以上两个样式，表格就可以变成下面的样子

<style>
  table {
    border-spacing: 0;
    border-collapse: on
  }
</style>