您的位置：首页 > Web前端 > HTML

Kure讲HTML_列表标签及表单标签

2017-12-27 14:13 239 查看

首先我上个图来告诉大家什么是列表

左侧的这一部分就可以称为是列表或者叫树，其实我们可以通过div+css实现列表，可是考虑语义化的问题，我们还是看看html提供好的列表标签，html提供了两种列表，一种是无序列表，一种是有序列表。可是实际开发中我们只是在用无序列表，因为它好扩展，我可以通过font awesome添加我们想要的图片作为序号标识，这样岂不是更好。那么，看一个简单的无序列表的例子：

<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
</head>
<body>
<!--ul标签向界面上添加一个数据列表-->
<ul>
<!--li标签用来定义列表项-->
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>

界面上显示效果如下，如果要去掉列表项前面的黑色小点，可以通过css实现。

表单标签通常分为好几种类型，一般有文本输入框，单选框，复选框，下拉列表。

来看下面简单的例子：

<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
</head>
<body>
<!--form标签用来定义一个表单组-->
<form>
<!--可以通过指定input元素的type属性来指定输入框是单选框，文本输入框等-->
文本输入框：<input type="text" name="textinput">
<br>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<!--select标签用来指定一个下拉列表-->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>

界面效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航