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

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

界面效果如下：

Kure讲HTML_列表标签及表单标签的更多相关文章

  1. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  2. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

  3. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  4. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. 028、HTML 标签3表单标签插入组件

    内容:表单标签插入组件(经常使用)############################################################## form表单标签和input组件 < ...

  6. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...

  7. struts2：表单标签

    目录 表单标签1. form标签2. submit标签3. checkbox标签4. checkboxlist标签5. combobox标签6. doubleselect标签7. head标签8. f ...

  8. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  9. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

随机推荐

  1. 【C# MVC】

    http://www.cnblogs.com/powertoolsteam/p/MVC_three.html

  2. Transfer data to SQL Server from SPC-Light with Excel macros

    公司的QA检测软件SPC-Light,需要从其中读取一些信息至SQL Server数据库,储存或是做其它分析. 先是在Excel的VBE的工具中,引入一个组件Microsoft ActiveX Dat ...

  3. SingleClass单例类

    前言 对于一个单例类,无论初始化单例对象多少次,在程序的整个生命周期内,只会创建一个类的实例对象,而且只要程序不被杀死,该实例对象就不会被释放,并且该对象是全局的,能够被整个系统访问到. 在应用这个模 ...

  4. 编译原理-First集和Follow集

    刚学first集和follow集的时候,如果上课老师没有讲明白或者自己没听明白,自己看的时候还真是有点难理解,不过结合着具体的题目可以理解的更快. 先看一下两种集合的求法: First集合的求法:   ...

  5. Xgboost的sklearn接口参数说明

    from xgboost.sklearn import XGBClassifier model=XGBClassifier(base_score=0.5, booster='gbtree', cols ...

  6. [转]10分钟梳理MySQL知识点：揭秘亿级高并发数据库调优与最佳实践法则

    转:https://mp.weixin.qq.com/s/RYIiHAHHStIMftQT6lQSgA 做业务,要懂基本的SQL语句: 做性能优化,要懂索引,懂引擎: 做分库分表,要懂主从,懂读写分离 ...

  7. （原创）D-query SPOJ - DQUERY（莫队）统计不同数的数量

    A - D-query Given a sequence of n numbers a1, a2, ..., an and a number of d-queries. A d-query is a ...

  8. Mole and Abandoned Mine

    Mole and Abandoned Mine n点m条边的无向图,删除第i条边花费c[i],问1到n只有一条路径时所需要的最小花费? \(2\le n\le 15\) . 我又A掉了一道zzs的题啦 ...

  9. js判断字符串是否有下划线

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. win7 宽带连接 711错误

    新装Win7系统,建立宽带连接后提示711错误,网上转一圈,方法不少,对症下药,不是很管用 以下是我总结的方法 win7 旗舰版 administration 用户 设置以下几个服务为手动或自动,并启 ...