HTML常用标签

准备工作：

英语小课堂
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
http://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>
作用：在当前页面打开（默认值）
_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：表格里的数据
这三种标签只能写在<thead>、<tbody>、<tfoot>三个标签里
例：

<!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

边界合并.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>

method.png

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里面可以用标签，比如加粗标签<strong>，甚至还能加图片
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>

区别.png

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" />

选择文件.png

上传电脑文件（上传多个）：
<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>

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

最后编辑于：2021.01.15 13:18:44

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,222评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,455评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,720评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,568评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,696评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,879评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,028评论 3赞 409
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,773评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,220评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,550评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,697评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,360评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,002评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,782评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,010评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,433评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,587评论 2赞 350