《HTML常用标签》

一、a标签

1、a标签的定义

​ <a> 元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

2、a标签的属性

2.1 href

作用：用于指向链接跳转的目标地址，可以写一个相对路径也可以是一个完整地址。

2.1.1<href>的取值

①网址：https://xxx； http://xxx；//xxx；(第三种为无协议链接，自动选择http或https)。例如：

 <a href="https://www.baidu.com">超链接</a>

②路径：/a/b/c或a/b/c；index.html或.index.html。例如：

<a href="/a/b/c.html">c.html</a>
<a href="index.html">index.html</a>

③伪协议：javascript:参数；，表示跳转到一个js指令；（javascript:；，表示页面不作任何反应；）。例如：

<a href="javascript:alert(1);">javascript伪协议</a>
<a href="javascript:;">空的伪协议</a>

④伪协议：mailto:邮箱，可直接跳转到邮箱发送界面。例如：

<a href="mailto:wuym996@gmail.com;">发邮件给蔓蔓</a>

⑤伪协议：电话号码，可直接进入拨号界面。例如：

<a href="tel:0818-3531591;">打电话给我</a>

④id：跳转到指定标签：#xxx。例如：

<a href="#xxx;">查看xxx</a>

---

2.2 target

作用：target属性可以用来设置打开链接的位置。

2.2.1<target>的取值

①_self：表示在当前页面加载（它是默认值）。例如：

<a href="超链接.html" target="_self">吴雨蔓制作的网页</a>

②_blank:表示会新打开的一个页面进行加载。例如：

<a href="超链接.html" target="_blank">吴雨蔓制作的网页</a>

③_top:在最顶级窗口打开页面（如果没有parent框架或者浏览上下文，此选项的行为方式和self相同）。例如：

<a href="//google.com" target="_top">google（_top标签）</a>

④parent：打开当前页面的上一层窗口打开页面（如果没有parent框架或者浏览上下文，此选项的行为方式和self相同）。例如：

 <a href="//google.com" target="_parent">google（_parent标签）</a>

---

⑤自定义：window 的name：设置一个网页窗口的名字，每次新的网页都用这个名字的窗口打开。例如：

<a href="//google.com" target="xxx">谷歌</a>
<a href="//baidu.com" target="xxx">百度</a>

(以上两个链接均会使用同一个名叫“xxx”的窗口打开)

⑥自定义：iframe 的name：将多条链接写入同一个页面中，这样就能实现在同一个界面中切换不同的页面。例如：

<a href="//google.com" target="xxx">google</a>
<a href="//baidu.com" target="xxx">baidu</a>
<iframe src="" name="xxx"></iframe>
<iframe src="" name="yyy"></iframe>

---

二、img标签

1、img标签的作用

<img>可将一份图像嵌入文档。

2、img标签的属性

2.1 src

作用：包含图片所在的路径。路径可以是网络地址，也可以是相对路径。例如：

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

2.2 alt

作用：对于图片的描述。

2.3 height 、width

作用：height 可用于修改图片高度，一般单位为px（像素），width可用于修改图片宽度，一般单位为px（像素）；

​ 如果只修改宽度或高度其中一个参数，那么另外一个参数会按照图片比例自动调整大小。例如：

<img src="2.jpg" alt="一张风景照" width="600px" height="400px" />

3、img标签的事件

3.1 onload：表示图片显示正常；

3.2 onerror：表示图片显示异常；

<img id="xxx" src="1.jpg" alt="一张图片" />
  <script>
     xxx.onload = funtion(){
       console.log("图片加载成功");
     }
     xxx.onerror = funtion(){
       console.log("图片加载失败");
       xxx.src = "/404.jpg" ;
     }
   </script>

4、img标签响应式

4.1 max-width: 100%

作用为：图片可自动适应网页大小，调整比例（包括手机界面）。

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

---

三、table标签

<table> 标签定义 HTML 表格

1、相关标签

1.1 thead

定义：表示表头，可省略此部分

1.2 tbody

定义：表示表格中间内容部分，不可省略此部分

1.3 tfoot

定义：表示表格尾部，可省略此部分

1.4 tr

定义：全称为：table row，包含在<thead>标签中，表示新建一行表格

1.5 td

定义：全称：table data，包含<tbody>中的内容

1.6 th

定义：表示表头，包含<thead>中的内容

示例：一个完整的<table>

<table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>79</td>
          <td>82</td>
          <td>92</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>100</td>
          <td>97</td>
          <td>87</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>240</td>
          <td>270</td>
          <td>264</td>
        </tr>
      </tfoot>
</table>

2、相关样式

2.1 table-layout

2.1.1 table-layout的值

• auto：大多数浏览器采用自动表格布局算法对表格布局，表格及单元格的宽度取决于其包含的内容。（默认值）。
• fixed：表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响 整个列宽。

2.2 border-spacing

2.1.1 border-spacing的值

• border-spacing: 0px;表示表格之间的间隙。

2.3 border-collapse

2.1.1 border-spacing的值

• border-collapse: collapse;表示表格合并。