HTML常用标签

一、a标签的用法

<a href="?" target="?">Website</a>

作用

• 跳转外部
• 跳转内部锚点
• 跳转到邮箱或电话等（可以用到简历上）

属性

• href : 全称是hyper+reference，超链接
• target : 指定在哪里点开链接
• download : 下载这个页面（由于浏览器版本问题，多数情况不会执行）
• rel = noopener : 防止出现bug（指的是JS中的bug）href

a的href的取值

1、网址

• https://xxx.com
• http://xxx.com
• //xxx.com

2、路径

• a/b/c以及/a/b/c
• index.html以及./index.html

3、伪协议

• JavaScript:代码;
• mailto:邮箱
• tel:手机号
• 井xxx（xxx表示id，用于跳转到指定的标签）

a的target的取值

1、内置的名字

• _blank : 表示在空白的页面打开
• _top : 表示在顶级页面打开
• _parent : 表示在当前链接的上层打开
• _self : 表示在当前窗口打开

2、程序员命名

• window的name
• iframe的name

二、img标签的用法

<img   src="?" alt="?">

作用

发出get请求，展示一张图片

属性

• alt : 图片加载不出来的时候用于文字替代
• height : 图片的高度
• width : 图片的宽度

（注：图片的长宽一般单独使用，同时使用会导致图片比例不正确）

• src : 图片的地址

事件（用于检测图片是否加载成功）

• onload

xxx.onload=function(){
console.log(图片加载成功);
};

• onerror

xxx.onerror=function(){
console.log(图片加载失败);
};

响应式（可以自适应各种窗口大小）

max-width:100%;

三、table标签的用法

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

相关的标签

• thead : 表示表的头部
• tbody : 表示表的主体部分
• tfoot : 表示表的底部
• tr : table row ，即table里面的一行
• td : table data，即table里面的数据
• th: 表示表的表头

相关的样式

• table-layout
  根据内容改变宽度

table-layout:auto;

等宽

table-layout:fix;

• border-collapse:控制border是否合并
  合并的写法

border-collapse:collapse;

• border-spacing : 控制border与border之间的距离

扩展

1、由于双击html文件打开网页有时候会出现一些问题，所以一般不建议这样打开文件进行效果查看。这样的情况下可以采用以下两个插件来解决问题。
打开终端，安装:yarn global add http-server，然后运行以下命令即可。

http -server -c-1

或者也可以安装parcel，同样的安装:yarn global add parcel，然后运行以下命令即可

parcel 文件名

2、需求：写一个a标签，但是什么也不让它做如何实现的？这时候可以采用以下代码来实现。

<a href="javascript: ;"></a>