标签：
第一天：HTML基础内容。 超文本标记语言,Hyper Text Makeup Language.
列表（清单），表格，框架，和表单，四个方法还不是很熟练。
列表，list,分OL和UL，表格的每个单元是li，格式是
<ul >我在过马路
<li>人才</li>
<li>资本</li>
<li>市场</li>
</ul>
<ol type="1"><li>我们是一个人</li>
<li>我们是两个人</li>
</ol>
<ul type="disc">
<li>我们是一个人</li>
<li>我们是两个人</li>
</ul>
如果不想要前面的序号，则需要用到CSS，基本的HTML是无法修改的（css中在UL选择器中添加 list-style：“none”说明）
观察网页中的源文件，很多都是用列表的结构来做的。
表格，table(画一个容器),tr(画一个表格列),td（画一个储存格）。
<table border="1" bgcolor="gray" cellspacing="5" cellpadding="3" bordercolor="#FF00FF" color="dark" cols="4" width="80%">
<caption>我们一起唱歌</caption>
<tr align="center">
<td bgcolor="red" align="center" rowspan="3">我们在一起</td>
<td>真的吗？</td>
<td>真的吗？</td>
</tr>
<tr>
<td colspan="2">我们在一起</td>
</tr>
<tr>
<td >我们在一起</td>
<td >我们在一起</td>
</tr>
</table>
</center>
表格用CSS的话使用绝对定位相对定位浮动什么的也可以。
框架,有一个iframe还不错，w3school上面也有看到，frameset和frame用的少
<iframe src=”http://www.baidu.com”width=”100%”>
在live writer如果写的话会加载网页，应该是设置的问题。
表单，forumn，也是一个容器，有一个作业说明的挺好，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<B>免费开通人人网帐号</B> <br><br>
<form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
　　注册邮箱：
<input type="Text" name="phone" value="" size="27" maxlength="8">
<br><br>
　　　 　 　 　 你还可以使用<a href="index.html" name="zh" > 帐号</a>或者<a href="index.html" name="sjh" >手机号</a> 注册<br><br>
　　创建密码：
<input type=="Text" name="password" value="" size="27" maxlength="8">
<br><br>
　　真实姓名：
<input type="Text" name="name" value="" size="27" maxlength="8">
<br><br>
　　性别：<input type="Radio" name="gender" value="" >男<input type="Radio" name="gender" value="" checked>女
<br><br>
　　生日：
<select name="birthday">
<option value="a">1991</option>
<option value="b" selected>1992</option>
<option value="c">1993</option>
<option value="d">1994</option>
<option value="e">1995</option>
</select>
年
<select name="birthday">
<option value="a">1</option>
<option value="b" selected>2</option>
<option value="c">3</option>
<option value="d">4</option>
<option value="e">5</option>
</select>
月
<select name="birthday">
<option value="a">1</option>
<option value="b" selected>2</option>
<option value="c">3</option>
<option value="d">4</option>
<option value="e">5</option>
</select>
日
<br><br>
　　我现在：
<select name="position">
<option value="gd" >广东</option>
<option value="hn" >湖南</option>
</select>
<br><br>
　　　　　　　　<input type="Image" name="submit" align="BOTTOM" src="verycode.gif">
　　 <a href="index.html" name="zh" >看不清换一张</a>
<br><br>
　　验证码:
　　<input type="Text" name="yzm" value="" size="10" maxlength="10">
<br><br>
　　
<input type="Image" name="submit" align="BOTTOM" src="btn_reg.gif">
<br><br>
　　用户留言<br><br>
<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL" >
这是预设的字句，通常留空的，随你喜欢。</textarea></form>
</body>
</html>将其中图片替换之即可。
类型比较多，用时查表即可。
还有一个<Link>(用于head间
<link href="URL" rel="relationship">
)和<a>（<a href="index.html" name="hello" target="_top"> ）以及<img>（<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> ）的标签挺有用的。还有在<head>标签里面用的<meta>里面有个
<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">可以实现自动刷新，挺有用的，其他的用于搜索引擎，以及HTML文件和编码语系列。
也可插入多媒体，比如音乐、视频等。
还有一些<big> <strong>字体设定之类的。
HTML主要是掌握一些主要的结构，HTML页面,HEAD头，body还是框架,多用P来标记段落和用小标题来区分字体的大小。HTML相当于是一副骨架，骨架好了，才好用CSS来穿衣服，不用花太多功夫，CSS就能装点美丽。
第二天：CSS基础。
CSS东西太多，主要是掌握和HTML结合的方式以及CSS的几种选择器。
和HTML结合的方式有四种，行内（直接在标签内的类型中使用,但只作用于具体标签
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
),内嵌结合(写在HEAD内，可作用于全局
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
），导入(写一个js，导入进去
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}
</style>
),链接(用link链接进去<link rel="stylesheet" type="text/css" href="css_3.css" />)。
考虑代码规范和样式优先级，就近原则；从上到由外到内，优先级降低。
选择器有六种,HTML标签选择器，class选择器(.可以作用于多个),id选择器（#一个标签只能用一个id)，上下文选择器(用空格 可作用多个比如div.li），组合选择器（用逗号），伪元素选择器（主要是链接的hover,linked,activied等）。
其他就是一些常见操作，比如对字体、定位（position、clear、float、z-index)、盒子模型（border、margin、padding）、curson(似乎用的少，不过作为用户体验还是挺不错的)、文本、背景、列表等。查表即可。在定位的时候要理解CSS的流的思想，以及盒子的模型。
有一个菜单的代码，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>菜单制作</title>
<style type="text/css">
ul li{list-style:none;
float:left;
}
#menu{background-color:#383838;
width:980px;
height:30px;
margin:0 auto;
}
#menu li a{color:white;
text-decoration:none;
padding:0 15px;
font-size:25px;
font-weight:bold;
display:block;
line-height:30px;
}
#menu li a:hover{background:url(‘image/forumMenuBg.jpg‘) repeat-x;
}
</style>
</head>
<body>
<!--导航菜单开始-->
<div id="menu">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">学习论坛</a></li>
<li><a href="#">学员问答</a></li>
<li><a href="#">IT圈子</a></li>
<li><a href="#">实时课堂</a></li>
<li><a href="#">客户端下载</a></li>
<li><a href="#">帮助中心</a></li>
</ul>
</div>
<!--导航菜单结束-->
</body>
</html>
草草写就，有空修正，尽量写短。
标签：
原文地址：http://www.cnblogs.com/likeshu/p/4389019.html
