简单实用的HTML语法实例教学.doc

HTML 4.0 语 法 教 学 4.1 网页架构HTML　HEAD　　TITLE网页制作教学/TITLE　　Meta　/HEAD　BODY　　BODY之间则为主要语法所在，也是网页的主要呈现部分。　/BODY/HTML 【标签解说】 以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。 简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的HEAD/HEAD以及BODY/BODY。 在抬头的部份HEAD/HEAD中，有另一组标签TITLE/TITLE。打在TITLE/TITLE这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。 您可能会发现，为什么我一直没提到HTML/HTML这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。 4.2 分隔标签【文字上的分隔标签】 或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！ 使用方法：强制断行标签br、强制分段标签p 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（br），或是在写完某一段的时候便会分段（p），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。 使用范例： 原始码 呈现结果 这是一个断行的范例br看出来了吗？ 这是一个断行的范例看出来了吗？ 这是一个分段的范例p基本上他会比断行还多空出一行 这是一个分段的范例 基本上分段会比断行还多空出一行 【分隔线标签】 使用方法：上一段文字内容hr下一段文字内容 标签解说：利用hr这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下： 使用范例： 一般用法 尚未加任何属性。 原始码 普通分隔线hr 呈现结果 普通分隔线 颜色属性 用法：hr color=颜色码或颜色名称 原始码 橘色分隔线hr color=#ff8000 呈现结果 橘色分隔线 宽度属性 用法：hr width=宽度，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。 原始码 宽度为240px的分隔线hr width=240 呈现结果 宽度为240px分隔线 厚度属性 用法：hr size=厚度 原始码 厚度为5的分隔线hr size=5 呈现结果 厚度为5分隔线 位置属性 用法：hr align=水平对齐位置，其设定值有三个，也就是置左align=left、置中align=center、置右align=right 原始码 靠右的分隔线hr align=right 呈现结果 靠右的分隔线 阴影属性 用法：hr noshade，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。 原始码 实心分隔线（无阴影）hr noshade 呈现结果 实心分隔线（无阴影） 4.3 排版标签【文字置左、置中、置右】 使用方法：老实说，刚刚我们学过的分段标签p再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示： 4.4 字体标签4.5 文字标签4.6 影像标签4.7 背景标签连结时颜色 用法：body alink=颜色码设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。 原始码 htmlheadtitle这是标题/title/head body alink=#0099ff a href=index.htm连结中文字/a /body/html 已连结颜色 用法：body vlink=颜色码设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。 原始码 htmlheadtitle这是标题/title/head body vlink=red a href=demo1-10-6.htm连结文字/a /body/html 4.8 连结标签4.9 表格标签4.10 序列标签4.11 表单标签4.12 框架标签4.13 其他技巧■ 网页配色及背景音乐