JavaWeb之HTML入门及常用标签
HTML：
1、HTML的概述及作用：
HTML全称为HyperText Markup Language,译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
Html就是超文本标记语言的简写，是最基础的网页语言。
Html是通过标签来定义的语言，代码都是由标签所组成。
2、HTML的基本格式：
1.格式：
<html> <head> 放置一些属性信息或者辅助性的信息 <title></title> 引入外部的文件 会先加载 </head> <body> 真正存放数据内容的地方 其他的标签 </body> </html>
A：通过观察格式，发现
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
B:对格式的解释
html:放在html文件的开头，但没有实质性的功能，即使没有这个标记，浏览器在碰到其他的html标记时也一样会进行解析。
浏览器内置了html语言的解析器.
可以设置默认打开浏览器:工具—文件夹选项-文件类型
head:头标记，放置关于此html文件的信息，如提供索引，定义css等。
title:标题标记，包含在head标记内，它的作用是设定网页的标题。
body:主体标记，网页所需要显示的内容都放在这个标记内。
2.以什么后缀结尾
以.html或者.htm来结尾
3. 浏览器就可以解析HTML的文件。
3、HTML的注意事项：
1.一般的标签都有开始和结束，如果只有单一的功能，可以在标签内部结束。
2.改变属性，达到好的显示效果
3.属性值可以使用双引号，单引号，或者不用引号，一般采用双引号，或者根据公司的规范。
4、MyEclipse简单设置
1.安装完MyEclipse后，先设置工作空间的编码。
Window—preferences—General--workspace—选择UTF-8编码
2.创建HTML的文件后，如果不是UTF-8的编码，可以进行设置。
Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
3.创建HTML的文件后，可以选择打开方式，设置默认的打开方式。
Window—preferences—General—Editors—File
Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok
5、HTML的标签
1.排版标签
(1)换行标签 <br/> （用的比较少）
(2)水平线 <hr/>
属性：color：颜色
颜色的写法：有两种写法：1）颜色的英文单词 2）RGB三原色(red green blue) #ffffff
属性：width：宽度
值有两种写法：1）像素值（300px）2）百分比(30%)
区别：百分比会随着浏览器大小而改变，像素不会。
属性：size：控制水平线的粗细。单位是像素。
属性：align：控制水平线的对齐方式
(3)空格：
(4)段落标签（用的相对较多）
<p></p>
特点：在开始和结束的位置上，各产生一行空行。
属性：align：对齐的方式 文字的显示位置。
取值：left,center,right
(5)<div></div>
<span></span>
标签非常的简单，就是在浏览器上声明一块区域。
区别：div后面有换行，span没有。
(6)块级元素和行内元素（了解）
1)行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2)块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
eg.例子可以复制到.html文件里，用浏览器打开查看效果，对比着查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>排版标签</title> </head> <body> <!-- HTML的注释 --> 静夜思<br/> <hr color="#ccbb33" width="200px"/> 床前明月光，<br/> <p align="center"> 疑是地上霜。<br/> 举头望明月，<br/> </p> 低头思故乡。<br/> <hr /> <div>div的文本1</div> <div>div的文本2</div> <span></span> <span>密码错误</span> </body> </html>
2.字体标签
(1)<font></font>（重要的）
属性：color：颜色
这里顺便提提RGB三原色：
RGB三原色：红，绿，蓝。
用2位16进制的数据表示每种颜色的取值范围。取值0~255共256种颜色。255 = 15*16+15*1 = ff。每种颜色范围00~ff
这个是用，我们就可以表示所有的颜色了：
#rrggbb
#000000:黑色
#ffffff:白色
#ff0000:红色
#00ff00:绿色
#0000ff:蓝色
属性：size：字体的大小
最大值和最小值 最大值是7 最小值是1
默认值是3，size的写法又提供了一种（+2）其实就是5
属性：face：字体的类型。
如果不清楚有什么字体，可以通过打开记事本：菜单栏—格式—字体就可以看到系统提供的各种字体。宋体，楷书，隶书，黑体等。
3.标题的标签（用的比较少）
(1)标题标签
<h1></h1>
...
<h6></h6>
从1到6是逐渐缩小的。
(2)粗体和斜体的标签
<b></b>
<i></i>
标签是可以嵌套的
<b><i></i></b>
(3)HTML的特殊字符
如果要在网页上显示一些特殊符号,比如 <,>,&等.因为这些符号在代码中会被浏览器识别并解释.所以用特殊方式表示
< : <
> : >
& : &
<p>是特殊字符<br />
&nbsp是空格字符
上下标记
sup:为上标标记
sub:为下标标记
2<sup>3</sup>+3<sup>3</sup> = 35<br />
H<sub>2</sub>+O<sub>2</sub> = H<sub>2</sub>O
(4)滚动字幕
marquee
bgcolor 背景颜色
Direction 滚动方向 left、right、up、down
Behavior 滚动方式scroll滚动、silde滑动、alternate摆动
Height 滚动对象高度，值为像素
Width 滚动对象宽度 ，值为像素
hspace 滚动对象到背景左右空白区域的宽度，值为像素
vspace 滚动对象到背景上下空白区域的宽度，值为像素
scrollamount滚动速度，值是数字，数字越大，速度越快
scrolldelay两次滚动之间的延迟时间， 值为数字,单位是毫秒,数字越大，延迟时间越长
loop设定滚动次数，-1为一直滚动。
<marquee></marquee>内只能用<br>换行，不能用<p>
*注意：在一个标记中有多个属性，基本格式是：< 属性名1=属性值1 属性名2=属性值2………. >。各个属性间必须以空格间隔。
eg.例子可以复制到.html文件里，用浏览器打开查看效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <h3>字体、标题标签</h3> 10 11 <!-- 12 <font></font>（重要的） 13 * color：颜色 14 * size：字体的大小 15 * 最大值和最小值 最大值是7 最小值是1 16 * 默认值是3，size的写法又提供了一种（+2） 17 * face：字体的类型 18 19 * 标题的标签（用的比较少） 20 * <h1></h1> 21 ... 22 * <h6></h6> 23 * 从1到6是逐渐缩小的。 24 25 * 粗体和斜体的标签 26 <b></b> 27 <i></i> 28 29 * 标签是可以嵌套的 30 <b><i></i></b> 31 32 * HTML的特殊字符 33 < : < 34 > : > 35 & : & 36 37 * 滚动字幕 38 marquee 39 --> 40 41 <marquee behavior="alternate" scrollamount="30">你能抓到我吗？</marquee> 42 43 <font color="red" size="6">我是字体标签</font><br/> 44 <font color="red" size="7">我是字体标签</font><br/> 45 <font color="red" size="16">我是字体标签</font><br/> 46 <font color="red" size="1">我是字体标签</font><br/> 47 <font color="red" size="-6">我是字体标签</font><br/> 48 <font color="red" size="3">我是字体标签</font><br/> 49 <font color="red" >我是字体标签</font><br/> 50 <font color="red" size="5">我是字体标签</font><br/> 51 <font color="red" size="+2">我是字体标签</font><br/> 52 53 <h1>我是一级标题</h1> 54 <h2>我是二级标题</h2> 55 56 <b>我是粗体的标签</b> 57 <i>我是斜体的标签</i> 58 59 <b><i>既是粗体又是斜体</i></b> <br/> 60 61 4>3 1<5<br/> 62 63 a<c z>x 64 65 </body> 66 </html>
4.列表标签
把数据进行格式化，指定的格式。
(1)列表标签
<dl>(define list title)是定义语，dd(define list define )是定义说明（用的较少）
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
dd标签的特点：默认缩进和自动对齐的。
(2)有序列表和无序列表
有序列表ol(Ordered List)：（也是比较多的）
<ol>
<li></li>
</ol>
属性： type 类型 (规定列表标记类型)这样一个属性:A,a,I,i,1.默认是阿拉伯数字 1
start 从哪开始(控制序号开始的值)默认开始值为1
无序列表ul(Unordered List)：（用的非常多）
<ul>
<li></li>
</ul>
属性：type
*列表项：li(List Item)
不管是有序还是无序，中间数据的条目都使用<li></li>
eg.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <!-- 10 * 列表标签 11 <dl>（用的较少） 12 <dt>上层项目</dt> 13 <dd>下层项目</dd> 14 <dd>下层项目</dd> 15 </dl> 16 17 * dd标签的特点：默认缩进和自动对齐的。 18 19 * 有序列表和无序列表 20 有序：（也是比较多的） 21 <ol> 22 <li></li> 23 </ol> 24 * 属性： type 类型 25 start 从哪开始 26 27 无序：（用的非常多） 28 <ul> 29 <li></li> 30 </ul> 31 * 属性：type 32 33 * 不管是有序还是无序，中间数据的条目都使用<li></li> 34 35 --> 36 <h3>列表标签</h3> 37 <dl> 38 <dt>上层项目</dt> 39 <dd>下层项目</dd> 40 <dd>下层项目</dd> 41 <dd>下层项目</dd> 42 </dl> 43 44 <hr/> 45 46 <h4>有序列表</h4> 47 <ol type="a" start="3"> 48 <li>有序列表</li> 49 <li>有序列表</li> 50 <li>有序列表</li> 51 </ol> 52 53 <h4>无序列表</h4> 54 <ul type="square"> 55 <li>无序列表</li> 56 <li>无序列表</li> 57 <li>无序列表</li> 58 </ul> 59 60 </body> 61 </html>
5.图片标签（重要*****）
<img />
(1)属性：
src="图片的地址"
width 图片的显示宽度
height 图片显示的高度
alt 图片的说明文字，当图片不存在的时候显示的文字
border 图片的边框
align 控制图片相对于图片基线居于上，中，下
top,center,bottom
(2)结合marquee标签把文字变成图片即可。
<marquee align="left" bgcolor="#FFFF00" direction="left" behavior="alternate" width="400" hspace="1" scrollamount="2" scrolldelay="1" vspace="1" loop="-1"> <img src="mn3.jpg" width="120" height="200"/> <img src="mn4.jpg" width="120" height="200"/> <img src="mn5.jpg" width="120" height="200"/> </marquee>
(3)图片的热点区域其实就是讲一个图片专门的分割出一个链接区域，这就是热点。
shape 热点区域形状，值有：矩形rect 、圆形circle、多边形poly
coords 热点区域划分坐标：圆形是圆心上下坐标和半径、矩形是左上、右下两点的坐标，多边形是各个顶点的坐标。（相对图片）
href 超级链接的目标。
shape -- 定义热点形状
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
coords -- 定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
(4)网页上使用的图片主要格式是gif和jpg两种。
在网页中使用图片，从视觉效果而言，能使网页充满生机，并且直观表达了网页的主题，这不是靠文字可以做到的。
那么，要注意哪些要求呢？
首先是图片的选择，图片要与网页风格贴近，最好自己制作以体现网页的设计意图。
其次，图片的色调要保持一致，不要过于花哨。
最后就是要注意图片不能过大，不利于网页上传和浏览者浏览。
eg.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <!-- 10 <img /> 11 * 属性：src="图片的地址" 12 * width 图片的显示宽度 13 * height 图片显示的高度 14 * alt 图片的说明文字 15 --> 16 17 <marquee> 18 <img alt="" src="funny3.gif"> 19 </marquee> 20 21 <hr/> 22 <img src="girl4.jpg" width="60%" height="80%" alt="啊，美女啊！" border="1"> 23 24 </body> 25 </html>
6.超链接的标签（重要*****）
<a>文本内容</a>
<a></a>
链接资源
(1)属性：href="指定链接的资源的地址"
注意：如果链接网络资源，需要协议写上。如果没有协议，默认file文件协议。
注意：如果浏览器可以解析的文件，直接就打开了。
如果浏览器不可以解析的文件，弹出下载窗口。
自定义的协议
如果浏览器解析不了的协议，会找操作系统上的应用程序。
(2)特定目标的链接:定位资源
一般在页面中，当网页内容过长，定位标记会比拖动 滚动条方便快捷。
注：定位标记要和超链接结合使用才有效
<a name=“标记”>标记位置</a>
<a href=“#标记”>返回</a>
属性 name
专业的术语 锚
(3)超链接的其他应用
属性 href:用于连接资源。如果是http的资源，一定要写上http。表示用http协议进行解析。
target这个属性指定所链接的页面在浏览器窗口中的打开方式，
它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下：
◎_blank，在新浏览器窗口中打开链接文件。
◎_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
◎_self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
◎_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架
电子邮件的链接
mailto:McCa@163.com
点击超链接浏览器做的事情：
1)启动相对应的协议引擎。
2)解析协议后面的具体内容。
3)如果跟的是一个主机地址。先查找本机hosts文件列表。是否可以找到该主机对应ip。
如果没有找到，会找本机指定的后者本机默认的DNS服务器。去解析该主机。
4)获取到该ip后，在连接该指定ip的主机，并获取所需的资源。
*注意：
1)当没有指定具体协议时，浏览器会启动默认的file协议引擎来解析href的值。
2)当指定的协议浏览器无法解析时，浏览器会在本地注册中查找是否有关联该协议的应用程序。如果有就调用程序进行该协议的解析。
eg.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <!-- 10 超链接标签 11 <a></a> 12 * 链接资源 13 * 属性：href="指定链接的资源的地址" 14 * 注意：如果链接网络资源，需要协议写上。如果没有协议，默认file文件协议。 15 * 注意：如果浏览器可以解析的文件，直接就打开了。 16 * 如果浏览器不可以解析的文件，弹出下载窗口。 17 * 自定义的协议 18 * 如果浏览器解析不了的协议，会找操作系统上的应用程序。 19 20 * target：打开的位置。 21 22 * 定位资源 23 * 专业的术语 锚 24 * 属性：name 25 --> 26 27 <a href="http://www.baidu.com" target="_blank">百度</a><br/> 28 <a href="success.html">登陆</a><br/> 29 <a href="girl.jpg">啊，美女！！</a><br/> 30 <a href="1.rar">1.rar</a><br/> 31 32 <a href="http://www.xunlei.com/moves/xhlf.rmvb">心花路放</a><br/> 33 34 <a href="thunder://sdsfxhlf.rmvb">心花路放</a><br/> 35 36 <a href="success.html"> 37 <img alt="" src="girl.jpg"> 38 </a> 39 40 <hr /> 41 <a name="top" >顶部位置（锚点）</a> 42 <hr /> 43 44 50年前，长沙镖子岭。 45 46 四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把洛阳铲。 47 48 铲子头上带着刚从地下带出的旧土，离奇的是，这一坏土正不停地向外渗着鲜红的液体，就像刚刚在血液里蘸过一样。 49 50 “这下子麻烦大喽。”老烟头把他的旱烟在地上敲了敲，接着道，“下面是个血尸嘎，弄不好我们这点儿当当，都要撂在下面噢。” 51 52 “下不下去喃？要得要不得，一句话，莫七里八里的！”独眼的小伙子说，“你说你个老人家腿脚不方便，就莫下去了，我和我弟两个下去，管他什么东西，直接给他来一梭子。” 53 54 老烟头不怒反笑，对边上的一个大胡子说：“你屋里二伢子海式撩天的，指不定什么时候就给翻盖子了，你得多教育教育，咱这买卖，不是有只匣子炮就能喔荷西天。” 55 56 那大胡子瞪了那年轻人一眼：“你崽子，怎么这么跟老太爷讲话，老太爷淘土的时候你他妈的还在你娘肚子里吃屎咧。” 57 58 “我咋说……说错了，老祖宗不说了嘛，那血尸就是个好东西，下面宝贝肯定不少，不下去，走嘎一炉锅汤。” 59 60 “你还敢顶嘴！”大胡子举手就打，被老烟头用烟枪挡了回去。 61 62 “打不得，你做伢那时候不还是一样，这叫上梁不正下梁歪！” 63 64 那独眼的小伙子看他老爸被数落了，低下头偷笑，老烟头咳嗽了一声，又敲了那独眼的少年一记头棍：“你笑个啥？碰到血尸，可大可小，上次你二公就是在洛阳挖到这东西，结果现在还疯疯癫癫的，都不知道着了什么道。等一下我先下去，你跟在我后面，二伢子你带个土耗子殿后，三伢子你就别下去了，四个人都下去，想退都来不及退，你就拉着土耗子的尾巴，我们在里面一吆喝你就把东西拉出来。” 65 66 年纪最小的那少年不服气了：“我不依，你们偏心，我告诉我娘去！” 67 68 老烟头大笑：“你看你看，三伢子还怯不得子了，别闹，等一下给你摸把金刀刀。” 69 70 “我不要你摸，我自己会摸。” 71 72 那独眼老二就火了，一把揪住老三的耳朵：“你这杂家伙跟我寻事觅缝啰，招呼老子发宝气喃？！” 73 74 那年纪最小的少年看样子平日挨过不少揍，一看他二哥真火了，就吓得不敢吭声了，直望着他爹求救，怎料他爹已经去收拾家伙去了。他二哥这下得意了：“你何什咯样不带爱相啰，这次老头子也不帮你，你要再吆喝，我拧你个花麻鸡吧！” 75 76 老烟头拍拍老二的肩膀，大叫一声：“小子们，操家伙啰！”说完一把旋风铲已经舞开了。 77 78 半个小时候后，盗洞已经打得见不到底了，除了老二不时上来透气，洞里连声音都听不清楚了，老三等得不耐烦起来，就朝洞里大叫：“大爷爷，挖穿没有？” 79 80 隔了有好几秒，里面才传来一阵模糊的声音：“不……知道，你……待在上面，拉好……好绳子！” 81 82 是他二哥的声音，然后听到他那老烟头咳嗽了一声：“轻点声……听！有动静！” 83 84 然后就是死一般的沉寂。 85 86 老三知道下面肯定有什么变故，吓得也不敢说话了，突然他听到一阵让人毛骨悚然的咯咯声，好像蛤蟆叫一样的从洞里发出来。 87 88 然后他二哥在下面大吼了一声：“三伢子，拉！” 89 90 他不敢怠慢，一蹬地猛地拽住土耗子的尾巴，就往外拉，刚拉了几下，突然下面好像有什么东西咬住了，竟然有一股反力把绳子向盗洞里拉去，老三根本没想过还会有这种情况，差点就被拉到洞里去，他急中生智，一下子把尾巴绑在自己腰上，然后全身向后倒去，后背几乎和地面成了30度角，这个是他在村里和别的男孩子拔河的时候用的招数，这样一来他的体重就全部吃在绳子上，就算是匹骡子，他也能顶一顶。 91 92 果然，这样一来他就和洞里的东西对峙住了，双方都各自吃力，但是都拉不动分毫，僵持了有十几秒，就听到洞里一声盒子炮响，然后听到他爹大叫：“三伢子，快跑！！！！！！”就觉得绳子一松，土耗子嗖一声从洞里弹了出来，好像上面还挂了什么东西！那时候老三也顾不得那么多了，他知道下面肯定出了事情了，一把接住土耗子，扭头就跑！ 93 94 他一口七跑出有二里多地，才敢停下来，掏出他怀里的土耗子一看，吓得大叫了一声，原来土耗子上勾着一只血淋淋的断手。他认得那手的模样，不由哭了出来，这手是分明是他二哥的。看样子他二哥就算不死也残废了。想到这里，他不由一咬牙，想回去救他二哥和老爹，刚一回头，却看见背后蹲着个血红血红的东西，正直勾勾地看着他。 95 96 这老三也不是个二流货色，平日里跟着他老爹大浪淘沙，离奇的事情见过不少，知道这地底下的，什么事情都有可能发生，最重要的不是大惊小怪，而是随机应变，要知道再凶险的鬼也强不过一活人，这什么黑凶白凶的，也得遵守物理定律，一梭子子弹打过去，打烂了也就没什么好怕的了。 97 98 想到这里，他把心一横，一边后退，一边腰上别着的一支匣子炮已经拽在手里，开了连发，只要那血红的东西有什么动静，就先给他劈头来个暴雨梨花。谁知道这时候那血红的东西竟然站起来了，老三仔细一看，顿觉得头皮发麻，胃里一阵翻腾，那分明是一个被剥了皮的人！混身上下血淋淋的，好像是自己整个儿从人皮里挤了出来一样。可是这样的一个人，竟然还能走动，那真是奇迹了，难道这就是血尸的真面目？ 99 100 想着，那血尸一个弓身，突然就扑了过来，一下子老三就和他对上眼了，那血淋淋的脸一下子就贴着他的鼻子，一股酸气扑面而来，老三顺势向后一倒，同时匣子炮整一梭子子弹全部近距离打在了那东西胸膛上，距离过近，子弹全部都穿了过去，把那东西打的血花四溅，向后退了好几步。老三心中暗喜，再一回手对准那东西的脑袋就一扣扳机，就听喀嚓一声，枪竟然卡壳了！ 101 102 这把老匣子炮是当年他二爷爷从一个军阀墓里挖出来的，想来也没用了多少年月，可惜这几年跟着他爹爹到处跑，也没工夫保养，平时候开枪的机会也少之又少，谁知道竟然在这节骨眼上卡壳了。那老三也真不简单，一看枪不好使唤，轮圆了胳膊用吃奶的力气把枪给砸了过去，也不管砸没砸到，扭头就跑。这次他连头也不敢回，看准前面一颗大树就奔了过去，寻思着怎么着它也不会爬树吧，突然脚下一绊，他一个狗吃屎，整张脸磕在一树墩上，顿时鼻子嘴巴里全是血。 103 104 老三狠狠一巴掌拍在地上，心里那个气啊，妈的怎么就这么背。 105 106 这时候听到后面风声响起，知道阎王爷来点名了，心一横，死就死吧，索性就趴在地上不起来了。没成想，那具血尸好像没看到他一样，竟然从他身上踩了过去，那血淋淋的脚板马上在他背后印下一个印子，这血尸出奇的重，一脚下去，老三就觉得嗓子一甜，只觉胆汁都被像踩吐了出来，而且背上那被踩过地方马上一阵奇痒，眼前马上朦胧起来，他马上意识到自己可能中毒了，而且毒性还非常的猛烈，恍惚间他看到不远处的地方，他二哥的那只手里好像还握着什么东西。 107 108 他用力眨了眨眼睛，仔细一看，原来是一块古帛片。他心想，自家二哥拼了命都要带出来的东西，肯定不是寻常东西，现在又不知道他们怎么样了，我好歹得把东西收好，万一我真的死了，他们找到我的尸体，也能从我身上找得着，那二哥的这只手也不算白断了，我也不至于白死。他一边这么想着，一边艰难地爬过去，用力掰开二哥紧握的手把那帛片从掌心里拿出来，塞进了自己袖子里。 109 110 这个时候他的耳朵也开始蜂鸣了，眼睛就像蒙了一层纱一样，手脚都开始凉起来。按他以往的经验，现在他裤裆里肯定大小便一大堆，中尸毒的人都死得很难看，他现在最希望的是不要给隔壁村的二丫头看见自己这个样子。 111 112 他就这么混混着胡想，脑子已经不怎么听他使唤了，这时候他又开始隐隐约约地听到他在盗洞口听到的那种咯咯怪声。 113 114 老三隐约觉得一丝不对，刚才和血尸搏斗了这么些时候，也没听它叫过一声，现在怎么又叫起来了？难道刚才的那只并不是血尸？那刚才看到的又是什么东西呢？可惜这个时候他已经基本无法做思考了，他条件反射地抬起头看了一下，只见一张巨大的怪脸正俯下身子看着他，两只没有瞳孔的眼睛里空荡荡地毫无生气。 115 50年前，长沙镖子岭。 116 117 118 <hr /> 119 <a name="center" >中间位置（锚点）</a> 120 <hr /> 121 122 四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把洛阳铲。 123 124 铲子头上带着刚从地下带出的旧土，离奇的是，这一坏土正不停地向外渗着鲜红的液体，就像刚刚在血液里蘸过一样。 125 126 “这下子麻烦大喽。”老烟头把他的旱烟在地上敲了敲，接着道，“下面是个血尸嘎，弄不好我们这点儿当当，都要撂在下面噢。” 127 128 “下不下去喃？要得要不得，一句话，莫七里八里的！”独眼的小伙子说，“你说你个老人家腿脚不方便，就莫下去了，我和我弟两个下去，管他什么东西，直接给他来一梭子。” 129 130 老烟头不怒反笑，对边上的一个大胡子说：“你屋里二伢子海式撩天的，指不定什么时候就给翻盖子了，你得多教育教育，咱这买卖，不是有只匣子炮就能喔荷西天。” 131 132 那大胡子瞪了那年轻人一眼：“你崽子，怎么这么跟老太爷讲话，老太爷淘土的时候你他妈的还在你娘肚子里吃屎咧。” 133 134 “我咋说……说错了，老祖宗不说了嘛，那血尸就是个好东西，下面宝贝肯定不少，不下去，走嘎一炉锅汤。” 135 136 “你还敢顶嘴！”大胡子举手就打，被老烟头用烟枪挡了回去。 137 138 “打不得，你做伢那时候不还是一样，这叫上梁不正下梁歪！” 139 140 那独眼的小伙子看他老爸被数落了，低下头偷笑，老烟头咳嗽了一声，又敲了那独眼的少年一记头棍：“你笑个啥？碰到血尸，可大可小，上次你二公就是在洛阳挖到这东西，结果现在还疯疯癫癫的，都不知道着了什么道。等一下我先下去，你跟在我后面，二伢子你带个土耗子殿后，三伢子你就别下去了，四个人都下去，想退都来不及退，你就拉着土耗子的尾巴，我们在里面一吆喝你就把东西拉出来。” 141 142 年纪最小的那少年不服气了：“我不依，你们偏心，我告诉我娘去！” 143 144 老烟头大笑：“你看你看，三伢子还怯不得子了，别闹，等一下给你摸把金刀刀。” 145 146 “我不要你摸，我自己会摸。” 147 148 那独眼老二就火了，一把揪住老三的耳朵：“你这杂家伙跟我寻事觅缝啰，招呼老子发宝气喃？！” 149 150 那年纪最小的少年看样子平日挨过不少揍，一看他二哥真火了，就吓得不敢吭声了，直望着他爹求救，怎料他爹已经去收拾家伙去了。他二哥这下得意了：“你何什咯样不带爱相啰，这次老头子也不帮你，你要再吆喝，我拧你个花麻鸡吧！” 151 152 老烟头拍拍老二的肩膀，大叫一声：“小子们，操家伙啰！”说完一把旋风铲已经舞开了。 153 154 半个小时候后，盗洞已经打得见不到底了，除了老二不时上来透气，洞里连声音都听不清楚了，老三等得不耐烦起来，就朝洞里大叫：“大爷爷，挖穿没有？” 155 156 隔了有好几秒，里面才传来一阵模糊的声音：“不……知道，你……待在上面，拉好……好绳子！” 157 158 是他二哥的声音，然后听到他那老烟头咳嗽了一声：“轻点声……听！有动静！” 159 160 然后就是死一般的沉寂。 161 162 老三知道下面肯定有什么变故，吓得也不敢说话了，突然他听到一阵让人毛骨悚然的咯咯声，好像蛤蟆叫一样的从洞里发出来。 163 164 然后他二哥在下面大吼了一声：“三伢子，拉！” 165 166 他不敢怠慢，一蹬地猛地拽住土耗子的尾巴，就往外拉，刚拉了几下，突然下面好像有什么东西咬住了，竟然有一股反力把绳子向盗洞里拉去，老三根本没想过还会有这种情况，差点就被拉到洞里去，他急中生智，一下子把尾巴绑在自己腰上，然后全身向后倒去，后背几乎和地面成了30度角，这个是他在村里和别的男孩子拔河的时候用的招数，这样一来他的体重就全部吃在绳子上，就算是匹骡子，他也能顶一顶。 167 168 果然，这样一来他就和洞里的东西对峙住了，双方都各自吃力，但是都拉不动分毫，僵持了有十几秒，就听到洞里一声盒子炮响，然后听到他爹大叫：“三伢子，快跑！！！！！！”就觉得绳子一松，土耗子嗖一声从洞里弹了出来，好像上面还挂了什么东西！那时候老三也顾不得那么多了，他知道下面肯定出了事情了，一把接住土耗子，扭头就跑！ 169 170 他一口七跑出有二里多地，才敢停下来，掏出他怀里的土耗子一看，吓得大叫了一声，原来土耗子上勾着一只血淋淋的断手。他认得那手的模样，不由哭了出来，这手是分明是他二哥的。看样子他二哥就算不死也残废了。想到这里，他不由一咬牙，想回去救他二哥和老爹，刚一回头，却看见背后蹲着个血红血红的东西，正直勾勾地看着他。 171 172 这老三也不是个二流货色，平日里跟着他老爹大浪淘沙，离奇的事情见过不少，知道这地底下的，什么事情都有可能发生，最重要的不是大惊小怪，而是随机应变，要知道再凶险的鬼也强不过一活人，这什么黑凶白凶的，也得遵守物理定律，一梭子子弹打过去，打烂了也就没什么好怕的了。 173 174 想到这里，他把心一横，一边后退，一边腰上别着的一支匣子炮已经拽在手里，开了连发，只要那血红的东西有什么动静，就先给他劈头来个暴雨梨花。谁知道这时候那血红的东西竟然站起来了，老三仔细一看，顿觉得头皮发麻，胃里一阵翻腾，那分明是一个被剥了皮的人！混身上下血淋淋的，好像是自己整个儿从人皮里挤了出来一样。可是这样的一个人，竟然还能走动，那真是奇迹了，难道这就是血尸的真面目？ 175 176 想着，那血尸一个弓身，突然就扑了过来，一下子老三就和他对上眼了，那血淋淋的脸一下子就贴着他的鼻子，一股酸气扑面而来，老三顺势向后一倒，同时匣子炮整一梭子子弹全部近距离打在了那东西胸膛上，距离过近，子弹全部都穿了过去，把那东西打的血花四溅，向后退了好几步。老三心中暗喜，再一回手对准那东西的脑袋就一扣扳机，就听喀嚓一声，枪竟然卡壳了！ 177 178 这把老匣子炮是当年他二爷爷从一个军阀墓里挖出来的，想来也没用了多少年月，可惜这几年跟着他爹爹到处跑，也没工夫保养，平时候开枪的机会也少之又少，谁知道竟然在这节骨眼上卡壳了。那老三也真不简单，一看枪不好使唤，轮圆了胳膊用吃奶的力气把枪给砸了过去，也不管砸没砸到，扭头就跑。这次他连头也不敢回，看准前面一颗大树就奔了过去，寻思着怎么着它也不会爬树吧，突然脚下一绊，他一个狗吃屎，整张脸磕在一树墩上，顿时鼻子嘴巴里全是血。 179 180 老三狠狠一巴掌拍在地上，心里那个气啊，妈的怎么就这么背。 181 182 这时候听到后面风声响起，知道阎王爷来点名了，心一横，死就死吧，索性就趴在地上不起来了。没成想，那具血尸好像没看到他一样，竟然从他身上踩了过去，那血淋淋的脚板马上在他背后印下一个印子，这血尸出奇的重，一脚下去，老三就觉得嗓子一甜，只觉胆汁都被像踩吐了出来，而且背上那被踩过地方马上一阵奇痒，眼前马上朦胧起来，他马上意识到自己可能中毒了，而且毒性还非常的猛烈，恍惚间他看到不远处的地方，他二哥的那只手里好像还握着什么东西。 183 184 他用力眨了眨眼睛，仔细一看，原来是一块古帛片。他心想，自家二哥拼了命都要带出来的东西，肯定不是寻常东西，现在又不知道他们怎么样了，我好歹得把东西收好，万一我真的死了，他们找到我的尸体，也能从我身上找得着，那二哥的这只手也不算白断了，我也不至于白死。他一边这么想着，一边艰难地爬过去，用力掰开二哥紧握的手把那帛片从掌心里拿出来，塞进了自己袖子里。 185 186 这个时候他的耳朵也开始蜂鸣了，眼睛就像蒙了一层纱一样，手脚都开始凉起来。按他以往的经验，现在他裤裆里肯定大小便一大堆，中尸毒的人都死得很难看，他现在最希望的是不要给隔壁村的二丫头看见自己这个样子。 187 188 他就这么混混着胡想，脑子已经不怎么听他使唤了，这时候他又开始隐隐约约地听到他在盗洞口听到的那种咯咯怪声。 189 190 老三隐约觉得一丝不对，刚才和血尸搏斗了这么些时候，也没听它叫过一声，现在怎么又叫起来了？难道刚才的那只并不是血尸？那刚才看到的又是什么东西呢？可惜这个时候他已经基本无法做思考了，他条件反射地抬起头看了一下，只见一张巨大的怪脸正俯下身子看着他，两只没有瞳孔的眼睛里空荡荡地毫无生气。 191 50年前，长沙镖子岭。 192 193 四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把洛阳铲。 194 195 铲子头上带着刚从地下带出的旧土，离奇的是，这一坏土正不停地向外渗着鲜红的液体，就像刚刚在血液里蘸过一样。 196 197 “这下子麻烦大喽。”老烟头把他的旱烟在地上敲了敲，接着道，“下面是个血尸嘎，弄不好我们这点儿当当，都要撂在下面噢。” 198 199 “下不下去喃？要得要不得，一句话，莫七里八里的！”独眼的小伙子说，“你说你个老人家腿脚不方便，就莫下去了，我和我弟两个下去，管他什么东西，直接给他来一梭子。” 200 201 老烟头不怒反笑，对边上的一个大胡子说：“你屋里二伢子海式撩天的，指不定什么时候就给翻盖子了，你得多教育教育，咱这买卖，不是有只匣子炮就能喔荷西天。” 202 203 那大胡子瞪了那年轻人一眼：“你崽子，怎么这么跟老太爷讲话，老太爷淘土的时候你他妈的还在你娘肚子里吃屎咧。” 204 205 “我咋说……说错了，老祖宗不说了嘛，那血尸就是个好东西，下面宝贝肯定不少，不下去，走嘎一炉锅汤。” 206 207 “你还敢顶嘴！”大胡子举手就打，被老烟头用烟枪挡了回去。 208 209 “打不得，你做伢那时候不还是一样，这叫上梁不正下梁歪！” 210 211 那独眼的小伙子看他老爸被数落了，低下头偷笑，老烟头咳嗽了一声，又敲了那独眼的少年一记头棍：“你笑个啥？碰到血尸，可大可小，上次你二公就是在洛阳挖到这东西，结果现在还疯疯癫癫的，都不知道着了什么道。等一下我先下去，你跟在我后面，二伢子你带个土耗子殿后，三伢子你就别下去了，四个人都下去，想退都来不及退，你就拉着土耗子的尾巴，我们在里面一吆喝你就把东西拉出来。” 212 213 年纪最小的那少年不服气了：“我不依，你们偏心，我告诉我娘去！” 214 215 老烟头大笑：“你看你看，三伢子还怯不得子了，别闹，等一下给你摸把金刀刀。” 216 217 “我不要你摸，我自己会摸。” 218 219 那独眼老二就火了，一把揪住老三的耳朵：“你这杂家伙跟我寻事觅缝啰，招呼老子发宝气喃？！” 220 221 那年纪最小的少年看样子平日挨过不少揍，一看他二哥真火了，就吓得不敢吭声了，直望着他爹求救，怎料他爹已经去收拾家伙去了。他二哥这下得意了：“你何什咯样不带爱相啰，这次老头子也不帮你，你要再吆喝，我拧你个花麻鸡吧！” 222 223 老烟头拍拍老二的肩膀，大叫一声：“小子们，操家伙啰！”说完一把旋风铲已经舞开了。 224 225 半个小时候后，盗洞已经打得见不到底了，除了老二不时上来透气，洞里连声音都听不清楚了，老三等得不耐烦起来，就朝洞里大叫：“大爷爷，挖穿没有？” 226 227 隔了有好几秒，里面才传来一阵模糊的声音：“不……知道，你……待在上面，拉好……好绳子！” 228 229 是他二哥的声音，然后听到他那老烟头咳嗽了一声：“轻点声……听！有动静！” 230 231 然后就是死一般的沉寂。 232 233 老三知道下面肯定有什么变故，吓得也不敢说话了，突然他听到一阵让人毛骨悚然的咯咯声，好像蛤蟆叫一样的从洞里发出来。 234 235 然后他二哥在下面大吼了一声：“三伢子，拉！” 236 237 他不敢怠慢，一蹬地猛地拽住土耗子的尾巴，就往外拉，刚拉了几下，突然下面好像有什么东西咬住了，竟然有一股反力把绳子向盗洞里拉去，老三根本没想过还会有这种情况，差点就被拉到洞里去，他急中生智，一下子把尾巴绑在自己腰上，然后全身向后倒去，后背几乎和地面成了30度角，这个是他在村里和别的男孩子拔河的时候用的招数，这样一来他的体重就全部吃在绳子上，就算是匹骡子，他也能顶一顶。 238 239 果然，这样一来他就和洞里的东西对峙住了，双方都各自吃力，但是都拉不动分毫，僵持了有十几秒，就听到洞里一声盒子炮响，然后听到他爹大叫：“三伢子，快跑！！！！！！”就觉得绳子一松，土耗子嗖一声从洞里弹了出来，好像上面还挂了什么东西！那时候老三也顾不得那么多了，他知道下面肯定出了事情了，一把接住土耗子，扭头就跑！ 240 241 他一口七跑出有二里多地，才敢停下来，掏出他怀里的土耗子一看，吓得大叫了一声，原来土耗子上勾着一只血淋淋的断手。他认得那手的模样，不由哭了出来，这手是分明是他二哥的。看样子他二哥就算不死也残废了。想到这里，他不由一咬牙，想回去救他二哥和老爹，刚一回头，却看见背后蹲着个血红血红的东西，正直勾勾地看着他。 242 243 这老三也不是个二流货色，平日里跟着他老爹大浪淘沙，离奇的事情见过不少，知道这地底下的，什么事情都有可能发生，最重要的不是大惊小怪，而是随机应变，要知道再凶险的鬼也强不过一活人，这什么黑凶白凶的，也得遵守物理定律，一梭子子弹打过去，打烂了也就没什么好怕的了。 244 245 想到这里，他把心一横，一边后退，一边腰上别着的一支匣子炮已经拽在手里，开了连发，只要那血红的东西有什么动静，就先给他劈头来个暴雨梨花。谁知道这时候那血红的东西竟然站起来了，老三仔细一看，顿觉得头皮发麻，胃里一阵翻腾，那分明是一个被剥了皮的人！混身上下血淋淋的，好像是自己整个儿从人皮里挤了出来一样。可是这样的一个人，竟然还能走动，那真是奇迹了，难道这就是血尸的真面目？ 246 247 想着，那血尸一个弓身，突然就扑了过来，一下子老三就和他对上眼了，那血淋淋的脸一下子就贴着他的鼻子，一股酸气扑面而来，老三顺势向后一倒，同时匣子炮整一梭子子弹全部近距离打在了那东西胸膛上，距离过近，子弹全部都穿了过去，把那东西打的血花四溅，向后退了好几步。老三心中暗喜，再一回手对准那东西的脑袋就一扣扳机，就听喀嚓一声，枪竟然卡壳了！ 248 249 这把老匣子炮是当年他二爷爷从一个军阀墓里挖出来的，想来也没用了多少年月，可惜这几年跟着他爹爹到处跑，也没工夫保养，平时候开枪的机会也少之又少，谁知道竟然在这节骨眼上卡壳了。那老三也真不简单，一看枪不好使唤，轮圆了胳膊用吃奶的力气把枪给砸了过去，也不管砸没砸到，扭头就跑。这次他连头也不敢回，看准前面一颗大树就奔了过去，寻思着怎么着它也不会爬树吧，突然脚下一绊，他一个狗吃屎，整张脸磕在一树墩上，顿时鼻子嘴巴里全是血。 250 251 老三狠狠一巴掌拍在地上，心里那个气啊，妈的怎么就这么背。 252 253 这时候听到后面风声响起，知道阎王爷来点名了，心一横，死就死吧，索性就趴在地上不起来了。没成想，那具血尸好像没看到他一样，竟然从他身上踩了过去，那血淋淋的脚板马上在他背后印下一个印子，这血尸出奇的重，一脚下去，老三就觉得嗓子一甜，只觉胆汁都被像踩吐了出来，而且背上那被踩过地方马上一阵奇痒，眼前马上朦胧起来，他马上意识到自己可能中毒了，而且毒性还非常的猛烈，恍惚间他看到不远处的地方，他二哥的那只手里好像还握着什么东西。 254 255 他用力眨了眨眼睛，仔细一看，原来是一块古帛片。他心想，自家二哥拼了命都要带出来的东西，肯定不是寻常东西，现在又不知道他们怎么样了，我好歹得把东西收好，万一我真的死了，他们找到我的尸体，也能从我身上找得着，那二哥的这只手也不算白断了，我也不至于白死。他一边这么想着，一边艰难地爬过去，用力掰开二哥紧握的手把那帛片从掌心里拿出来，塞进了自己袖子里。 256 257 这个时候他的耳朵也开始蜂鸣了，眼睛就像蒙了一层纱一样，手脚都开始凉起来。按他以往的经验，现在他裤裆里肯定大小便一大堆，中尸毒的人都死得很难看，他现在最希望的是不要给隔壁村的二丫头看见自己这个样子。 258 259 他就这么混混着胡想，脑子已经不怎么听他使唤了，这时候他又开始隐隐约约地听到他在盗洞口听到的那种咯咯怪声。 260 261 老三隐约觉得一丝不对，刚才和血尸搏斗了这么些时候，也没听它叫过一声，现在怎么又叫起来了？难道刚才的那只并不是血尸？那刚才看到的又是什么东西呢？可惜这个时候他已经基本无法做思考了，他条件反射地抬起头看了一下，只见一张巨大的怪脸正俯下身子看着他，两只没有瞳孔的眼睛里空荡荡地毫无生气。 262 263 264 <hr /> 265 <a href="#top" >返回顶部位置</a> 266 <a href="#center" >返回中间位置</a> 267 <hr /> 268 269 </body> 270 </html>
7.表格标签(*****)
(1) <table>：声明表格的范围
属性： border="1"表格的外边框粗细
cellspacing:表格的内边框粗细
width：表格的宽度
height:表格的高度
bordercolor:边框颜色
bgcolor：背景的颜色
cellpadding：内边距
align:文字的水平位置 left,center,right
valign:文字的垂直位置 top,middle,bottom
<caption>标题</caption>
<tr>：代表表格的行
属性：align：文字的对齐方式
<td>：单元格
属性：width:宽度
height：高度
单位为像素，也可以是百分比。
合并单元格：
行合并：rowspan="2"
列合并：colspan="2"
</td>
</tr>
<tr>
<th></th>：单元格
</tr>
</table>
* 注意：td与th的区别：th默认居中并且加粗的，一般为表头标签
(2)表格的嵌套
在表格的单元格中嵌套一个表格。
表格可以用于布局页面。
每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。
THEAD、TFOOT包含关于表格列的信息。
TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。
eg:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <!-- 10 表格标签 11 <table>：声明表格的范围 12 * 属性： border="1" 13 width：表格的宽度 14 height:高度 15 bgcolor：背景的颜色 16 cellpadding：内边距 17 18 <caption>标题</caption> 19 <tr>：代表表格的行 20 * 属性：align：文字的对齐方式 21 22 <td>：单元格 23 属性：width:宽度 24 height：高度 25 合并单元格： 26 行合并：rowspan="2" 27 列合并：colspan="2" 28 </td> 29 </tr> 30 <tr> 31 <th></th>：单元格 32 </tr> 33 </table> 34 35 * 注意：td与th的区别：th默认居中并且加粗的 36 --> 37 38 <table border="1" width="50%" bgcolor="grey" cellpadding="10"> 39 <caption>明星列表</caption> 40 <tr> 41 <th>姓名</th> 42 <th>性别</th> 43 <th>爱好</th> 44 </tr> 45 <tr align="center"> 46 <td>谢霆锋</td> 47 <td>男</td> 48 <td>王菲</td> 49 </tr> 50 <tr align="center"> 51 <td>王菲</td> 52 <td>女</td> 53 <td>李亚鹏</td> 54 </tr> 55 <tr align="center"> 56 <td>李亚鹏</td> 57 <td>男</td> 58 <td>张柏芝</td> 59 </tr> 60 <tr align="center"> 61 <td>张柏芝</td> 62 <td>女</td> 63 <td>陈冠希</td> 64 </tr> 65 </table> 66 67 <hr/> 68 69 <table border="1" width="50%" bgcolor="grey" cellpadding="10"> 70 <caption>用户列表</caption> 71 <tr> 72 <th>编号</th> 73 <th>姓名</th> 74 <th>性别</th> 75 <th>爱好</th> 76 </tr> 77 <tr align="center"> 78 <td>1</td> 79 <td>张三</td> 80 <td>女</td> 81 <td>男</td> 82 </tr> 83 <tr align="center"> 84 <td>2</td> 85 <td>赵四</td> 86 <td>男</td> 87 <td>男</td> 88 </tr> 89 <tr align="center"> 90 <td>3</td> 91 <td>刘能</td> 92 <td>男</td> 93 <td>玉田</td> 94 </tr> 95 <tr align="center"> 96 <td colspan="4"> 97 统计：一共有<font color="red" size="5">3</font>人 98 </td> 99 </tr> 100 </table> 101 102 <hr/> 103 104 <table border="1" width="40%" cellpadding="10"> 105 <tr> 106 <td rowspan="3"> 107 <img alt="" src="bx.jpg" width="100" height="150"> 108 </td> 109 <td> 110 商品信息：冰箱 111 </td> 112 </tr> 113 <tr> 114 <td> 115 商品价格：1999元 116 </td> 117 </tr> 118 <tr> 119 <td> 120 <a href="success.html"><img alt="" src="gwc.png"></a> 121 </td> 122 </tr> 123 </table> 124 125 </body> 126 </html>
8.表单标签（重要**********）
(1)<form>：封装表单的范围。
属性： action="请求提交的路径" 如果没有定义action属性，那么默认提交到当前页面
method="表单的提交方式"
* 面试题：表单的提交方式有哪些？
* 答：表单的提交方式有很多，常用的有两种，get和post。
get和post提交方式的区别：
get方式提交时，会把数据显示在地址栏上。
post方式不会。
get方式提交时，安全级别较低。
post方式安全级别较高。
get方式提交时，数据大小有限制。
post方式不会。
综上所述：以后在进行表单 提交时：建议使用post提交。
(2)输入项的表单组件
<input />
非常重要的属性：type，根据type值的不同，提供了不同的输入项的组件。
例如：<input type="text" />
type=text 文本输入框
type=password 密码输入框
type=radio 单选按钮
提供了属性name（name的值是相同的）
默认被选中的：checked=checked或者true
type=checkbox 多选按钮
默认被选中的：checked=checked或者true
type=file 文件的选择框 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
type=hidden 隐藏组件 在页面上不显示，但在提交的时候随其他内容一起提交。
type=button 按钮（史上最难看的）
type=image 和提交按钮是相同的作用。
type=reset 重置 将表单中填写的内容设置为初始值。
type=submit 提交数据
(3)选择框
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
(4)文本域 如个人信息描述
<textarea rows="" cols=""></textarea>
</form>
（5）把表单用表格布局
<fieldset> <legend>注册信息</legend> <form > <table border="1" bordercolor="#0099FF" width="70%" cellpadding="10px" cellspacing="0"> </table> </form> </fieldset>
* 注意：点击了提交按钮后，地址栏发送了变化（?sex=on）* ?username=haha&sex=on
* ?username=zhangsan&pwd=123&sex=nan&love=lq
* input标签需要提供两个属性，一个属性name，一个是value
(*****)name属性必须要指定，value看情况指定。
eg:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <!-- 10 <form>：表单的范围。 11 12 * 属性： action="请求提交的路径" 13 14 method="表单的提交方式" 15 * 面试题：表单的提交方式有哪些？ 16 * 答：表单的提交方式有很多，常用的有两种，get和post。 17 * get和post提交方式的区别： 18 * get方式提交时，会把数据显示在地址栏上。 19 * post方式不会。 20 21 * get方式提交时，安全级别较低。 22 * post方式安全级别较高。 23 24 * get方式提交时，数据大小有限制。 25 * post方式不会。 26 27 * 输入项的表单组件 28 <input /> 29 * 非常重要的属性：type，根据type值的不同，提供了不同的输入项的组件。 30 * 列子：<input type="text" /> 31 32 type=text 文本输入框 33 type=password 密码输入框 34 type=radio 单选按钮 35 * 提供了属性name（name的值是相同的） 36 * 默认被选中的：checked=checked或者true 37 38 type=checkbox 多选按钮 39 * 默认被选中的：checked=checked或者true 40 41 type=file 文件的选择框 42 type=hidden 隐藏组件 43 type=button 按钮（史上最难看的） 44 type=image 和提交按钮是相同的作用。 45 46 47 * 选择框 48 <select name=""> 49 <option value="">北京</option> 50 </select> 51 52 * 文本域 53 <textarea rows="" cols=""></textarea> 54 55 type=reset 重置 56 type=submit 提交数据 57 58 </form> 59 60 * 注意：点击了提交按钮后，地址栏发送了变化（?sex=on）* ?username=haha&sex=on 61 * ?username=zhangsan&pwd=123&sex=nan&love=lq 62 63 * input标签需要提供两个属性，一个属性name，一个是value 64 (*****)name属性必须要指定，value看情况指定。 65 66 --> 67 68 <form action="" method="post" > 69 输入姓名：<input type="text" name="username" /><br/> 70 输入密码：<input type="password" name="pwd" /><br/> 71 选择性别：<input type="radio" name="sex" value="nan"/>男 <input type="radio" name="sex" checked="checked" value="nv"/>女<br/> 72 选择爱好：<input type="checkbox" checked="checked" name="love" value="zq"/>足球 73 <input type="checkbox" name="love" value="pq"/>排球 74 <input type="checkbox" name="love" value="lq"/>篮球<br/> 75 上传附件：<input type="file" name="myfile" /><br/> 76 77 隐藏组件：<input type="hidden" name="userId" value="001"/><br/> 78 79 80 选择城市： 81 <select name="city"> 82 <option value="none">--请选择--</option> 83 <option value="bj">北京</option> 84 <option value="sjz">石家庄</option> 85 <option value="lf">廊坊</option> 86 </select> 87 <br/> 88 89 个人简历： 90 <textarea rows="10" cols="10" name="desc"></textarea> <br/> 91 92 <input type="reset" value="重置数据"/><input type="submit" value="提交数据"/> 93 <input type="button" value="我是按钮"/><input type="image" src="tj.png" /> 94 95 </form> 96 97 </body> 98 </html>
9.框架标签（用的比较少）
<frameset></frameset>
(1)窗口框架的建立
将网页分割成几个部分，在每个部分分别显示不同内容。
注：框架标签不可以放到<body>里，一般为了代码的可读性，会到<head>和<body>之间。或者不要body也可以。
frameset:窗口框架的标签
frame:单个使用的子窗口
rows:垂直分割
cols:水平分割
*表示分配给前面所有窗口后剩下的高度或宽度。
(2)混合分割
(3)子窗口的边框设置
frameset的属性：
隐藏所有边框 frameborder=0 隐藏子窗口边框
将窗口边框加粗 border=10
(4)窗口滚动条的设置
在右窗口中不显示滚动条：scrolling="no" yes
frameborder设置隐藏边框，值有两个，0代表不显示，1代表显示，默认显示。还可以在<frame>中使用。
src 设置子窗口显示的内容
scrolling 控制滚动条的显示，值：yes 显示、no 不显示、auto 自动显示（默认）
注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身， 如：noresize=”noresize”
(5)窗口的导航显示
index,top,left,main
(6)神奇的iframe标签
作用：配合表格，在网页的任何地方插入窗口
*注意：框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。
恶意操作:
<iframe src=”xx.js”></iframe>
eg:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title> 6 </head> 7 8 <frameset rows="180,*"> 9 <frame /> 10 <frameset cols="150,*"> 11 <frame> 12 <frame> 13 </frameset> 14 </frameset> 15 16 17 <body> 18 19 </body> 20 21 22 </html>
10.头标签
(1)头标签都放在<head></head>头部分之间。包括：title base meta link
(2)<title>：指定浏览器的标题栏显示的内容。
(3)<base>：为页面上的所有链接规定默认地址或默认目标。
href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。
target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。或者只演示_blank的功能
<base href="http://www.baidu.com" target="_blank" /> <a href="#">点击</a>
(4)<meta>：可提供有关页面的基本信息
name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv 属性：模拟HTTP协议的响应消息头。
例：
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" />
表示打开此页面3秒后自动转到新浪页面。
(5)<link>：定义文档与外部资源的关系。
rel 属性：描述目标文档与当前文档的关系。
type 属性：文档类型。
media：指定目标文档在哪种设备上起作用。
例：
<link rel="stylesheet" type="text/css" media="screen,print" href="a.css" />
11.HTML中多媒体文件的使用
（1）多媒体文件的链接
单击<a href="zxmzf.mp3">最炫名族风</a><br />
单击<a href="jw.wmv">最炫名族风</a>
（2）多媒体文件的嵌入
<embed src="zxmzf.mp3" width="300" height="300" autostart="true" loop="true"></embed> <embed src="jw.wmv" width="300" height="300" autostart="true" loop="true"></embed>
src:指定嵌入多媒体文件的名称
width:播放器的宽度
height:播放器的高度
autostart:是否自动播放。默认为no
loop:设置播放次数。为true时，无限制的重复播放。直到离开此网页或者单击停止。
（3）在网页中加入背景音乐
<bgsound src="zxmzf.mp3" loop="-1" />
Loop 播放次数，0或1都为播放一次，-1循环播放
6、页面设计的原则与细节：
