元元的前端之路-006-HTML重难点英语补充： hyper 超级 canvas 画布 a标签属性 href 超链接

英语补充：
hyper 超级
canvas 画布

a标签

属性
- href 超链接
- target
- download
- rel=noopener
作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等

网页调试工具：http-server
安装工具：在终端中输入 yarn global add http-server
使用工具：在终端中输入 http-server . -c-1
然后cmd + 单击左键，在网址栏补全html文件名指向文件即可打开网页

网页调试工具2：
安装工具：在终端中输入 yarn global add parcel
使用工具：在终端中输入 parcel html文件名
直接cmd + 单击左键

中断当前指令的快捷键：control + c

a的href的取值
- 网址
1. google.com
2. google.com
3. //google.com
- 路径
1. /a/b/c以及a/b/c
2. index.html以及.index.html
- 伪协议
1. javascript:代码;
2. mailto:邮箱
3. tel:手机号

以下为代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p id="xxx">3</p>
    <p>4</p>
    <p>5</p>
    <a href="http://google.com target=_blank">超链接</a>
    <a href="/a/b/c.html">c.html</a>
    <a href="index.html">在当前目录找index.html</a>
    <a href="./index.html">在当前目录找index.html</a>
    <a href="javascript:alert(1);">JavaScript伪协议</a>
    <a href="javascript:;">空的JavaScript伪协议，点击了什么都不发生，做查看</a>
    <a href="#xxx">查看xxx,跳转到</a>
    <a href="mailto:ywan0587@student.monash.edu">发邮件给元元</a>
    <a href="tel:15212345678">打电话给元元</a>
  </body>
</html>

a的target的取值
- 内置名字
  - _blank 新窗口打开
  - _top 顶级窗口打开
  - _parent 上一级窗口打开
  - _self 当前窗口
- 程序员命名
  - window的name 以一个字符串当作参数，可以重复一个窗口打开不同的页面
  - iframe的name 以下为代码演示：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <!--
   <a href="http://google.com target=_blank">跳转到新页面</a>
   <a href="http://google.com target=_self"
     >跳转到当前页面，self本身也是默认值</a
   >
   -->
   <a href="http://google.com target=_xxx">google</a>
   <a href="http://baidu.com target=_yyy">baidu</a>

   <hr />
   <iframe src="" name="xxx"></iframe>
   <hr />
   <iframe src="" name="yyy"></iframe>
 </body>
</html>

iframe标签内嵌窗口 - 目前已经很少使用
table标签表格
- 其只能有thead tbody tfoot三种标签
- tr - table row
- th 表头
- td table data 表数据 单表头表格代码练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
        <tr>
          <td>target</td>
          <td>目标</td>
        </tr>
        <tr>
          <td>reference</td>
          <td>引用</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>框架、边框</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>空</td>
          <td>空</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

单表头表格代码练习Output截图

多表头表格代码练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>61</td>
          <td>61</td>
        </tr>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>61</td>
          <td>61</td>
        </tr>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>61</td>
          <td>61</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <th>总分</th>
          <td>200</td>
          <td>200</td>
          <td>200</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

多表头表格代码练习Output截图

多表头表格代码练习2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 600px;
        table-layout: auto;
        border-spacing: 0px;
        border-collapse: collapse;
      }
      td,
      th {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小小小红</th>
          <th>小明</th>
          <th>小颖</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>61</td>
          <td>61</td>
        </tr>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>61</td>
          <td>61</td>
        </tr>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>61</td>
          <td>61</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <th>总分</th>
          <td>200</td>
          <td>200</td>
          <td>200</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

多表头表格代码练习Output截图2

img标签
作用
- 发出get请求，展示一张图片
属性
- alt/height/width/src
- alt是可选择的，当src中的图片加载失败的时候，就展示alt中的元素
- 只写宽度高度会自适应；只写高度，宽度会自适应；如果既写高度又写宽度，那么图片会变形
- 永远不要发生图片变形的事情
事件
- onload/onerror - 监听图片是否加载成功成功调用onload，反之调用onerror
响应式
- max-width:100%
可替换元素 img标签代码练习：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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 id="xxx" src="pic.png" alt="一张截图" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/pic2.png";
      };
    </script>
  </body>
</html>

form标签 一般会有输入框和提交按钮
作用
- 发get或post请求，然后刷新页面
- method是控制用get还是用post
属性
- action/autocomplete/method/target
- action就类似于img的src
- action用于控制请求哪个页面
- autocomplete自动提示输入 on表示打开 off表示关闭
- target类似于a标签
- submit按钮是让页面跳转到/xxx，target是指把哪个页面变成/xxx
事件
- 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
验证器
- HTML5新增功能

form和input标签代码练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="_blank">
      <input type="text" />
      <hr />
      <input type="color" />
      <hr />
      <input type="password" />
      <hr />
      <input name="gender" type="radio" /> 男
      <input name="gender" type="radio" /> 女
      <hr />
      <input name="hobby" type="checkbox" />唱
      <input name="hobby" type="checkbox" />跳
      <input name="hobby" type="checkbox" />RAP
      <input name="hobby" type="checkbox" />篮球
      <hr />
      <input type="file" /> <input type="file" multiple />
      <hr />
      <input type="hidden" />
      <hr />
      <textarea style="resize: none; width: 50%; height: 300px"></textarea>
      <!--多行文本输入-->
      <hr />
      <select>
        <option value="">- 请选择 -</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
      </select>
      <hr />
      <input name="username" type="text" />
      <input type="submit" value="搞起" />
      <button type="submit"><strong>搞起</strong></button>
      <!--input和button的区别是，button标签可以内部继续加标签，但是input却不可以-->
      <!--form必须有一个type=submit的按钮，如果不写会默认是submit，如果写了别的，则这个按钮就不能提交这个表单-->
      <!--一般不监听input的click事件-->
      <!--form里面的input要有name-->
      <!--form里面放一个type=submit才能触发submit事件-->
    </form>
  </body>
</html>

form和input标签代码练习Output截图