HTML 列表

TML的常用列表可以分为三种：无序列表，有序列表以及定义列表。

无序列表

定义：<ul>...</ul> ，表示项目之间没有顺序规定的列表。

内层标签是 <li>...</li>，它有一个type属性，常用的值有三种：

disc，实心圆点
circle，空心圆点（默认值）
square，实心方块

小实例：

<ul>
    <li>默认值</li><br>
    <li type="disc">实心圆点</li><br>
    <li type="circle">空心圆点</li><br>
    <li type="square">实心方块</li><br>
</ul>

有序列表

定义：<ol>...</ol>，相对于无序列表而言，具有一定的顺序的列表，一般用数字或者是字母放在表示项目的最前端表示先后顺序。

内层标签是 <li>...</li>，同样它的type属性常用值有四种：

type="A"，按大写字母排序
type="a"，按小写字母排序
type="I"，按罗马数字排序
type="1"，按数字排序

小实例：

<ol>
    <li>默认值</li><br>
    <li type="A">大写字母</li><br>
    <li type="a">小写字母</li><br>
    <li type="I">罗马数字</li><br>
    <li type="1">纯数字</li><br><br><br>
</ol>

定义列表

定义：<dl>...</dl>，不仅仅是一列项目，还是项目及其注释的组合。

由 <dl> 标签开始，内层标签 <dt>...</dt> 包裹对象文本， <dd>...</dd> 包裹着解释文本。（内层只能是 dt 和 dd 标签，且dt 必须是在 dd 前面）

小实例：

<dl>
    <dt>HTML</dt>
    <dd>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</dd><br>
    <dt>CSS</dt>
    <dd>层叠样式表(英文全称：Cascading Style
    Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</dd><br>
    <dt>JavaScript</dt>
    <dd>JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</dd><br>
</dl>

动手小练习

定义一个无序列表
定义一个有序列表
定义一个定义列表
分别在无序列表和有序列表的基础上定义不同类型的属性值，并通过浏览器显示出来

大家分享一个html写的俄罗斯方块：

源代码如下:

<!DOCTYPE html>

<html>

<head>

.c {

margin: 1px;

width: 19px;

height: 19px;

background: red;

position: absolute;

}

.d {

margin: 1px;

width: 19px;

height: 19px;

background: gray;

position: absolute;

}

.f {

top: 0px;

left: 0px;

background: black;

position: absolute;

}

</style>

</head>

<body>

</body>

</html>

var over = false,

shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");

//shapes 中的每一个元素的各个数字意2两个一组，分别指该层移动的X，Y轴

function create(tag, css) {

var elm = document.createElement(tag); //创建一个tag标签

elm.className = css; //添加一个css样式

document.body.appendChild(elm); //把该标签添加到body标签中

return elm;

} //返回该标签

function Field(w, h) { //Field整个游戏界面的对象，没跳动一次，就是一次刷新

this.width = w ? w : 10;

this.height = h ? h : 20;

this.show = function() { //创建一个底层，游戏界面

var f = create("div", "f")

f.style.width = this.width * 20 + 'px';

f.style.height = this.height * 20 + 'px';

}

this.check = function(shape, x, y, d) { //判断是否到了边缘

var r1 = 0,

r2 = 'GO'; //每一次所生成的4个层绝对不会存在超出左边的同时又超出右边，故r1只有一个

for(var i = 0; i < 8; i += 2) {

//循环横坐标，查看是够超过边距

if(parseInt(shape) + x < 0 && parseInt(shape) + x < r1) {

//若向左边移动会超出边界

r1 = parseInt(shape) + x;

} else if(parseInt(shape) + x >= this.width && parseInt(shape) + x > r1) {

//若向右移动会超出边界

r1 = parseInt(shape) + x;

}

if(parseInt(shape[i + 1]) + y >= this.height || this[parseInt(shape) + x + (parseInt(shape[i + 1]) + y) * this.width]) {

r2 = "NO";

}

if(d == "move" && r2 == "GO") { //当此次操作是左右移动的话，就返回移动后的横坐标，只要没有超出边界，r1就肯定不为0

return r1;

} else if(d == "upchange" && r2 == "GO") { //当此次操作是变换形状时

return r1 > 0 ? r1 - this.width + 1 : r1; //其实每次移动的都是该层的很坐标，以左边为准移动的

} else {

return r2;

}

this.findFull = function() { //判断该行是否已经满了

for(var h = 0; h < this.height; h++) { //循环底层的纵坐标

var s = 0;

for(var w = 0; w < this.width; w++) { //循环行坐标

s += this[w + h * this.width] ? 1 : 0 //确定每个坐标点上时候有元素，以便于确定改行是否满了

}

if(s == this.width) { //若改行满了，则调用removeLine方法，一处该行的每一个元素

this.removeLine(h);

}

//清除已经填满的行

this.removeLine = function(line) {

for(var w = 0; w < this.width; w++) { //因为每个元素都是根据对象的横纵坐标在存储，所以需要重新循环横坐标，以便于取出每一个元素

document.body.removeChild(this[w + line * this.width]); //每个元素都是在body上存在着

}

//移除该行之后需要让其上的每行都向下移动一行

for(var l = line; l > 0; l--) {

for(var i = 0; i < this.width; i++) {

this[i + l * this.width] = this[i + (l - 1) * this.width]; //把上一行的元素付给下一行的元素()

if(this[i + l * this.width]) {

this[i + l * this.width].style.top = l * 20 + 'px'; //移动

}

this.fixShape = function(shape, x, y) { //生成落地的方块

var d = new Tetris("d", shape, x, y);

d.show();

for(var i = 0; i < 8; i += 2) { //记录每个变灰色的div层，只有成功到底底层的时候才记录

//parseInt(shape) + x 记录的为该层的横坐标

//parseInt(shape[i + 1]) + y 记录的为纵坐标

//这样是为了this[…]是唯一。

this[parseInt(shape) + x + (parseInt(shape[i + 1]) + y) * this.width] = d.divs[i / 2];

}

function Tetris(c, t, x, y) {

var c = c ? c : "c"; //若C存在，则为C，不存在，则赋值

this.field = null;

this.divs = [create("div", c), create("div", c), create("div", c), create("div", c)]; //调用create方法创建元素

var ttt = t;

this.reset = function() { //创建一个方块

this.x = typeof x != 'undefined' ? x : 3;

this.y = typeof y != 'undefined' ? y : 0;

this.shape = t ? t : (shapes[Math.floor(Math.random() * (shapes.length - 0.00001))].split(","));

this.show();

//当刚生的方块就不能再向下移动的时候，游戏结束

if(this.field && this.field.check(this.shape, this.x, this.y, "down") == "NO") {

over = true;

this.field.fixShape(this.shape, this.x, this.y);

alert('game over');

}

this.show = function() { //根据生成的方案，初始化方块。

for(var i = 0; i < this.divs.length; i++) {

this.divs.style.left = (this.shape[i * 2] * 1 + this.x) * 20 + 'px';

this.divs.style.top = (this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px';

}

this.vMove = function() { //该方法使方块向下移动

if(this.field.check(this.shape, this.x, this.y + 1, "down") == "GO") { //若还能向下移动就执行

this.y++;

this.show();

} else {

this.field.fixShape(this.shape, this.x, this.y); //不能向下移动了，就生成固定的块。

this.field.findFull();

this.reset();

};

}

this.hMove = function(moveNo) { //该方法使方块左右移动

var r = this.field.check(this.shape, parseInt(this.x) + moveNo, this.y, 'move');

if(r != 'GO' && r == 0) {

this.x += moveNo;

this.show();

}

this.rotate = function() { //当按动上键时，改变方块的排列方向

var s = this.shape;

var newShape = [3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4], 3 - s[7], s[6]]; //先把坐标循环180度，然后纵横坐标互换。

var r = this.field.check(newShape, this.x, this.y, 'upchange'); //调用check方法，确定时候可以改变

if(r == "NO") { return; };

if(r == 0) { //若为0 ，则说明改变后的块并没有超出范围，继续执行

this.shape = newShape;

this.show();

} else if(this.field.check(newShape, this.x - r, this.y, 'move') == 0) { //超出后，根据返回值，让其向相应的方向移动。以保证并不会超出范围

this.x -= r;

this.shape = newShape;

this.show();

}

this.reset();

}

var f = new Field();

f.show();

var t = new Tetris();

t.field = f;

t.reset();

window.setInterval("if(!over)t.vMove();", 500); //调用向下移动的方法

document.onkeydown = function(e) { //当按上下左右键时，触发

if(over) return;

var e = window.event ? window.event : e;

switch(e.keyCode) {

case 38: //up 当按下上键时

t.rotate();

break;

case 40: //down

t.vMove();

break;

case 37: //left

t.hMove(-1);

break;

case 39: //right

t.hMove(1);

break;

}

</script>

路过的朋友给个关注哦，需要打包源码的私信小编。

、HTML与XHTML的区别

（1）在XHTML 中标签名称必须小写，在HTML 中标签名称既可以小写也可以大写；

（2）在XHTML 中标签必须封闭，在HTML中标签可以不成对出现；

（3）在XHTML 中标签必须严格嵌套，HTML对标签嵌套没有严格规定；

（4）在XHTML 中属性名称必须小写，在HTML 中也一样；

（5）在XHTML 中标签必须用双引号引起来，HTML中可以不用；

二、特殊符号

表示空格；
"表示双引号；
&表示&符号；
>表示大于号>；
<表示小于号<；

三、列表的使用

（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超文本标记语言
下一篇：前端入门-html 表单控件使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 列表

无序列表

有序列表

定义列表

您的项目需求