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

左侧的这一部分就可以称为是列表或者叫树，其实我们可以通过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. 获取MS SQL Server用户存储过程最近修改日期

    最近开发一个网站,已经交给用户测试,不过用户反馈有些问题,需要修改.也许修改的存储过程较多.Insus.NET又懒得做些修改记录,在给用户作更新时,能快速找到最近修改过的存储过程,一一作更新即可. 我 ...

  2. Windows Services windows服务如何删除服务

    如何删除服务 一.为何要删除服务: 1.当服务文件丢失时,在服务里还会显示. 2.现在好多都会有服务,你看那个不顺眼就可以把它干掉.前提是不用的软件. 二.使用: 使用sc.exe 这个是window ...

  3. js 操作html dom

    author:冯永贤(Tony Feng,鸡鸣星),文章整合:internet <HTML DOM> 一:js能够改变HTML DOM 里面的什么内容 JavaScript 能够改变页面中 ...

  4. tensorboard的安装及遇到的问题

    1 安装tensorboard 打开anaconda prompt,键入下边的命令: activate tensorflow pip install tensorboard 当执行“activate ...

  5. Ubuntu 如何为 XMind 添加快速启动方式和图标

    目录 Ubuntu 如何为 XMind 添加快速启动方式和图标 Ubuntu 如何为 XMind 添加快速启动方式和图标 按照教程Ubuntu16.04LTS安装XMind8并创建运行图标进行Xmin ...

  6. AOP切点相关

    1.切点定义 切点定义包含两个部分 一个切入点表达式 一个包含名字和任意参数的方法签名 package com.sysker.aspect; import org.aspectj.lang.annot ...

  7. MongoDB初识篇

    前言 一直听说MongonDB,却没有机会接触它,于是决定先从表面上认识它.MongoDB(分布式文档存储数据库)是一种介于关系型数据库和非关系型数据库之间的数据库,而且它是非关系数据库中最像关系型数 ...

  8. P3369 【模板】普通平衡树（权值线段树）

    原来线段树还有这种操作(开成一个桶) 用区间维护在这个区间内元素的个数,离散化一下,居然能达到splay的效果 不仅码量大大减少,而且跑的飞快!!! 6种操作  200多ms 插入 xx 数 删除 x ...

  9. Codeforces Round #533 (Div. 2)题解

    link orz olinr AK Codeforces Round #533 (Div. 2) 中文水平和英文水平都太渣..翻译不准确见谅 T1.给定n<=1000个整数,你需要钦定一个值t, ...

  10. Django 13 admin和auth系统、权限问题

    一.auth系统 auth系统的数据表 #User:User是auth模块中维护用户信息的关系模式(继承了models.Model), 数据库中该表被命名为auth_user. #Group:User ...