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

左侧的这一部分就可以称为是列表或者叫树，其实我们可以通过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. 【转】【Android】ProgressDialog进度条对话框的使用

    Android ProgressDialog进度条对话框的使用: 转自:http://aina-hk55hk.iteye.com/blog/679134/ <?xml version=" ...

  2. 图片展示js特效

    html 代码片段,做一个table表格 <table width="798" height="276" border="0" ali ...

  3. the ssl module in Python is not available错误解决

    在使用pip安装pymongo的过程中报错,提示如下: $ pip3 install pymongo pip is configured with locations that require TLS ...

  4. Apache Spark

    1. 用Apache Spark进行大数据处理——第一部分:入门介绍 2.

  5. 【转】在Windows64位环境下.net访问Oracle解决方案

    源地址:http://www.cnblogs.com/asingna/archive/2012/05/27/2519950.html

  6. React Native 在用户网络故障时自动调取缓存

    App往往都有缓存功能,例如常见的新闻类应用,如果你关闭网络,你上次打开App加载的数据还在,只是不能加载新的数据了. 我的博客bougieblog.cn,欢迎前来尬聊. 集中处理请求 如果你fetc ...

  7. python 编辑器PyCharm

    1.安装与激活 (1)首先去官网下载安装(这个没什么操作) (2)激活,打开编辑器,然后选择这个,进入 http://idea.lanyus.com/  后按照提示的修改文件内容,安装激活就完成了 2 ...

  8. [USACO08OCT]牧场散步Pasture Walking BZOJ1602 LCA

    题目描述 The N cows (2 <= N <= 1,000) conveniently numbered 1..N are grazing among the N pastures ...

  9. jeesite 框架的简单应用

    个人觉得比较完善的一个讲解jeesite的网站 https://www.w3cschool.cn/jeesite/ jeesite官网 http://jeesite.com/ 公司项目都是基于jees ...

  10. hdu6397 Character Encoding 隔板法+容斥原理+线性逆元方程

    题目传送门 题意:给出n,m,k,用m个0到n-1的数字凑出k,问方案数,mod一个值. 题目思路: 首先如果去掉数字范围的限制,那么就是隔板法,先复习一下隔板法. ①k个相同的小球放入m个不同的盒子 ...