HTML常用标签

a标签的用法

含义及作用

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

属性

• href

• target

• download 并不是所有浏览器都支持，因此暂时没有学习

• rel=noopener 涉及其他未学内容，暂时没有深入学习

href

hyper refrence 超链接

<a href=""></a>

取值可以为

网址

1. http://xxx.com

2. https://xxx.com

3. //xxx.com

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

路径

1. a/b/c 或/a/b/c

2. index.html 或 ./index.html

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

id

• href=#xxx 会跳转至id为xxx的元素处

伪协议

1. JavaScript:代码;

2. mailto:邮箱

3. tel:电话号码

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

target

设定链接打开的位置

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

取值

1. _self 默认值，在当前层级/页面打开，如在iframe中则是在当前的iframe中打开

2. _blank 在新页面（新标签页）打开

3. _top 在当前页面的最顶级打开，即在当前页面中打开，通常用于iframe中

4. _parent 在当前层级的上一级打开，通常用于iframe中

5. window的name 如果已有该name的window存在，则在该window中打开，否则创建一个名为name的window并在其中打开

6. 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> 只是给数据加入了一个加粗居中的格式。

相关样式

table-layout

1. table-layout= auto 自动调整单元格宽度，每列相同

2. table-layout= fixed 根据单元格数据的长度，调整单元格宽度

border-collapse

• border-collapse: collapse 单元格之间没有空隙

border-spacing

• border-spacing: 1px 单元格之间有1px的空隙

一般连用，用于重设表格样式:

<style>
  table {
    table-layout: auto;
    width: 600px;
    border-collapse: collapse;
    border-spacing: 0px;
  }
  td,
  th {
    border: 1px solid blue;
  }
</style>

img标签

作用

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

属性

1. alt=“” 图片加载失败后的文字

2. height 图片高度，若只限定了height，则width会自动按原始纵横比调整

3. width 图片宽度，若只限定了width，则height会自动按原始纵横比调整

4. src=“” 图片链接

事件

1. onload 用于监听，表示图片载入成功

2. 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>

属性

1. action=“” 链接到某个地址，暂时不涉及，未学习

2. autocomplete=“on” 自动填充功能，配合<input>功能使用

3. method=GET 或 POST，没有学习有啥区别

4. 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
select为用户提供了一个下拉列表，提供了一些项供用户选择。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.

但是实现了类似的功能。