网页设计HTML代码教程

网页设计HTML代码教程教程一、基本标志教程六、链接标志教程二、格式标志教程七、帧标志教程三、文本标志教程八、表单标志教程四、图像标志教程九、声音标志教程五、表格标志教程HTML基本标志教程一、基本标志1.html/html2.head/head3.body/body4.title/titleHtml是英文HyperTextMarkupLanguage的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用标志名/标志名来表示标志的开始和结束(例如html/html标志对)，因此在Html文档中这样的标志对都必须是成对使用的。在此教程中，我先讲一下Html的基本标志：1.html/htmlhtml标志用于Html文档的最前边，用来标识Html文档的开始。而/html标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。2.head/headhead和/head构成Html文档的开头部分，在此标志对之间可以使用title/title、script/script等等标志对，这些标志对都是描述Html文档相关信息的标志对，head/head标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。3.body/bodybody/body是Html文档的主体部分，在此标志对之间可包含p、/p、h1、/h1、br、hr等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。body标志中还可以有以下属性：属性用途示例bodybgcolor=#rrggbb设置背景颜色。bodybgcolor=red红色背景bodytext=#rrggbb设置文本颜色。bodytext=#0000ff蓝色文本bodylink=#rrggbb设置链接颜色。bodylink=blue链接为蓝色bodyvlink=#rrggbb设置已使用的链接的颜色。bodyvlink=#ff0000bodyalink=#rrggbb设置正在被击中的链接的颜色。bodyalink=yellow说明:以上各个属性可以结合使用，如bodybgcolor=redtext=#0000ff。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如bodytext=Blue表示body/body标志对中的文本使用蓝色显示在浏览器的框内。4.title/title使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在title/title标志对之间加入您要显示的文本即可。注意：title/title标志对只能放在head/head标志对之间。下面是一个综合的例子，仔细阅读，您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。例1Html文档中基本标志的使用htmlheadtitle显示在浏览器最上边蓝色条中的文本/title/headbodybgcolor=redtext=bluep红色背景、蓝色文本/p/body/html返回教程HTML格式标志教程二、格式标志1.p/p2.br3.blockquote/blockquote4.dl/dldt/dtdd/dd5.ol/olul/ulli/li6.div/div上一个教程中我们讲了Html文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。在学习之前，必须强调一下，我们这个教程中所讲的格式标志统统都是用于body/body标志对之间的。1.p/pp/p标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，p标志还可以使用align属性，它用来说明对齐方式，语法是：palign=/p。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如palign=Center/p表示标志对中的文本使用居中的对齐方式。2.brbr是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行，这么一说我想您该会使用了吧。在br的使用上还有一定的技巧，如果您把br加在p/p标志对的外边，将创建一个大的回车换行，即br前边和后边的文本的行与行之间的距离比较大，若放在p/p的里边则br前边和后边的文本的行与行之间的距离将比较小，您不妨试试看。3.blockquote/blockquote在blockquote/blockquote标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。4.dl/dldt/dtdd/dddl/dl用来创建一个普通的列表，dt/dt用来创建列表中的上层项目，dd/dd用来创建列表中最下层项目，dt/dt和dd/dd都必须放在dl/dl标志对之间。看一下下边的例子您就会明白了：例2创建一个普通列表htmlheadtitle一个普通列表/title/headbodytext=bluedldt中国城市/dtdd北京/dddd上海/dddd广州/dddt美国城市/dtdd华盛顿/dddd芝加哥/dddd纽约/dd/dl/body/html此例在浏览器中的显示如下:中国城市北京上海广州美国城市华盛顿芝加哥纽约5.ol/olul/ulli/liol/ol标志对用来创建一个标有数字的列表；ul/ul标志对用来创建一个标有圆点的列表；li/li标志对只能在ol/ol或ul/ul标志对之间使用，此标志对用来创建一个列表项，若li/li放在ol/ol之间则每个列表项加上一个数字，若在ul/ul之间则每个列表项加上一个圆点。请看下边的例子：例3标有数字或圆点的列表htmlheadtitle/title/headbodytext=blueolp中国城市/pli北京/lili上海/lili广州/li/olulp美国城市/pli华盛顿/lili芝加哥/lili纽约/li/ul/body/html此例在浏览器中的显示如下:中国城市1.北京2.上海3.广州美国城市华盛顿芝加哥纽约6.div/divdiv/div标志对用来排版大块Html段落，也用于格式化表，此标志对的用法与p/p标志对非常相似，同样有align对齐方式属性，读者可以自己试试看。返回教程HTML文本标志教程三、文本标志1.pre/pre2.h1/h1……h6/h63.b/bi/iu/u4.tt/ttcite/citeem/emstrong/strong5.font/font上一个教程中我们已经讲了如何在浏览器中输出文本，以及文本输出的格式，这个教程中我们将谈一谈文本输出的字体，如斜体、黑体字、下加一划线等等。在本教程的最后给出了一个文本标志的综合示例，希望读者能认真阅读。1.pre/prepre/pre标志对用来对文本进行预处理操作。2.h1/h1……h6/h6Html语言提供了一系列对文本中的标题进行操作的标志对：h1/h1……h6/h6，即一共有六对标题的标志对。h1/h1是最大的标题，而h6/h6则是最小的标题，也即是标志中h后面的数字越大标题文本就越小。如果您的Html文档中需要输出标题文本的话，便可以使用这六对标题标志对中的任何一对。3.b/bi/iu/u经常使用WORD的人对这三对标志对一定很快就能掌握。b/b用来使文本以黑体字的形式输出；i/i用来使文本以斜体字的形式输出；u/u用来使文本以下加一划线的形式输出。后边将会有一个综合的例子，所以此处就不再作详细讲解了。4.tt/ttcite/citeem/emstrong/strong这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。tt/tt用来输出打字机风格字体的文本；cite/cite用来输出引用方式的字体，通常是斜体；em/em用来输出需要强调的文本(通常是斜体加黑体)；strong/strong则用来输出加重文本(通常也是斜体加黑体)。这些标志对的示例也将在后边综合的例子中出现。5.font/fontfont/font是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小，它可以取值：-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值是我们在教程一中讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。具体用法请看下边综合的例子。例4文本标志的综合示例htmlheadtitle文本标志的综合示例/title/headbodytext=blueh1最大的标题/h1h3使用h3的标题/h3h6最大的标题/h6pb黑体字文本/b/ppi斜体字文本/i/ppu下加一划线文本/u/pptt打字机风格的文本/tt/ppcite引用方式的文本/cite/ppem强调的文本/em/ppstrong加重的文本/strong/ppfontsize=+1color=redsize取值“+1”、color取值“red”时的文本/font/p/body/html本例在浏览器中显示的结果如下：最大的标题使用h3的标题最大的标题黑体字文本斜体字文本下加一划线文本打字机风格的文本引用方式的文本强调的文本加重的文本size取值“+1”、color取值“red”时的文本返回教程HTML图像标志教程四、图像标志1.img2.hr再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，Html语言也专门提供了img标志来处理图像的输出。1.imgimg标志并不是真正地把图像给加入到Html文档中，而是将标志对的src属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是相对路