a标签

属性

href
target
download
rel=noopener

作用

跳转外部页面
跳转内部锚点
跳转到邮箱或者电话

a的href的取值

网址

google.com
google.com
//google.com 高级用法，自动选择http或https协议

路径

/a/b/c 或a/b/c

绝对路径/a/b/c：/是根目录，此处写绝对路径，却采用的相对路径；http协议的一些约定，如果开启http服务，那么根目录/就不再是硬盘的根目录，而是你在哪里开启的服务，哪里就是根目录；

相对路径 a/b/c：在当前目录下找a再找b再找c。
index.html或./index.html

两者都是在当前目录找index.html

伪协议

javascript:代码;

href="javascript:;" //什么都不做,唯一的方法
href="javascript:alert(1);" //弹出1
href="#" //默认回到顶部


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

mailto:邮箱

href="mailto:123@qq.com"

<a href="mailto:123@qq.com">邮箱</a>

tel:手机号

href="tel:12306"

    <a href="tel:12306">手机</a>

id href="#id"

a的target

内置名字

_blank 在空白页新建页面
_top 在顶级层级显式页面
_parent 在父级层级显式页面
_self 在自身层级显式页面

//index.html
  <body>
    <a href="//google.com" target="_self">google</a>
    <div>
      <iframe width="800" height="800" src="iframe1.html"></iframe>
    </div>
  </body>

//iframe1.html
  <body style="background-color: red">
    我是iframe1 里面有个a
    <a href="//baidu.com" target="_self">_self</a>
    <iframe src="iframe2.html" frameborder="0"></iframe>
  </body>

//iframe2.html
  <body style="background-color: blue">
    我是iframe2 里面有个a
    <a href="//baidu.com" target="_self">_self</a>
  </body>

程序员命名

window的name 强迫在同一个名为xxx的窗口打开页面，在控制台console用window.name查看

  <body>
    <a href="//google.com" target="xxx">google</a>
    <a href="//baidu.com" target="xxx">baidu</a>
  </body>

123

iframe的name

示例1：

  <body>
    <a href="//google.com" target="xxx">google</a>
    <a href="//baidu.com" target="yyy">baidu</a>
    <hr />
    <iframe name="xxx" frameborder="0"></iframe>
    <hr />
    <iframe name="yyy" frameborder="0"></iframe>
  </body>

示例2：

  <body>
    <a href="//google.com" target="xxx">google</a>
    <a href="//baidu.com" target="xxx">baidu</a>
    <hr />
    <iframe
      style="border: none; width: 100%"
      height="800"
      name="xxx"
      frameborder="0"
    ></iframe>
  </body>

a的download

作用不是打开页面，而是下载页面
问题不是所有浏览器都支持，尤其是手机浏览器可能不支持

iframe标签

内嵌窗口，很少使用，a标签target中有介绍。

table标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 600px;
        table-layout: auto; /*auto 自适应宽度 fixed 尽量等宽*/
        border-collapse: collapse; /*合并边框，默认不合并*/
        border-spacing: 0; /*边框边距*/
      }
      td,
      th {
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小明</th>
          <th>小红</th>
          <th>小爱</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>语文</th>
          <td>66</td>
          <td>66</td>
          <td>66</td>
        </tr>
        <tr>
          <th>数学</th>
          <td>66</td>
          <td>66</td>
          <td>66</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>66</td>
          <td>66</td>
          <td>66</td>
        </tr>
      </tbody>
      <tfoot>
        <th>总分</th>
        <th>600</th>
        <th>700</th>
        <th>800</th>
      </tfoot>
    </table>
  </body>
</html>

`img`标签

img（image）：a、e元音被省略，首字母i也是元音但一般不省略首字母。

src（source）：省略了o、u、e三个元音

作用

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

属性

src：必填项，图片的文件路径

alt：作为图片的描述，在图片加载失败时会显示给用户

height：图片高度

width：图片宽度

  补充
      只写宽度 高度会自适应
      只写高度 宽度会自适应
      同时写高度和宽度，图片很可能会变形！！！
      底线，图片不能变形！
      width="800"，不需要写px，因为它只支持px

事件

onload：图片加载成功会调用

onerror：图片加载失败会调用
响应式

max-width:100%

代码示例：image.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%; /*页面的所有图片都是响应式的*/
      }
    </style>
  </head>
  <body>
    <img src="dog.jpeg" alt="一只狗子" id="xxx" />
    <script>
      //图片加载成功会调用
      xxx.onload = function () {
        console.log("图片加载成功！");
      };
      //图片加载成功会调用
      xxx.onerror = function () {
        console.log("图片加载失败！");
        xxx.src = "error.png"; //对图片进行挽救
      };
    </script>
  </body>
</html>

form标签

表单

作用：发get或者post请求，然后刷新页面
属性：

action：表单提交的地址

method：GET/POST请求

target：提交到哪个页面，哪个页面就会刷新

autocomplete：自动完成功能，表单内的输入本文，自己完成输入提示

   
      为了提供自动完成功能，用户代理可能需要input/select/textarea 元素才能:

          1.具有 name 和/或 id 属性
          2.成为 元素 form 的后代
          3.具有 submit 按钮的表单

事件：onsubmit

input标签

作用让用户输入内容
属性

类型 type： button/checkbox/email/file/hidden/number/password/radio/search/submit/tel/text/
其他 name/autofocus/checked/disabled/maxlength/pattern/value/placeholder
事件 onchange 当用户输入改变的时候 onfocus 当用户把鼠标移入的时候 onblur 当用户把鼠标移出的时候
验证器 required属性，要求字段必须填写
注意: 一般不监听input的click事件 form里面的input都要有name form里面要放一个type=submit才能触发提交

input和button区别 input里面不支持其他标签，只支持纯文本 button里面可以含有别的标签 button的type默认是submit

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/yyy" method="POST" autocomplete="on" target="xxx">
      <input name="username" required type="text" />
      <hr />
      <input type="color" />
      <hr />
      <input type="password" />
      <hr />
      <input name="gender" type="radio" />男
      <input name="gender" type="radio" />女
      <hr />
      <input type="checkbox" name="hobby" />唱歌
      <input type="checkbox" name="hobby" />跳舞
      <input type="checkbox" name="hobby" />游泳
      <input type="checkbox" name="hobby" />爬山
      <hr />
      <input type="file" />
      <input type="file" multiple />
      <hr />
      我是隐藏的：<input type="hidden" name="user_id" id="10086">
      <hr>
      <textarea
        style="resize: none; width: 50%; height: 300px"
        name=""
        id=""
        cols="30"
        rows="10"
      ></textarea>
      <hr />
      <select name="xingqiji" id="">
        <option value="">- 请选择 -</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
        <option value="4">星期四</option>
        <option value="5">星期五</option>
        <option value="6">星期六</option>
        <option value="7">星期日</option>
      </select>
      <hr />
      <input type="submit" id="" value="搞起" />
      <!-- <button type="button"> -->
      <!-- <button type="submit"> -->
      <hr />
      <button type="">
        <strong>搞起</strong>
        <img src="dog.jpeg" width="50" alt="" />
      </button>
    </form>
    <iframe name="xxx" width="800" height="800" src="iframe1.html"></iframe>
  </body>
</html>

资料来源饥人谷

HTML常用标签

a标签