HTML常用标签

一、a 标签

• 1、简介

  （1）链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。例如：

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

  浏览器中显示"百度"，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。

  （2）<a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

  <a href="https://www.example.com/">
    <img src="https://www.example.com/foo.jpg">
  </a>
  

  上面代码中，<a>标签内部就是一个图像。用户点击图像，就会跳转到指定网址。

• 2、属性

  (1) href 属性

  href属性给出链接指向的网址。可以跳转外部页面、内部锚点、邮箱或电话等。

  href 的取值：

  • 网址的几种形式

    1. xxx.com(https协议网址)

    2. xxx.com（http协议网址）

    3. //xxx.com（无协议网址，浏览器会自动选择合适的协议进行访问）

  • 路径的几种形式

    1. /a/b/c(绝对路径)

    2. a/b/c(相对路径)

    3. index.html(同级目录下的index.html文件)

    4. ./index.html(当前目录下的index.html文件，与3相同)

  • 伪协议的几种形式

    1. javascript:代码;
       当需要一个链接点击后什么都不做时，可以使用javascript:;来实现

    2. mailto:邮箱
       使用mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。除了邮箱，邮件协议还允许指定其他几个邮件要素。
       subject：主题
       cc：抄送
       bcc：密送
       body：邮件内容

    3. tel:手机号

  • id

    href=#xxx：点击链接跳转到href中填写的id对应的标签处

  (2) target

  target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

  target的取值：

  • 内置对象

    1. _self：当前窗口打开，这是默认值。

    2. _blank：新窗口打开。

    3. _parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。

    4. _top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。

  • 程序员命名
    1. window.name

    <a src="" target="xxx"></a>     打开一个窗口为xxx
    <a src="" target="xxx"></a>     若窗口xxx位关闭，该链接会在上面打开的那个窗口有加载
    

    2. iframe.name

    <a src="" target="xxx"></a> 
    <iframe src="" name="xxx"></iframe>   链接会在name与target值相同的iframe里加载
    

  (3) download

  download属性表明当前链接用于下载，而不是跳转到另一个 URL。download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。 Tips：但不是所有浏览器都支持，尤其是手机浏览器可能不支持。

  (4) rel

  rel属性说明链接与当前页面的关系。 下面是一些常见的rel属性的值。

  • alternate：当前文档的另一种形式，比如翻译。
  • author：作者链接。
  • bookmark：用作书签的永久地址。
  • external：当前文档的外部参考文档。
  • help：帮助链接。
  • license：许可证链接。
  • next：系列文档的下一篇。
  • nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。
  • noreferrer：告诉浏览器打开链接时，不要将当前网址作为HTTP头信息的Referer字段发送出去，这样可以隐藏点击的来源。
  • noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。
  • prev：系列文档的上一篇。
  • search：文档的搜索链接。
  • tag：文档的标签链接。

二、 img 标签的用法

• 1、简介

  （1）<img>标签通过发送GET请求来展示一张图片。它是单独使用的，没有闭合标签。

  （2）<img>默认是一个行内元素，与前后的文字处在同一行。

  （3）<img>可以放在<a>标签内部，使得图片变成一个可以点击的链接。

• 2、属性

  (1) alt 属性

  alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。

  (2) width 属性，height 属性

  图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。
  注意：
  1) 不要加px
  2) width和height只要设置一个，另一个会自动调整，两个都设置容易变形

  (3) src 属性

  src属性指定图片的地址

• 3、事件

  (1) onload：图片加载成功后有什么后续操作可以写在onload事件中

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

  (2) onerror：图片加载失败时可以用onerror事件进行补救，例如：

  xxx.onerror = function(){xxx.src="加载失败.jpg"}//当加载失败，载入加载失败.jpg图片

• 4、响应式布局

  在css样式中添加img{max-width:100%}

三、 table 标签的用法

• 1、<table>是一个块级容器标签，所有表格内容都要放在这个标签里面。

  <table>
    <thead>... ...</thead>
    <tbody>... ...</tbody>
    <tfoot>... ...</tfoot>
  </table>
  

• 2、<thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。

  这三个元素都是可选的。如果使用了<thead>，那么<tbody>和<tfoot>一定在<thead>的后面。如果使用了<tbody>，那么<tfoot>一定在<tbody>后面。大型表格内部可以使用多个<tbody>，表示连续的多个部分。

• 3、<tr>标签表示表格的一行（table row）。如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级。

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

• 4、<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>
  

• 5、colspan属性，rowspan属性

  单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。

  <table>
    <tr>
      <td colspan="2">A</td><td>B</td>  	//**该行第一个单元格跨两列**
    </tr>
    <tr>
      <td>A</td><td>B</td><td>C</td>
    </tr>
  </table>
  

• 6、相关样式

  table-layout: auto(根据内容调整)/fixed(根据给定宽度分配)
  border-collapse: collapse
  border-spacing: 0

四、form 标签

• 1、简介

  <form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。例如：

  <form action="https://example.com/api" method="post">
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user">
    <input type="submit" value="提交">
  </form>
  

• 2、属性

  (1) action 属性

  控制请求到哪个页面

  (2) autocompleted 属性

  自动填充：当form标签中的 autocompleted=on，input标签中的name="username"，浏览器会自动推荐一些可选择用户名提供给用户选择

  <form action="https://example.com/api" method="post" autocompleted=on>  /** autocompleted=on **/
    <input  type="text" name="username">   /** name=username **/
    <input type="submit" value="提交">
  </form>
  

  (3) method 属性

  请求方式：POST、GET

  (4) target 属性

  与<a>标签中的用法一致

• 3、事件 submit

  可以通过<input type="submit" value="提交">进行提交，也可以通过<button type="submit">提交<button/>进行提交。

  标签input和标签button的区别：
  a. input中不支持再加标签
  b. button中可以再加标签 注意：form标签中必须要有一个type为submit的标签