HTML常用标签

作者: 前端小白Z | 来源:发表于2021-01-14 23:05 被阅读0次

准备工作：

英语小课堂
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>

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

HTML常用标签

准备工作：

a标签的用法

a的href取值

a的target取值

iframe标签

table标签（表格）

img标签(图片)

form标签

input标签

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读