HTML：HyperText Markup Language 即超文本标记语言，不同于程序设计语言，它只能建议浏览器以什么方式或结构显示网页内容，是网页的基础架构。
CSS: Cascading Style Sheets 即层叠样式表，简称样式表，是网页页面排版样式标准，它弥补了HTML对网页格式化的不足，起到排版定位的作用。
顺便说一下JavaScript。HTML和CSS配合使用，提供给用户的只是一种静态信息，缺少交互性，出于这样一种需求，JavaS应运而生，实现了实时动态交互的页面功能。
HTML
html文件是以标签对或标签来标记网页结构和显示网页内容的。大部分标签都以标签对显示存在，即以“<标签名>”开始，以“</标签名>”结束。
一个最简单的html如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
</html>
HTML文档以<html>标签开始</html>结束 主要包含两个部分：文档头（以<head>标签开始</head>结束）和文档体（以<body>标签开始</body>结束）
文档头中常包含标题(<title>) 文件信息（<meta>）如文件关键字 类型格式 网页过期时间 样式表等
html文档编写时不区别大小写，但是标记中不要有空格，标记中的属性可以用双引号括起来，也可以不用。
常见body属性
| bgcolor | 设置背景颜色 |
| topmargin leftmargin rightmargin bottommargin | 设置页面边距 |
| text | 设置正文颜色 |
文字与段落效果
编辑网页文字样式<font face=" " size=" " color=" "></font> 主要设置文字的字体字号和颜色等
<b>加粗的文字</b>
<i>斜体的文字</i>
<u>添加下划线的文字</u>
文字上下标 <sup></sup> <sub></sub>
段落标记<p></p>
回车<br>
预格式化<pre></pre>对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落
文字居中显示<center></center>
<blockquote>段落缩进
插入并设置水平线<hr>其属性有
| 属性 | 说明 |
| width | 设置水平线宽度，可以是像素或百分比 |
| size | 设置水平线高度 |
| noshade | 设置水平线无阴影 |
| color | 设置水平线颜色 |
| align | 设置水平线居中对齐 |
建立和使用列表
| 列表类型 | 标记符号 |
| 定义列表 | dl |
| 无序列表 | ul |
| 目录列表 | dir |
| 菜单列表 | menu |
| 有序列表 | ol |
1.插入定义列表<dl>
<dl>
<dt>名称<dd>说明
<dt>名称<dd>说明
<dt>名称<dd>说明
</dl>注：dt标记定义了列表项的名称部分，同时此标记只在dl标记中使用
2插入无序列表<ul>
<ul>
<li>名称</li>内容
<li>名称</li>内容
<li>名称</li>内容
</ul>3插入目录列表<dir>
<dir>
<li>名称</li>内容
<li>名称</li>内容
<li>名称</li>内容
</dir>4菜单列表<menu> 只需要单个li标记显示菜单列表项目值
<menu>
<li>名称
<li>名称
<li>名称
<menu><ol Type=" ">
<li>名称</li>内容
<li>名称</li>内容
<li>名称</li>内容
</ol>2-4的列表符号都是一行的前面显示小圆点，有序列表可以自定义列表符号 ，默认为 1,2,3.....
其他取值有a，A ，i等，对于列表符号分别为 a,b,c,...;A,B,C,.... 罗马数字i等
超链接<a href="URL">链接内容</a>
图像映射：单击网页中的某个图片可以跳转到相应的网页页面
利用<img>标记插入图像文件 src文件路径
<map>标记表示插入图像映射 rshape表示映射区域形状有 rect 矩形 cicle椭圆形poly多边形等 coords表示感应区域坐标
<img src="URL" usemap=" "></img> <map name=" "> <area shape=" " coords=" , , ," href="URL"> </map>制作表格
基本结构
<pre name="code" class="html"><table>
<caption>插入表格标题</caption>
<tr>
<td><td>
</tr>
</table>
<tr>表示插入一行<td>表示插入一列
设置表格表头<th>,要将某一行作为表格文件的表头，只要将该行包含的列标记<td>改为<th>即可，表头默认粗体显示居中对齐
设置划分结构表格<thead><tbody><tfoot>
所谓划分结构表格，是指将一个表格划分为三个部分在网页上显示。分别使用<thead></thead><tbody></tbody><tfoot></tfoot>标记
<thead></thead>表示定义一组表头行
<tbody></tbody>表示定义表格主体部分
<tfoot></tfoot>表示为表格添加一个标注
设置表格标记属性
<table>属性
设置表格的宽度和高度width 和height
设置表格的边框属性 border边框粗细 bordercolor边框颜色
设置边框样式frame和rules 可以设置边框部分显示
设置表格背景bgcolor
<tr><td>属性
调整行内容水平对齐<tr align="left|center|right">
调整行内容锤子对齐<tr align="top|middle|bottom|baseline"> 分别表示内容顶端对齐 居中对齐 低端对齐 基线对齐
设置跨行 单元格纵向合并 <td rowspan="2"> 单元格跨2行
设置跨列 单元格横向合并<td colspan="2"> 单元格跨2列
设置单元格间距cellspacing和单元格边距cellpadding
表单
是网页中提供的一种交互式操作手段
表单标记<form></form> 部分属性如下
| 属性 | 说明 |
| name | 设置表单名称 |
| method | 设置表单发送方法post或get |
| action | 设置表单处理程序 |
| enctype | 设置表单编码方式 |
| target | 设置表单显示目标 |
常用控件
| 类型 | 说明 |
| 文本框 text | type=“ text” |
| 密码框 | type="password" |
| 文件域 | type="file" |
| 复选框 | type="checkbox" |
| 单选框 | type="radio" |
| 普通按钮 | type="button" |
| 提交按钮 | type="submit" |
| 重置按钮 | type="reset " |
| 图像域（图像按钮） | type="image" |
插入隐藏域<input name=" " type="hidden" value=" "> 对用户不可见，但是随表单将数据发送给服务器
插入下拉菜单和列表项
<form ><select name=”爱好” size=4 >
<option value="1">音乐
<option value="2">美术
<option value="3">体育
</select>
<select name="特长" >
<option value="1">唱歌
<option value="2">画画
<option value="3">长跑
</select>
</form>如图所示
表单实际应用
<html>
<head>
<title>表单应用</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="408" border="1" align="center">
<tr>
<td width="34" height="32"> </td>
<td colspan="2">会员注册</td>
</tr>
<tr>
<td> </td>
<td width="83"><div align="right">用户名：</div></td>
<td width="269"><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">密码：</div></td>
<td><input type="password" name="textfield2"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">确认密码：</div></td>
<td><input type="text" name="textfield3"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">性别：</div></td>
<td><input type="radio" name="radiobutton" value="radiobutton">
男
<input type="radio" name="radiobutton" value="radiobutton">
女</td>
</tr>
<tr>
<td> </td>
<td><div align="right">爱好：</div></td>
<td><input type="checkbox" name="checkbox" value="checkbox">
体育
<input type="checkbox" name="checkbox2" value="checkbox">
音乐
<input type="checkbox" name="checkbox3" value="checkbox">
文学
<input type="checkbox" name="checkbox4" value="checkbox">
其它</td>
</tr>
<tr>
<td> </td>
<td><div align="right">特长：</div></td>
<td><select name="select">
</select></td>
</tr>
<tr>
<td> </td>
<td><div align="right">联系电话：</div></td>
<td><input type="text" name="textfield4"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交"></td>
<td><input type="reset" name="Submit2" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>实际效果图如下：
下次再写css吧
原文地址：http://blog.csdn.net/u010498696/article/details/45671419
