阅读 90

HTML常用标签

a标签

常用属性

1、href

作用:

  • 跳转外部页面
  • 跳转内部锚点及某个元素
  • 跳转邮箱或电话

取值:

  • 网址(如:baidu.com)
  • 文件路径(如:/a/b/c/index.html)
  • 伪协议(如:javascript:代码;、mailto:邮箱、tel:手机号)
  • 元素id(如:href:#元素名)

2、target

作用:

指定在何处显示链接的资源

取值:

  • _self----在当前页面加载
  • _blank----新窗口打开
  • _parent----加载到当前框架的浏览上下文的父浏览上下文
  • _blank----加载到顶层浏览上下文

3、download(待补充)

一般用于下载文件的流

4、rel=noopener(待补充)

iframe标签

在页面中嵌套窗口,现在用的比较少了,如下图效果

image.png

table标签

相关标签

  • table
  • thead
  • tbody
  • tfoot
  • tr
  • td
  • th
<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
        </tr>
    </tfoot>
</table>
复制代码

相关样式

  • table-layout----定义了用于布局表格单元格,行和列的算法
  • border-collapse----决定表格的边框是分开的还是合并的
  • border-spacing----指定相邻单元格边框之间的距离

img标签

作用

发送get请求,展示一张图片

属性:

  • alt----定义了图像的备用文本描述
  • height----设置图片的高
  • width----设置图片的宽
  • src----图片的地址

事件

  • onload----图片请求成功事件
  • onerror----图片请求失败事件

响应式

max-width:100%

可替换元素

form标签

作用

发送get或post请求,然后刷新页面

属性:

  • action----处理表单提交的 URL
  • autocomplete----为表单提供一些默认值
  • method----http的请求方式
  • target----表示在提交表单之后,在哪里显示响应信息,与a标签target属性类似

事件

onsubmit----表单提交事件

input标签

作用

让用户输入一些信息

属性

input设置类型----type

  • button----按钮
  • checkbox----多选
  • email----email
  • file----选择文件
  • hidden----隐藏式input
  • number----数字类型输入框
  • password----密码框
  • radio----单选
  • search----搜索框
  • submit----提交按钮
  • tel----电话输入框
  • text----文本框

其他属性

  • name----input的名字
  • autofocus
  • checked
  • disabled
  • maxlength
  • pattern
  • value----输入框输入的值
  • placeholder----输入框没有值的时候显示的灰色文字

事件

  • onchange----当输入的值改变时触发
  • onfocus----当输入框聚焦时触发
  • onblue----当输入框失焦时触发

#其他输入标签

  • select + option----下拉菜单
  • textarea----文本域
  • label

资料来源:饥人谷、MDN

文章分类
前端
文章标签