HTML入门基础教程.docx

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

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

3、法也就是：页面内容 最后，别忘了把这些部分组成一体-网页，所以咱们就用把他们给包起来。好了，咱们来大体看看网页的结构： 标题 页面内容第一讲完HTML基础-第二讲我们在第一讲里概括了一下网页的主要框架，现在我们来详细的研究网页的内部细则： 先从它的身体部分(body) 开始：欣赏一个网页时，一般先注意到的是这个页面的背景，如果有背景音乐，那就更吸引人了！是不是呀，那么这些是怎么实现的呢？看下边：1、背景颜色我们发现多了个bgcolor其实就是backgroundcolor（背景颜色）的意思，bgcolor=red设置网页的背景颜色为红色，现在颜色一般都是#ff0000样式的。2、背景图片中“b

4、ackgroud”就是设置背景图片的啦，back-ground.gif是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？其实back-ground.gif是该图片相对于这个页面的位置，比如你做的这个页面放在c:我的网站，而背景图片的位置放在c:我的网站images，那么就得这样写了：，注意两者的区别！3、背景音乐背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部里，为什么在这里讲呢？就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧：bgsound 不用说了吧背景声音，background_sound.mid是音乐的文件名，当然也得写它的相对路径哦

5、（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的）！loop，循环，那么loop=-1是什么意思呢？loop是bgsound 的一个属性，当然src也是了，后边跟得就是属性值了，那么loop=-1就是无限循环的意思，只要是页面打开，音乐不会停止的，loop=1说明循环一次，等于0就是不循环了，呵呵，简单不！ 4、body其它属性：topmargin，leftmargin。有的朋友再做页面的时候，感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边，怎么回事呢？因为一般我们用的制作软件或者说html语言默认的都是topmargin和leftmargin值等于12，如果你把

6、他们的值设为0，你看看会有什么效果！如下比较一下和，有兴趣的朋友可以任意设置他们的值！好了，这一节先讲到这里！大家在自己的电脑上实习一下，呵呵！HTML基础第三讲-字体同样我们在这里继续讲一下它的body，因为它能直观的让大家观察到你所学到的成果。 这一讲，我们来学习字体及其属性，然后大家在学习完后制作一下，看看它的每一个属性所表现的效果。 字体，英文font，这html语言中也是它-font，下面咱们来研究一下font: 1、标题字体 文字 # =1，2，3，4，5，6 比如：今天天气真好！ 注意：这些一般的用在标题上，所以起名叫标题字体； . 这些标记显示黑体字；这些标记自动插入一个空行，

7、不必用 标记再加空行，因此在一行中无法使用不同大小的字体。 2、字体的大小，用于一般文字。 文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -# #=1, 2, 3, 4, 5, 6, 7 例子：今天天气真好！ 3、逻辑字体(Logical Style) 下划线：文字，代码：文字，删除线：文字，闪烁：文字，增强：文字，强调：文字，示例：文字，还有老多，一般的这些了解一下就可以。 4、字体的标志，很常用的。粗体：文字，斜体：文字 5、字体颜色 指定颜色 文字 # =#rrggbb 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue,

8、Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 对于16 进制编码的颜色，我们可以这样理解rrggbb六个字符：前两个表示红色，中间的两个表示绿色，后两个表示蓝色；那么，红色（red）ff0000，同样绿色（green）00ff00，蓝色0000ff；其它的颜色就是这几个字符（0-9，a-f）的组合。 比如： 文字 红色文字 文字 红色文字 大家看看 文字 是什么颜色的文字 6、客户端字体(Font Face) . #=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑，face=#

9、就是从你的电脑获得的字体，大家可以点击客户端字体(Font Face)示例 。 7、字符实体(Entities)，字符实体一般用在把html里的符号显示在页面上比如、&等，如果你单独的打上，页面也可以显示，但如果你想显示这几个字符，怎么办呢？就是它啦。 &#; #=字符实体名称 或者 ascii 值 & & 这些只是一小部分，那么要显示就要写成了。 以上学到的我们可以综合使用：比如文字注意写的时候要前后一致前面后边对应的也应该好了，关于字体就讲完了！HTML基础第四讲-图像图像，也就是images，在html语法中用img来表示，其基本的语法是： #=图象的 URL，关于url就是指的是图像在

10、网上的地址。 #=在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。 例子： 图象在页面中的对齐/布局： 语法： #=left, center, right，使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右。例子： 网人交流论坛欢迎您的光临！ 图象和文字的对齐： 语法： #=top, middle, bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来

11、的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果，很容易记住哦！图像的边框： #=value数字，指的是这个图像的边的宽度！ 示例： 大家可以在自己的机子上按照我给你的语法，写下来，看看效果就行了。HTML基础第五讲-控制表格及其表项的对齐方式缺省情况下，表格在浏览器屏幕上左对齐，你可以使用的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“right”。例如，让一个表格在屏幕中央显示可以使用： 注意使用的ALIGN属性要小心，不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央，使用标识符来包含表格会更安全些。你可以使用的ALIG

12、N属性来设置表格中每行元素的水平对齐方式，这个属性也可以取值“left”、“center”和“right”。要设置某一行中所有元素的竖直对齐方式，可以使用的VALIGN属性，它可以取值“top”、“middle”和“botton”（缺省情况下取值“middle”）。要更好地控制表格中某个表头或元素的排列方式，可以使用和标识符的ALIGN和VALIGN属性，这两个属性的取值范围与相同，然而的ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。最专业Web开发技术QQ群：96453007,最新最全的一手技术资料免费发布控制表项的空间当浏览器显示一个表格时，它将每一列的宽度设置为这一列

13、中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用的CELLPADDING和CELLSPACING属性来改变这一缺省值。通过使用CELLPADDING属性，你可以为表格中的每一项安排一个更大的空间，使用CELLSPACING属性，你可以为表项之间留出一定的空间。这两个属性的值都以象素来指定。下面的例子说明了如何使用这两个属性（见图6.20）： Cell Spacing Normal Table First Column Second Column Table With Cell Spacing First Column Second Column Tabl

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

15、的话，浏览器显示出来的表格就不是那个宽度。最专业Web开发技术QQ群：96453007最新最全的一手技术资料免费发布属性可以用来指定表格的整体高度，同样这个属性可取绝对值和相对值。但使用这个属性时要小心，即使Microsoft和Netscape的浏览器都能正确解释它，但它并不是HTML 3.2规范中的一部分。你也可以用和标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小，你必须用绝对象素值来指定这些属性的值。你要知道当你设置这些值时，只不过是在为浏览器提供建议，浏览器尽量按你的意愿去做，但也有可能不能完全按你指定的方式来显示一个表格。在表格中加入颜色和图象根据HTML 3.2规范，

16、表格不具有任何颜色属性。然而，值得庆幸的是Netscape和Microsoft都扩展了HTML来让表格具有自己的背景色，两种浏览器都能识别标识符的BGCOLOR属性。你可以使用颜色名或RGB值来设定BGCOLOR的值，下面的例子说明了这个属性的用法： Table Color I have a blue background 当这个例子中的文字在浏览器上显示时，它处于一个浅蓝色的框中，这对于突出主页上主体文字中某些特定的文本是很有用的。例如，你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如，可以用不同的颜色来区分表

17、格中不同列的数据。最专业Web开发技术QQ群：96453007,最新最全的一手技术资料免费发布BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色，如果你将表格的宽度设为屏幕的宽度，你可以建立一个具有多列的网页，而每一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页： Two Color Columns I have a olive background I have a aqua background Netscape和Microsoft的浏览器都允许你为表格设定背景图片（见图6.21），你可以通过标识符的BACKGROUND属性来指定一幅图象： Two Color

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

19、性，你可以为表格指定它自己的背景色和图象。另外标识符还能包含所有能在中包含的HTML标识符。然而，具有一个比更大的优势，每一个HTML文件必须有且只有一个标识符，但对于来说，则没有这种限制，你可以在HTML文件中包含任意数目的。最专业Web开发技术QQ群：96453007最新最全的一手技术资料免费发布,当你设计网页时，不要让这个名字愚弄了你。不仅仅用于建立表格，还可以在你的网页上建立子页，当你想把单个网页分成多个部分时，就用标识符。小结本章讲述了一些重要的HTML标识符。例如，你现在知道了如何建立HTML窗体来让你的网页具有交互性。你还学习了一些对信息进行列表的有用的HTML标识符。最后，你学

20、习了怎样用表格来组织信息，以及怎样用表格来为你的网点进行高级网页布局。下一章将介绍一些HTML中高级的标识符，你将学习怎样使用image map、框架及cascading style sheets。在学完下一章后，你就可以设计出任何你曾经看过，甚至想过的。HTML基础第六讲-表格上一讲，风行鹤朋友给我们讲了关于控制表格及其表项的对齐方式，在这里我要讲讲表格及其属性 ，然后大家在复习一下上一节的内容，这样就会有事半功倍的感觉。 表格，一般的用于对网页的内容进行排版，比如文字放在页面的某个位置，你就可以做个表格，然后设置一下表格的属性，它文字放在表格的某个单元个里，就行了；其实用过word的朋友应该非常明白的。除了页面的排版外，表格还可以制作出非常好看的效果，比如按钮、变色、边线等等。大家要会灵活的运用。 看看表格的基本语法：. - 定义表格 .- 定义表行 .- 定义表头 .- 定义表元 下面看看它的示例： FoodDrinkSweet ABC 不带边框的表格： FoodDrinkSweet ABC Food Drink SweetA B C 跨多行、多列的表元(Table Span) 跨多列的表元 Morning Menu Food Drink Sweet ABC 跨多行的表元 Morning Menu Food A Drink B Sweet