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;"来设置文本框大小。
©饥人谷