整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML基础知识之列表和表格的使用

、HTML与XHTML的区别

(1)在XHTML 中标签名称必须小写,在HTML 中标签名称既可以小写也可以大写;

(2)在XHTML 中标签必须封闭,在HTML中标签可以不成对出现;

(3)在XHTML 中标签必须严格嵌套,HTML对标签嵌套没有严格规定;

(4)在XHTML 中属性名称必须小写,在HTML 中也一样;

(5)在XHTML 中标签必须用双引号引起来,HTML中可以不用;

二、特殊符号

  • 表示空格;
  • "表示双引号;
  • &表示&符号;
  • >表示大于号>;
  • <表示小于号<;
  • &copy©表示版权符号©;

三、列表的使用

(1)无序列表

  • 无序列表是一个项目列表,使用项目符号标记无序列表的项目,无序列表也就是没有顺序的列表;
  • 无序列表的type属性取值有三种,分别是circle(圆圈)、disc(实心圆点)、square(方块);
# 打印实心圆点的无序列表

<body>
 <ul type="disc">
 <li>第一</li>
 <li>第二</li>
 <li>第三</li>
 </ul>
</body>

(2)有序列表

  • 有序列表也是由一个个列表项组成,列表想既可以使用数字标记,也可以使用字母标记;
  • 有序列表的type属性取值有5中,分别是1(数字)、i(小写罗马字母)、I(大写罗马字母)、a(小写字母)、A(大写字母);
# 打印数字排序的有序列表

<body>
 <ol type="1">
 <li>我最爱椰奶</li>
 <li>第二爱可乐</li>
 <li>第三爱橙汁</li>
 </ol>
</body>

(3)定义列表

  • 定义列表是当无序列表和有序列表都不适合时,通过自定义列表来完成自定义展示,所以定义列表不仅仅是一个项目列表,而是项目和注释的组合;
<body>
 <dl>
 <dt>春晓</dt>
 <dd>春眠不觉晓,处处闻啼鸟</dd>
 <dd>夜来风雨声,花落知多少</dd>
 </dl>
</body>

四、表格的使用

(1)表格的基本结构

  • 单元格:表格的最小单位,一个或多个单元格纵横排列组成了表格;
  • 行:一个或多个单元格横向堆叠形成了行;
  • 列:一个或多个单元格纵向堆叠形成了列;
<table>
 <tr>
 <td>第一行第一列</td> 
 <td>第一行第二列</td> 
 <td>第一行第三列</td> 
 </tr>
 <tr>
 <td>第二行第一列</td> 
 <td>第二行第二列</td> 
 <td>第二行第三列</td> 
 </tr>
</table>

(2)表格的对齐方式

  • align属性:left表示水平居左、center表示水平居中、right表示水平居右;
  • valign属性:top表示垂直置顶、middle表示垂直居中、bottom表示垂直靠底;

(3)表格的其他属性

  • th:一种特殊的单元格,加粗并居中;
  • caption:表格标题;
  • cellspacing:规定单元格之间的空间;
  • cellpadding:规定单元边沿与其内容之间的空白;
  • colspan:表格跨列;
  • rowspan:表格跨行;

栏纵向个人博客模板Html(提供多页面下载)

模板提供多个页面,博客页面布局格式简单,没有复杂的背景、动态幻灯片展示、栏目、标签、搜索应有尽有,简洁又不失大气,模板来自整理,可适应手机端页面

* 下载本站模板以及作品仅供学习研究使用 *

编今天的分享主题是显示属性、列表属性、定位属性;

首先,我们先来了解一下关于显示属性

显示属性,它表示了一个框或者盒的表现,具有2层含义,分别是显示方式显示效果

1.显示方式,即display属性,具体是指一个框的表示形式,它自己固定的取值候选:

a)none:表示让这个元素不显示,隐藏起来,同时这个元素是不占据这个文档的空间的。

b)block:表示让这个元素以块级元素的形式显示,在它后面的元素是会另外起一行,这个时候的元素是可以自己定义它的高度和宽度的。如果你想设置一个行内元素的高和宽,或者想让一个隐藏了的元素显示的话,这个方式就是非常好的。

c)inline:表示让这个元素以行内元素的形式显示,这个时候后面的元素会紧跟着前面的元素,并列显示,同事也不能设置高度和宽度。

d)inline-block:表示让这个元素以行内块的形式显示,其实就是一个行内元素,不过这个行内元素可以设置高度和宽度了。如果你不想让这个元素的后面元素另外起一行又想改变这个元素的高度和宽度,那这个方法是极好的。

以上4个候选取值,就是display的取值详解,语法规范就是display:none/block/inline/inline-block,具体的按照实实际开发需求。练习的时候,可以每个都试一试,看看它们分别是什么效果。

2.显示效果,就是元素显示了之后,再设置它的一些效果,先简单的介绍4个效果:

a)visibility属性,即表示这个元素的显示与否,取值有visible(显示的,也是默认值)、hidden(不显示),这个属性看似和上诉的显示方式挺像的,它们有一个非常明显的区别就是,display为none时,它是不占据空间的;而visibility为hidden时,它虽然是看不见的,但是它会占据页面空间,可能会影响文档的排版问题,这需要特别的注意。

b)opacity属性,即表示这个元素的透明度,取值范围就是0至1,其中0表示完全透明,1表示完全不透明,记住取值越大,越不透明。

c)vertical-align属性,即表示这个元素的垂直对齐,取值可以有:top/middle/bottom baseline;基线对齐

d)cursor属性即光标,表示当你的鼠标在经过这个元素时候,鼠标显示的样式;取值有:pointer(手的形状)、default(默认)、crosshair(显示为“+”)、text(显示为“I”)、wait(显示为 等待)、help(显示为“?”)

其次,我们了解一下列表属性

列表,就是讲这部分的内容按照一定的顺序排列,可以是横向的也可以是纵向的,她有列表样式属性、列表项图像属性、列表项位置、列表综合属性。

1.列表样式即list-style-type,分为有序列表、无序列表,有序的列表是按照数值排序、罗马数字排序,无序列表就是列表项为实心圆、空心圆、实心矩形。

无序列表的取值为:none(无标记)、disc(实心圆)、circle(空心圆)、square(实心矩形)

有序列表的取值为:none(无标记)、decimal(数字)、lower-roman(小写的罗马数字)、upper-roman(大写的罗马数字)

2.列表项图像即list-style-image,表示列表项图像不想取值为数字或者实心圆等时,可以自定义一个图像;语法规范:list-style-image:url(文件路径)

3.列表项位置即list-style-position,就是li前面标识的位置,取值有:outside(标识在li外)、inside(标识在li内)

4.列表的总和属性即list-style,语法规范:list-style:type url position 实例list-style:circle url(xxxx.jpg) inside

以上就是列表的一些样式了,可以自己打打代码,看看具体的效果

最后,我们了解一下定位属性

定位 position,就是元素在文档的位置,当需要对元素的位置进行修改时,就需要用到定位啦!

定位分为:普通流定位、浮动定位、相对定位、绝对定位、固定定位

定位的属性就是:position,取值有:static(静态定位即普通流定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)

display属性在使用的时候,需要配合top\bottom\left\right属性使用,表示偏移量。

z-index属性,表示当多个元素重叠的时候,谁在前面谁在后面,值越大越靠近用户

接下来详解各个定位:

1.相对定位:就是这个元素相对于自己本身的位置偏移指定的量数;具体的实现方式(二步曲)就是先定义定位方式,再定义指定偏移量:即display:relative;left\top\right:xxpx;常常用于弹出菜单的实现

2.绝对定位:就是这个元素相对了已经定义为相对定位的最近的父级;实现的方式同上,display为absolute,常用的场景非常多。

3.固定定位:就是将元素固定在网页的某个位置处,不跟随滚动条发生滚动;实现方式同上,display为fixed,常用于网页固定的小广告,多数情况下是相对与body实现固定定位的。