| 
    第一讲:html的简介 html文件是一种可用任何文本编辑器创建的ASCII码文档。这些编辑器包括常见的写字板,记事本,word等。推荐大家用记事本方便一些!
 
 
 一:文件的基本结构:
 
 HTML文件由标记和被标记的内容组成,标记用来规定被标记的内容是什么信息
 
 1.1
 标记及其属性
 
 1:标记的格式用“<"表示一个标记的开始,”>“表示一个标记的结束这两个字符必须同时出现,表示这是HTML代码
 
 2:标记的属性
 标记的属性是用来控制受标记影响的内容的显示和输出格式。设置属性的格式如下:
 
 <标记 属性1=属性值 属性2=属性值。。。。>
 
 1.2
 HTML文件的基本结构
 
 1:基本标记
 标记是构成HTML的基本单位,很体面拉的标记很多,与文件结构有关的基本标记包括
 
 [ htm]。[ head]。[ body]。在论坛里面发帖子,主要就是编辑[body]这一部分的内容
 
 
 
 
 | 
|   第二讲:HTML的文档处理
 一:文字标记
 
 
 文字标记是”[font]“可以用”[font]“标记的不同属性来分别设置文本中文字的大小,字体,字型,字色等,[Font]标记的格式是:
 
 [font 属性=属性值]被设置的字
 
 1.1
 文字的大小
 
 设置文字大小的属性是”size“ 他的取值范围是1到7。其中1为最小,7为最大,默认为3
 
 1.2
 文字的字体,颜色
字体属性是:face 颜色的属性是color
 用法与上同
 
 二:段落标记与文字布局
 
 2.1文字换行
 
 换行标记是
 放在文字结尾处使得其后的文字在下一行显示
 
 2.2段控制
 标记是[p]放在文字后,使得其后文字空一行后换行显示
 [p]的属性align用来设置文字的对齐方式。属性值是center(居中对齐),left(向左对齐),right(向右对齐)
 
 2.3文字的分区显示
 
 属性是{div]属性值也有三个,与上同,他主要用在许多段落的布局
 
 2.4预格式化文本
 在有多个空格时,HTML只默认一个空格。要使用多个空格,需要加入 。所以,这种方法对处理较为复杂的文档格式就很麻烦,用预格式化标记就很方便其格式是:
 [pre]预先排好的内容<[/pre]
 
 2.5超级链接
 其标记为[a]格式为:[a herf="链接地址" 属性=属性值]热点内容(文字图片)[a]
 
 注意:因为“〈〉”会直接生成效果,所以我用“[]”来代替,实际使用中记得把"[]"改成"<>"
 
 
 
 
 | 
| 第三讲:表格的使用(重点)表格是用来定义其开始用定义其结束的,必须与[table]标记配合使用的还有和标记,构成表格的简单格式如下:
 
 
 [table]
 
 
 
 
 
 一:表格的主要属性
 
 1.1[table]标记的主要属性
 align定义表格的对齐方式,有三个属性值center,left,right
 
 background定义表格的背景图案,属性值为图片的地址
 
 bgcolor定义表格的背景颜色,属性值是各种颜色代码
 
 border定义表格的边框宽度,属性值是数字
 
 bordercolor定义表格边框的颜色,属性值是各种颜色代码
 
 cellpadding定义单元格内容与单元格边框之间的距离,属性值是数字
 
 cellspacing定义表格中单元格之间的距离
 
 height定义表格的高度,属性值是数字
 
 width定义表格的宽度,属性值是数字
 
 1.2[tr]标记,表格是由多行与多列组成的,[tr]标记用来定义表格的一行,他的属性极其属性值定义的是表格中的该行,其主要属性与属性值如下:
 
 align定义对齐方式,属性值与上同
 
 background定义背景图案 bgcolor定义背景色
 
 1.3[td]标记。用[td]标记概况起来的内容表示表格的单元。其主要属性与属性值和[table]标记的一样,补充两个合并列和行的代码:
 
 colspan定义合并表格的列数,属性值是数字
 
 rowspan定义合并表格的行数,属性值是数字
 
 下面给出一个简单的例子:
 
 
 
 
 
 
 | 
| 常用的代码格式(大家可以套用)
 
 
 
 
 
 | 
| 图片向上飞行的效果及代码
代码如下: 
 
 
 
 
 
 | 
| 
 文字向上移动的效果及代码
代码如下:
 
 
 
 
 
 
 | 
| 
 图片向左飞行的效果及代码
代码如下:
 
 
 
 
 
 
 | 
| 
 向右移动文字加图片效果及代码
代码如下:
 
 
 
 
 
 
 | 
| 
 分段行走标题效果及代码
代码如下:
 
 
 
 
 
 
 | 
| 
 飞舞标题效果及代码
代码如下:
 
 
 
 
 
 
 | 
| 
 倒影效果及代码
代码如下:
 
 
 
 
 
 
 | 
| 
 左右相反方向移动 的图片及代码
代码如下:
 
 
 
 
 
 
 | 
| 
 
 未完待续。。。。 
 
 | 
| 
 
 
 
 | 
| 
 
 
 
 | 
| 
 
 
 
 |