《HTML常用标签》

是蟹老板呀
296 阅读3分钟

HTML中有许多常用的标签，下面就为大家介绍几个常用的标签，以及他们的作用、属性、事件等内容。

HTML常用标签

  1. a标签
  2. table标签
  3. img标签
  4. form标签
  5. input标签
  6. select+option标签
  7. textarea标签

一、a标签

a标签的属性

  1. href
  2. target
  3. download
  4. rel=noopener

1、href属性

href的取值有以下几个：

网址

网址可以是http://或者https://或者//来预览网页。但我们常用//，因为其兼容性最好。 我们可以通过http-server来预览网页。

λ http-server -c-1
Starting up http-server, serving ./
Available on:
  http://192.168.1.6:8080    
  http://127.0.0.1:8080      
Hit CTRL-C to stop the server

路径

我们可以输入路径直接进入文件，主要有以下几种方法：

  1. /a/b/c/index.html。这里的/代表的是协议的根目录，而非计算机的根目录。
  2. a/b/c/index.html。这里表示的就是相对路径。
  3. index.html。直接输入当前文件夹内的文件名。
  4. /index.html。在根目录中寻找文件。

伪协议

  1. javascript：代码； 可以在href中直接输入一段js代码来执行。
  2. #xxx。通过id="xxx"可以直接跳到指定标签。
  3. maito：邮箱。可以发送邮件。
  4. tel：电话。可以拨打电话。

2、target取值

target的取值主要是内置名字或者程序员命名。

内置名字

内置名字主要有以以下几个：

  1. _blank。在新页面打开。
  2. _self。 在当前页面打开（例如嵌套的iframe窗口）。
  3. _top。在顶部窗口打开
  4. _parent。在父级窗口打开。

内置名字

  1. windows的name。 例如我们target指向一个xxx，那么就会在xxx窗口打开该页面。

  2. iframe的name。 我们可以使用target指向iframe中被我们命名的窗口。

二、table标签

table有以下几个相关的标签。

  1. table 表格
  2. thead=table head
  3. tbody=table body
  4. tfoot=table foot
  5. tr=table row
  6. td=table data
  7. th=table head（写在thead标签内）

table相关样式

  1. table-layout。设置表格的宽。
  2. border-collapse。设置表格每一个单元之间的间距，常设置为border-collapse: collapse；
  3. border-spacing。同上，常设置为border-spacing: 0；

三、img标签

img标签的作用:发出get请求，展示一张图片。

img标签的属性：alt/height/width/src

  1. src。链接一张图片。
  2. alt。在链接的图片加载失败时，显示alt中内容。
  3. height。高度。
  4. width。宽度。

img的事件：onload/omerror。用来监听图片是否加载成功。 同时在加载失败时，可以通过id来挽救加载失败。

<script>
      xxx.onload = function () {
        console.log("successful");
      };
      xxx.onerror = function () {
        console.log("failed");
        xxx.src = "/404.png";
      };
    </script>

响应式：

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

四、form标签

form标签的作用：发送get/post请求，然后刷新页面。

form标签的属性：action/autocomplete/method/target

  1. action：后端给的链接。
  2. autocomplete： 自动填充。可以实现自动填充用户名。
<form action="/yyy" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
  1. method。若写成method="POST"，则使用post。
  2. target。可以决定表单提交到哪个页面，可以是iframe。

form标签的事件：onsubmit。 可以通过value/button来自定义提交按钮的文字。但是，button中可在嵌套其他标签，而value不可以。

注意：form中必须要有 type=submit

五、input标签

input标签的常用元素：

  1. text。文本
  2. color。颜色
  3. password。密码
  4. radio。同一个name下，单选。
  5. checkbox。同一个name下，多选
  6. file。上传文件。加上multiple，可以上传多个文件。

input标签事件：onchange/onfocus/onblur

input标签验证器：HTML5

注意：input中都要都name

六、select+option标签

使用select+option标签可以创建一个下拉选单。

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

七、textarea标签

可以通过texrarea标签，实现一个文本框让用户进行编辑。

<textarea>
        style="resize: none; width: 50%; height: 300px;"
        name=""
        id=""
        cols="30"
        rows="10"
</textarea>

我们可以通过style="resize: none; width: 50%; height: 300px;"来设置文本框大小。

©饥人谷

avatar
文章
阅读
粉丝