HTML网页编程
前 言：
☆静态页面和动态页面
网站页面分为静态页面和动态页面两种
• 静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器；
• 动态页面：服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器，动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等编写。
☆HTML学习要求
掌握手写HTML实现一般难度的Web页面的能力（如网站注册表单），为JavaWeb学习打基础。坚持手写HTML。
HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是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>HTML概述</title>
</head>
<body>
HTML Hello World!!! 湖南城市学院<br/>
一个网页大多由以下要素构成：文字、图片、表格、动画及声音。在这些元素中，文字是十分重要的。下面我们就逐一讲述涉及文字的标记。
字体大小设置演示：<br/>
<small>小字体</small> <big>大字体</big>
<!-- 利用<font size=''></font>标签指定字体的大小 -->
<font size=5>你是我的小丫小苹果</font>
<basefont size="12"><br/>
<!-- 下标签演示-->
5<sub>2</sub>
<!-- 上标签演示 -->
5<sup>2</sup>
<hr/>
<!-- 粗体演示 -->
<b>粗体演示</b>
<!-- 下面的斜体演示好像已经被现在浏览器版本淘汰了，效果已经演示不出来了 -->
<l>斜体演示</l>
<u>加下划线演示</u>
<strike>加删除线演示</strike><hr/>
<!-- 特殊标记的演示 -->
小于号：<<br/>
大于号：><br/>
"&"号：&<br/>
单引号："<br/>
特殊R标签：®<br/>
特殊c标签：©<br/>
TM标签：™
<hr color="red"/>
列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。
<dl>
<!-- 两者的区别好像比没有得到很明显的区别！ -->
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
<dt>上层项目</dt>
</dl>
<br/>
<!-- 下面两个的作用好像并没有得到很大的显示！ -->
<dir>目录</dir>
<menu>菜单</menu>
<br/>
下面演示两个有用的标签---有序列表和无序列表<br/>
无序列表<br/>
（注意：在没有设置类型值得时候默认为disc--实心圆圈）无序列表的几个属性值：1）disc：实心圆圈2）square实心矩形3）circle：空心圆圈<br/>
<ul type="circle">
<li>李白</li>
<li>王安石</li>
<li>杜甫</li>
<li>欧阳修</li>
</ul>
有序列表<br/>
类型值和上面的无序列表是一样的只是改变了图形的形状！start="n"中的n是一个数字，此标记符表示重新定义的起始号。<br/>
期末考试成绩排名前四名：
<ol type="i" start="1">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>Rose玫瑰</li>
</ol>
</body>
</html>效果图展示：
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>HTML概述</title>
</head>
<body text="#000000">
表格演示（创建复杂表格）：
<table border="1" width="300" height="150" cellspacing="0" cellpadding="10" bgcolor="gray" >
<!-- caption标签用来指定表格的标题！自动默认居中（整个表格的中间），该标签可以设置在表格中的位置：top，left，bottom，right，但是left和right好像被现在版本的浏览器淘汰了！效果演示不出来 -->
<caption align="top">表格标题</caption>
<tr> <th bgcolor="yellow">表头1</th> <th colspan="2">表头2~表头3</th> </tr>
<!-- 使用nowrap标签来进行激活自动换行的屏蔽功能！每行不论多长都不具备换行的效果 -->
<tr> <td nowrap="nowrap" width="100">1行1列</td> <td>1行2列</td> <td>1行3列</td> </tr>
<tr> <td rowspan="2">2行1列~3行1列</td> <td>2行2列</td> <td>2行3列</td> </tr>
<tr> <td bgcolor="blue">3行2列</td> <td>3行3列</td> </tr>
</table>
<hr/>
超链接演示：
<a href="file:///E:/MyEclipse10/Workspaces/newHtml/WebContent/Demo.html">HTML演示一超链接传送门</a>
<br/>
<!-- font标签中使用face属性来设置字体的形状：例如：face="黑体" -->
<font size="5" color="red" face="微软雅黑">使用font标签是字体颜色和大小发生变化</font>
<hr/>
图片显示演示：
<img alt="图片路径没找到" src="../imgs/1.jpg" width="300" height="150" align="top">
<img alt="图片路径没找到" src="../imgs/2.jpg" width="300" height="150" align="top">
<img alt="图片路径没找到" src="../imgs/3.jpg" width="300" height="150" align="top">
<hr color="red"/>
画中画演示：
<iframe src="file:///E:/MyEclipse10/Workspaces/newHtml/WebContent/Demo.html">
画中画演示：这个很强的--之后和ajax演示一起使用很强！
</iframe>
</body>
</html>
