整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML的常用列表可以分為三種：無序列表，有序列表以及定義列表。
定義：<ul>...</ul> ，表示項(xiàng)目之間沒有順序規(guī)定的列表。
內(nèi)層標(biāo)簽是 <li>...</li>，它有一個type屬性，常用的值有三種：
小實(shí)例：
<ul>
? <li>默認(rèn)值</li><br>
? <li type="disc">實(shí)心圓點(diǎn)</li><br>
? <li type="circle">空心圓點(diǎn)</li><br>
? <li type="square">實(shí)心方塊</li><br>
</ul>定義：<ol>...</ol>， 相對于無序列表而言，具有一定的順序的列表，一般用數(shù)字或者是字母放在表示項(xiàng)目的最前端表示先后順序。
內(nèi)層標(biāo)簽是 <li>...</li>，同樣它的type屬性常用值有四種：
小實(shí)例：
<ol>
? <li>默認(rèn)值</li><br>
? <li type="A">大寫字母</li><br>
? <li type="a">小寫字母</li><br>
? <li type="I">羅馬數(shù)字</li><br>
? <li type="1">純數(shù)字</li><br><br><br>
</ol>定義：<dl>...</dl>，不僅僅是一列項(xiàng)目，還是項(xiàng)目及其注釋的組合。
由 <dl> 標(biāo)簽開始，內(nèi)層標(biāo)簽 <dt>...</dt> 包裹對象文本， <dd>...</dd> 包裹著解釋文本。（內(nèi)層只能是 dt 和 dd 標(biāo)簽，且dt 必須是在 dd 前面）
小實(shí)例：
<dl>
? <dt>HTML</dt>
? <dd>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</dd><br>
? <dt>CSS</dt>
? <dd>層疊樣式表(英文全稱：Cascading Style
? Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。</dd><br>
? <dt>JavaScript</dt>
? <dd>JavaScript是一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。</dd><br>
</dl>動手小練習(xí)
大家分享一個html寫的俄羅斯方塊：
源代碼如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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>
<script type="text/javascript">
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 中的每一個元素的各個數(shù)字意2兩個一組，分別指該層移動的X，Y軸
function create(tag, css) {
var elm = document.createElement(tag); //創(chuàng)建一個tag標(biāo)簽
elm.className = css; //添加一個css樣式
document.body.appendChild(elm); //把該標(biāo)簽添加到body標(biāo)簽中
return elm;
} //返回該標(biāo)簽
function Field(w, h) { //Field整個游戲界面的對象，沒跳動一次，就是一次刷新
this.width = w ? w : 10;
this.height = h ? h : 20;
this.show = function() { //創(chuàng)建一個底層，游戲界面
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) {
//循環(huán)橫坐標(biāo)，查看是夠超過邊距
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") { //當(dāng)此次操作是左右移動的話，就返回移動后的橫坐標(biāo)，只要沒有超出邊界，r1就肯定不為0
return r1;
} else if(d == "upchange" && r2 == "GO") { //當(dāng)此次操作是變換形狀時
return r1 > 0 ? r1 - this.width + 1 : r1; //其實(shí)每次移動的都是該層的很坐標(biāo)，以左邊為準(zhǔn)移動的
} else {
return r2;
}
}
this.findFull = function() { //判斷該行是否已經(jīng)滿了
for(var h = 0; h < this.height; h++) { //循環(huán)底層的縱坐標(biāo)
var s = 0;
for(var w = 0; w < this.width; w++) { //循環(huán)行坐標(biāo)
s += this[w + h * this.width] ? 1 : 0 //確定每個坐標(biāo)點(diǎn)上時候有元素，以便于確定改行是否滿了
}
if(s == this.width) { //若改行滿了，則調(diào)用removeLine方法，一處該行的每一個元素
this.removeLine(h);
}
}
}
//清除已經(jīng)填滿的行
this.removeLine = function(line) {
for(var w = 0; w < this.width; w++) { //因?yàn)槊總€元素都是根據(jù)對象的橫縱坐標(biāo)在存儲，所以需要重新循環(huán)橫坐標(biāo)，以便于取出每一個元素
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 記錄的為該層的橫坐標(biāo)
//parseInt(shape[i + 1]) + y 記錄的為縱坐標(biāo)
//這樣是為了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)]; //調(diào)用create方法創(chuàng)建元素
var ttt = t;
this.reset = function() { //創(chuàng)建一個方塊
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();
//當(dāng)剛生的方塊就不能再向下移動的時候，游戲結(jié)束
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() { //根據(jù)生成的方案，初始化方塊。
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") { //若還能向下移動就執(zhí)行
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() { //當(dāng)按動上鍵時，改變方塊的排列方向
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]]; //先把坐標(biāo)循環(huán)180度，然后縱橫坐標(biāo)互換。
var r = this.field.check(newShape, this.x, this.y, 'upchange'); //調(diào)用check方法，確定時候可以改變
if(r == "NO") { return; };
if(r == 0) { //若為0 ，則說明改變后的塊并沒有超出范圍，繼續(xù)執(zhí)行
this.shape = newShape;
this.show();
} else if(this.field.check(newShape, this.x - r, this.y, 'move') == 0) { //超出后，根據(jù)返回值，讓其向相應(yīng)的方向移動。以保證并不會超出范圍
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); //調(diào)用向下移動的方法
document.onkeydown = function(e) { //當(dāng)按上下左右鍵時，觸發(fā)
if(over) return;
var e = window.event ? window.event : e;
switch(e.keyCode) {
case 38: //up 當(dāng)按下上鍵時
t.rotate();
break;
case 40: //down
t.vMove();
break;
case 37: //left
t.hMove(-1);
break;
case 39: //right
t.hMove(1);
break;
}
}
</script>
路過的朋友給個關(guān)注哦，需要打包源碼的私信小編。
、HTML與XHTML的區(qū)別
（1）在XHTML 中標(biāo)簽名稱必須小寫，在HTML 中標(biāo)簽名稱既可以小寫也可以大寫；
（2）在XHTML 中標(biāo)簽必須封閉，在HTML中標(biāo)簽可以不成對出現(xiàn)；
（3）在XHTML 中標(biāo)簽必須嚴(yán)格嵌套，HTML對標(biāo)簽嵌套沒有嚴(yán)格規(guī)定；
（4）在XHTML 中屬性名稱必須小寫，在HTML 中也一樣；
（5）在XHTML 中標(biāo)簽必須用雙引號引起來，HTML中可以不用；
二、特殊符號
三、列表的使用
（1）無序列表
# 打印實(shí)心圓點(diǎn)的無序列表 <body> <ul type="disc"> <li>第一</li> <li>第二</li> <li>第三</li> </ul> </body>
（2）有序列表
# 打印數(shù)字排序的有序列表 <body> <ol type="1"> <li>我最愛椰奶</li> <li>第二愛可樂</li> <li>第三愛橙汁</li> </ol> </body>
（3）定義列表
<body> <dl> <dt>春曉</dt> <dd>春眠不覺曉，處處聞啼鳥</dd> <dd>夜來風(fēng)雨聲，花落知多少</dd> </dl> </body>
四、表格的使用
（1）表格的基本結(jié)構(gòu)
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> </table>
（2）表格的對齊方式
（3）表格的其他屬性
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
