android img标签属性_HTML重点标签

本文详细介绍了HTML中的form标签,包括其作用、属性及自动填充功能。接着讲解了label和input标签的配合使用,以及input标签的不同类型,如text、password、radio、checkbox、file等。还探讨了textarea和select下拉菜单的使用。最后,文章深入讨论了img标签,包括其作用、属性、事件以及如何实现响应式图片。
摘要由CSDN通过智能技术生成

form标签

作用

发出get或者post请求,刷新页面

属性

action:往哪里发请求,接受请求的url

method:控制用get还是post请求

autocomplete:自动填充,可以为on或者off

  • off:表示在每个输入域中,用户必须显式的输入一个值,或者document以它自己的方式提供自动补全功能;但是浏览器不会帮忙自动补全
  • on:浏览器能根据永辉在前在标签中输入的值自动补全,会给出填写这个表单的提示

比如:在百度搜索中输入“有道翻译”如果之前有输入过,当输入“有道”时,就会自动显示“有道翻译”,这就是autocomplete:on

target:表示在当前页面(_self)提交还是在新的页面(_blank)提交

label 标签和input标签

label标签属性for和input标签的id属性必须保持一致

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

d8c948ce0ee3fa3d1c85c0b76ef18930.png

input 的submit和button的submit的区别

input标签里不能再有其他的标签

button标签里还可以有其他的标签

f933602e7c8998f5acaed083982e6150.png

ac013f4a712764d4ffc77b7ffbfd1d9f.png

input标签

作用:

实现可让用户操作,输入或者选择

属性

类型type:

  • text输入文本
  • password 输入密码
  • radio 单选
    • 如何实现多个选项中的单选
    • 保证每个input的name一致
    • 如果有checked,表示默认选择某个选项
    • 比如
 兴趣爱好:
   <input type="radio" name="hobby" >读书</input>
  <input type="radio" name="hobby">听音乐</input>
    <input type="radio" name="hobby">唱歌</input>

1dd7367c28c8335dafe2bae79324865a.png
  • checkbox 多选
    • 同样的,如果想在多个选项中实现多选,要保证name一致
    • 如果有checked,则默认选择某个选项

6d3ff52be5b6564404d32682b72d9a37.png

e61c59c4d85f654f43351f6a106b5041.png
  • file 上传文件
    • 上传一个文件 <input type="file" />
    • 上传多个文件 <input type="file" multiple>
  • textarea文本框
    • 如何设置文本框不能自由拖动,固定大小
    • <textarea style="resize:none;width:50%;height:50%;"></textarea>
  • select 下拉菜单
    • 如果某个选项中有“selected”,则默认选择该选项

8f73d5483d0d3db4a83795e9a1b46ea7.png

d82b0ec444b3d29cc00e612fef055819.png

d1e8ac79689e0ab001eb636f79935aea.png

注意事项

  1. 一般不监听input的click事件
  2. form里的input要有name
  3. form里一定要有一个type=submit的input或者button来触发submit事件,提交表单

img标签

作用

发出get请求,展示图片

属性

  1. src:图片的地址
  2. alt:图片不能显示的时候,用alt的内容代替
  3. width/height:为了不让图片的宽高比改变,只设置宽或者高,让图片自适应

事件

onload事件:加载成功

onerror事件:加载失败

响应式

img{
max-widht:100%
}

实现图片自适应不同屏幕的大小

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值