Ç°Ò³ ºóÒ³ Ŀ¼ ÔªËØ ÌØÐÔ
×÷ Õß Ó¦ µ± ÔÚ Ã¿ Ò» ·Ö ÎÄ µµ µÄ µÚ 1 ÐÐ °ü À¨ Ò» ¸ö Èç Ï µÄ Àà ËÆ Éù Ã÷:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">Éù Ã÷ µÄ ×î ºó Á½ ¸ö ×Ö Ä¸ Ö¸ HTML DTD µÄ Óï ÑÔ, ÔÚ ´Ë Àý Ϊ Ó¢ Óï ("EN"). Óà »§ ´ú Àí Æ÷ ¿É ÄÜ ºö ÂÔ ´Ë ЊϢ.
×÷ Õß ¿É ÒÔ ¸ù ¾Ý Óë Ëü ÃÇ µÄ ÎÄ µµ Ïà ÒË µÄ HTML µÄ °æ ±¾ ʹ Óà Æä Ëü ÐΠʽ µÄ Ãè Êö. HTML 4.0 ½¨ Òé µÄ ÎÄ µµ ÐΠʽ Ϊ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">Ö¸ ³ö ÎÄ µµ ×ñ Ñ HTML 4.0 ²Ý °¸ ¹æ ¸ñ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">»ò
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">Ôò Ö¸ ³ö ÁË ÎÄ µµ ×ñ Ñ HTML 4.0 ×î ºó ¹æ ¸ñ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">Ôò Ö¸ Ã÷ ÎÄ µµ ×ñ ÊØ Ïê ¾¡ µÄ HTML 4.0 ¹æ ¸ñ.
µ± Äú ´ò Ëã ¶Ô ÎÄ µµ ÊÊ µ± µØ ²» ʹ Óà HTML ³Â Êö µÄ Ôª ËØ ºÍ ÌØ ÐÔ, Èç ×ÖÌå(FONT) Ôª ËØ ºÍ ¶ÔÆë(align) ÌØ ÐÔ Ê± ¿É ÓÃ:
<!DOCTYPE HTML SYSTEM "http://www.w3.org/MarkUp/Cougar/relaxed.dtd">±í ʾ ×ñ Ñ W3C Web ½Ú µã µÄ DTD
<!DOCTYPE HTML SYSTEM "http://www.w3.org/MarkUp/Cougar/strict.dtd">Ôò ±í ʾ ´ò Ëã ÑÏ ¸ñ ×ñ Ñ W3C Web ½Ú µã µÄ DTD
<!ENTITY % version "version CDATA #FIXED '%HTML.Version;'"> <!ENTITY % html.content "HEAD, (FRAMESET|BODY)"> <!ELEMENT HTML O O (%html.content)> <!ATTLIST HTML %version; %i18n; -- lang, dir -- >¿ª ʼ ±ê ¼Ç: ¿É Ñ¡, ½á Êø ±ê ¼Ç: ¿É Ñ¡
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Draft//EN> <HTML> ...The head, body, etc. goes here... </HTML>
<!-- %head.misc defined earlier on as "SCRIPT | STYLE | META | LINK" --> <!ENTITY % head.content "TITLE & ISINDEX & BASE"> <!ELEMENT HEAD O O (%head.content) +(%head.misc)> <!ATTLIST HEAD %i18n; -- lang, dir -- profile %URL #IMPLIED -- named dictionary of meta info -- >¿ª ʼ ±ê ¼Ç: ¿É Ñ¡, ½á Êø ±ê ¼Ç: ¿É Ñ¡
<!ELEMENT TITLE - - (#PCDATA)* -(%head.misc) -- The TITLE element is not considered part of the flow of text. It should be displayed, for example as the page header or window title. Exactly one title is required per document. --> <!ATTLIST TITLE %i18n>¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª ÿ Ò» ¸ö HTML ÎÄ µµ ±Ø Ðë HEAD ²¿ ·Ö °ü À¨ Ò» ¸ö Õý È· µÄ TITLE Ôª ËØ. Óà »§ ´ú Àí Æ÷ ͨ ³£ ͨ ¹ý ±ê Ìâ À´ ¸ø ÈË ÃÇ Ò» Щ ¸Å Äî, Èç °Ñ ±ê Ìâ ×÷ Ϊ ˵Ã÷ ´Ê, »ò °Ñ Ëü ¶Á ³ö À´.
±ê Ìâ ¿É ÒÔ °ü º¬ ×Ö·ûÌõÄ¿ (¶Ô ÓÚ Óï Æø Ç¿ µ÷, ÌØ Êâ ×Ö ·û µÈ µÈ), µ« ²» ¿É ÒÔ °ü À¨ Æä Ëü µÄ ±ê ×¢. Õâ ÊÇ Ò» ¸ö ÎÄ µµ ±ê Ìâ µÄ Àý ³Ì:
<HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> ... other head elements... </HEAD> <BODY> ... document body... </BODY> </HTML>Ïà Ó¦ ÓÚ TITLE Ôª ËØ µÄ ÊÇ title ÌØ ÐÔ.
...some text... Here's a photo of <A href="http://someplace.com/neatstuff.gif" title="Me scuba diving"> me scuba diving last summer </A> ...some more text...µ± ʹ Óà LINK Ôª ËØ À´ Ö¸ ¶¨ Ò» ·Ý Íⲿ·ç¸ñÒ³ ʱ title aÌØ ÐÔ ÓÐ Ò» ¸ö ¶î Íâ µÄ ×÷ ÓÃ. ¹Ø ÓÚ Ï¸ ½Ú Çë ²Î ÔÄ Ïà Ó¦ µÄ µ¥ ½Ú.
µ± Ç° µÄ HTML ˵ Ã÷ Êé ÔÊ Ðí ×÷ Õß Èç Ï ָ ¶¨ Ëû ÃÇ ÎÄ µµ µÄ ·û ºÏ ЊϢ:
<!ELEMENT META - O EMPTY -- Generic Metainformation --> <!ATTLIST META %i18n; -- lang, dir, for use with content string -- http-equiv NAME #IMPLIED -- HTTP response header name -- name NAME #IMPLIED -- metainformation name -- content CDATA #REQUIRED -- associated information -- scheme CDATA #IMPLIED -- select form of content -- >¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: ½û Ö¹
¶Ô ÓÚ Ï ÁÐ µÄ ÌØ ÐÔ, Ëü ÃÇ µÄ ÔÊ Ðí µÄ Öµ ºÍ ½â Òë ·½ ʽ È¡ ¾ö ÓÚ ÂÖÀªÃèÊö:
name ÌØ ÐÔ Ö¸ ¶¨ Êô ÐÔ ¶ø content ÌØ ÐÔ Ôò Ö¸ ¶¨ Êô ÐÔ µÄ Öµ. Àý Èç,
<META name="Author" content="Dave Raggett">lang ÌØ ÐÔ ¿É Óë META Ò» Æð ʹ Óà À´ Ö¸ ¶¨ content ÌØ ÐÔ Öµ µÄ Óï ÑÔ. Õâ ÔÊ Ðí Óï Òô ϵ ͳ ¸ù ¾Ý ·¢ Òô ¹æ ¸ñ À´ Ó¦ Óà Óï ÑÔ.
<META name="Author" lang="fr" content="Arnaud Le Hors">
<META name="refresh" content="3,http://www.acme.com/intro.html">Õâ ¸ö ÄÚ ÈÝ ÖÐ µÄ Êý ×Ö Ö¸ ¶¨ ÁË ÑÓ Ê± Ãë Êý, ÔÚ URL ±» µ÷ Èë ºó ¼Æ ʱ ¿ª ʼ. Õâ ¸ö ½á ¹¹ ͨ ³£ ±» Óà À´ Ïò Óà »§ Õ¹ ʾ Ò» ¸ö ·É ¿ì µÄ ½é ÉÜ. ²» ¹ý, ÓÉ ÓÚ Ä³ Щ Óà »§ ´ú Àí Æ÷ ²» Ìá ¹© Õâ ¸ö ½á ¹¹, ×÷ Õß Ó¦ µ± ÔÚ ½é ÉÜ Ò³ ÖÐ °ü º¬ Õâ ¸ö ÄÚ ÈÝ À´ Òý µ¼ Óà »§ ÈÆ ¿ª Ëü (Ëù ÒÔ »¹ ²» ×÷ Ϊ ±£ Áô µÄ ½é ÉÜ Ò³ µÄ "×é ³É ²¿ ·Ö").
<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">»á ʹ HTTP Í· ±í ÏÖ Îª:
Expires: Tue, 20 Aug 1996 14:25:27 GMTÕâ ¿É ÒÔ Èà »º ³å À´ ¾ö ¶¨ ºÎ ʱ È¡ µÃ Ò» ·Ý ¹Ø Áª ÎÄ µµ µÄ Ë¢ Р°æ ±¾.
<META name="keywords" lang="en" content="vacation,Greece,sunshine"> <META name="keywords" lang="fr" content="vacances,Grèce,soleil">ËÑ Ë÷ Òý Ë÷ µÄ Ч Á¦ Ò² ¿É ÒÔ Í¨ ¹ý ʹ Óà LINK Ôª ËØ À´ Ö¸ ¶¨ ת »» ·½ ¹¤ À´ Ìá ¸ß, Æä ÖÐ Æä Ëü Óï ÑÔ ÎÄ µµ, Á´ ½Ó µ½ ÎÄ µµ °æ ±¾ µÄ Æä Ëü ý Ìå ¸ñ ʽ (Èç PDF) ÒÔ ¼° µ± ÎÄ µµ ÊÇ Ò» ¸ö ¼¯ ºÏ µÄ ²¿ ·Ö, Á´ ½Ó µ½ ä¯ ÀÀ ¼¯ µÄ ÊÊ ÒË ¿ª ʼ ´¦ µÈ µÈ.
<HEAD> <META http-equiv="PICS-Label" content=' (PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1)) '> <TITLE>..title goes here..</TITLE> </HEAD> <BODY> ...the body... </BODY>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
<HEAD profile="http://www.acme.com/profiles/core"> <TITLE>How to complete Memorandum cover sheets</TITLE> <META name="author" content="John Doe"> <META name="copyright" content="© 1997 Acme Corp."> <META name="keywords" content="corporate,guidelines,cataloging"> <META name="date" content="23 Jan 1997 16:05:31 GMT"> </HEAD>
Sun, 06 Nov 1994 08:49:37 GMT ; RFC 822, ÓÉ RFC 1123 ¸ü РSunday, 06-Nov-94 08:49:37 GMT ; RFC 850, ±» RFC 1036 ÌÔ Ì Sun Nov 6 08:49:37 1994 ; ANSI C µÄ asctime() ¸ñ ʽ¸ù ¾Ý [RFC2068], µÚ Ò» ÖÖ ¸ñ ʽ ÊÇ Ê× Ñ¡ µÄ. Ëü ´ú ±í ÁË Ò» ÖÖ ÔÚ [RFC1123] ([RFC822] µÄ Éý ¼¶) ÖÐ ¶¨ Òå µÄ ×é ºÏ ³¤ ¶È µÄ ×Ó ¼¯. µÚ ¶þ ÖÖ ¸ñ ʽ ÊÇ Í¨ ³£ ±» ʹ Óà µÄ, µ« Ëü »ù ÓÚ ±» ÌÔ Ì µÄ [RFC850] µÄ ÈÕ ÆÚ ¸ñ ʽ ²¢ ÇÒ È± ·¦ 4-Êý ×Ö Äê ·Ý. HTTP 1.1 ¿Í »§ ±Ø Ðë ½Ó ÊÜ Ëù ÓÐ µÄ Õâ Щ ¸ñ ʽ, µ« ÔÚ HTML Í· ÖÐ Ö» ʹ Óà [RFC1123] ¸ñ ʽ. Ï£ Íû HTML Óà »§ ´ú Àí Æ÷ ÔÚ ´Ë ÎÊ Ìâ ÉÏ ×ñ Ñ HTTP 1.1, ²¢ ÇÒ ¶î Íâ µØ Ö¸ ¹© [ISO8601] ÈÕ ÆÚ ¸ñ ʽ, Àý Èç "1997-01-23T16:05:31+00:00". ¹Ø ÓÚ ¸ü ¶à µÄ ЊϢ, Çë ²Î ÔÄ INS ºÍ DEL Ôª ËØ ²¿ ·Ö.
µ± ÓÐ Êô ÐÔ Ìá ¹© ¶à ÖÖ ¸ñ ʽ ʱ, scheme ÌØ ÐÔ Öµ Óà À´ ±ê ʶ content ÌØ ÐÔ ÆÚ Íû µÄ Öµ. ÔÊ Ðí µÄ scheme ÌØ ÐÔ µÄ Öµ È¡ ¾ö ÓÚ name Êô ÐÔ µÄ ÂÖÀªÃèÊö.
<META scheme="dds" name="description" content="04.251 Supercomputers systems design"> <META scheme="ISBN" name="identifier" content="0-8230-2355-9">
<!ENTITY % block "(%blocklevel | %inline)*"> <!ENTITY % Color "CDATA" -- a color using sRGB: #RRGGBB as Hex values --> <!-- There are also 16 widely known color names with their sRGB values: Black = #000000 Green = #008000 Silver = #C0C0C0 Lime = #00FF00 Gray = #808080 Olive = #808000 White = #FFFFFF Yellow = #FFFF00 Maroon = #800000 Navy = #000080 Red = #FF0000 Blue = #0000FF Purple = #800080 Teal = #008080 Fuchsia= #FF00FF Aqua = #00FFFF --> <!ENTITY % bodycolors " bgcolor %Color #IMPLIED text %Color #IMPLIED link %Color #IMPLIED vlink %Color #IMPLIED alink %Color #IMPLIED "> <!ELEMENT BODY O O (%block) -(BODY) +(INS|DEL)> <!ATTLIST BODY %attrs; -- %coreattrs, %i18n, %events -- background %URL #IMPLIED -- texture tile for document background -- %bodycolors; -- bgcolor, text, link, vlink, alink -- onload %Script #IMPLIED -- the document has been loaded -- onunload %Script #IMPLIED -- the document has been removed -- >¿ª ʼ ±ê ¼Ç: ¿É Ñ¡, ½á Êø ±ê ¼Ç: ¿É Ñ¡
²» ÔÞ ³É Àý ³Ì:
<HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> /HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuschia" vlink="maroon"> ... document body... </BODY> </HTML>ʹ Óà ·ç¸ñÒ³, Ïà ͬ µÄ Ч ¹û ¿É ÒÔ Èç Ï Íê ³É:
<HTML>
<HEAD>
<TITLE>A study of population dynamics</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuschia }
</STYLE>
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>
ʹ Óà ·ç ¸ñ Ò³ ¸ø Äã µ÷ Õû ÎÄ µµ ±í ´ï µÄ µ¯ ÐÔ ¶ø ²» Óà ¸Ä ±ä ÎÄ µµ:
<HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <LINK rel="stylesheet" type="text/css" href="smartstyle.css"> </HEAD> <BODY> ... document body... </BODY> </HTML>
Ò» ¸ö ÓÉ id Ö¸ ¶¨ µÄ ±ê ʶ ·û ÔÚ Ò» ·Ý ÎÄ µµ ÖÐ ±Ø Ðë ÊÇ Î¨ Ò» µÄ. Ò» ¸ö class Ö¸ ¶¨ µÄ Àà Ãû ¿É ÒÔ ±» Êý ¸ö Ôª ËØ Êµ Àý ¹² Ïí. Àà µÄ Öµ Ó¦ µ± Ñ¡ Óà ÄÜ ¹» ±æ ÈÏ µÄ Óë Ôª ËØ ÓÐ ¹Ø µÄ ´Ê, Èç note, example ÒÔ ¼° warning µÈ.
Õâ Щ ÌØ ÐÔ ¿É ÒÔ Í¨ ¹ý Ï ÁР; ¾¶ ʹ ÓÃ:
<HEAD>
<STYLE
PRE.example { background : green }
</STYLE
</HEAD>
<BODY>
<PRE class="example" id="example-1">
...example code here...
</PRE>
</BODY>
¶Ô ´Ë Àý ³Ì ͨ ¹ý Éè ¶¨ id ÌØ
ÐÔ, ÎÒ ÃÇ ÄÜ ¹» (1) Ϊ Æä ½¨ Á¢ Ò» ¸ö ³¬ Á´ ºÍ (2) ³¬ Ô½ ʵ Àý ·ç ¸ñ µÄ
Àà ·ç ¸ñ ЊϢ.<!ELEMENT DIV - - %block> <!ATTLIST DIV %attrs; -- %coreattrs, %i18n, %events -- %align; -- align, text alignment -- > <!ELEMENT SPAN - - (%inline)* -- generic language/style container --> <!ATTLIST SPAN %attrs; -- %coreattrs, %i18n, %events -- >¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
ÔÚ ´Ë Àý ÖÐ, ÿ ¸ö ¿Í »§ µÄ ÐÕ Êô ÓÚ "client-last-name" Àà µÈ µÈ. ÎÒ ÃÇ Ò² ·Ö Åä ¸ø ÿ ¸ö Óà »§ Ò» ¸ö Ψ Ò» ±ê Ö¾ ·û ("client-boyera", "client-lafon" µÈ µÈ).
<DIV id="client-boyera" class="client"> <SPAN class="client-last-name">Last name:</SPAN> Boyera, <SPAN class="client-first-name">First name:</SPAN> Stephane <SPAN class="client-tel">Telephone:</SPAN> (212) 555-1212 <SPAN class="client-email">Email:</SPAN> sb@foo.org </DIV> <DIV id="client-lafon" class="client"> <SPAN class="client-last-name">Last name:</SPAN> Lafon, <SPAN class="client-first-name">First name:</SPAN> Yves <SPAN class="client-tel">Telephone:</SPAN> (617) 555-1212 <SPAN class="client-email">Email:</SPAN> yves@bar.com </DIV>È» ºó, ÎÒ ÃÇ ¿É ÒÔ ¼ò µ¥ µØ °Ñ ·ç ¸ñ ЊϢ ¼Ó µ½ ÎÒ ÃÇ µÄ ÎÄ µµ À´ ʹ Õâ Щ Êý ¾Ý ¿â Ìõ Ä¿ ºÍ г ÏÔ Ê¾.
DIV Óë Ö® Ïà ·´ , ÊÇ ·â ±Õ ¼¶ Ôª ËØ. Ëü ¿É ÒÔ Óà À´ ¶Ô Æä Ëü µÄ ·â ±Õ ¼¶ Ôª ËØ ±à ×é, µ« ²» ÄÜ Óà ÓÚ ¶Î Âä Ôª ËØ ÖÐ. DIV Ôª ËØ ½ô ¸ú Ò» ¸ö ´ò ¿ª µÄ P Ôª ËØ ½« ÖÕ Ö¹ ÄÇ ¸ö ¶Î Âä.
Óà »§ ´ú Àí Æ÷ ͨ ³£ ÔÚ DIV Ôª ËØ Ç° ºó ·Å Öà һ ¸ö »» ÐÐ, Àý Èç:
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>Õâ µä ÐÍ µØ ±» äÖ È¾ ³É:
aaaaaaaaa bbbbbbbbb ccccc cccccÄã µÄ Óà »§ ´ú Àí Æ÷ Ò² ¿É ÄÜ Èç Ï äÖ È¾:
ccccc
<!ENTITY % heading "H1|H2|H3|H4|H5|H6"> <!-- There are six levels of headings from H1 (the most important) to H6 (the least important). --> <!ELEMENT (%heading) - - (%inline;)*> <!ATTLIST (%heading) %attrs; -- %coreattrs, %i18n, %events -- %align; -- align, text alignment -- >¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
HTML ÖÐ ÓÐ 6 ÖÖ ¼¶ ±ð µÄ Òý µ¼ ´Ó ×î ÖØ Òª H1 µ½ ×î ²» ÖØ Òª µÄ H6. Óà »§ ´ú Àí Æ÷ ½« ʹ Óà ½Ï ´ó µÄ ×Ö Ìå À´ äÖ È¾ ±È ½Ï ÖØ Òª µÄ Òý µ¼ ЊϢ.
<DIV class="section" id="forest-elephants" > <H1>Forest elephants</H1> In this section, we discuss the lesser known forest elephants. ...this section continues... <DIV class="subsection" id="forest-habitat" > <H2>Habitat</H2> Forest elephants do not live in trees but among them. ...this subsection continues... </DIV> </DIV>Õâ ¸ö ½á ¹¹ ¿É ÒÔ Èç Ï ͨ ¹ý ·ç ¸ñ ЊϢ À´ ×° ÊÎ:
<HEAD>
<STYLE>
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>
<!ELEMENT ADDRESS - - ((%inline;) | P)*> <!ATTLIST ADDRESS %attrs; -- %coreattrs, %i18n, %events -- >¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: Ðè Òª
<ADDRESS> Newsletter editor<BR> J. R. Brown<BR> 8723 Buena Vista, Smallville, CT 01234<BR> Tel: +1 (123) 456 7890 </ADDRESS>
