HTML-列表标签和表单标签

列表标签

在这里插入图片描述

应用场景

在这里插入图片描述
想要整齐显示的内容

无序列表-ul

在这里插入图片描述
无序
注意
ul里面只能放li,li里面随意,默认前面有个小圆圈标记

代码

<ul>
    <li>火龙果</li>
    <li>苹果</li>
    <li>葡萄</li>
    <li>草莓</li>
    <li>香蕉</li>
</ul>

在这里插入图片描述

有序列表-ol

在这里插入图片描述
所谓的有序就是把原来的源泉标记
换成自增长的数字.(按照你加入的顺序)(好像一般都是用别的程序完成数据筛选排序,然后再制作就有序了,html不能排序)

<ol><li>张三:100</li><li>李四:80</li><li>王五:90</li></ol>

在这里插入图片描述

自定义列表-dl

应用场景

在这里插入图片描述

介绍

在这里插入图片描述
dl(整体框架)包含dt(每列的标题),dd是每一列的内容对应的就是最前面的dt的列

<dl><dt>帮助中心</dt> <dd>账户管理</dd> <dd>用户指南</dd> <dt>服务支持</dt> <dd>售后服务</dd> <dd>自助服务</dd></dl>

在这里插入图片描述
以后添加css可以变成其他网站那样

表单标签

在这里插入图片描述
应用场景就是我们的
用户登陆界面
在这里插入图片描述
注册界面
和搜索界面其实都是
需要这个表单标签的

input

属性1:type

在这里插入图片描述


<body>
<h1>表单标签</h1>
<h2>input</h2>

<p>首先是input标签,单标签 <strong>输入文本框,根据type属性有不同的效果</strong> 而且你在input标签前可以直接写一些字,不在标签里,
    会显示在文本框前</p>
<p>属性1:type属性取值:text 文本框用于输入单行文本,password 密码框用于输入密码(输入显示是...的效果)</p>
文本框:<input type="text" > <br> 密码框:<input type="password">
<p>radio 单选框用于多选一 checkbox 多选框 用于多选多</p>
多选一:<input type="radio"><br> 多选多:<input type="checkbox">
<p>file 文件选择用于之后上传文件 submit 提交按钮,用于提交</p>
选择文件:<input type="file"><br> 提交按钮:<input type="submit">
<p>reset 重置按钮用于重置 button 普通按钮,默认无功能,配合js使用一般</p>
重置按钮:<input type="reset"><br> 普通按钮配合js使用<input type="button">
<p>属性2:placeholder 用于 input显示提示信息</p>
<input type="text" placeholder="输入你想输入的话">

</body>

在这里插入图片描述

属性2:placeholder

显示提示信息
类似于这种的
在这里插入图片描述

<p>属性2:placeholder 用于 input显示提示信息</p>
<input type="text" placeholder="输入你想输入的话">

在这里插入图片描述

单选-type=radio时

关于单选设置选项名

<p>单选</p>
<input type="radio"><input type="radio">

在这里插入图片描述

但是可以看到其实默认是没有实现单选功能的
在这里插入图片描述

你把想要几个中选一个的一组用一个name表示

checked属性是你默认选中的选项-这个checked同样可以用于多选框

<p>单选</p>
<input type="radio" name="sex" checked><input type="radio" name="sex">

这样打开网站默认就是男
只能男女二选一
在这里插入图片描述

文件-type=file

这个正常只能一个一个上传文件(ctrl选多个不管用)
想要同时可以选中多个
必须加
muplite属性
在这里插入图片描述
这样就ok了
在这里插入图片描述

按钮-type=submit/reset

在这里插入图片描述
还是和我们单选多选
要绑定
你光写一个提交标签和重置标签,人家不知道你提交什么,还有重置哪几个标签的内容
然后就涉及到我们表单域标签了
下面会讲
下面说一下普通按钮没子
可以用value属性解决,里面填入你想显示的字即可
也可以通过这个属性来改变
submit原来的提交
和reset原来的重置

在这里插入图片描述
在这里插入图片描述

表单域

form标签
是我们的表单域标签
我们的提交
和重置标签就是默认
提交、重置所在表单域内的数据

<form action="">
账号:<input type="text"> <br>
密码:<input type="text">
<input type="submit">
<input type="reset">
</form>

action是我们需要提交信息到的地方(url)

普通按钮-button标签(无input)

双标签button
在这里插入图片描述

    <button type="reset">重置按钮</button>
    <button type="submit">提交按钮</button>
    <button type="button">普通按钮</button>

这种需要在button标签中加你想要显示的文字
要不然不显示任何文字

下拉菜单标签-select

应用场景
在这里插入图片描述
``在这里插入图片描述

<select>
    <option>北京</option>
    <option>广州</option>
    <option>上海</option>
    <option selected>深圳</option>
</select>

默认选中深圳的下拉菜单
在这里插入图片描述

文本域标签-textarea

在这里插入图片描述

<textarea cols="60" rows="30">上学真的影响学习
text不仅可以设计高(rows)和宽(cols),还有拖拽功能</textarea>

但其实我们都是用css添加宽高和禁用功能
在这里插入图片描述

label标签

这种点这个字也能单选的功能就是通过label标签实现的
在这里插入图片描述
在这里插入图片描述
两种使用方法
第一种复杂一点
第二种相对简单
第一种
确认label和单选选项相对应

<p>label标签 使用方法1</p>
性别:
<input type="radio" name="sex" id=""><label for=""></label>

第二种

<label><input type="radio" name="sex"></label>

用label标签括起来就ok
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小袁拒绝摆烂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值