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

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

左侧的这一部分就可以称为是列表或者叫树，其实我们可以通过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>

界面效果如下：

 

posted @ 2017-12-27 14:13  smallkure  阅读(140)  评论(0)  编辑  收藏  举报