Html电子教程 .pdf

《Html电子教程 .pdf》由会员分享，可在线阅读，更多相关《Html电子教程 .pdf（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Html (超文本语言 ) 电子教程1 Html ( 超文本语言 ) 电子教程HTML基础-第一讲HTML 是网页主要的组成部分， 基本上一个网页都是由HTML 语言组成的， 所以要学习网站怎样建设，必须从网页的基本语言学起。先简单的介绍一下HTML 语言（我们在这灌输大家的是能够实际操作） ，HTML 是网络的通用语言 , 一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗 ?一点都不神奇 , 因为现在你看到的就是这种语言写的页面。一、HTML 的组成结构（头部、眼睛、身体-好像一个人一

2、样是不是？）1、头部。只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD 就是了；所以，头部的 HTML 写法就是 头部的内容 ，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/ ”符号。类似这样的以后会经常用到。2、眼睛。就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:标题这些应放在 和之间。也就是标题 3、身体。身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE 可以在浏览器的最左上角可以看到） ，

3、身体 -BODY，他的写法也就是： 页面内容 最后，别忘了把这些部分组成一体-网页，所以咱们就用 把他们给包起来。好了，咱们来大体看看网页的结构： 标题 页面内容 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程2 HTML基础-第二讲我们在第一讲里概括了一下网页的主要框架，现在我们来详细的研究网页的内部细则：先从它的身体部分 (body) 开始：欣赏一个网页时， 一般先注意到的是这个页面的

4、背景，如果有背景音乐， 那就更吸引人了！是不是呀，那么这些是怎么实现的呢？看下边：1、背景颜色我们发现多了个 bgcolor 其实就是 backgroundcolor （背景颜色）的意思， bgcolor=red设置网页的背景颜色为红色，现在颜色一般都是#ff0000 样式的。 2、背景图片 中 “ backgroud” 就 是 设 置 背 景 图 片 的 啦 ，back-ground.gif 是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？其实 back-ground.gif 是该图片相对于这个页面的位置，比如你做的这个页面放在我的网站，而背景图片的位置放在我的网站，那

5、么就得这样写了：，注意两者的区别！ 3、背景音乐背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部 里，为什么在这里讲呢？就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧： bgsound 不用说了吧背景声音，background_sound.mid 是音乐的文件名，当然也得写它的相对路径哦（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的） ！loop，循环，那么 loop=-1 是什么意思呢？ loop 是 bgsound 的一个属性，当然src也是了，后边跟得就是属性值了，那么loop=-1 就是无限循环的意思，只要是页面打开，音乐不会停

6、止的， loop=1说明循环一次，等于0就是不循环了，呵呵，简单不！ 4、body 其它属性： topmargin，leftmargin。有的朋友再做页面的时候，感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边，怎么回事呢？因为一般我们用的制作软件或者说 html 语言默认的都是topmargin 和 leftmargin 值等于 12，如果你把他们的值设为0，你看看会有什么效果！如下比较一下和，有兴趣的朋友可以任意设置他们的值！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2

7、 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程3 HTML基础第三讲 -字体这一讲，我们来学习字体及其属性，然后大家在学习完后制作一下，看看它的每一个属性所表现的效果。字体，英文 font，这 html 语言中也是它 -font，下面咱们来研究一下font: 1、标题字体 文字 # =1，2，3，4，5，6 比如： 今天天气真好！ 注意：这些一般的用在标题上，所以起名叫标题字体； . 这些标记显示黑体字；这些标记自动插入一个空行，不必用 标记再加空行，因此在一行中无法使用不同大小的字体。2、字体的大小，用于一般文字。 文字 #=1, 2, 3, 4

8、, 5, 6, 7 or +#, -# #=1, 2, 3, 4, 5, 6, 7 例子： 今天天气真好！ 3、逻辑字体 (Logical Style) 下划线： 文字，代码： 文字，删除线： 文字，闪烁： 文字，增强： 文字，强调： 文字，示例：文字，还有老多，一般的这些了解一下就可以。4、字体的标志，很常用的。粗体：文字，斜体： 文字 5、字体颜色指定颜色 文字 # =#rrggbb 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple

9、, Silver, Yellow, Aqua 对于 16 进制编码的颜色，我们可以这样理解rrggbb 六个字符：前两个表示红色，中间的两个表示绿色，后两个表示蓝色；那么，红色（red）ff0000，同样绿色（ green）00ff00，蓝色 0000ff；其它的颜色就是这几个字符（0-9，a-f）的组合。比如： 文字 红色文字 文字 红色文字大家看看 文字 是什么颜色的文字6、客户端字体 (Font Face) . #=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑， face=#就是从你的电脑获得的字体，大家可以点击名师资料总结 - - -精品资料欢迎下载 - - - - - -

10、 - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程4 客户端字体 (Font Face)示例 。7、字符实体 (Entities)，字符实体一般用在把html 里的符号显示在页面上比如、&等，如果你单独的打上 ，页面也可以显示，但如果你想显示这几个字符，怎么办呢？就是它啦。&#; #=字符实体名称或者 ascii 值& & 这些只是一小部分，那么要显示就要写成 了。以 上 学 到 的 我 们 可 以 综 合 使 用 ： 比 如 文 字 注意写的时候要前后一

11、致前面后边对应的也应该 HTML基础第四讲 -图像图像，也就是 images，在 html 语法中用 img 来表示，其基本的语法是： #= 图象的 URL，关于 url 就是指的是图像在网上的地址。 #=在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。例子： 图象在页面中的对齐 / 布局：语法： #=left, center, right，使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align ，它的值left, center, right就是他的中文意思， left居左， center 居中， r

12、ight居右。例子： 网人交流论坛欢迎您的光临！图象和文字的对齐：语法： #=top, middle, bottom，这里的 align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果，很容易记住哦！名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程5 图像的边框： #=value数字，指的是这个图像的边的宽度！示例：

13、 HTML基础第五讲 -控制表格及其表项的对齐方式缺省情况下，表格在浏览器屏幕上左对齐，你可以使用的 ALIGN 属性来指定表格的对齐方式。 ALIGN属性可以取值“ left” 、 “center”和“ right” 。例如，让一个表格在屏幕中央显示可以使用： 注意使用 的 ALIGN 属性要小心，不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央，使用 标识符来包含表格会更安全些。你可以使用 的 ALIGN 属性来设置表格中每行元素的水平对齐方式，这个属性也可以取值“left” 、 “center” 和 “right” 。 要设置某一行中所有元素的竖直对齐方式，可以使用 的 VALI

14、GN 属性，它可以取值“ top” 、 “middle”和“botton” （缺省情况下取值“ middle” ） 。要更好地控制表格中某个表头或元素的排列方式，可以使用 和 标识符的 ALIGN和 VALIGN属性，这两个属性的取值范围与相同，然而 的ALIGN和VALIGN 属性将会覆盖任何为整个一行指定的排列方式。控制表项的空间当浏览器显示一个表格时，它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用 的CELLPADDING 和 CELLSPACING 属性来改变这一缺省值。通过使用CELLPADDING属性，你可以为表

15、格中的每一项安排一个更大的空间，使用CELLSPACING 属性，你可以为表项之间留出一定的空间。这两个属性的值都以象素来指定。下面的例子说明了如何使用这两个属性（见图6.20） ： Cell Spacing Normal Table First Column Second Column Table With Cell Spacing 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程6 Fi

16、rst Column Second Column Table With Cell Padding First Column Second Column 控制表格和表项的大小某些时候你可能想让表格显示出来大一些，你可以用 的 WIDTH 属性来控制表格的宽度，你可以为WIDTH 属性提供宽度的绝对值或相对值。当为 WIDTH 属性提供宽度的绝对值时，你用象素来表示。例如，要建立一个宽为100 个象素的表格，可以用 。当然，并不能保证表格显示出来恰好是你指定的宽度，表项中的内容可能会迫使表格显示出来比WIDTH 属性指定的值要宽。另外，你也可以用相对值来指定表格的宽度，例如，如果你想让表格占有整个

17、浏览器屏幕那么宽，你可以用 ，同样地，如果你在WIDTH 属性中指定的百分数太小的话，浏览器显示出来的表格就不是那个宽度。 属性可以用来指定表格的整体高度，同样这个属性可取绝对值和相对值。但使用这个属性时要小心，即使Microsoft 和 Netscape的浏览器都能正确解释它，但它并不是HTML 3.2 规范中的一部分。你也可以用 和标识符的 WIDTH 和 HEIGHT 属性来控制表格中某一表项的大小，你必须用绝对象素值来指定这些属性的值。你要知道当你设置这些值时，只不过是在为浏览器提供建议，浏览器尽量按你的意愿去做，但也有可能不能完全按你指定的方式来显示一个表格。在表格中加入颜色和图象根

18、据 HTML 3.2 规范， 表格不具有任何颜色属性。 然而， 值得庆幸的是 Netscape和 Microsoft都扩展了HTML来让表格具有自己的背景色，两种浏览器都能识别 标识符的BGCOLOR 属性。你可以使用颜色名或RGB 值来设定 BGCOLOR 的值，下面的例子说明了这个属性的用法： Table Color 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程7 I have a

19、blue background 当这个例子中的文字在浏览器上显示时，它处于一个浅蓝色的框中，这对于突出主页上主体文字中某些特定的文本是很有用的。例如，你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。你也可以为表格中某一行甚至是某一个表项使用BGCOLOR 属性。例如，可以用不同的颜色来区分表格中不同列的数据。BGCOLOR 属性的一个更令人兴奋的用处可能是设置你网页的整体颜色，如果你将表格的宽度设为屏幕的宽度，你可以建立一个具有多列的网页，而每一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页： Two Color Columns I have a olive ba

20、ckground I have a aqua background Netscape 和 Microsoft 的浏览器都允许你为表格设定背景图片（见图6.21） ，你可以通过 标识符的 BACKGROUND 属性来指定一幅图象： Two Color Columns I have a checkered background 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程8 Netscape

21、 Navigator 4.0和 Internet Explorer 3.0及 4.0还允许你在表格的某一行或某个表项使用 BACKGROUND属性，通过为不同的表项使用不同的背景图象，你可以建立一个可视性非常强的网页。表格作为子页 标识符最初被引入HTML 是用来格式化地显示信息。然而，随着时间的推移，这个标识符的属性被大大地扩充了，现在可以将 看成是用来在网页中建立一个子页的标识符。 这个标识符被扩展出了那么多的属性，以致于现在它很象 标识符了。在 Netscape 和 Microsoft 的浏览器上， 具有许多和 相同的属性，你可以为表格指定它自己的背景色和图象。另外 标识符还能包含所有能

22、在 中包含的 HTML 标识符。然而， 具有一个比 更大的优势，每一个HTML 文件必须有且只有一个 标识符，但对于 来说，则没有这种限制，你可以在HTML文件中包含任意数目的 。当你设计网页时，不要让 这个名字愚弄了你。 不仅仅用于建立表格，还可以在你的网页上建立子页， 当你想把单个网页分成多个部分时， 就用 标识符。HTML基础第六讲 -表格表格，一般的用于对网页的内容进行排版，比如文字放在页面的某个位置，你就可以做个表格，然后设置一下表格的属性， 它文字放在表格的某个单元个里， 就行了；其实用过 word的朋友应该非常明白的。除了页面的排版外，表格还可以制作出非常好看的效果，比如按钮、变

23、色、边线等等。大家要会灵活的运用。看看表格的基本语法： . - 定义表格 .- 定义表行 .- 定义表头 .- 定义表元下面看看它的示例： FoodDrinkSweet ABC 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程9 不带边框的表格： FoodDrinkSweet ABC Food Drink Sweet A B C 跨多行、多列的表元 (Table Span) 跨多列的表元 M

24、orning Menu Food Drink Sweet ABC HTML基础第七讲 -框架框架（ Frame）也就是所谓的分割窗口、分割画面、框窗效果（还真是五花八门），这个技巧在运用上问题比较多，用的好的话，有助于网友快速且有条理的浏览网页，整理不好的话，呵呵 .那笑话可就闹大了。【框架的基本概念】1. 首先，各位先看看右手边这张图， 我们将利用这张图来作解说，这样子，讲起来可能会清楚一点。 OK！我们可以看见，右边的这个窗口，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

25、- - 名师精心整理 - - - - - - - 第 9 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程10 显示的内容分别是a.htm、b.htm、c.htm 三个档案。然而左下角的那个 index.htm 是做什么用的呢？2. 原来，左下角的这个档案 index.htm ，就是要告诉计算机，我们要将画面分割成这样，也就是说，所有Frame的卷标，其实都只摆在 index.htm 这个档案里。（ 当然，不是档名一定要叫做 index.htm 取其它档名也是可以的。）3. 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html 档案（假如

26、您要分割 100个框框，就要有 100 个 html 档就对了。），另外，还会多一个档案是来告诉计算机要如何分割的。（也就是例中的 index.htm 档啦！ ）【开始分割】1. 别急、别急，分割窗口可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想象画面是一个蛋糕，你要怎么割，才能割成那样呢？原始码呈现结果 框窗实作 2. 各位会发现，奇怪，在上面的语法中， 怎么都没见到 熟悉的身影？呵呵 .没错，它已经被待会儿要加进去的卷标给取代了！也就是说，如果我们要分割画面，就要先用卷标告诉计算机说： 喂！我要开始分割了！此时， 是派不上用场的，所以躲到一旁凉快去了！3. 现在开始动手割割看啰

27、！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！ ），如下图：原始码呈现结果 框窗实作 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程11 4. 在中，我们要告诉计算机到底是要左右分（COLS ）？还是上下分（ ROWS）。一开始我们是左右分，所以我们写成 。COLS=120,* 就是说，左边那一栏强制定为120 点，右边则随窗口大小而变。除了直接写

28、点数外，我们亦可用百分比来表示，例如COLS=20%,80%也是可以的。5. 然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图：原始码呈现结果 框窗实作 6. 看见了没？原本的 （在第 3 点的语法中 ）被另一组所取代了！所以要注意喔！第二组是被第一组 所包围起来的喔！（ 乱七八糟了对不对？ ）7. 呵呵. 不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm ，然后再准备三个档 a.htm 、b.htm 、c.htm 那么就完工啰！当然，这是一个最简单的分割法，我们会再将一些进阶的卷标在底下一一说明。【其它卷标参数说明】 名师资料总结 - -

29、 -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程12 1. COLS=120,*就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS=30,*,50 （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！2. ROWS=120,*就是横向切割画面，也就是将画面上下分开，切法同上。3. frameborder=0设定框架的边框，其值只有 0 和 1 ， 0 就

30、是不要边框， 1 就是要显示边框。边框是无法调整粗细的。4. framespacing=5表示框架与框架间的保留空白的距离，以免看起来太挤。 1. SRC=a.htm设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）2. NAME=1设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。3. frameborder=0设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。4. scrolling=no设定是否要显示

31、滚动条， YES是要显示滚动条， NO是无论如何都不要显示， AUTO 是视情况显示。5. noresize设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。6. marginhight=2表示框架高度部份边缘所保留的空间。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程13 7. marginwidth=2表示框架宽度部份边缘所保留的空间

32、。【相关用法】 1. 使用方法： 请换有支持 Frame功能的浏览器 2. 卷标解说 ：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此卷标，让这些网友知道，该换换浏览器了。或者，你也可以在这卷标中，摆上没有Frame语法的网页卷标，那么，没有支持 Frame功能的浏览器， 便会自动显示没有Frame语法的网页。 target=框窗名称1. 使用方法： 显示内容 2. 卷标解说： 常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图 ），那应该如何写呢？就像上面加个target= 框窗名称 就行啦！ target=_top 1.

33、使用方法： 网人俱乐部 2. 卷标解说： 有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入target=_top这个参数，那么，这个新连到的网站，就会重新占据整个屏幕啦！HTML基础第八讲 -序列卷标什么叫做序列卷标？其实，这是一个大家都蛮熟悉的东西，只是在网页中换个名称来称呼罢了，序列卷标的功能在WORD 里面叫做项目符号及编号，也就是将每一要点以数字，如：1.2.3.4 或符号一条一条的清楚的列出的功能。【无序卷标】1. 序列卷标基本上可分为两种，一种是无序条列 ，一种是有序条列 。所谓无序条列当然就是意指各条

34、列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序卷标，在各条列前面均有一符号以示区隔。至于有序条列就是指各条列之间是有顺序的，从1、2、3一直延伸下去。2. 我们先来看看无序列表卷标如何使用：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程14 原始码呈现结果 姓名：吴弘凯生日： 1973/6/16 星座：双子座 o姓名：吴弘凯o生日：1973/6/16 o星座：双子座其中

35、 卷标即为无序列表卷标，每增加一列内容，就必须加一个。3. 前面的符号一定是要圆形的吗？不，我们可以加入TYPE= 形状名称 属性来改变其符号形状，一共有三个选择：DISK（实心圆）、 SQUARE（小正方形）、 CIRCLE （空心圆）三种（由于本页使用CSS 故仅于 Netscape 看得出效果。）：原始码呈现结果 姓名：吴弘凯生日： 1973/6/16 星座：双子座 o姓名：吴弘凯o生日：1973/6/16 o星座：双子座【有序卷标】1. 接下来，我们来看看有序列表卷标如何使用：原始码呈现结果 姓名：吴弘凯生日： 1973/6/16 星座：双子座 1.姓名：吴弘凯2.生日：1973/6/

36、16 3.星座：双子座其中 卷标即为有序列表卷标，每增加一列内容，就必须加一个。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程15 2. 和无序列表卷标一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、 A（大写英文字母）、 a（小写英文字母）、 I （大写罗马字母）、 i （小写罗马字母）等五种：原始码呈现结果 姓名：吴弘凯生日： 19

37、73/6/16 星座：双子座 A.姓名：吴弘凯B.生日：1973/6/16 C.星座：双子座2. 另外，我们亦可指定序列起始的数目，其方法如下：原始码呈现结果 姓名：吴弘凯生日： 1973/6/16 星座：双子座 8.姓名：吴弘凯9.生日：1973/6/16 10.星座：双子座【定义列表卷标】1. 接下来我们要说明的这个卷标，是定义列表卷标也是属于序列卷标之一。我们先来举个例子，我们常常会在文章中看见这样的格式： CSS （Cascading style sheet ）CSS是由 W3C 于 1996 年 12 月所公布的一项新技术，什么叫做Cascading style sheet ？简单说

38、来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何对象均有更佳的操控性2.网页里也有可以做到这种效果的卷标喔！现在要来跟各位说的就是这个卷标。咱们先来看看这卷标的用法：3. 我们先来看看定义列表卷标如何使用原始码呈现结果 小标题小标题标题的内容说明名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程16 标题的内容说明 HTML基础第九讲 -表单最基本的留言版应该大

39、家都用过吧！没错这就是一个表单运用很好的例子。表单提供了一个管道让读者发表心声，让网站不再只是设计者的天下，而是能够让更多网友共同参与的地方。另外在商业用途上，表单也扮演着相当吃重的角色，藉由这些表单配合相关程序，使得公司能够在网络上发展电子商务，所以说表单可以说是网页实用化、商务化相当重要的一环喔！【表单的用途】对于一般的网页设计初学者而言，表单功能其实并不常用， 因为表单通常必须配合着CGI、JAVA Script程序或是 ASP程序来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！本单元纯粹以介绍各式表单为

40、主，至于一些CGI或 ASP观念在此工友就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。【各种输入类型】1. 文字输入列： 每个表单之所以会有不同的类型，原因就在于 TYPE= 表单类型 设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是TYPE= TEXT ，其使用方法如下：呈现结果姓名：错误!未找到引用源。原始码 姓名： 2. 其有下列可设定之属性：o NAME= 名称 ，是设定此一字段的名称，程序中常会用到。o SIZE= 数值 ，是设定此一字段显现的宽度。o VALUE= 预设内容 ，是设定此一字段的预设内容。名师资料总结 - - -精

41、品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程17 o ALIGN=对齐方式 ，是设定此一字段的对齐方式，其值有：TOP （向上对齐）、 MIDDLE（向中对齐）、 BOTTOM（向下对齐）、 RIGHT （向右对齐）、 LEFT （向左对齐）、 TEXTTOP（向文字顶部对齐） 、BASELINE （向文字底部对齐） 、ABSMIDDLE（绝对置中） 、ABSBOTTOM（绝对置下）等。o MAXLENGTH=

42、数值 ，是设定此一字段可设定输入的最大长度。3. 单选核取表单：利用TYPE= RADIO 就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核取表单。呈现结果性別：男 错误 !未找到引用源。 女 错误!未找到引用源。原始码 性別：男 女 4. 其有下列可设定之属性：o NAME= 名称 ，是设定此一字段的名称，程序中常会用到。o VALUE= 内容，是设定此一字段的内容、值或是意义。o ALIGN=对齐方式 ，是设定此一字段的对齐方式，其值有：TOP （向上对齐）、 MIDDLE（向中对齐）、 BOTTOM（向下对齐）、 RIGHT （向右

43、对齐）、 LEFT （向左对齐）、 TEXTTOP（向文字顶部对齐） 、BASELINE （向文字底部对齐） 、ABSMIDDLE（绝对置中） 、ABSBOTTOM（绝对置下）等。o CHECKED，是设定此一字段为预设选取值。5. 复选核取表单：利用TYPE= CHECKBOX 就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核取表单。呈现结果喜好：错误 !未找到引用源。 电影错误!未找到引用源。看书名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - -

44、 - - - - 第 17 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程18 原始码 喜好：电影看书 6. 其有下列可设定之属性：o NAME= 名称 ，是设定此一字段的名称，程序中常会用到。o VALUE= 内容，是设定此一字段的内容、值或是意义。o ALIGN=对齐方式 ，是设定此一字段的对齐方式，其值有：TOP （向上对齐）、 MIDDLE（向中对齐）、 BOTTOM（向下对齐）、 RIGHT （向右对齐）、 LEFT （向左对齐）、 TEXTTOP（向文字顶部对齐） 、BASELINE （向文字底部对齐） 、ABSMIDDLE（绝对置中）

45、、ABSBOTTOM（绝对置下）等。o CHECKED，是设定此一字段为预设选取值。7. 密码窗体：利用TYPE= PASSWORD就会产生一个密码窗体，密码窗体和文字输入窗体长得几乎一样，差别就在于密码窗体在输入时全部会以星号来取代输入的文字，以防他人偷窥。呈现结果请输入密码： 错误!未找到引用源。原始码 请输入密码： 8. 其有下列可设定之属性：o NAME= 名称 ，是设定此一字段的名称，程序中常会用到。o SIZE= 数值 ，是设定此一字段显现的宽度。o VALUE= 预设内容 ，是设定此一字段的预设内容，不过呈现出来仍是星号。o ALIGN=对齐方式 ，是设定此一字段的对齐方式，其值

46、有：TOP （向上对齐）、 MIDDLE（向中对齐）、 BOTTOM（向下对齐）、 RIGHT （向右对齐）、 LEFT （向左对齐）、 TEXTTOP（向文字顶部对齐） 、BASELINE （向文字底部对齐） 、ABSMIDDLE（绝对置中） 、ABSBOTTOM（绝对置下）等。o MAXLENGTH=数值 ，是设定此一字段可设定输入的最大长度。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电

47、子教程19 9. 送出按钮：通常我们窗体填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用 TYPE= SUBMIT 及 TYPE= RESET 来产生，相当的简单易用。呈现结果错误!未找到引用源。错误 !未找到引用源。原始码 10. 其有下列可设定之属性：o NAME= 名称 ，是设定此一按钮的名称。o VALUE= 文字，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上送出查询、重设等字样。o ALIGN=对齐方式 ，是设定此一字段的对齐方式，其值有：TOP （向上对齐）、 MIDDLE（向中对齐）、 BOTTOM（向下对齐）、 RIGHT （向右对齐）、 LEF

48、T （向左对齐）、 TEXTTOP（向文字顶部对齐） 、BASELINE （向文字底部对齐） 、ABSMIDDLE（绝对置中） 、ABSBOTTOM（绝对置下）等。11. 按钮组件：窗体中或是JAVA SCRIPT 常会用到按钮来作一些效果，因此，我们可以利用 TYPE= BUTTON 来产生一个按钮，相当简单。呈现结果请按下按钮：原始码 请按下按钮： 12. 其有下列可设定之属性：o NAME= 名称 ，是设定此一按钮的名称。o VALUE= 文字，是设定此一按钮上要呈现的文字。o ALIGN=对齐方式 ，是设定此一字段的对齐方式，其值有：TOP （向上对齐）、 MIDDLE名师资料总结 -

49、 - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 33 页 - - - - - - - - - Html (超文本语言 ) 电子教程20 （向中对齐）、 BOTTOM（向下对齐）、 RIGHT （向右对齐）、 LEFT （向左对齐）、 TEXTTOP（向文字顶部对齐） 、BASELINE （向文字底部对齐） 、ABSMIDDLE（绝对置中） 、ABSBOTTOM（绝对置下）等。13. 隐藏字段：窗体中有时有些东西因为某些因素，不想让使用者看到，但因程序需要却又不得不存在，此时，我们就可以

50、利用TYPE= HIDDEN 来产生一个隐藏的字段。呈现结果隐藏字段： 错误!未找到引用源。原始码 隐藏字段： 14. 其有下列可设定之属性：o NAME= 名称 ，是设定此一字段的名称。o VALUE= 文字，是设定此一字段的值、文字或意义。【大量文字输入组件】1. 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用 来产生一个可以输入大量文字的组件，夹在两个卷标中的文字会出现在框框中，可作为预设文字。呈现结果请输入您的意见：错误!未找到引用源。原始码 请输入您的意见： 2. 其有下列可设定之属性：o NAME= 名称 ，是设定此一字段的名称。o