软件开发培训班 >> 编程开发 >> CSS


HTML基础详解(上)

1銆佽璇哤EB

缃戦〉 涓昏鏄敱鏂囧瓧銆佸浘鍍忓拰瓒呴摼鎺ョ瓑鍏冪礌鏋勬垚锛屽綋鐒堕櫎浜嗚繖浜涘厓绱狅紝缃戦〉涓繕鍙互鍖呮嫭闊抽銆佽棰戜互鍙奆lash绛夈�?/p>

娴忚鍣?/strong> 鏄綉椤垫樉绀恒�佽繍琛岀殑骞冲彴銆?/p>

娴忚鍣ㄥ唴鏍?/strong>(鎺掔増寮曟搸銆佽В閲婂紩鎿庛�佹覆鏌撳紩鎿?

璐熻矗璇诲彇缃戦〉鍐呭锛屾暣鐞嗚鎭紝璁＄畻缃戦〉鐨勬樉绀烘柟寮忓苟鏄剧ず椤甸潰銆?/p>

娴忚鍣?/th> 鍐呮牳 澶囨敞
IE Trident IE銆佺寧璞瑰畨鍏ㄣ�?60鏋侀�熸祻瑙堝櫒銆佺櫨搴︽祻瑙堝櫒
firefox Gecko 鍙儨杩欏嚑骞村凡缁忔病钀戒簡锛屾墦寮�閫熷害鎱€�佸崌绾ч绻併�佺尓涓�鏍风殑闃熷弸flash銆佺涓�鏍风殑瀵规墜chrome銆?/td>
Safari webkit 鐜板湪寰堝浜洪敊璇湴鎶?webkit 鍙仛 chrome鍐呮牳锛堝嵆浣?chrome鍐呮牳宸茬粡鏄?blink 浜嗭級銆傝嫻鏋滄劅瑙夊儚琚埆浜烘姠浜嗗濡囷紝閮藉摥鏅曞湪鍘曟墍閲岄潰浜嗐�?/td>
chrome Chromium/Blink 鍦?Chromium 椤圭洰涓爺鍙?Blink 娓叉煋寮曟搸锛堝嵆娴忚鍣ㄦ牳蹇冿級锛屽唴缃簬 Chrome 娴忚鍣ㄤ箣涓�侭link 鍏跺疄鏄?WebKit 鐨勫垎鏀�傚ぇ閮ㄥ垎鍥戒骇娴忚鍣ㄦ渶鏂扮増閮介噰鐢˙link鍐呮牳銆備簩娆″紑鍙?/td>
Opera blink 鐜板湪璺熼殢chrome鐢╞link鍐呮牳銆?/td>

Web鏍囧噯

銆屾瀯鎴愩�?#128073; 缁撴瀯鏍囧噯锛岃〃鐜版爣鍑嗗拰琛屼负鏍囧噯

  • 缁撴瀯鏍囧噯鐢ㄤ簬瀵圭綉椤靛厓绱犺繘琛屾暣鐞嗗拰鍒嗙被(HTML)
  • 琛ㄧ幇鏍囧噯鐢ㄤ簬璁剧疆缃戦〉鍏冪礌鐨勭増寮忋�侀鑹层�佸ぇ灏忕瓑澶栬灞炴�?CSS)
  • 琛屼负鏍囧噯鐢ㄤ簬瀵圭綉椤垫ā鍨嬬殑瀹氫箟鍙婁氦浜掔殑缂栧啓(JavaScript)

銆學eb鏍囧噯鐨勪紭鐐广�?#128071;

  • 鏄撲簬缁存姢锛氬彧闇�鏇存敼CSS鏂囦欢锛屽氨鍙互鏀瑰彉鏁寸珯鐨勬牱寮?/li>
  • 椤甸潰鍝嶅簲蹇細HTML鏂囨 。浣撶Н鍙樺皬锛屽搷搴旀椂闂寸煭
  • 鍙闂�э細璇箟鍖栫殑HTML锛堢粨鏋勫拰琛ㄧ幇鐩稿垎绂荤殑HTML锛夌紪鍐欑殑缃戦〉鏂囦欢锛屾洿瀹规槗琚睆骞曢槄璇诲櫒璇嗗埆
  • 璁惧鍏煎鎬э細涓嶅悓鐨勬牱寮忚〃鍙互璁╃綉椤靛湪涓嶅悓鐨勮澶囦笂鍛堢幇涓嶅悓鐨勬牱寮?/li>
  • 鎼滅储寮曟搸锛氳涔夊寲鐨凥TML鑳芥洿瀹规槗琚悳绱㈠紩鎿庤В鏋愶紝鎻愬崌鎺掑悕

2銆丠TML鍒濊瘑

HTML(Hyper Text Markup Language):瓒呮枃鏈爣璁拌瑷�

鎵�璋撹秴鏂囨湰锛屾湁2灞傚惈涔夛細

  • 鍥犱负瀹冨彲浠ュ姞鍏ュ浘鐗囥�佸０闊炽�佸姩鐢汇�佸濯掍綋绛夊唴瀹癸紙瓒呰秺鏂囨湰闄愬埗 锛?/li>
  • 涓嶄粎濡傛锛屽畠杩樺彲浠ヤ粠涓�涓枃浠惰烦杞埌鍙︿竴涓枃浠讹紝涓庝笘鐣屽悇鍦颁富鏈虹殑鏂囦欢杩炴帴锛堣秴绾ч摼鎺ユ枃鏈級銆?/li>

銆孒TML楠ㄦ灦鏍煎紡銆?/strong>

<!-- 椤甸潰涓渶澶х殑鏍囩 鏍规爣绛?-->
<html>
    <!-- 澶撮儴鏍囩 -->
    <head>     
        <!-- 鏍囬鏍囩 -->
        <title></title> 
    </head>
    <!-- 鏂囨 。鐨勪富浣?-->
    <body>
    </body>
</html>

鍥㈤槦绾﹀畾澶у皬鍐?/strong>

HTML鏍囩鍚嶃�佺被鍚嶃�佹爣绛惧睘鎬у拰澶ч儴鍒嗗睘鎬у�肩粺涓�鐢ㄥ皬鍐?/p>

HTML鍏冪礌鏍囩鍒嗙被

  • 甯歌鍏冪礌(鍙屾爣绛?
  • 绌哄厓绱?鍗曟爣绛?
 甯歌鍏冪礌(鍙屾爣绛?
  <鏍囩鍚?gt; 鍐呭 </鏍囩鍚?gt;   姣斿<body>鎴戞槸鏂囧瓧</body>
  绌哄厓绱?鍗曟爣绛?
  <鏍囩鍚?/>  姣斿 <br />鎴?lt;br>

HTML鏍囩鍏崇郴

  • 宓屽鍏崇郴鐖跺瓙绾у寘鍚叧绯?/li>
  • 骞跺垪鍏崇郴鍏勫紵绾у苟鍒楀叧绯?/li>
  • 濡傛灉涓や釜鏍囩涔嬮棿鐨勫叧绯绘槸宓屽鍏崇郴锛屽瓙鍏冪礌鏈�濂界缉杩涗竴涓猼ab閿殑韬綅锛堜竴涓猼ab鏄?涓┖鏍硷級銆傚鏋滄槸骞跺垪鍏崇郴锛屾渶濂戒笂涓嬪榻愩�?/li>

鏂囨 。绫诲瀷< !DOCTYPE >

鏂囨 。绫诲瀷 鐢ㄦ潵璇存槑浣犵敤鐨刋HTML鎴栬�匟TML鏄粈涔堢増鏈�傚憡璇夋祻瑙堝櫒鎸夌収HTML5鏍囧噯瑙ｆ瀽椤甸潰銆?/p>

椤甸潰璇█lang

lang鎸囧畾璇tml鏍囩鍐呭鎵�鐢ㄧ殑璇█

 <html lang="en">  
  en 瀹氫箟璇█涓鸿嫳璇?zh-CN瀹氫箟璇█涓轰腑鏂?

lang鐨勪綔鐢?/strong>

1.鏍规嵁鏍规嵁lang灞炴�ф潵璁惧畾涓嶅悓璇█鐨刢ss鏍峰紡锛屾垨鑰呭瓧浣?/p>

2.鍛婅瘔鎼滅储寮曟搸鍋氱簿纭殑璇嗗埆

3.璁╄娉曟鏌ョ▼搴忓仛璇█璇嗗埆

4.甯姪缈昏瘧宸ュ叿鍋氳瘑鍒?/p>

5.甯姪缃戦〉闃呰绋嬪簭鍋氳瘑鍒?/p>

瀛楃闆?/strong>

瀛楃闆?Character set) 鏄涓瓧绗︾殑闆嗗悎,璁＄畻鏈鸿鍑嗙‘鐨勫鐞嗗悇绉嶅瓧绗﹂泦鏂囧瓧锛岄渶瑕佽繘琛屽瓧绗︾紪鐮侊紝浠ヤ究璁＄畻鏈鸿兘澶熻瘑鍒拰瀛樺偍鍚勭鏂囧瓧銆?/p>

  • UTF-8鏄洰鍓嶆渶甯哥敤鐨勫瓧绗﹂泦缂栫爜鏂瑰紡璁?/li>
  • html 鏂囦欢鏄互 UTF-8 缂栫爜淇濆瓨鐨勶紝 娴忚鍣ㄦ牴鎹紪鐮佸幓瑙ｇ爜瀵瑰簲鐨刪tml鍐呭銆?/li> 
  <meta charset="UTF-8" />

meta viewport鐨勭敤娉?/strong>

閫氬父viewport鏄寚瑙嗙獥銆佽鍙ｃ�傛祻瑙堝櫒涓?涔熷彲鑳芥槸涓�涓猘pp涓殑webview)鐢ㄦ潵鏄剧ず缃戦〉鐨勯偅閮ㄥ垎鍖哄煙銆傚湪绉诲姩绔拰pc绔鍙ｆ槸涓嶅悓鐨勶紝pc绔殑瑙嗗彛鏄祻瑙堝櫒绐楀彛鍖哄煙锛岃�屽湪绉诲姩绔湁涓変釜涓嶅悓鐨勮鍙ｆ蹇碉細甯冨眬瑙嗗彛銆佽瑙夎鍙ｃ�佺悊鎯宠鍙?/strong>

meta鏈変袱涓睘鎬ame 鍜?http-equiv

name灞炴�х殑鍙栧�?/strong>

  • keywords(鍏抽敭瀛? 鍛婅瘔鎼滅储寮曟搸锛岃缃戦〉鐨勫叧閿瓧
  • description(缃戠珯鍐呭鎻忚堪) 鐢ㄤ簬鍛婅瘔鎼滅储寮曟搸锛屼綘缃戠珯鐨勪富瑕佸唴瀹广�?/li>
  • viewport(绉诲姩绔殑绐楀彛)
  • robots(瀹氫箟鎼滅储寮曟搸鐖櫕鐨勭储寮曟柟寮? robots鐢ㄦ潵鍛婅瘔鐖櫕鍝簺椤甸潰闇�瑕佺储寮曪紝鍝簺椤甸潰涓嶉渶瑕佺储寮?/li>
  • author(浣滆�?
  • generator(缃戦〉鍒朵綔杞欢锛?/li>
  • copyright(鐗堟潈)

http-equiv鏈変互涓嬪弬鏁?/strong>

http-equiv鐩稿綋浜巋ttp鐨勬枃浠跺ご浣滅敤锛屽畠鍙互鍚戞祻瑙堝櫒浼犲洖涓�浜涙湁鐢ㄧ殑淇℃伅锛屼互甯姪姝ｇ‘鍜岀簿纭湴鏄剧ず缃戦〉鍐呭

content-Type 璁惧畾缃戦〉瀛楃闆?Html4鐢ㄦ硶锛屼笉鎺ㄨ崘)

Expires(鏈熼檺) ,鍙互鐢ㄤ簬璁惧畾缃戦〉鐨勫埌鏈熸椂闂淬�備竴鏃︾綉椤佃繃鏈燂紝蹇呴』鍒版湇鍔″櫒涓婇噸鏂颁紶杈撱�?br />

Pragma(cache妯″紡),鏄敤浜庤瀹氱姝㈡祻瑙堝櫒浠庢湰鍦版満鐨勭紦瀛樹腑璋冮槄椤甸潰鍐呭锛岃瀹氬悗涓�鏃︾寮�缃戦〉灏辨棤娉曚粠Cache涓啀璋冨嚭

Refresh(鍒锋柊),鑷姩鍒锋柊骞舵寚鍚戞柊椤甸潰銆?br />

cache-control锛?/code>璇锋眰鍜屽搷搴旈伒寰殑缂撳瓨鏈哄埗锛?/p> 

	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML鏍囩鐨勮涔夊寲

  • 鏂逛究浠ｇ爜鐨勯槄璇诲拰缁存姢锛屾牱寮忎涪澶辩殑鏃跺�欒兘璁╅〉闈㈠憟鐜版竻鏅扮殑缁撴瀯銆?/li>
  • 鏈夊埄浜嶴EO锛屾悳绱㈠紩鎿庢牴鎹爣绛炬潵纭畾涓婁笅鏂囧拰鍚勪釜鍏抽敭瀛楃殑鏉冮噸銆?/li>
  • 鏂逛究鍏朵粬璁惧瑙ｆ瀽锛屽鐩蹭汉闃呰鍣ㄦ牴鎹涔夋覆鏌撶綉椤?/li>

銆屾嫇灞曘�?鏍囩锛氳瀹氶〉闈笂鎵�鏈夐摼鎺ョ殑榛樿 URL 鍜岃缃暣浣撻摼鎺ョ殑鎵撳紑鐘舵�?/p> 

<head>
    <base href="http://www.baidu.com" target="_blank">
    <base target="_self">
</head>
<body>
    <a href="">娴嬭瘯</a> 璺宠浆鍒?鐧惧害
</body>

3銆丠TML甯哥敤鏍囩

1. 鎺掔増鏍囩: 涓昏鍜宑ss鎼厤浣跨敤锛屾樉绀虹綉椤电粨鏋勭殑鏍囩锛屾槸缃戦〉甯冨眬鏈�甯哥敤鐨勬爣绛俱�?/p>

  • 鏍囬鏍囩h(h1'h6)
  • 娈佃惤鏍囩p,鍙互鎶?HTML 鏂囨 。鍒嗗壊涓鸿嫢骞叉钀?/li>
  • 姘村钩绾挎爣绛緃r
  • 鎹㈣鏍囩br
  • div鍜宻pan鏍囩:鏄病鏈夎涔夌殑,鏄垜浠綉椤靛竷灞�鏈�涓昏鐨?涓洅瀛愩�?/li>

2.鎺掔増鏍囩

  • b鍜宻trong 鏂囧瓧浠ョ矖浣撴樉绀?/li>
  • i鍜宔m 鏂囧瓧浠ユ枩浣撴樉绀?/li>
  • s鍜宒el` 鏂囧瓧浠ュ姞鍒犻櫎绾挎樉绀?/li>
  • u鍜宨ns 鏂囧瓧浠ュ姞涓嬪垝绾挎樉绀?/li>

3. 鏍囩灞炴�?琛屽唴寮?

浣跨敤HTML鍒朵綔缃戦〉鏃讹紝濡傛灉鎯宠HTML鏍囩鎻愪緵鏇村鐨勪俊鎭紝鍙互浣跨敤HTML鏍囩鐨勫睘鎬у姞浠ヨ缃�?/p> 

<鏍囩鍚?灞炴�?="灞炴�у�?" 灞炴�?="灞炴�у�?" 鈥?gt; 鍐呭 </鏍囩鍚?gt;<鎵嬫満 棰滆壊="绾㈣壊" 澶у皬="5瀵?>  </鎵嬫満>

4. 鍥惧儚鏍囩img

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

娉ㄦ剰锛?/strong>

  • 鏍囩鍙互鎷ユ湁澶氫釜灞炴�э紝蹇呴』鍐欏湪寮�濮嬫爣绛句腑锛屼綅浜庢爣绛惧悕鍚庨潰銆?/li>
  • 灞炴�т箣闂翠笉鍒嗗厛鍚庨『搴忥紝鏍囩鍚嶄笌灞炴�с�佸睘鎬т笌灞炴�т箣闂村潎浠ョ┖鏍煎垎寮�銆?/li>
  • 閲囧彇 閿�煎 鐨勬牸寮?key=鈥渧alue鈥?鐨勬牸寮?/li> 
<img src="cz.jpg" width="300" height="300" border="3" title="杩欐槸涓皬钂插叕鑻? />

5. 閾炬帴鏍囩(閲嶇偣)

<a href="璺宠浆鐩爣" target="鐩爣绐楀彛鐨勫脊鍑烘柟寮?>鏂囨湰鎴栧浘鍍?lt;/a>
target="_self"  榛樿绐楀彛寮瑰嚭鏂瑰紡
target="_blank" 鏂扮獥鍙ｅ脊鍑?
灞炴�?/th> 浣滅敤
href 鐢ㄤ簬鎸囧畾閾炬帴鐩爣鐨剈rl鍦板潃锛岋紙蹇呴』灞炴�э級褰撲负鏍囩搴旂敤href灞炴�ф椂锛屽畠灏卞叿鏈変簡瓒呴摼鎺ョ殑鍔熻兘
target 鐢ㄤ簬鎸囧畾閾炬帴椤甸潰鐨勬墦寮�鏂瑰紡锛屽叾鍙栧�兼湁_self鍜宊blank涓ょ锛屽叾涓璤self涓洪粯璁ゅ�硷紝_blank涓哄湪鏂扮獥鍙ｄ腑鎵撳紑鏂瑰紡銆?/td>

src 鍜?href 鐨勫尯鍒?/strong>

涓�鍙ヨ瘽姒傛嫭:src 鏄紩鍏ヨ祫婧愮殑 href 鏄烦杞瑄rl鐨?/p>

1.src鐢ㄤ簬鏇挎崲褰撳墠鍏冪礌锛宧ref鐢ㄤ簬鍦ㄥ綋鍓嶆枃妗ｅ拰寮曠敤璧勬簮涔嬮棿纭珛鑱旂郴銆?/p>

2.src鏄痵ource鐨勭缉鍐欙紝鎸囧悜澶栭儴璧勬簮鐨勪綅缃紝鎸囧悜鐨勫唴瀹瑰皢浼氬祵鍏ュ埌鏂囨 。涓綋鍓嶆爣绛炬墍鍦ㄤ綅缃紱鍦ㄨ姹俿rc璧勬簮鏃朵細灏嗗叾鎸囧悜鐨勮祫婧愪笅杞藉苟搴旂敤鍒版枃妗ｅ唴锛屼緥濡俲s鑴氭湰锛宨mg鍥剧墖鍜宖rame绛夊厓绱犮�傚綋娴忚鍣ㄨВ鏋愬埌璇ュ厓绱犳椂锛屼細鏆傚仠鍏朵粬璧勬簮鐨勪笅杞藉拰澶勭悊锛岀洿鍒板皢璇ヨ祫婧愬姞杞姐�佺紪璇戙�佹墽琛屽畬姣曪紝鍥剧墖鍜屾鏋剁瓑鍏冪礌涔熷姝わ紝绫讳技浜庡皢鎵�鎸囧悜璧勬簮宓屽叆褰撳墠鏍囩鍐呫�傝繖涔熸槸涓轰粈涔堝皢js鑴氭湰鏀惧湪搴曢儴鑰屼笉鏄ご閮ㄣ�?/p>

3.href鏄疕ypertext Reference鐨勭缉鍐欙紝鎸囧悜缃戠粶璧勬簮鎵�鍦ㄤ綅缃紝寤虹珛鍜屽綋鍓嶅厓绱狅紙閿氱偣锛夋垨褰撳墠鏂囨 。锛堥摼鎺ワ級涔嬮棿鐨勯摼鎺ャ�傚鏋滄垜浠湪鏂囨 。涓坊鍔犻偅涔堟祻瑙堝櫒浼氳瘑鍒鏂囨 。涓篶ss鏂囦欢锛屽氨浼氬苟琛屼笅杞借祫婧愬苟涓斾笉浼氬仠姝㈠褰撳墠鏂囨 。鐨勫鐞嗐�傝繖涔熸槸涓轰粈涔堝缓璁娇鐢╨ink鏂瑰紡鏉ュ姞杞絚ss锛岃�屼笉鏄娇鐢ˊimport鏂瑰紡銆?/p>

娉ㄦ剰锛?/strong>

1.澶栭儴閾炬帴 闇�瑕佹坊鍔?http:// www.baidu.com

2.鍐呴儴閾炬帴 鐩存帴閾炬帴鍐呴儴椤甸潰鍚嶇О鍗冲彲 姣斿 < a href=鈥渋ndex.html鈥?gt; 棣栭〉

3.鏋滃綋鏃舵病鏈夌‘瀹氶摼鎺ョ洰鏍囨椂锛岄�氬父灏嗛摼鎺ユ爣绛剧殑href灞炴�у�煎畾涔変负鈥?鈥?鍗砲ref="#")锛岃〃绀鸿閾炬帴鏆傛椂涓轰竴涓┖閾炬帴銆?/p>

4.涓嶄粎鍙互鍒涘缓鏂囨湰瓒呴摼鎺ワ紝鍦ㄧ綉椤典腑鍚勭缃戦〉鍏冪礌锛屽鍥惧儚銆佽〃鏍笺�侀煶棰戙�佽棰戠瓑閮藉彲浠ユ坊鍔犺秴閾炬帴銆?/p>

閿氱偣瀹氫綅锛氶�氳繃鍒涘缓閿氱偣閾炬帴锛岀敤鎴疯兘澶熷揩閫熷畾浣嶅埌鐩爣鍐呭銆?/p> 

1. 浣跨敤鐩稿簲鐨刬d鍚嶆爣娉ㄨ烦杞洰鏍囩殑浣嶇疆銆?(鎵剧洰鏍?
  <h3 id="two">绗?闆?lt;/h3> 
2. 浣跨敤<a href="#id鍚?>閾炬帴鏂囨湰</a>鍒涘缓閾炬帴鏂囨湰锛堣鐐瑰嚮鐨勶級 
  <a href="#two">

6. 娉ㄩ噴鏍囩

<!-- 娉ㄩ噴璇彞 -->     
  蹇嵎閿槸锛?   ctrl + /       
  鎴栬�?ctrl +shift + /

鍥㈤槦绾﹀畾锛氭敞閲婂唴瀹瑰墠鍚庡悇涓�涓┖鏍煎瓧绗︼紝娉ㄩ噴浣嶄簬瑕佹敞閲婁唬鐮佺殑涓婇潰锛屽崟鐙崰涓�琛?/p>

7. 璺緞

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

8. 鍏朵粬鐭ヨ瘑

棰勬牸寮忓寲鏂囨湰pre 鏍囩鍏冪礌涓殑鏂囨湰閫氬父浼氫繚鐣欑┖鏍煎拰鎹㈣绗︺�傝�屾枃鏈篃浼氬憟鐜颁负绛夊瀛椾綋銆傛牸寮忓寲鏂囨湰灏辨槸 锛屾寜鐓ф垜浠鍏堝啓濂界殑鏂囧瓧鏍煎紡鏉ユ樉绀洪〉闈紝 淇濈暀绌烘牸鍜屾崲琛岀瓑銆?/p>

鐗规畩瀛楃

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

浠�涔堟槸XHTML

  • XHTML 鎸囥�屽彲鎵╁睍瓒呮枃鏈爣绛捐瑷�銆嶏紙EXtensible HyperText Markup Language锛夈�?/li>
  • XHTML 鐨勭洰鏍囨槸鍙栦唬 HTML銆?/li>
  • XHTML 涓?HTML 4.01 鍑犱箮鏄浉鍚岀殑銆?/li>
  • XHTML 鏄洿涓ユ牸鏇寸函鍑�鐨?HTML 鐗堟湰銆?/li>
  • XHTML 鏄綔涓轰竴绉?XML 搴旂敤琚噸鏂板畾涔夌殑 HTML,鏄弗鏍肩増鏈殑HTML銆備緥濡傚畠瑕佹眰鏍囩蹇呴』灏忓啓锛屾爣绛惧繀椤昏姝ｇ‘鍏抽棴锛屾爣绛鹃『搴忓繀椤绘纭帓鍒楋紝瀵逛簬灞炴�ч兘蹇呴』浣跨敤鍙屽紩鍙风瓑銆?/li>
  • XHTML 鏄竴涓?W3C 鏍囧噯銆?/li>

鍐橦TML浠ｇ爜鏃跺簲娉ㄦ剰浠�涔堬紵

  • 灏藉彲鑳藉皯鐨勪娇鐢ㄦ棤璇箟鐨勬爣绛綿iv鍜宻pan锛?/li>
  • 鍦ㄨ涔変笉鏄庢樉鏃讹紝鏃㈠彲浠ヤ娇鐢╠iv鎴栬�卲鏃讹紝灏介噺鐢╬, 鍥犱负p鍦ㄩ粯璁ゆ儏鍐典笅鏈変笂涓嬮棿璺濓紝瀵瑰吋瀹圭壒娈婄粓绔湁鍒╋紱
  • 涓嶈浣跨敤绾牱寮忔爣绛撅紝濡傦細b銆乫ont銆乽绛夛紝鏀圭敤css璁剧疆銆?/li>
  • 闇�瑕佸己璋冪殑鏂囨湰锛屽彲浠ュ寘鍚湪strong鎴栬�卐m鏍囩涓紙娴忚鍣ㄩ璁炬牱寮忥紝鑳界敤CSS鎸囧畾灏变笉鐢ㄤ粬浠級锛宻trong榛樿鏍峰紡鏄姞绮楋紙涓嶈鐢╞锛夛紝em鏄枩浣擄紙涓嶇敤i锛夛紱
  • 浣跨敤琛ㄦ牸鏃讹紝鏍囬瑕佺敤caption锛岃〃澶寸敤thead锛屼富浣撻儴鍒嗙敤tbody鍖呭洿锛屽熬閮ㄧ敤tfoot鍖呭洿銆傝〃澶村拰涓�鑸崟鍏冩牸瑕佸尯鍒嗗紑锛岃〃澶寸敤th锛屽崟鍏冩牸鐢╰d锛?/li>
  • 琛ㄥ崟鍩熻鐢╢ieldset鏍囩鍖呰捣鏉ワ紝骞剁敤legend鏍囩璇存槑琛ㄥ崟鐨勭敤閫旓紱
  • 姣忎釜input鏍囩瀵瑰簲鐨勮鏄庢枃鏈兘闇�瑕佷娇鐢╨abel鏍囩锛屽苟涓旈�氳繃涓篿nput璁剧疆id灞炴�э紝鍦╨able鏍囩涓缃甪or鏉ヨ璇存槑鏂囨湰鍜岀浉瀵瑰簲鐨刬nput鍏宠仈璧锋潵銆?/li>

4銆佽〃鏍?/h2>

鐜板湪杩樻槸杈冧负甯哥敤鐨勪竴绉嶆爣绛撅紝浣嗕笉鏄敤鏉ュ竷灞�锛屽父瑙佹樉绀恒�佸睍绀鸿〃鏍煎紡鏁版嵁銆傚洜涓哄畠鍙互璁╂暟鎹樉绀虹殑闈炲父鐨勮鏁达紝鍙鎬ч潪甯稿ソ銆傜壒鍒槸鍚庡彴灞曠ず鏁版嵁鐨勬椂鍊欒〃鏍艰繍鐢ㄦ槸鍚︾啛缁冨氨鏄惧緱寰堥噸瑕侊紝涓�涓竻鐖界畝绾︾殑琛ㄦ牸鑳藉鎶婄箒鏉傜殑鏁版嵁琛ㄧ幇寰楀緢鏈夋潯鐞嗐�?/p>

鍒涘缓琛ㄦ牸

<table>
  <tr>
    <td>鍗曞厓鏍煎唴鐨勬枃瀛?lt;/td>
    ...
  </tr>
  ...
</table>

table銆乼r銆乼d锛屼粬浠槸鍒涘缓琛ㄦ牸鐨勫熀鏈爣绛撅紝缂轰竴涓嶅彲

  • table鐢ㄤ簬瀹氫箟涓�涓〃鏍兼爣绛俱�?/li>
  • tr鏍囩 鐢ㄤ簬瀹氫箟琛ㄦ牸涓殑琛岋紝蹇呴』宓屽鍦?table鏍囩涓�?/li>
  • td 鐢ㄤ簬瀹氫箟琛ㄦ牸涓殑鍗曞厓鏍硷紝蹇呴』宓屽鍦ㄦ爣绛句腑銆?/li>
  • 瀛楁瘝 td 鎸囪〃鏍兼暟鎹紙table data锛夛紝鍗虫暟鎹崟鍏冩牸鐨勫唴瀹癸紝鐜板湪鎴戜滑鏄庣櫧锛岃〃鏍兼渶鍚堥�傜殑鍦版柟灏辨槸鐢ㄦ潵瀛樺偍鏁版嵁鐨勩�倀d鍍忎竴涓鍣紝鍙互瀹圭撼鎵�鏈夌殑鍏冪礌銆?/li>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

琛ㄥご鍗曞厓鏍兼爣绛総h:涓�鑸〃澶村崟鍏冩牸浣嶄簬琛ㄦ牸鐨勭涓�琛屾垨绗竴鍒楋紝骞朵笖鏂囨湰鍔犵矖灞呬腑,鍙渶鐢ㄨ〃澶存爣绛炬浛浠ｇ浉搴旂殑鍗曞厓鏍兼爣绛惧嵆鍙�?br />

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

琛ㄦ牸鏍囬caption閫氬父杩欎釜鏍囬浼氳灞呬腑涓旀樉绀轰簬琛ㄦ牸涔嬩笂銆俢aption 鏍囩蹇呴』绱ч殢 table 鏍囩涔嬪悗銆傝繖涓爣绛惧彧瀛樺湪 琛ㄦ牸閲岄潰鎵嶆湁鎰忎箟銆備綘鏄鍎挎垜鏄矙

<table>
   <caption>鎴戞槸琛ㄦ牸鏍囬</caption>
</table>

琛ㄦ牸灞炴�?/strong>

鍦ㄨ繖閲屾彃鍏ュ浘鐗囨弿杩? src=

涓夊弬涓?锛屽钩鏃跺紑鍙戠殑鎴戜滑杩欎笁涓弬鏁?code> border cellpadding cellspacing 涓?0

鍚堝苟鍗曞厓鏍?鍚堝苟鐨勯『搴忔垜浠寜鐓?鍏堜笂 鍚庝笅 鍏堝乏 鍚庡彸 鐨勯『搴?,鍚堝苟瀹屼箣鍚庨渶瑕佸垹闄ゅ浣欑殑鍗曞厓鏍笺�?/p>

  • 璺ㄨ鍚堝苟锛歳owspan=鈥滃悎骞跺崟鍏冩牸鐨勪釜鏁扳�?/li>
  • 璺ㄥ垪鍚堝苟锛歝olspan=鈥滃悎骞跺崟鍏冩牸鐨勪釜鏁扳�?/li>

鎬荤粨琛ㄦ牸

鏍囩鍚?/th> 瀹氫箟 璇存槑
< table></ table> 琛ㄦ牸鏍囩 灏辨槸涓�涓洓鏂圭殑鐩掑瓙
< tr></ tr> 琛ㄦ牸琛屾爣绛?/td> 琛屾爣绛捐鍐峵able鏍囩鍐呴儴鎵嶆湁鎰忎箟
< td></ td> 鍗曞厓鏍兼爣绛?/td> 鍗曞厓鏍兼爣绛炬槸涓鍣ㄧ骇鍏冪礌锛屽彲浠ユ斁浠讳綍涓滆タ
< th></ th> 琛ㄥご鍗曞厓鏍兼爣绛?/td> 瀹冭繕鏄竴涓崟鍏冩牸锛屼絾鏄噷闈㈢殑鏂囧瓧浼氬眳涓笖鍔犵矖
< caption></ caption> 琛ㄦ牸鏍囬鏍囩 琛ㄦ牸鐨勬爣棰橈紝璺熺潃琛ㄦ牸涓�璧疯蛋锛屽拰琛ㄦ牸灞呬腑瀵归綈
clospan 鍜?rowspan 鍚堝苟灞炴�?/td> 鐢ㄦ潵鍚堝苟鍗曞厓鏍肩殑

琛ㄦ牸鍒掑垎缁撴瀯

瀵逛簬姣旇緝澶嶆潅鐨勮〃鏍硷紝琛ㄦ牸鐨勭粨鏋勪篃灏辩浉瀵圭殑澶嶆潅浜嗭紝鎵�浠ュ張灏嗚〃鏍煎垎鍓叉垚涓変釜閮ㄥ垎锛氶澶淬�佹鏂囧拰鑴氭敞銆傝�岃繖涓夐儴鍒嗗垎鍒敤:thead,tbody,tfoot鏉ユ爣娉紝 杩欐牱鏇村ソ鐨勫垎娓呰〃鏍肩粨鏋勩�?/p>

娉ㄦ剰锛?/strong>

  • < thead></ thead>锛氱敤浜庡畾涔夎〃鏍肩殑澶撮儴銆傜敤鏉ユ斁鏍囬涔嬬被鐨勪笢瑗裤�?鍐呴儴蹇呴』鎷ユ湁 鏍囩锛?/li>
  • < tbody></ tbody>锛氱敤浜庡畾涔夎〃鏍肩殑涓讳綋銆傛斁鏁版嵁鏈綋 銆?/li>
  • < tfoot></ tfoot>鏀捐〃鏍肩殑鑴氭敞涔嬬被銆?/li>
  • 浠ヤ笂鏍囩閮芥槸鏀惧埌table鏍囩涓�?/li>

鎬荤粨

鏈瘒鏂囩珷灏卞埌杩欓噷浜嗭紝甯屾湜鑳藉缁欎綘甯︽潵甯姪锛屼篃甯屾湜鎮ㄨ兘澶熷澶氬叧娉ㄨ剼鏈箣瀹剁殑鏇村鍐呭锛?/p>