准备工作：

英语小课堂 hyper：超级

target：目标

reference：引用

frame：边框、框架

entrance：入口

load：加载

canvas：画布

永远不要双击打开html！
正确步骤 法一：

1.新建终端

2.输入yarn global add http-server下载插件（下载过的可省略这步）

3.输入http-server -c-1(可简写hs -c-1)得到地址，随便访问一个

4.在地址后面输入路径（如：//192.168.3.4:800/a-href.html)

法二：

新建终端，输入yarn global add parcel 安装parcel ，然后输入parcel a-href.html，直接得到一个地址，点击即可打开。

a标签的用法

属性： href：hyper（超级）+refer（引用）=超级链接

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

效果是在当前页面打开链接。

target：可以指定在哪个窗口（页面）打开链接

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

代码效果是，在空白页（新标签页）打开链接

download：功能是下载网页，但是很多浏览器不支持（了解即可）

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

rel=noopener：为了防止一个Bug

作用：

跳转到外部页面
跳转到内部锚点（指定标签）
跳转到邮箱或电话

a的href取值

网址： https://baidu·com

baidu.com

//baidu.com(这是一个无协议的网址，它会自动选择http或者https，推荐网址这样写）

路径：绝对路径/a/b/c.html，如果双击打开c.html那么就是打开根目录下的c.html，就不能显示网页。如果开启了http-server，在哪开的服务哪里就是根目录，打开就是打开当前目录下的c.html。

相对路径a/b/c，就是在当前目录下打开。

<a href="index.html">百度</a>和<a href="./index.html">百度</a>效果也是一样的

./ 意思就是在当前目录下查找。

伪协议： javascript:代码;

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

点击链接，就直接执行alert(1)这个javascript代码

alert(1)执行效果

<a href="">xxx</a>

href后面不写东西，那么点击xxx页面就会刷新

假如你想写一个a标签，但又想让他什么也不做（失效）：

<a href="javascript:;">xxx</a>

:;中间留空，点击xxx啥也不做。

小技巧：p{$}*30 +tab快速写出30个P标签

如何跳转到内部锚点（指定标签）？ ... <p id="xxx">10</p> ... <a href="#xxx">查看xxx</a> 在你要跳转到的标签里面加上id="xxx"，在a标签里写上href="#xxx"，点击即可跳转到指定标签。

mailto邮箱 <a href="mailto:7157xxxxxx@qq.com">发邮件给自己</a> 点击链接后，唤起发邮件页面
tel：手机号 <a href="tel:157xxxxxxxx">打电话给自己</a> 点击链接后，唤起拨号界面

a的target取值

内置名字

_blank： <a href="https://baidu.com" target="_blank">百度</a>
作用：在空白页打开
_self：

<a href="https://baidu.com" target="_self">百度</a>
作用：在当前页面打开（默认值） 3. _top：

<a href="https://baidu.com" target="_top">百度</a>
作用：在最顶层的页面打开链接（最上面的窗口）

_parent：

<a href="https://baidu.com" target="_parent">百度</a>
作用：在当前页面的上一层窗口打开链接

页面可以用iframe引用另一个页面

编辑a-target.html代码：

<body>
    <a href="https://baidu.com" target="_top">百度</a>
    <div>
      <iframe
        width="500"
        height="500"
        src="a-target-iframe.html"
        frameborder="0"
      ></iframe>
    </div>
  </body>

编辑a-target-iframe.html代码：

<body style="background-color: red">
    我是iframe
    <iframe src="a-target-iframe-2.html" frameborder="0"></iframe>
  </body>
</html>

编辑a-target-iframe-2.html代码：

<body style="background-color: green">
    我是 iframe 2:
    <hr />
    这里有个a标签
    <a href="//bilibili.com" target="_parent">parent</a>
  </body>

点击parent，在上一层窗口打开链接。因为百度的target是_top，所以点击百度则在顶层页面打开链接。

iframe标签

作用：内嵌窗口，较少使用。

iframe的name： <iframe src="https://baidu.com" name="xxx"></iframe>

window的name： 给链接命名后，在开发者界面输入window.name后可以得到当前页面的名称

iframe与target联用，可以做一个哔哩哔哩/百度切换的页面

方法一（分两个窗口）：

方法二（一个窗口）：

table标签（表格）

table只有 <thead>（头部）标签、<tbody>（身体）标签、<tfoot>（脚部）标签，三个标签。

<tr> 标签，tr=table row(行)：表格里的行

<th> 标签，th=table heading：表格里的表头

<td> 标签，tr=table data：表格里的数据

这三种标签只能写在、、三个标签里

例：

<!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>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小曾</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>200</td>
          <td>200</td>
          <td>200</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

左上侧为表头的成绩表.png

table-layout:auto/fixed: layout(布局)

<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: 500px;
        table-layout: auto/fixed;            <!--auto或者fixed二选一，
                                     auto为根据文本内容自动调整表格宽度、
                                     fixed则是使每个表格的宽度尽量平均-->
      }
    </style>
  </head>

auto布局.png fixed布局 .png

boder-spacing:x;
x可以是任意值， spacing(间隔) 作用：定义表格之间的间隔

给表格加边框大小为1px，颜色为红色设置表格间隔为10px

表格加边界设置样式.png

style一般加在head里面，head一般用来放些看不见的东西

表格边界效果.png

boder-collapse： border-collapse:collapse; 作用：合并边界，一般用来合并表格间隙。

边界合并.png

img标签(图片)

作用：发送一个get请求，展示一张图片

src属性：

<img src="dog.png" alt="" /> src=source(来源)，src可以是绝对路径/相对路径 alt=alternative可代替的

get请求.png

alt属性：

图片加载失败，提示alt“一只狗”，报错404 <img src="dog1.png" alt="一只狗" />

404报错.png

width/height属性：给图片加个宽度，只写宽度的话高度会自适应；同理，只写高度，宽度自适应。 <img width = "400" src="dog.png" alt="" /> <img height = "400" src="dog.png" alt="" /> 既写宽度又写高，图片会变形。 永远不能让图片变形！
onload/onerror事件： dog图片加载成功时，提示加载成功； dog图片加载失败，显示备用404图片，提示404图片加载成功。这种做法可以优化用户体验。

<!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>
    <img id="xxx" width="400" src="dog1.png" alt="一只狗" /> //这里dog1是故意写错
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/404.png";
      };
    </script>
  </body>
</html>

404备用图片效果.png

响应式max-width:100% 在head里面加上style标签效果：让图片随着页面大小的改变而改变

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
      }
    </style>

模型.png 响应式效果.png

form标签

作用：发送get或post请求，然后刷新页面。

属性action action作用与img的src一样，后面跟路径。

 <body>
    <form action="/xxx">    //action后面跟路径
      <input type="text" />
      <input type="submit" />
    </form>
  </body>

action里面写什么，点击后就会请求到哪个页面

method属性 method是控制用get还是post来请求的

<body>
    <form action="/yyy" method="POST">  
//可以通过改变action里面的内容来改变请求的页面，可以把/yyy变成/xxx
      <input type="text" />
      <input type="submit" />
    </form>
  </body>

autocomplete属性显示用户表单操作，其中autocomplete="on/off"可以是on打开也可以off关闭

<body>
    <form action="/yyy" method="POST" autocomplete="on">
      <input name="username " type="text" />
      <input type="submit" />
    </form>
</body>

target属性

target告诉浏览器我要提交到哪个页面，哪个页面需要刷新，效果是点击提交，因为target设置blank在新标签打开，所以点击提交会打开一个新的标签。

target属性和a标签里的target值是一样的，也是控制在哪个地方打开新的网页。

<body>
   <form action="/yyy" method="POST" autocomplete="off" target="_blank">
     <input name="username " type="text" />
     <input type="submit" />
   </form>
 </body>

input标签

作用：让用户输入内容

button和submit类型设置输入框提交按钮样式，有两种方法，一种是加value，一种是设置button按钮，二者皆可。

<body>
    <form action="/yyy" method="POST" autocomplete="off" target="a">
      <input name="username " type="text" />
      <input type="submit" value="搞起" />
      <button type="submit">搞起</button>
    </form>
</body>

两个按钮.png

value和button的区别:

button里面可以用标签，比如加粗标签，甚至还能加图片 value则不行，只能加纯文本

<body> <form action="/yyy" method="POST" autocomplete="off" target="a"> <input type="text" /> <input type="submit" value="<strong>搞起</strong>" /> <button type="submit"> <strong>搞起</strong> <img width="100" src="dog.png" alt="" /> </button> </form> </body>

type类型

**<input type="text" />**效果为文本框

在后面加required为文本框必须填写内容，否则提交不了。

<input type="text" required />

color颜色，效果为颜色框，可以自己选择颜色。

<input type="color" />

密码框，输入内容为小圆点，看不见输入内容

<input type="password" />

出现小圆点可点击选择

<input type="radio" />

出现两个小圆点可以同时选择

<input type="radio" />男<input type="radio" />女

两个选项二选一怎么操作？同时给两个input命名就只能选择一个了。

<input name="gender" type="radio" />男 <input name="gender" type="radio" />女

方形选框：

<input type="checkbox" />

方形选框多选，但是浏览器不知道这几个选项是一组的：

<input type="checkbox" />唱 <input type="checkbox" />跳 <input type="checkbox" />rap <input type="checkbox" />篮球

要想让四个选项成为一组数据，就给他们命名：

<input type="checkbox" name="hobby" />唱 <input type="checkbox" name="hobby" />跳 <input type="checkbox" name="hobby" />rap <input type="checkbox" name="hobby" />篮球

上传电脑文件（只能上传一个）：

<input type="file" />

上传电脑文件（上传多个）：

<input type="file" multiple />

hidden:

用来给JS输入一些看不见的东西。。。比如ID、字符串啥的

<input type="hidden" />

形成一个可以显示填写多行的文本，右下角可拖动调整大小

<textarea></textarea>

加上resize:none就不能调整大小了

<textarea style="resize: none"></textarea>

还可以设置固定的高度、宽度，设置成固定的大小以供用户填写，这种设置比较常见：

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

形成一个长方形的可选框：value是真正的值，"星期一"是给用户看的内容

<select> <option value="">-可选择-</option> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> <option value="4">星期四</option> </select>

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

HTML常用标签