1. a标签的用法

属性

  • herf 超链接（herf的取值，9种）

1.网址（三种）
https://google.com
http://google.com
//google.com（自动选择最适应的）

  1. <a href="//google.com">超链接</a>

2.路径（两种）
/a/b/c以及a/b/c
index.html及./index.html

  1. <a href="/a/b/c.html">我是c.html</a>

3.伪协议（三种）
javascript:代码（现在只是用来做一个空的伪协议如下）目前了解到的唯一一种的什么都不做的a标签

  1. <a href="javascript:;"></a>

mailto:邮箱 <a href="mailto:邮箱">发邮件给我</a>
tel:手机号 <a href="tel:手机号">打电话给我</a>
4.id herf=#xxx 点击后会跳转到id那里（一种）

  1. <p id="5">5</p>
  2. <a href="#5">查看5</a>

  • target 指定在哪个窗口打开

    1. <a href="//google.com" target="_blank">超链接</a>

    _self 当前窗口打开
    _blank 新窗口打开
    _parent 当前窗口的父窗口打开，若没有父级，则相当于_self
    _top 在顶级窗口中打开
    xxx 在两个网址是会表现出来，若没有一个命名为 xxx 的打开页面，则会新建一个页面，若有则在 xxx 页面打开

  • download

不是打开页面而是下载页面（多浏览器不支持，尤其是手机浏览器）

  • rel=noopener

后面js补充

作用

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

    2. table 标签的用法（表格）

    相关标签

    table
    thead 表的头部
    tbody 表的身体
    tfoot 表的底部
    tr （table row）新的一行
    th 表头
    td 数据
    简单基本样式示例如下：（需要做的好看需要另外添加css属性）
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>Document</title>
    7. </head>
    8. <body>
    9.  <table>
    10.    <thead>
    11.      <tr>
    12.        <th>英语</th>
    13.        <th>翻译</th>
    14.        <th>助记</th>
    15.      </tr>
    16.    </thead>
    17.    <tbody>
    18.      <tr>
    19.        <td>hyper</td>
    20.        <td>超级</td>
    21.        <td>害怕</td>
    22.      </tr>
    23.      <tr>
    24.        <td>targer</td>
    25.        <td>目标</td>
    26.        <td>她给他</td>
    27.      </tr>
    28.      <tr>
    29.        <td>reference</td>
    30.        <td>引用</td>
    31.        <td>refer+ence</td>
    32.      </tr>
    33.      <tr>
    34.        <td>frame</td>
    35.        <td>边框、框架</td>
    36.        <td></td>
    37.      </tr>
    38.    </tbody>
    39.    <tfoot>
    40.      <tr>
    41.        <td>error</td>
    42.        <td>错误</td>
    43.        <td>爱惹</td>
    44.      </tr>
    45.    </tfoot>
    46.  </table>
    47. </body>
    48. </html>

    相关样式（css）

    1. table-layout: auto;     根据内容自动定义宽度（一般使用这个）
    2. table-layout: fixed;     使每一列尽量平均
    3. border-collapse: collapse;     自动合并
    4. border-spacing: 0;     间距为零

    3. img标签的用法（图片）

    img 是 image 缩写，src 是 source（来源） 缩写

    作用

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

    属性

    alt 设置文字，在图片加载失败时显示文字
    height 高度
    width 宽度
    src 图片来源
    设置宽度高度其中一个，另外一个会自适应，不要同时设置图片宽和高，会导致图片变形的（前端工程师底线永远不要让图片变形）
    1. <img width="500" src="dog.jpg" alt="一只狗子" />

    事件

    onload 加载成功
    onerror 加载失败
    id=”xxx”只用在调试中
    1. <img id="xxx" width="500" src="dog.jpg" alt="一只狗子" />
    2.  <script>
    3.    xxx.onload = function () {
    4.      console.log("图片加载成功");
    5.    };
    6.    xxx.onerror = function () {
    7.      console.log("图片加载失败");
    8.      xxx.src = "/404.png";
    9.    };
    10.  </script>

    响应式

    max-width:100%
    外边距，内边距设置0, 最大宽度100%，即可适用于手机，如下：
    <style>
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   img {
     max-width: 100%;
   }
 </style>

可替换元素

4. form标签用法（表单）

作用

发出get或post请求，然后刷新页面

属性（测试勾选preserve log）

action 控制哪个页面，页面名字

autocomplete 给出建议（如下图）

  • off 在每一个用到的输入域里，用户必须显式的输入一个值，浏览器不会自动补全输入。
  • on 浏览器能够根据用户之前在表单里输入的值自动补全。

image.png

method 控制发出get还是post请求

target 同 a 标签的target

<body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" />
    </form>
    <iframe name="a" src="a-target-iframe.html" frameborder="0"></iframe>
</body>

事件

onsubmit

默认<input type="text" />会在输入框后面显示一个提交按钮<input type="submit" value="搞起" />这个则把提交改为搞起两个字
第二种按钮 button （button里还可以再加标签，input不行）

<button type="submit">搞起</button>

button加标签示例

<button type="submit">
        <strong>
          搞起
        </strong>
        <img width="100" src="dog.jpg" alt="" />
</button>

结果如下图，左边按钮为input标签，右边为button标签
image.png
另外如果不写type="submit"则默认为submit
如果写type=别的，则不能提交了

5. input标签用法

作用

让用户输入内容

属性

类型

type: button / checkbox / email / file / hidden / number /
password / radio / search / submit / tel / text

其他

name / autofocus / checked / disabled / maxlength /
pattern / value / placeholder
以下代码为经常用到的（后面图片为显示出来的效果）：

注：

其中
password 不展示具体内容，显示小圆点
radio 不输入name=的话会导致可以勾选两个
checkbox 为多选 name=表示为同一类型
file 可选择单个文档，加了 multiple 之后可选择多个文件夹
hidden（隐藏）不是给人为看的，主要用作机器提取前面输入过的用户名之类的

<body>
    <input type="text" required />
    <hr />
    <input type="color" />
    <hr />
    <input type="password" />
    <hr />
    <input type="radio" name="gender" />男
    <input type="radio" name="gender" />女
    <hr />
    <input type="checkbox" name="hobby" />唱
    <input type="checkbox" name="hobby" />跳
    <input type="checkbox" name="hobby" />rap
    <input type="checkbox" name="hobby" />篮球
    <hr />
    <input type="file" />
    <input type="file" multiple />
    <hr />
    看不见我吧<input type="hidden" />
    <hr />
    <button type="submit">
      <strong>
        提交
      </strong>
    </button>
 </body>

image.png

事件

onchange 事件在用户改变输入域的内容时执行 JavaScript 代码
onfocus 鼠标选中触发事件
onblur 鼠标挪开触发事件

验证器

HTML5自带验证器

<input type="text" required />

表示这一项不填写，提交不了，如下图
image.png
这里介绍一种，其他的JavaScript里补充

6.其他输入标签

textarea显示一个可拖动的框框填写文字一般里面什么都不填

放弃使用html定义，直接用css来使其不能拖动并且设置大小，如：

 <textarea style="resize: none; width: 50%; height: 300px;"></textarea>

常用用法，让用户填写生平之类的东西，又不让其能调整大小

select 选择

<select>
        <option value="">-请选择-</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
</select>

效果图
image.png

注意事项

  • 一般不监听 input 的 click 事件
  • form 里面的 input 要有 name

  • form 里面放一个 type=submit 才能触发 submit 事件

    补充

    1.html文件不要用鼠标双击打开，介绍两种打开html文件方法（如果用的过程出现bug，请放弃这个，寻找别的方法）

    第一种

    安装 yarn global add http-server
输入 http-server . -c-1  (缩写为 hs -c-1 )

    -c是缓存的意思 -c-1就是不要缓存的意思
    输入之后会显示几个网址（如下），点击其中一个进入网页
    image.png
    在网址后面加上路径如：image.png
    第二种

    安装 yarn global add parcel
输入 parcel+路径

    出现的网址直接点开即可,我自己试用了一次，ctrl+c中止不了，可直接中止终端，重新开一个（建议还是用上面那种）

    2.iframe标签用法内嵌窗口，现已很少使用

    代码
    image.png
    image.png
    显示
    image.png

    3.两个网址的页面（Google不支持iframe）

    <!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>
  <a href="//google.com" target="xxx">google</a>
  <a href="//baidu.com" target="xxx">baidu</a>

  <hr />
  <iframe
    style="border: none; width: 100%; height: 800px;"
    src=""
    name="xxx"
  ></iframe>
</body>
</html>

    4.preserve log

    谷歌开发者工具里面这个preserve log ：保留请求日志，跳转页面的时候勾选上，可以看到跳转前的请求，也可适用于chrome开发者工具抓包的问题
    image.png