<返回更多

如何正确的使用HTML的列表和表单

2019-10-28    
加入收藏

1. 列表

列表总共有三种:无序列表、有序列表和定义列表。老师来给大家总结一下。

无序列表:无序列表中列表项和列表项之间不分先后顺序。

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 <li>列表项4</li>
</ul>

 

浏览器默认添加“·”作为先导符号。li不能单独存在,必须包裹在ul里面,反过来说,ul里面只能有li。而li是一个容器级标签,里面可以是任何标签。

有序列表:

<ol>
 <li>列表项</li>
 <li>列表项</li>
 <li>列表项</li>
</ol>

 

ol表示ordered list ,意思是有序列表。

定义列表:

<dl>
 <dt>定义标题</dt>
 <dd>定义描述</dd>
 <dt>定义标题</dt>
 <dd>定义描述</dd>
 <dt>定义标题</dt>
 <dd>定义描述</dd>
</dl>

 

dl表示definition list 定义列表 。

dt表示definition title 定义标题。

dd表示definition description 定义表述词儿。

dt、dd只能在dl里面;dl里面只能有dt、dd。

2. 表单

表单就是收集用户信息的,就是让用户填写的、选择的。

<div>
 <h3>欢迎注册本网站</h3>
 <form>
 所有的表单内容,都要写在form标签里面
 </form>
</div>

 

div的语义是division“分割”,div标签是最最重要的布局标签,div中的所有元素是一个小区域。

form是英语表单的意思,form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容。

文本框:

<input type="text" value="默认值" />

 

密码框:

<input type="password"/>

 

单选按钮:

<input type="radio" name="命名" checked="checked"/>男
<input type="radio" name="命名"/>女

 

radio是“收音机”的意思,input的type的值如果是radio就是单选按钮。需要注意的是必须要有相同的name属性,单选按钮才能互斥。

复选框:

<input type="checkbox" name="aihao"/> 睡觉
<input type="checkbox" name="aihao"/> 吃饭

 

下拉列表:

<select>
 <option>吃饭</option>
 <option>睡觉</option>
 <option>打豆豆</option>
</select>

 

文本域:

<textarea cols="20" rows="10"></textarea>

 

普通按钮:

<input type="button" value="我是一个普通按钮" />

 

提交按钮:

<input type="submit" />

 

3. 综合演练

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单实战演练</title>
</head>
<body>
<div>
<h2>表单</h2>
<form>
<p>请选择您的性别:
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" checked="checked" /> <label for="nv">女</label>
</p>
<p>
请选择你的爱好:
<input type="checkbox" name="aihao"/> 睡觉
<input type="checkbox" name="aihao"/> 吃饭
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 乒乓球
<input type="checkbox" name="aihao"/> 打豆豆
</p>
<p>请选择您的家乡:
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
</p>
<p>
<input type="submit" />
<input type="reset" />
</p>
<p>请输入您的账户名:
<input type="text" value="" />
</p>
<p>请输入您的密码:
<input type="password" />
</p>
<p>
<input type="button" value="登录" />
<input type="reset" />
</p>
<p>请输入您的建议和要求:</p>
<textarea cols="30" rows="10"></textarea>
</form>
</div>
</body>
</html>

 

效果图:

 

如何正确的使用HTML的列表和表单

 

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>