html 下拉框中添加多选框_HTML常用标签

本文详细介绍了HTML中a标签的使用,包括href属性的各种用途,如链接到网页、ID位置、邮件和电话。还讲解了table标签的结构,如thead、tbody、tfoot以及边框设置。另外,讨论了form标签的get和post方法,input类型的多种用途,以及img标签的src和alt属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.a 标签的用法

a标签为链接标签,可以跳转到某个网页或者自己定义的hmtl中

主要的属性:

(一)href

全称:hyper refrenece 即超级链接。

  • 可填写链接 用于跳转网页
  • javascript:: 什么都不会发生
  • 可填写id 用于跳转至当前id的位置
  • xxx.html 用于跳转至html
  • mailto:邮箱 用于跳转至邮箱
  • tel:电话 用于移动端打开拨号页面

f04f374744c668fcf46fab7378cda567.png
额外知识:文件地址的写法
当前目录:直接写文件名,或者./表示当前目录
下级目录:/
上级目录:../ 表示上一级目录 ../../表示上两级目录

(二)targrt :指定开打的窗口

  • _blank 在新的窗口打开
  • _self 默认
  • _top 在最顶层的页面打开
  • _parent 在当前页面的上一级打开
  • xxx 自定义一个页面打开 可以通过F12中的conslog中输入window.name查看当前页面的名字是否是自己自定义的

1.table 标签的用法

表格

  • thead 表格的头部
  • tbody 表格的身体
  • tfoot 表格的尾部
  • tr 行
  • td 当前行中的列
  • th 当前行中的头部分

5031989a6ac2bf66df182a0fe5576634.png
  • border-spacing 边框之间的距离
  • border-collapse: collapse collapse 代表合并边框
  • table-layout

auto:根据内容定制宽度 ,假设当前设定宽为200,里面文字字数为三个 此时宽度会比两个字数的宽

d67246b4357934d43a647cc4536e4821.png

54f48a91291759f92cd268c7486cbd64.png

fixed:尽量让每个宽度相等

02e839f7039583a407c1f0228cc874da.png

5e848442f8c35a78000ca95943df8684.png

3.img标签的用法

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

  • src 图片地址
  • alt 图片描述

9c2abc0cb827f220b3aecabab9ffeab3.png

4.form标签的用法

发起get请求 or post请求 ,然后刷新页面

  • action 请求的位置 请求到哪里
  • method 请求的方法 GET or POST (大写 注意!!!)
  • target 同之前 打开的页面 _blank 新窗口
  • autocomplete 是否自动填充(如图) on or off
  • name 很重要 一定要添加name

cedcc1711b8a2153acd05043953e7ed3.png

8cdcc71071afbcf4d9d214d4ea95daba.png
额外:
submit和button的区别:
button可以在里面添加其他标签
submit不行 里面的value属性添加不了其他标签

05f13fe5cbd2f9eb8a4fbc5fec3bbc27.png

5.input标签

主要内容 type中的属性

  • text 文本框
  • color 颜色选择框
  • password 密码框
  • radio 复选框 如何变单选 ? 给每个radio添加相同的name
  • checkBox 复选框 如何知道这是一组 添加相同的name
  • file 文件选择 multiple 多个文件选择
  • hidden 隐藏
  • textarea 文本区域
  • select 选择下拉框

text

4f76c404cbffc4cdbdf1163426af0f55.png

color

eb709303efc0de9f09646d4853320e55.png

b123dd3e435a0b8cb564d182cda6f8c2.png

password

9f62558c3d2b98104426a13c0f9b5a5d.png

d024fe98ea3d7409faeb8a51e415394e.png

radio

864c6f615c5aaad0621af4138b14474d.png

e563454596435bd22630dcbb3ba0fee8.png

checkBox

9e7d21410c4b7ee66e25b242f5a53c8d.png

9f3d3905ed58ec52de141c99a7b21ef2.png

file

eed2240fafc4c03c3d655211f1a1e05f.png

5876d9f6b95d142920cb13a3848a305a.png

hidden

d5b970a1daebe7d4da336f06ea5cbf56.png

textarea

83439aba19fec05b4fda2e53711527a1.png

5629bf91c74c313e391c6192438425ad.png

select

f9f203777015f35264c13b3012c20f5a.png

91a8aa8bd5e692fe9c76b98473c50a48.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值