一个网页学者对初学静态网页的思考和总结，通过这篇文章可以让许多网页初学者，对学习网页设计带来一定的指引，文中将会提到学习网页设计将要利用到的，和一些简单网页效果的制作，
工具/原料
MyEclipse/Dreamweaver
html基础知识
1、华丽的网页界面，都是由静态网页和一些动态效果，插入的视频，和flash等等，不得不说，静态网页的制作，是学习网页的必经之路，可见静态网页在学习网页的前端是十分重要。静态网页主要是通过html制作。 现在我来简单的介绍一下html吧，html是一种超文本标记语言，静态网页也是由，html的标记和标记中的属性，来体现出来，在这里我提及几个在html十分常用的标记。html里面有双标记和单标记之分，那么我就由单标记先提起吧单标记是用一个标记就能完整的意思的标记，首先我来介绍一下他的语法特点是<标签名称>一般最常用的单标记有<br>,它是用来表示换行，<hr>我们时常利用它来划分上下文的内容，它相关的属性有align,noshade,size,width,<img>是图片标记，它通过属性url来引入图片路径，通过width,heigth,align等属性来设置图片的大小，位置，<input>这个标记显示文本框，按钮，等等，令属性type=button,checkbox,password,radio,reset,submit,text,将可以分别显示，普通按钮，复选框，密码，单选按钮，重置按钮，提交按钮，文本框。
2、接下来介绍一下常用的双标记,他的语法特点是这样的<标记名称></标记名称>在两个标记之间，加入你需要体现的内容<head></head>标签用于定义文档的头部，它是所有头部元素的容器<head><title>文档的标题</title></head>这样可以显示文档的标题<center></center>可以使标记中的图形或文本在水平方向居中显示<dl></dl><dt></dt><dd></dd>创建一个普通的列表<ol><li></li></ol>:创建一个有序列表，<ul><li></li></ul>创建一个无序列表<h1></h1>......<h6></h6>:把文本以标题方式显示。<h1>到<h6>分别表示不同字号大小的标记另外还有<a></a>这个表示链接，<font></font>表示字体的设置，<body></body>这个标记间放入网页显示内容，还有<tr><td></td></tr>是显示表格其他的标签本文就不一一介绍了。
静态网页的大体框架
1、下面我来展示一个网页的大体模板是什么!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 这部分一般网页编辑器都会自动生成 ，表示网页显示的格式<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文档的标题</title> 这里显示的是文档的标题<meta name="keywords" content='手机,电脑,MP3.....' /> 这里是文档的搜索关键字<meta http-equiv="content-type" content="text/html; charset=UTF-8" />这里是网页文档使用的类型<meta name="description" content="手机电脑，MP3。" />这里是对文档的描述也即是你在百度搜索到一个网页在标题下面那些对网站的描述</head><body bgcolor="#00CCFF"> 网页中显示的部分的开始,同时设置了网页背景颜色 <p align="center" ><b><a name="b">文章的标题</a></b></p> 这里显示的网页文章的标题，同时设置一个锚点，也即是在文章这里设计一个标记，并且，令标记名字为b,这样当点击网页尾部链接便可以回到网页文章标题的位置<ul type="square"> <li><a herf="百度的网址">打开百度</a></li> <li>a herf="谷歌的网址">打开Google</a></li> 这里有一个无序列表，用来指引别人打开百度或谷歌，也是无序列表结合链接的应用</ul> <hr color="#0099CC"/>这是个水平线可以隔开上下文的内容<marquee direction="down" width="200" height="200" behavior="scroll" scrollamount="2" id="lk" ><a href="里面填入网址" onmouseover="lk.stop()" onmouseout="lk.start()" >上下移动的文字</a></marquee>这个可以实现上下移动的文字，文字有一个链接，onmouseout这个当鼠标离开，实现开始移动，onmouseover="lk.stop()" 鼠标经过，则移动的文字停止 <font size="+4"><a href="#b">返回页首</a></font>这里对应一开始的文档标题锚点链接的名字，所以点击这个链接将回到刚开始标记的位置，href要填写前面锚点标记的名称这里对应了 前面的b,但需在前面加一个#,也即是#b</body>这个文档的结束</html>
实例学习
1、在看一个实例吧<form> 这个是一个交互表单的实例<table align="稆糨孝汶;center" width="600" cellpadding="5"> 这里引用了一个表格<tr><td colspan="2" bgcolor="#FFFFFF" align="center"><font size="+2" color="#FF0000">欢迎来留言哦</font></td></tr> <td>表示表格的列，并且colspan也即是合并两列的意思<tr><td width="150">我的姓名</td><td width="450"><span id="sprytextfield1"> <label for="text1"></label> <input type="text" name="text1" id="text1" /> 这里显示文本框 请填写姓名 <span class="textfieldRequiredMsg">。</span></span></td></tr> <tr><td width="150">我的Email</td><td width="450"><span id="sprytextfield2"> <label for="text2"></label> <input name="text2" type="text" id="text2" value="@qq.com" /> <span class="textfieldRequiredMsg">需要提供一个值。</span><span class="textfieldInvalidFormatMsg">格式无效。</span></span></td></tr> <tr><td width="150">我的职业</td><td width="450"><input type="radio" name="face"/><img src="a.gif"/><input type="radio" name="face"/><img src="a.gif"/><input type="radio" name="face"/><img src="a.gif"/><input type="radio" name="face"/><img src="a.gif"/></td></tr> <tr><td width="150">说话表情</td><td width="450"><input type="checkbox" />体育运动<input type="checkbox" />体育运动<input type="checkbox" checked="checked" />体育运动<input type="checkbox" />体育运动</br><input type="checkbox" checked="checked"/>体育运动<input type="checkbox" disabled="disabled" />体育运动</td></tr> 这里显示了一个复选框<tr><td width="150">兴趣爱好</td><td width="450"><select> <option>林志颖</option><option selected="selected">林志颖1</option><option>林志颖2</option></td></tr> 这里是一个单选框<tr><td width="150">我的留言</td><td width="450"><textarea cols="40" rows="10"></textarea></td></tr> <tr><td width="150">添加附件</td><td width="450"><input type="file" size="10"/></td></tr> 这里一个上传文件的按钮<tr><td colspan="2" align="center"><input type="submit" value="提交"/><input type="reset" </td></tr> 这里是一个重置和提交的按钮 </form>
