列表标签
应用场景
想要整齐显示的内容
无序列表-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