??涔??瑰???版??缃?绔?
??浠?澶ч?ㄥ????璁捐?″?渚??у?ㄩ???ㄤ?缁???琛ㄦ?煎?灞???琛ㄧ?颁?缁???娣锋???ㄤ?璧风???瑰??ュ缓绔?缃?绔???瀛??浣跨??HTML+CSS???规???瑕?涓?涓?杩?绋?锛?浣跨?版??缃?绔?绗???缃?绔?????涔?涓????戒?姝ュ?颁?????濂界???规???寰?搴?娓?杩?锛????舵?垫?ラ??姝ヨ揪?板???ㄧ????缃?绔?????????????濡???浣????版??锛?????瀵逛唬??涓???寰?????锛?涔???浠ラ???ㄩ?靛惊??????缂?杈?宸ュ?凤?渚?濡?Dreamweaver MX 2004锛?瀹???????????CSS??????瀹?????宸ュ?枫??
1锛???绾ф?瑰??
- 涓洪〉?㈡坊??姝ｇ‘??DOCTYPE
寰?澶?璁捐?″???寮??????戒??ラ??浠?涔???DOCTYPE锛?DOCTYPE??浠?涔??ㄣ??DOCTYPE??document type??绠?????涓昏??ㄦ?ヨ?存??浣??ㄧ??XHTML????HTML??浠?涔???????娴?瑙??ㄦ?规??浣?DOCTYPE瀹?涔???DTD(??妗ｇ被??瀹?涔?)?ヨВ??椤甸??唬??????浠ワ?濡???浣?涓?娉ㄦ??璁剧疆浜???璇???DOCTYPE锛?缁???浼?璁╀?澶у??涓?????XHTML1.0??渚?浜?涓?绉?DOCTYPE?????╋?
(1)杩?娓″??锛?Transitional 锛?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)涓ユ?煎??锛?Strict 锛?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)妗??跺??锛?Frameset 锛?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
瀵逛???浠???绾ф?瑰???ヨ?达???瑕????ㄨ?娓″????澹版??灏卞??浠ヤ???瀹?渚??跺??浠ュ?煎?逛???琛ㄦ?煎?灞???琛ㄧ?版??璇?绛?锛?涓??充?璁╀?瑙?寰?????澶?澶э??句互???°??
Tip:浣???寰?杈??ヤ??㈣?娓″??浠ｇ????璇?锛???浠ヨ?块??http://www.macromedia.com/缃?绔???棣?椤碉??跺???ョ??婧?浠ｇ??锛???head?哄???风??浠ｇ???疯?绮?璐村氨??浠ヤ???
- 璁惧??涓?涓???瀛?绌洪?达?Namespace锛?
?存?ュ??OCTYPE澹版?????㈡坊??濡?涓?浠ｇ??锛?
<html XMLns="http://www.w3.org/1999/xhtml" >
涓?涓?namespace???堕????绱?绫诲????灞??у??瀛???涓?涓?璇????DTD锛?namespace澹版????璁镐???杩?涓?涓??ㄧ嚎?板???????ヨ????浣???namespace????瑕??ф?疯??ヤ唬??灏卞??浠ャ??
- 澹版??浣???缂???璇?瑷?
涓轰?琚?娴?瑙??ㄦ?ｇ‘瑙ｉ??????杩???璇??￠??锛???????XHTML??妗ｉ?藉?椤诲０??瀹?浠???浣跨?ㄧ??缂???璇?瑷???浠ｇ??濡?涓?锛?
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
杩???澹版????缂???璇?瑷???绠?浣?涓???GB2312锛?浣?濡?????瑕??朵?绻?浣???瀹癸???浠ュ??涔?涓?IG5??
- ?ㄥ???瀛?姣?涔???????????绛?
XML瀵瑰ぇ灏???????????锛???浠ワ?XHTML涔???澶у??????哄????????????XHTML??绱???灞??х????瀛??藉?椤讳娇?ㄥ?????????浣?????妗ｅ?琚?W3C?￠??璁や负??????????渚?濡?涓??㈢??浠ｇ????涓?姝ｇ‘??锛?
<TITLE>???哥??浠?</TITLE>
姝ｇ‘????娉???锛?
<title>???哥??浠?</title> ???风??锛?<P>?规??<p>锛?<B>?规??<b>绛?绛???杩?姝ヨ浆?㈠?绠?????
- 涓哄?剧??娣诲?? alt 灞???
涓烘?????剧??娣诲??alt灞??с??alt灞??ф??瀹?浜?褰??剧??涓??芥?剧ず???跺??灏辨?剧ず渚??挎?㈡????锛?杩??峰??瀵规?ｅ父?ㄦ?峰????????锛?浣?瀵圭函????娴?瑙??ㄥ??浣跨?ㄥ?骞???璇绘?虹???ㄦ?锋?ヨ?存???冲?抽??瑕?????????娣诲??浜?alt灞??э?浠ｇ????浼?琚?W3C姝ｇ‘?ф?￠????杩???娉ㄦ????????浠?瑕?娣诲??????涔???alt灞??э?璞′??㈣??风????娉?姣?????涔?锛?
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
姝ｇ‘????娉?锛?
<img src="logo_unc_120x30.gif" alt="UNC???告??蹇?锛??瑰?昏???棣?椤?>
- 缁?????灞??у?煎??寮???
??TML涓?锛?浣???浠ヤ???瑕?缁?灞??у?煎??寮??凤?浣?????HTML涓?锛?瀹?浠?蹇?椤昏???寮??枫??
渚?锛?height="100"锛???涓??芥??height=100??
- ?抽??????????绛?
??HTML涓?锛?姣?涓?涓???寮?????绛鹃?藉?椤诲?抽????灏辫薄杩??凤?
<p>姣?涓?涓???寮?????绛鹃?藉?椤诲?抽????</p> <b>HTML??浠ユ?ュ??涓??抽??????锛?XHTML灏变???浠ャ??</b>
杩?涓?瑙?????浠ラ?垮??HTML??娣蜂贡??楹荤????涓句??ヨ?达?濡???浣?涓??抽???惧????绛撅??ㄤ?浜?娴?瑙??ㄤ腑灏卞???藉?虹??SS?剧ず??棰????ㄨ?绉??规??界‘淇?椤甸?㈠??浣?璁捐?＄??涓??锋?剧ず????瑕?璇存??????锛?绌烘??绛句?瑕??抽??锛??ㄦ??绛惧熬?ㄤ娇?ㄤ?涓?姝ｆ????"/"?ュ?抽??瀹?浠???宸便??渚?濡?锛?
<br /> <img src="webstandards.gif" />
缁?杩?涓?杩颁?涓?瑙???澶?????锛?椤甸?㈠氨?烘??绗???XHTML1.0??瑕?姹???浣???浠?杩???瑕??￠??涓?涓?????????绗???????浜?????浠???浠ュ?╃??3C??渚???璐规?￠?????★?http://validator.w3.org/锛??????伴??璇?????涓?淇??广???ㄥ???㈢??璧?婧???琛ㄤ腑??浠?涔???渚?浜??朵??￠?????″??瀵规?￠??杩?琛???瀵肩??缃???锛???浠ヤ?涓?3C?￠????琛ュ????褰???????杩?浜?XHTML楠?璇?锛?????浣?宸茬???缃?绔?????杩??轰?涓?澶ф?ャ??涓????宠薄涓????ｄ??惧?э?
2锛?涓?绾ф?瑰??
?ヤ??ユ??浠????瑰??涓昏??ㄧ?????琛ㄧ?扮?稿??绂讳?锛?杩?涓?姝ヤ?璞＄??涓?姝ラ?ｄ?瀹规??瀹??帮???浠???瑕?瑙?蹇典???杞???锛?浠ュ??瀵?SS2??????瀛????杩??ㄣ??浣?瀛??浠讳??扮?ヨ???介??瑕??辩?规?堕?寸??锛?涓?????锛?璇?绐??ㄤ?杈瑰??杈瑰??????濡?浣?涓??撮???ㄨ〃?煎?灞?锛??规??娌＄?ㄨ? CSS锛?涔?涓?蹇??ヤ?璺?琛ㄦ?煎?灞?璇村??瑙?锛?浣???浠ュ???ㄦ?峰?琛ㄤ唬??font ??绛俱??????浣?瀛??扮??瓒?澶?锛?浣??藉????灏辫?澶???濂斤?涓?璧锋?ョ??????浠???瑕?????浜?浜?锛?
- ??SS瀹?涔???绱?澶?瑙?
??浠??ㄥ????璇??跺凡缁??绘??涔???锛?褰?甯???瀛?浣?澶х?瑰氨??lt;h1>锛?甯????ㄥ???㈠??涓??圭???峰氨??lt;li>????浠??绘????lt;h1>????????澶х??锛?<li>???????????癸?<b>????????????绮???????????瀹???涓?锛? <h1>?藉????浣??宠???浠讳??峰??锛???杩?CSS锛?<h1>?藉????灏???瀛?浣?锛?<p>?????藉?????宸ㄥぇ????绮?浣???锛?<li>?藉?????涓?寮??剧??绛?绛?????浠?涓??藉己杩??ㄧ?????绱?瀹??拌〃?版????锛???浠?搴?璇ヤ娇??SS?ョ‘瀹??ｄ???绱???澶?瑙???渚?濡?锛???浠???浠ヤ娇???ラ?璁ょ??6绾ф??棰???浠ョ??璧锋?ュぇ灏?涓??凤?
h1, h2, h3, h4, h5, h6{ font-family: 瀹?浣?, serif; font-size: 12px; }
- ?ㄧ???????绱?浠ｆ?挎????涔???????
璁稿?浜哄???戒??ラ?戒??ラ??HTML??XHTML??绱?璁捐?℃???????ㄦ?ヨ〃杈剧?????????浠?寰?澶?浜哄凡缁?涔????ㄥ??绱??ユ?у?惰〃?帮???涓???缁?????渚?濡?锛?涓?娈靛??琛ㄥ??瀹瑰???戒?浣跨?ㄤ??㈣??风????璇?锛?
?ュ??涓?<br /> ?ュ??浜?<br /> ?ュ??涓?<br />
濡?????浠????ㄤ?涓???搴???琛ㄤ唬?夸??村ソ锛?
<ul> <li>?ュ??涓?</li> <li>?ュ??浜?</li> <li>?ュ??涓?</li> </ul>
浣???璁镐?璇粹??浣???<li>?剧ず????涓?涓????癸???涓??崇?ㄥ???光????浜?瀹?涓?锛?CSS娌℃??璁惧????绱???璧锋?ユ??浠?涔??峰??锛?浣?瀹??ㄥ??浠ョ??SS?虫?????广??
- 缁?姣?涓?琛ㄦ?煎??琛ㄥ????涓?id
缁?琛ㄦ?兼??琛ㄥ??璧?浜?涓?涓???涓?????缁???????璁帮?渚?濡?
<table id="menu">
?ヤ??ワ??ㄤ功???峰?琛ㄧ???跺??锛?浣?灏卞??浠ュ??寤轰?涓???menu???????╁???骞朵??宠??涓?涓?CSS瑙???锛??ㄦ?ュ??璇?琛ㄦ?煎????????????绛惧???????朵???绱???涔??绘?剧ず??杩??凤?涓???瑕?瀵规??涓?<td>??绛鹃??甯??浜?澶?浣????????ㄥ甫瀹界??琛ㄧ?板???楂???瀹姐??瀵归???????棰??茬??绛?灞??с??????瑕?涓?涓?????????璁帮???璁扳??menu????id??璁帮?锛?浣?灏卞??浠ュ?ㄤ?涓???绂荤???峰?琛ㄥ??涓哄共??????绱у????浠ｇ????璁拌?琛??瑰????琛ㄧ?板?澶?????
涓?绾ф?瑰????浠?杩???????涓昏???涓??癸?浣??朵腑????????瀹瑰???ヨ???归??甯稿?锛???瑕???浠???姝ュ????????★??村?版????瀹??板???ㄩ????SS??涓????ㄤ换浣?琛ㄦ?煎???板?灞???
?
![一个小小的移动web版音乐播放器[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)