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

左侧的这一部分就可以称为是列表或者叫树，其实我们可以通过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. 预编译对象解决SQL注入问题

  2. springcloud +spring security多种验证方式之第三方token生成自己的token通过校验和自己的表单验证大体流程

    步骤: 1.继承 WebSecurityConfigurerAdapter.class,其中使用两个过滤器,一个spring scurity自带的UsernamePasswordAuthenticat ...

  3. Date的转换输出

    public static void main(String[] args) { // TODO Auto-generated method stub //20131111怎么格式化成2013年11月 ...

  4. Linux下管理员强行踢出用户的命令使用方法

    Linux强制踢出用户命令: 一.输入w命令查看已登录用户信息 [root@KW_S01_192.168.1.106_A ~]# w 19:22:31 up  2:11,  3 users,  loa ...

  5. docker初探

    1.什么是docker: 可以理解为一个可移植的集装箱容器,开发者可以打包他们的应用以及依赖包到一个可移植的容器中. 2.docker安装及使用(ubuntu16.04) (1)首先通过apt-get ...

  6. 改变HTML文件上传控件样式

    思路: 1.重写一个新的样式 2.将默认样式设置display:none;,即设为不可见 3.在js里调用:当点击新样式的时候,调用这个input的点击事件 html: <div class=& ...

  7. 算法训练 最大的算式（DP）

    问题描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就是N-1个了,所以恰好每两个相邻数字之间都有一个符号 ...

  8. async/await 处理异步

    async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化. 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因 ...

  9. php屏蔽错误消息

    定义和用法: error_reporting() 设置 PHP 的报错级别并返回当前级别. 函数语法: error_reporting(report_level) 如果参数 level 未指定,当前报 ...

  10. MySQL数据查询结果导出生成文件

    select url from news where url like "%美女%"  into outfile  "/导出的文件路径" : 在这里有个坑,对于 ...