今天准备为大家准备了表格和列表。

一、文章有各种数据的表格这个网页也不例外。

（1）、标签意思　

<table>----------------------表格开始
　　<caption></caption>-------表格标题
　　　　<tr>--------------------行开始标签 
　　　　　　<th></th>-------------表头 
　　　　　　<tb></tb>-------------单元格 
　　　　</tr>-------------------行结束标签 
</table>---------------------表格结束

（2）、表格样式

　　cellpadding 属性设置单元格边框和单元格内容的距离。
　　cellspacing 属性设置单元格之间的距离。
　　border 属性表示边框  
      width 设置表格的宽。

      height 设置表格的高。 [注]：高这个属性最好不小给 table 中写，让它自动撑开就好。但这个可以给 tr 给每行需要的高度

代码

<html>

     <head>

	<title>表格</title>

     </head>

     <body>

	<table border="1px" width="500px" cellpadding="10px" cellspacing="10px">

　　		<caption>表格标题</caption>

　　　　		<tr height="50px">

　　　　　　		<th>表头</th>

　　　　　　		<th>表头</th>

　　　　		</tr>

		<tr>

　　　　　　		<td>单元格</td>

　　　　　　		<td>单元格</td>

　　　　		</tr>

	</table>

     </body>

</html>

效果

二、无序列表

<ul> 无序列表属性：
　　<li></li> 　　 （type属性） <ul type="dise">（是无序列表前边小黑点的属性）
</ul> 　　　　 　　 disc(实心圆) circle（空心圆） square（方块）

代码

<html>

     <head>

	<title>表格</title>

     </head>

     <body>

	 <ul type="circle">

 		<li>无序列表</li>

 	 </ul>           

     </body>

</html>

效果　

　

三、有序列表

有序列表：
<ol> 　　　　　　 有序列表属性：
　　<li></li>     （type属性） <ol type="1">
</ol> 　　　　　　 1(按数字1.2.3...往下排) A（按大写字母A.B.C...往下排） a（按小写字母a。b。c....往下排）
　　　　　　　　　　Ⅰ(按大写罗马数字Ⅰ、Ⅱ、Ⅲ.....往下排)
　　　　　　　　　　（start属性）<ol start="2">(表示这个有序列表不是默认的从1开始是从2开始的)

代码

<html>

     <head>

	<title>有序列表</title>

     </head>

     <body>

	  <ol type="A">

   		<li>有序列表</li>

   		<li>有序列表</li>

   		<li>有序列表</li>

 	  </ol>                     

     </body>

</html>

效果 按照A,B,C... 往下排 type 只能写那三种

html基础-表格-列表（4）的更多相关文章

  1. 【共享单车】—— React后台管理系统开发手记：AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  2. 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  3. 1.进入debug模式（基础知识列表）

    1.进入debug模式(基础知识列表)1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ========================= ...

  4. Python基础数据类型-列表（list）和元组（tuple）和集合（set）

    Python基础数据类型-列表(list)和元组(tuple)和集合(set) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客使用的是Python3.6版本,以及以后分享的 ...

  5. 【转】一张图解析FastAdmin中的表格列表的功能

     一张图解析FastAdmin中的表格列表的功能 功能描述请根据图片上的数字索引查看对应功能说明. 1.时间筛选器如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如 {field: ...

  6. python基础之列表list元组tuple

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7041763.html python基础之列表list元组tuple 列表li ...

  7. python基础数据类型--列表（list）

    python基础数据类型--列表(list) 列表是我们在后面经常用到的数据类型之一,通过列表可以对数据类型进行增.删.改.查等操作 一列表的增.删.改.查 1增: 1.1增加到最后   append ...

  8. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  9. 【学习笔记】HTML基础：列表、表格与媒体元素

    一.列表是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够快速的获取相应的信息. 1.无需列表 <ul> <li>第一项</li ...

随机推荐

  1. Jmeter服务器监控 serveragent如何使用

    安装jmeter插件Plugins Managerjmeter-plugins.org推出了全新的Plugins Manager,对于其提供的插件进行了集中的管理,我们只需要安装这个管理插件,即可以在 ...

  2. windows系统正常但linux系统下找不到文件的问题

    问题描述:最近一个项目开发环境是windows系统,正式环境是linux系统.验证码图片在开发环境正常,但是在正式环境下一直报404. 问题原因:File dir = new File(realPat ...

  3. eclipse中导入SVN项目步骤

    1.eclipse中安装SVN插件 在线安装步骤: (1)点击 Help --> Install New Software...(2)在弹出的窗口中点击add按钮,输入Name(任意)和Loca ...

  4. java8新特性-入门摘要

    本文是针对java8做的入门摘要笔录,详细分析可参见如下原文. 原文地址 http://www.javacodegeeks.com/2013/02/java-8-from-permgen-to-met ...

  5. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

  6. Redis笔记（三）：Redis常用命令

    连接测试 连接本地服务器 语法 $ redis-cli 实例 启动 redis 客户端,打开终端并输入命令 redis-cli.该命令会连接本地的 redis 服务. $redis-cli redis ...

  7. libnetwork插件化网络功能

    Docker把网络跟存储这两部分的功能实现都以插件化形式剥离出来,允许用户通过指令来选择不同的后端实现.这也是Docker希望构建围绕着容器的强大生态系统的一些积极的尝试.剥离出来的独立容器网络项目叫 ...

  8. spring中获取applicationContext

    常用的5种获取spring 中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象代码:ApplicationContext ac = new FileSystemXm ...

  9. Velocity学习笔记

    一.为什么要使用velocity? 很多人下载了EasyJWeb的开源应用示例,但是对动态页面模板文件中的标签使用不是很熟悉,这里简单介绍一下.EasyJWeb特定把视图限定为Velocity,因为我 ...

  10. ABP实战--项目结构

    学习完毕With ASP.NET Core & Entity Framework Core Part-1及Part-2后,只实现了基本的功能,使用该工程继续学习ABP的更多功能. 更改项目结构 ...