江苏龙网

  1. 主页 > 生活百科 > >

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

html

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=https://www.isolves.com/it/cxkf/yy/html5/2019-10-28/"默认值" /> 
密码框：
<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=https://www.isolves.com/it/cxkf/yy/html5/2019-10-28/"我是一个普通按钮" /> 
提交按钮：
<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=https://www.isolves.com/it/cxkf/yy/html5/2019-10-28/"" />

请输入您的密码：


推荐阅读


上一篇：淘宝特价版可以开店铺吗 淘宝特价版开店和淘宝一样吗

下一篇：JS 的5个不良编码习惯，现在就改掉吧