HTML 高级教程

HTML布局在网络上，随处都可以看到像报纸那样的格式化分栏。HTML布局-使用表格OneverycommonpracticewithHTML,istouseHTMLtablestoformatthelayoutofanHTMLpage.Apartofthispageisformattedwithtwocolumns,likeanewspaperpage.Asyoucanseeonthispage,thereisaleftcolumnandarightcolumn.Thistextisdisplayedintheleftcolumn.AnHTMLtableisusedtodivideapartofthisWebpageintotwocolumns.Thetrickistouseatablewithoutborders,andmaybealittleextracell-padding.Nomatterhowmuchtextyouaddtothispage,itwillstayinsideitscolumnborders.同样的布局-添加了颜色OneverycommonpracticewithHTML,istouseHTMLtablestoformatthelayoutofanHTMLpage.Apartofthispageisformattedwithtwocolumns,likeanewspaperpage.Asyoucanseeatthispage,thereisaleftcolumnandarightcolumn.AnHTMLtableisusedtodivideapartofthisWebpageintotwocolumns.Thistextisdisplayedintherightcolumn.Thetrickistouseatablewithoutborders,andmaybealittleextracell-padding.Nomatterhowmuchtextyouaddtothispage,itwillstayinsideitscolumnborders.实例将HTML页面的一部分分割为表格的列是很容易的。为了您可以亲自尝试它，我们为您准备了这个简单的例子。HTML框架PreviousPageNextPage通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。实例垂直框架本例演示：如何使用三份不同的文档制作一个垂直框架。水平框架本例演示：如何使用三份不同的文档制作一个水平框架。（可以在本页底端找到更多实例。）框架通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：开发人员必须同时跟踪更多的HTML文档很难打印整张页面框架结构标签（frameset）框架结构标签（frameset）定义如何将窗口分割为框架每个frameset定义了一系列行或列rows/columns的值规定了每行或每列占据屏幕的面积编者注：frameset标签也被某些文章和书籍译为框架集。框架标签（Frame）Frame标签定义了放置在每个框架中的HTML文档。在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的25%。第二列被设置为占据浏览器窗口的75%。HTML文档frame_a.htm被置于第一个列中，而HTML文档frame_b.htm被置于第二个列中：framesetcols=25%,75%framesrc=frame_a.htmframesrc=frame_b.htm/frameset基本的注意事项-有用的提示：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在frame标签中加入：noresize=noresize。为不支持框架的浏览器添加noframes标签。重要提示：不能将body/body标签与frameset/frameset标签同时使用！不过，假如你添加包含一段文本的noframes标签，就必须将这段文字嵌套于body/body标签内。（在下面的第一个实例中，可以查看它是如何实现的。）更多实例如何使用noframes标签本例演示：如何使用noframes标签。混合框架结构本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。含有noresize=noresize属性的框架结构本例演示noresize属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。导航框架本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为contents.htm的文件包含三个链接。内联框架本例演示如何创建内联框架（HTML页中的框架）。跳转至框架内的一个指定的节本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个link.htm文件内指定的节使用aname=C10进行标识。使用框架导航跳转至指定的节本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。HTML字体PreviousPageNextPage在HTML中，字体标签是不被支持的。一般都认为，在今后版本的HTML中，这个标签会被清除出去。即使很多人都在用它，我们都应该尽量避免它，而使用样式取而代之。字体标签font使用类似下面的HTML代码，你可以定义浏览器输出的尺寸和类型：pfontsize=2face=VerdanaThisisaparagraph./font/ppfontsize=3face=TimesThisisanotherparagraph./font/pTIY字体属性属性例子作用size=numbersize=2定义字体大小。size=+numbersize=+1增加字体的大小。size=-numbersize=-1减少字体的大小。face=face-nameface=Times定义字体名称。color=color-valuecolor=#eeff00定义字体颜色。color=color-namecolor=red定义字体颜色。请不要使用字体标签在最新的HTML版本（HTML4和XHTML）中，字体标签已被废弃。万维网联盟已从其标准中删除了字体标签，在未来，样式表（CSS）将用来定义布局，以及显示HTML元素的属性。正确的方法-使用样式设置文字的字体本例演示如何设置文字的字体。设置文字的尺寸本例演示如何设置文字的尺寸。设置文字的颜色本例演示如何设置文字的颜色。设置文字的字体、字体尺寸、字体颜色本例演示如何设置文字的字体、字体尺寸、字体颜色.在何处可以学习到样式表？马上开始：把本教程完整地学习完毕！！！在随后的章节，我们将解释为什么类似font这样的标签会从标准中删除，以及如何在HTML文档中插入样式表。学习更多关于样式表的知识：学习我们的CSS教程。HTML3.2真的是特别糟糕！最初的HTML绝没有打算要包含支持格式化文档的标签。HTML标签原打算用于定义文档的的内容。pThisisaparagraph/ph1Thisisaheading/h1当诸如font这样的标签和color属性被加入HTML3.2的规范当中，它开始成为开发者的一场噩梦。那些不得不将字体和文字信息添加到每个单一网页的站点，其开发过程最终变成了漫长、昂贵和极其痛苦的过程。HTML4.0的优秀特性通过使用HTML4.0，所有的格式化信息都可以从HTML文件中剥离，并植入一个独立的样式表。因为HTML4.0将文档的表现与其结构分离，我们从而得到了我们一直需要的东西：在不把文档内容搞糟的情况下，对表现层进行完全的控制。我们应该做些什么？停止在HTML标签内部使用表现样式属性。我们的完整的HTML标签参考手册对HTML4.0标签和属性进行了简要的说明。请同时参阅我们的CSS教程，开始您崭新的开发生涯吧。为XHTML做好准备XHTML是新的HTML。你现在就应该为此做好准备。而您可以做的最重要的事情就是开始编写正确的HTML4.01代码。并且使用小写字母编写标签。记得关闭标签。决不要在没有/p标签的情况下结束一个段落。提示：官方的HTML4.01标准推荐使用小写的标签。如果您希望学习如何将站点升级至XHTML，请阅读我们的XHTML教程。验证HTML文件HTML文档是根据文档类型声明进行验证的。如果希望HTML文件被正确地验证，就要将恰当的DTD添加到文件的第一行。HTML4.01StrictDTD包含没有被反对使用或者不出现在框架中的元素和属性：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN包含strictDTD中所有的内容，外加被反对使用的元素和属性：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN包含transitionalDTD中所有的内容，外加对框架的支持：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Frameset//ENPreviousPageNextPage通过使用HTML4.0，所有的格式化代码均可移出HTML文档，然后移入一个独立的样式表。实例HTML中的样式本例演示如何使用添加到head部分的样式信息对HTML进行格式化。没有下划线的链接本例演示如何使用样式属性做一个没有下划线的链接。链接到一个外部样式表本例演示如何link标签链接到一个外部样式表。如何使用样式当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。headlinkrel=stylesheettype=text/csshref=mystyle.css/head内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过style标签定义内部样式表。headstyletype=text/cssbody{background-color:red}p{margin-left:20px}/style/head内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距。pstyle=color:red;margin-left:20pxThisisaparagraph/p访问我们的CSS教程，学习更多有关样式的知识。标签描述style定义样式定义。link定义资源引用。div定义文档中的节或区域（块级）。span定义文档中的行内的小块或区域。font规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。basefont定义基准字体。不赞成使用。请使用样式。center对文本进行水平居中。不赞成使用。请使用样式。HTML字符实体PreviousPageNextPage诸如“”之类的符号在HTML中拥有特殊的含义，所以在文本中使用它们。为了在HTML中显示小于号()，我们需要使用字符