深入了解几个常用但不太会用的HTML标签

1. `<a>`标签

上文简单讲述了<a>标签就是一个超链接，用户点击后，浏览器会跳转到指定的网址

<a href="https://www.baidu.com">百度一下</a>

上面代码就定义了一个超链接，文字是给用户看的，点击文字浏览器就会转到href属性指定的网址

<a>标签有几个属性我们来了解一下

1.1 `href`属性

href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点

如上文代码，href的值就是URL，那么它就会跳到指定的网址

那如果值是一个锚点呢？

我们新建一个网页，多写一些p元素让代码撑出页面，省略如下:

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div>
</body>

然后给第一个p元素写上id

<p id="p1">1</p>

接下来我们就可以写一个锚链接了

<a href="#p1">点击跳转到第1个p元素</a>

如图：

点击锚链接就会跳转到对应的元素上

1.2 `target`属性

target属性指定以什么方式打开新网页，它的值也可以是以下四个关键字之一

_self：在当前窗口打开，这也默认值。
_blank：在新窗口打开。
_parent：在父级窗口打开。
_top：在顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self

1.3 `download`属性

download属性表明当前链接用于下载，而不是跳转到另一个 URL

<a href="index.txt" download>下载</a>

如果download属性设置了值，那这个值就是下载的文件名

1.4 `rel-noopener`属性

此属性告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的

<a href="https://www.baidu.com" target="_blank" rel="noopener">百度一下</a>

target="_blank"会打开一个新网页，如果不加rel="noopener"，那么在新tab中会有一个window.opener对象，相当于可以控制打开这个tab的前一个页面，这样会导致安全问题

2. `<table>`表格标签

表格（table）以行（row）和列（column）的形式展示数据,<table>是一个块级容器标签，所有表格内容都要放在这个标签里面

<table>
  ... ...
</table>

2.1 `<caption>`标签

<caption>总是<table>里面的第一个子元素，表示表格的标题。该元素可写可不写

<table>
  <caption>这里是标题</caption>
</table>

2.2 `<thead>`、`<tbody>`、`<tfoot>`标签

<thead>、<tbody>、<tfoot>都是块级容器元素，分别表示表头，表体，表尾。如果什么都不写，浏览器会自动把把内容填充到<tbody>中

 <table>
        <tr>
            <th>班级</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>二年级</td>
            <td>小红</td>
        </tr>
        <tr>
            <td>一年级</td>
            <td>小明</td>
        </tr>
    </table>

2.3 `<tr>`标签

<tr>标签表示表格的一行（table row）

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

上面代码表示表格共有3行

2.4 `<th>`,`<td>`标签

<th>和<td>都用来定义表格的单元格。其中，<th>是标题单元格，<td>是数据单元格

<table>
  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>小明</td>
  </tr>
  <tr>
    <td>002</td><td>小红</td>
  </tr>
</table>

上面代码中，表格一共有三行。第一行是标题行，所以使用<th>；第二行和第三行是数据行，所以使用<td>

colspan属性，rowspan属性 colspan属性和rowspan属性用来设置单元格跨行或跨列，前者表示单元格跨越的栏数，后者表示单元格跨越的行数，默认值为1

<table>
  <tr>
    <td colspan="2">111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
</table>

上面代码中，第一行的第一个单元格会跨两列

3. `<img>`标签

<img>标签用于插入图片。它会发出一条get请求，来展示一张图片

<img src="1.jpg">

上面代码表示插入一张名为1.jpg的图片。它有几个属性

alt属性 alt属性用来设定图片的文字说明，当图片无法显示的时候，图片的位置上会显示文本

<img src="1.jpg" alt="示例图片">

width，height属性设置图片的大小宽高，单位是像素或百分比

3.1 事件

onload事件当图片加载完成的时候就会触发此事件
onerror 当图片加载失败就会触发此事件

3.2 响应式

如果要在手机上显示，只需要设置图片的最大宽度就可以

max-width:100%

4. `<form>`表单标签

<form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。当点击提交按钮<form>表单标签会发送一条get或post请求，并刷新页面

<form>
  <!-- 各种表单控件-->
</form>

<form>表单有很多属性，下面举几个常见属性

action：服务器接收数据的 URL地址
method：提交数据的 HTTP 方法，值为get（表单数据作为 URL 的查询字符串发送）或者post（表单数据作为 HTTP 数据体发送）
target：在哪个窗口展示服务器返回的数据，值与<a>标签相同

本文部分内容引自网道(WangDoc.com)

HTML笔记2

1. <a>标签

1.1 href属性

1.2 target属性

1.3 download属性

1.4 rel-noopener属性

2. <table>表格标签

2.1 <caption>标签

2.2 <thead>、<tbody>、<tfoot>标签

2.3 <tr>标签

2.4 <th>,<td>标签

3. <img>标签