1、HTML 语言入门教程 什么是 HTML 语言 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言，由W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑 HTML 文件，因为它就是一总纯文本文件。 HTML 语言的基本结构 下面我们来看一小段 HTML 语言的代码，来了解 HTML 语言的基本结构：HTML 语言的基本结构HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。将这一小段代码粘贴至文本文件中，然后选择“另存
2、为”，将文件的后缀名改为.htm 或者.html 即可，然后再所在的目录下就可看到一个 IE 的图标，名字就是你所存的文件名称。 这是声明 HTML 文件的语法格式。每一个 HTML 文件，都必须以开头，以结束 这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头，并不属于文件本体。 这是声明文件标题的语法格式。在这之中写下的所有内容，都将写在网页最上面的标题栏中。 这是声明文件主体的语法格式。在者之间写下的内容都是文件的主体，也就是说将会被显示在客户区之中。注意：几乎每一种 HTML 语言的语法都是以 我的页面 网页的内容.例 1-1当你点开任何网页的源文件的时候，相信都可以在长长
3、的字符中寻找到上面这些单词,或者你现在把上面这些单词复制到你新建的文档文件中，保存之后把后缀名改成.html，一个网页就诞生了。这就是 HTML 语言，它不象 C+，VB 等等程序语言要你摸不清头脑，HTML 语言只是一个在 SGML 定义下的描述性语言，或者说是标识语言。既然是标识语言，我们就从标识开始进行学习好了，也许当你完全掌握标识之后，就会发现基本上已经明白什么是 HTML 了。标识的写法:1.任何标识都应该写在“之间，如2.标识的字母没有大小写的区分。3.在起始标识中加入“/”就是终止标识，一般情况下有起始表示就有终止标识。例如.4.有的标识需要加入参数，有的不必，需要注意的是这些参
4、数只能加在起始标识中。现在我们开始认识第一类标识：文件标识事实上你已经见过了这些标识,没错就是 ； ； ； ，.这段标识告诉浏览器现在运行 HTML 文件，所以你写 HTML 文件都应该以开头，.这是 HTML 文件的开头部分，相应的 .就是本文部分，开头部分主要是用来记载关于这个页面的一写重要资讯，所以呢大部分的标记都将在本文部分进行应用。.这里的文字就成了你所建立页面的标题，你可以更改一下例 1-1 中非标记部分。这些标记就构成了 HTML 的基本构架，其中只有 具有参数设定,我们就通过一个例子还认识好了text=“用以设定文字颜色。link=“设定一般文字连结颜色。alink=“设定刚按
5、下时文字连结颜色。vlink=“设定连结后的颜色。（被按过）。background=“设定背景墙纸。bgcolor=“设定背景颜色。leftmargin=设定整份文件显示画面的左方边沿空间，单位为像素。topmargin=设定整份文件显示画面的上方边沿空间。bgproperties=“fixed“固定背景墙纸，当卷动文字时墙纸不会跟著卷动。这里需要说明的是色彩的问题，色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示的，所以一个颜色也就由 RRGGBB 的格式构成,而 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.#000
6、000, 其中红=00，蓝=00,绿=00 ，色彩即为黑色#0000FF，其中红=00,绿=00 ，蓝 =ff,色彩即为蓝色如果你想深入了解色彩的问题，你可以查看诸如 FLASH 等等软件的色彩表.首先我们看,这两个标识都是用于控制字体的大小，色彩，字体，但可以用于之间，控制全文的文字;而只应用与 之间，控制在它选择范围中的文字.两个标识出现在一个 html 文件中的时候，没有被选择的文字才会受到的影响。下面我们就来看一个例子：H.S Workshop欢迎来到H.S Workshop例 2-1我们看到告诉 IE 全文用 7 号黑色 Arial 字体显示，但 H.S Workshop 被我们用围
7、住了，所以执行的设定.这里有 face=,size=,color=三个参数可以进行设定，face=设定字体。size= (1,2,3,4,5,6,7,-x,+x)设定字体大小，这里需要注意的是相对值和绝对值，我们在例 2-1 中，把的 size 的值改成“-2“你会发现效果是一样的，相应的把的 size 值改成其他任何小于 7 的数值，你就会发现改变。我们在这里就把 size=“-2“称为相对值,被围住的文字在的基础上，减少 2 个字符大小,公式为“n-/+x“.当然只有 可以设定相对值。color=设定文字色彩.这里我们还发现了一个问题，没有终止标识，但它一样可以实现它的功能，这就是 HTM
8、L 的空标识，因为我们看到 没有存在的意义，所以可以忽略，当然如果你在后面添加对整个 html 文件也没有影响。其他的我们就称之为围堵标识。接下来看.（n=1,2,3,4,5,6)这是一个标题标识，从 1 到 6 替减，是一个围堵标识，我们需要注意的是这个标识独占一行并自动插入一个空行，你可以自己尝试一下，这里就不举例说明了。：这是对文字进行一些特殊处理的标识，我们就来看看他们的效果来进行学习好了.欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Wo
9、rkshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Works
10、hop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Workshop欢迎来到 H.S Workshop 欢迎来到 H.S Worksho
11、p你是否已经了解了呢，这些就是 HTML 实现字体特殊效果的标识，唯一特别的是，可以不用插入 换行。至于是什么，我想看了明天的排版标识我就可以了解了。昨天我们已经认识了文字标识，为了让整个网页更清晰美观，我们就不可以少了排版标识，那么现在就要我们开始来认识他们吧。现在比较讲知识产权，呵呵我们就先来看看如何告诉别人这是你的产权好了，当然我们还可以用它来告诉你的工作伙伴，这段开始是什么，那就是HTML 和其他的程序语言一样，可以在代码中添加注释，来告诉别人这里开始写的是什么，当然这也是告诉自己，方便以后的管理，不过你放心，这只存在于你的原代码中，不会在浏览器中发生任何影响。现在我们开始认识对段落控
12、制的标识，,.我们可以把他看做一个空行标识，既在网页中显示一段空白行，一般在 DW 或者 FG 等网页编辑工具中，回车即在 HTML 插入一个，这也是一个空标记，他的常用参数是align=“#“(#=right, left, center)分别表示左对齐，右对齐，居中。默认值为 left.实现一下下面的例子你就明白了:H.S WrokshopH.S WrokshopH.S WrokshopH.S Workshop例 3-1,这两个标记分别表示换行和不换行，前者使网页中的元素直接在下一行，不插入空行，后者则表示不 换行，对于一些必须在一行中显示的文字，对电话号码等等的显示比较有用。这里的是个空标
13、识,是围堵标识.需要注意的是 align=“在 BR 中没有的意义.这时候我们就要通过一个另一个标识来实现对齐效果，,当然这个标识有它更广泛的用途，在这里只简单的提一下其中的对齐参数运用。下面我们就来看一个简单的例子。H.S WorkshopH.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S WorkshopH.S WorkshopH.S Workshop 例 3-2这样一来我们就可以实现对的对齐效果了。,现在我们把 align=“的三个值提出来，发现他们其
14、实自身也是标识，它们可以对单个，单行文字进行围堵，实现他的效果，这样又多了一个途径实现的对齐效果了，具体的就举例说明了，你可以自行尝试一下，注意，他们可是围堵标识哦。这里把它从换行中分出来，是想大家于对比一下，这是个建议折行的标识，当用户的分辨率无法完整的显示出一段文字的时候，你就可以插入这个标识,这时候就会发生于同样的效果,如果达到了条件则没有效果产生，你可以自己尝试一下，它是一个空标识。接着我们来看看 HTML 两个在排版上非常使用的标识。,预格式化文本标识，他们允许你在 HTML 原文件里输入空白，并显示出和你在 HTML 编辑的一模一样的格式，区别就在显示出来的是设定好了的字体大小，显
15、示小于设定的一号字体, xmp 则在 的基础上把 html 里的标识也显示出来。Please use your card.VISA MasterHere is an order form.FaxAir MailPlease use your card.VISA MasterHere is an order form.FaxAir MailPlease use your card.VISA MasterHere is an order form.FaxAir Mail大家可以自己看看三者的效果。今天的最后一个标识称为水平线。顾名思义，它实现插入一条水平线的效果。align=设定线条置放位置，可选
16、择：left；right ；center 三种设定值。size=设定线条厚度，以像素作单位.width=设定线条长度，可以是绝对值（以像素作单位）或相对值，默认值为 100%。color=设定线条颜色，内定为黑色.noshade设定线条为平面显示，若删去则具阴影或立体，这是默认值。通过这三天的学习，你是否可以运用已知的标识写出一个网页了呢？呵呵这就开始尝试一下吧.今天我们学习的只有一个标识，重点并不在这个标标识本身，而在于这个标识的参数设置，现在我们就来认识一下吧。图形对于一个网页来说其占的位置尽次于文字所占的比重，我们同过这个标识在网页中加入一张图片做到图文并茂，它只是一个空连接，现在我们就
17、来看看它的参数设定。src=首先我们必须向 HTML 中导入一张图片，这张图片的格式可以是 jpg，gif 或者 png，同时我们还要注意导入图片的途径书写，当你要求导入的图片和显示此图的 html 在同一个文件夹下，我们就可以只写文件名即可，如则需要完整的途径表示。width=,height=设定图象显示的大小，以象素为单位，不过一般情况下为了保持页面的美观，我们使用真实的大小为佳，通过专业的图形编辑工具来编辑图形的大小。border=设定图象边框的大小，单位也是象素，它可以是任何数值，在现代网页编辑中通常取值为1。hspace=,vspace=设定图象边缘的空白数，hspace 设定左右，
18、vspace 设定上下，这样可以确保其他元素与图片的距离。align=（top, middle, bottom, left, right ）默认值为 botom这个参数昨天我们已经讲过，在这里我们我们需要注意的是它的作用是控制文字的位置，具体的运用我们就通过这下面的例子来看看好了.alt=在图片显示的位置插入一段文字，当图片还没有被读取或这浏览者使用的是文字游览器的时候，这段文字就会显示出来。lowsrc=同样在显示 src 所显示的图片之前先显示出一张图片，条件也是在 src 还没有被读取的时候，一般我们用于显示原图片的缩略图，使浏览者不会因为图片读取慢而失去浏览的兴趣。表格在网页排版中所占
19、的比重不用说相信大家也都知道，它把整个页面清晰的分成多个区域。专业的网页怎么可以少了对表格的操作呢现在我们就来看看关于表格的标识。 首先我们必须建立一个表格，我们可以通过着个围堵标识来实现，着个标识的作用就好象告诉浏览器开始处理 HTML 文件一样，它告诉浏览器现在开始处理表格，其他所有的表格标识都必须写在里面。关于它的参数比较多，我们现在一个个来看它有什么作用。windth=设定表格的宽度，一般来说在这层我们只需要指定一个表格的宽度就可以了。这个值可以是绝对的也可以是相对的。border=设定表格边框的厚度，当取值为 0 时或者不用这个参数的时候，表格就不在浏览器中显示出来，但表格中的元素仍
20、然是按表格排列。cellspacing=表格线的厚度，为了和 border=区别开来，我们看个例子12341234例 5-1比较一下这两个例子，我们就可以很清晰的看到两个例子的不同.cellpadding=“文字和格线之间的距离，使文字看起来更清晰。align=“(left, right, center)这个值在前面我们已经重复的介绍过了，这里是对表格的位置进行水平位置设定.valign=“(top, middle, bottom)这是对表格垂直位置的设定.background=“导入表格的背景图片。bgcolor=“设定表格的背景颜色。bordercolor=“设定表格的边框颜色。（注意，当
21、设定 border=为 0 时，这个值无效)bordercolorlight=“设定表格边框向光部分的颜色.bordercolordark=“设定表格边框背光部分的颜色.cols=“表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己.frame=“(box,above,below,hsides,vsides,lhs,rhs,void)显示边框，参数的含义依此是：显示所有边框，只显示上边框，只显示下边框，只显示上下边框，只显示左右边框，只显示左边框，只显示右边框，不显示任何边框.rules=“(all,groups,rows,cols,none)显示分隔线，参数的含义依此是：显示所有分隔线
22、，只显示组与组之间的分隔线，只显示行与行之间的分隔线，只显示列与列之间的分隔线，不显示任何分隔线。建立了一个表格区，接着我们就要把这个表格分开，那么就必须用到这个标识，一般我们添加多少个就表格就会分成多少行。一个表格的基本格式如下:例 5-2现在我们就来看看的参数设定吧。align=“(left, right, center)这就不多说了。水平位置的设定.valign=“(top, middle, bottom)垂直位置的设定琀?瑧? 瑬;开嫞?。bgcolor=“这一列的背景色。bordercolor=“这一列的边框颜色 。bordercolorlight=“这一列的向光部分.borderc
23、olordark=“这一列的背光部分.有了列，就要开始设定单元格，可以说单元格就是一个表格的最小单位。我们用过来实现.在下面写入多少个就会在这一列中显示出多少个单元格。然后我们来看看对单元格有些什么参数可以设定吧。windth=“通过相对值或绝对值设定这个单元格的宽.height=“通过相对值或绝对值设定这个单元格的高.colspan=“rowspan=“这里我们看一个例子来说明一下好了.第一列第一栏第一列 之 第二栏及第三栏 第二列及第三列 之 第一栏第二列第二栏第二列第三栏第三列第二栏第三列第三栏第一列第一栏 第一列 之 第二栏及第三栏第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
24、第三列第二栏 第三列第三栏例 5-3同过标识，我们看到这实际上是个三列三行的表格，如果只看第一行第一列是不是认为这是两行两列的呢。没错，colspan 就是向右合并单元格，rowspan 则是向下合并单元格.align=“(left, right, center)元素水平位置设定.valign=“(top, middle, bottom)元素垂直位置设定.background=“导入单元格的背景图片。bgcolor=“设定单元格的背景颜色。bordercolor=“设定单元格的边框颜色。（注意，当设定 border=为 0 时，这个值无效)bordercolorlight=“设定单元格边框向光
25、部分的颜色.bordercolordark=“设定单元格边框背光部分的颜色.另一个单元格表示，它同样也表示一个单元格，唯一不同的是 所标示的储存格中的文字是以粗体出现，当然若为所标示的储存格中的文字加上粗体标记便等如的效果。用它取代 即可显示效果,关于它的参数和 一样，这里就不详细说明了.今天最后一个标识，它可以在表格上显示出一段没有格线的列。通常我们把他来给表格内容命题。关于它的参数有两个,分别是 align 和 valigan,(left, right, center,top, middle, bottom) 此处加入文章内容 标签的分析：表格的起始符。任意一个表格的开始都必须以它开头，且
26、必须有终止符。cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是 cellspacing 了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是 cellspacing。width：表格的宽度。取值从 0 开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800600 的显示分辨率下，如果表格设置成 1000 个像素的宽度，那么，得出的效果将导致 IE 的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width 的取值还可以使用百分比，如 widht=“100%“，这种赋值
27、法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。background：表格的背景图。其值为一个有效的图片地址。也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。：表体的起始符。紧跟在之后，表示表体开始。必须有终止符，放在之前。在纯网页中可以不要 tbody 元素，但在论坛一定要使用，因为，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。：表示表格的行，其中，t 是 table，r 是 row（行）。有多少组 tr，这张表格就有多少行。紧跟在之后。必须有终止符。：表示表格的列，t 是 table，d 可理解为 down（向下）。有多少组td，这张表格就有多少列。紧跟在之后。终止符为。td 与 tr 配合构成单元格。1：borderColorDark=#0d1737 暗边框，颜色为 0d1737 当 border 值不为 0 时设置有效。暗边框指表格的右边和下边的边框。2：borderColorLight=#24387a 亮边框，颜色为 24387a 当 border 值不为 0 时设置此值有效。亮边框指表格的左边和上边的边框。3：cellpadding：单元格衬距。指该单元格里的内容与 cellspacing 区域的距离，如果 cellspacing 为 0，则表示单元格里的内容与表格周边边框的距离。
