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

HTML常用标签

a标签

table标签

img标签

form标签

input标签

select+option标签

textarea标签

一、a标签

a标签的属性

href

target

download

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

复制代码

路径

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

/a/b/c/index.html。这里的/代表的是协议的根目录，而非计算机的根目录。

a/b/c/index.html。这里表示的就是相对路径。

index.html。直接输入当前文件夹内的文件名。

/index.html。在根目录中寻找文件。

伪协议

javascript：代码；

可以在href中直接输入一段js代码来执行。

#xxx。通过id="xxx"可以直接跳到指定标签。

maito：邮箱。可以发送邮件。

tel：电话。可以拨打电话。

2、target取值

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

内置名字

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

_blank。在新页面打开。

_self。 在当前页面打开(例如嵌套的iframe窗口)。

_top。在顶部窗口打开

_parent。在父级窗口打开。

内置名字

windows的name。

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

iframe的name。

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

二、table标签

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

table 表格

thead=table head

tbody=table body

tfoot=table foot

tr=table row

td=table data

th=table head(写在thead标签内)

table相关样式

table-layout。设置表格的宽。

border-collapse。设置表格每一个单元之间的间距，常设置为border-collapse: collapse；

border-spacing。同上，常设置为border-spacing: 0；

三、img标签

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

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

src。链接一张图片。

alt。在链接的图片加载失败时，显示alt中内容。

height。高度。

width。宽度。

img的事件：onload/omerror。用来监听图片是否加载成功。

同时在加载失败时，可以通过id来挽救加载失败。

xxx.onload = function () {

console.log("successful");

};

xxx.onerror = function () {

console.log("failed");

xxx.src = "/404.png";

};

复制代码

响应式：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

img {

max-width: 100%;

}

复制代码

四、form标签

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

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

action：后端给的链接。

autocomplete： 自动填充。可以实现自动填充用户名。

复制代码method。若写成method="POST"，则使用post。

target。可以决定表单提交到哪个页面，可以是iframe。

form标签的事件：onsubmit。

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

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

五、input标签

input标签的常用元素：

text。文本

color。颜色

password。密码

radio。同一个name下，单选。

checkbox。同一个name下，多选

file。上传文件。加上multiple，可以上传多个文件。

input标签事件：onchange/onfocus/onblur

input标签验证器：HTML5

注意：input中都要都name

六、select+option标签

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

- 请选择 -

星期一

星期二

复制代码

七、textarea标签

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

style="resize: none; width: 50%; height: 300px;"

name=""

id=""

cols="30"

rows="10"

复制代码

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

©饥人谷