a标签的用法

含义及作用

anchor 锚点常用于各种跳转，跳转到外部页面、内部锚点、邮箱或电话等

属性

href
target
download 并不是所有浏览器都支持，因此暂时没有学习
rel=noopener 涉及其他未学内容，暂时没有深入学习

href

hyper refrence 超链接

<a href=""></a>

取值可以为

网址

xxx.com
xxx.com
//xxx.com

主要使用第三种方式，会继承当前页面，以防出现无法访问的情况

路径

a/b/c 或/a/b/c
index.html 或 ./index.html

前者会在当前目录下寻找目标，后者会在根目录下寻找目标

href=#xxx 会跳转至id为xxx的锚点处

伪协议

JavaScript:代码;
mailto:邮箱
tel:电话号码

特别说明：href="javascript:;"会创造一个没有任何作用的链接，既不会刷新页面也不会滚动页面，链接也不会变色

target

设定链接打开的位置

<a href="" target="_self"></a>

取值

_self 默认值，在当前层级/页面打开，如在iframe中则是在当前的iframe中打开
_blank 在新页面（新标签页）打开
_top 在当前页面的最顶级打开，即在当前页面中打开，通常用于iframe中
_parent 在当前层级的上一级打开，通常用于iframe中
window的name 如果已有该name的window存在，则在该window中打开，否则创建一个名为name的window并在其中打开
iframe的name 在名为name的iframe中打开

table标签的用法

相关标签

    <table>
      <thead> 
        <!-- 表头部部分，即最开始 -->
        <tr>
            <!-- table row，代表一行 -->
          <th></th>
          <!-- table head，该标签中的内容会加粗，表示“表头” -->
          <th>小红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
      </thead>
      <tbody>
          <!-- 表的主体部分 -->
        <tr>
            <!-- table row，代表一行，这里表示表主体的第一行 -->
          <th>数学</th>
          <!-- 这里的th是列中的表头 -->
          <td>61</td>
          <!-- table data，表中的数据 -->
          <td>90</td>
          <td>22</td>
        </tr>
        <tr>
            <!-- table row，代表一行，这里表示表主体的第二行 -->
          <th>语文</th>
          <td>61</td>
          <td>90</td>
          <td>22</td>
        </tr>
        <tr>
            <!-- table row，代表一行，这里表示表主体的第三行 -->
          <th>英语</th>
          <td>61</td>
          <td>90</td>
          <td>22</td>
        </tr>
      </tbody>
      <tfoot>
          <!-- 表的底部 -->
        <tr>
          <th>总分</th>
          <td>161</td>
          <td>190</td>
          <td>122</td>
        </tr>
      </tfoot>
    </table>

PS：<thead> 和 <tfoot> 并非必要标签

    <table>
      <!-- <thead>
        <tr>
          <th></th>
          <th>小xiao红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
      </thead> -->
      <tbody>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>90</td>
          <td>22</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>61</td>
          <td>90</td>
          <td>22</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>61</td>
          <td>90</td>
          <td>22</td>
        </tr>
        <tr>
          <th>总分</th>
          <td>161</td>
          <td>190</td>
          <td>122</td>
        </tr>
      </tbody>
      <!-- <tfoot>
        <tr>
          <th>总分</th>
          <td>161</td>
          <td>190</td>
          <td>122</td>
        </tr>
      </tfoot> -->
    </table>

也可以实现同样的效果。

PS：我认为 <th> 只是给数据加入了一个加粗居中的格式。

img标签

作用

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

属性

alt="" 图片加载失败后的文字
height 图片高度，若只限定了height，则width会自动按原始纵横比调整
width 图片宽度，若只限定了width，则height会自动按原始纵横比调整
src="" 图片链接

事件

onload 用于监听，表示图片载入成功
onerror 用于监听，表示图片载入失败

    <img id="xxx" src="dog.png" alt="一只狗子" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/404.png";
      };
    </script>

响应式

max-width: 100% 使图片的width都为当前设备展示范围width的100%

form标签

form 表单发送GET或POST请求，然后刷新页面 每一个form中必须有一个type=submit，不论是input还是button，才能出发submit事件 form中的input要有name

    <form action="/yyy" method="POST" autocomplete="on" target="a">
      <input type="submit"/>
    </form>

属性

action="" 链接到某个地址，暂时不涉及，未学习
autocomplete="on" 自动填充功能，配合<input>功能使用
method=GET 或 POST，没有学习有啥区别
target="" 和a标签类似

事件

onsubmit 监听用，提交表单时

input标签

让用户输入内容，此节的学习中，主要与form标签配合使用

一般不监听input的click事件

    <form action="/yyy" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <!-- 自动填充开启时，将会显示关于username的填充内容 -->
      <hr />
      <input type="password" required />
      <!-- required 是验证器功能，意思是必须要填。 password是说这个输入框是输入密码的样式，不管输入啥都是·或者* -->
      <hr />
      <input type="color" />
      <!-- 提供一个颜色选择器 -->
      <hr />
      <input type="radio" name="gender" id="" />男
      <input type="radio" name="gender" id="" />女
      <!-- 单选框，name相同的会自动列为一组 -->
      <hr />
      <input type="checkbox" name="hobby" />唱
      <input type="checkbox" name="hobby" />跳
      <input type="checkbox" name="hobby" />rap
      <!-- 复选框，name相同的会自动列为一组 -->
      <hr />
      <input type="file" />
      <!-- 上传单个文件 -->
      <hr />
      <input type="file" multiple />
      <!-- 上传多个文件 -->
      <hr />
      看不见我吧：<input type="hidden" />
      <!-- 一个隐藏的输入框，可在不给用户察觉的情况下填入js获取的信息 -->
      <hr />
      <input type="submit" value="嘻嘻" />
      <!-- value可以指定submit按钮的显示文字 -->
      <hr />
      <button type="submit"><strong>呵呵</strong></button>
      <!-- button标签可以嵌入其他标签，例如<strong>，甚至<img>等标签 -->
    </form>

事件

onchange 文本框的内容发生变化
onfocus 文本框获得焦点
onblur 文本框失去焦点

其他输入标签

    <form action="/yyy" method="POST" autocomplete="on" target="a">
      <textarea style="resize: none; width: 50%; height: 130px"></textarea>
      <hr />
      <select name="" id="">
        <option value="">Select</option>
        <option value="1">Mon</option>
        <option value="2">Tue</option>
      </select>
    </form>

select + option 为用户提供了一个下拉列表，提供了一些项供用户选择。Mon、Tue为用户所见，1、2为返回给计算机的值。 "" 和 Select 提供了一个缺省值。

textarea 为用户提供了一个支持多行的、输入框大小可变的inputbox，可以通过style来调整格式，resize: none; 禁止用户调整输入框大小。

补充内容

input和button两者区别：

`<input type="submit" />`

`<button type="submit">submit</button>`

都可以在form标签中触发submit事件，但是input最多只能通过value自定义提交按钮的文本，但是button可以通过其他标签改变按钮显示的内容。

`<button type="submit"><strong>submit</strong></button>`

`<button type="submit"><img src=""></button>`

关于table中的th 我认为 <th> 只是给数据加入了一个加粗居中的格式。

a标签中使用伪协议创建一个没有任何作用的链接

<a href="javascript:;">一个没有任何作用的链接</a>

这个链接不会刷新页面，不会滚动页面，不会报错，默认情况下点击之后不会变颜色

经过我实验之后发现，不一定要javascript:;，使用其他的也行:

<a href="meiyong:">meiyong</a>

注意点：不能用数字开头；结尾要以:或者:;结尾

控制台报错：

Failed to launch 'meiyong:' because the scheme does not have a registered handler.

但是实现了类似的功能。

HTML常用标签