列表和表单

列表标签

1.ul无序列表

<ul> </ul>标签中只能嵌套<li> </li>标签

<li>与</li>之间相当于一个容器,可以容纳所有元素

2.ol有序列表

        <!-- 有序列表 -->
	<ol>
		<li>第一</li>
		<li>第二</li>
	</ol>

3.自定义列表:定义列表通常对属于和名词进行解释和描述,定义列表的列表项没有任何项目符号

        <!-- 自定义列表 -->
	<dl>
		<dt>河北</dt>  <!-- dd解释说明dt -->
		<dd>石家庄</dd>
		<dd>秦皇岛</dd>
		<dd>邢台</dd>
	</dl>

 

表单标签

在HTML中,一个完整的表单通常包含:表单空间(表单元素),提示信息,表单域三部分组成

form表单域

1.input输入表单元素 <input/>

<input type
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的美团网页,包含下拉列表表单设计的示例代码: ```html <!DOCTYPE html> <html> <head> <title>美团网页示例</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> form { display: flex; flex-direction: column; align-items: center; margin: 50px; } input, select { margin: 10px; padding: 5px; border-radius: 5px; border: 1px solid #ccc; width: 300px; } input[type="submit"] { background-color: #008CBA; color: #fff; cursor: pointer; } </style> </head> <body> <header> <h1>欢迎来到美团</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">美食</a></li> <li><a href="#">电影</a></li> <li><a href="#">酒店</a></li> </ul> </nav> </header> <main> <h2>订餐服务</h2> <form> <label for="city">城市:</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> <label for="restaurant">餐厅:</label> <select id="restaurant" name="restaurant"> <option value="restaurant1">餐厅1</option> <option value="restaurant2">餐厅2</option> <option value="restaurant3">餐厅3</option> <option value="restaurant4">餐厅4</option> </select> <label for="date">日期:</label> <input type="date" id="date" name="date"> <label for="time">时间:</label> <input type="time" id="time" name="time"> <label for="guests">人数:</label> <input type="number" id="guests" name="guests" min="1" max="10"> <input type="submit" value="提交"> </form> </main> <footer> <p>© 2021 美团</p> </footer> </body> </html> ``` 在这个示例,我们使用了 HTML、CSS 和 JavaScript 技术,实现了一个简单的美团网页,其包含了一个下拉列表表单设计。其,我们使用了 `select` 元素实现下拉列表,使用了 `form` 元素和各种输入元素(如 `input` 和 `select`)来设计表单。您可以根据自己的需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值