F12 å¼å人åå·¥å
·æ¯ä¸å¥æééç¨çå·¥å
·ï¼å
å»ºäº Windows Internet Explorer 9 çæ¯æ¬¡å®è£
ä¹ä¸ãç½ç«å¼å人åå¯ä»¥éæ¶å¨ä»»ä½ç½é¡µä¸ä½¿ç¨ F12 å·¥å
·ï¼ä»èå¿«éè°è¯ JavaScriptãHTML å级èæ ·å¼è¡¨ (CSS)ï¼è¿å¯ä»¥è·è¸ªå¹¶æ¥æç½é¡µæç½ç»çæ§è½é®é¢ã
F12çåå¨è¦æ±ç¨åºå¼å人åéè¦çæ°æ®ä¸è½åå¨HTML页é¢ä¸ï¼è¦åå¨ä¸è¬å¤çç¨åºæè
åå°ä¸ï¼ä¸ç¶å¾å®¹æ被ç¨æ·ç¥éæ¯å¦å¯ç ä¹ç±»çã对WEPå¼å人åæå©çå°æ¹å°±æ¯å¯ä»¥åç
§å«äººç½ç«çå¸å±æ ·å¼çæ¥ææèªå·±çç½ç«ãå 为F12å¯ä»¥çå°ç½ç«çå¸å±ãæ ·å¼ãjsç代ç å¦ï¼
使ç¨âHTMLâé项å¡
âHTMLâé项å¡è§å¾å¨ç±å
åä¸ç Windows Internet Explorer 9
åç°çæ è§å¾ä¸æ¾ç¤ºä½ çç½é¡µçå¨ææ è®°ãå®åæ æå¼ F12 æ¶ç DOMï¼å¦ææä»»ä½æ´æ¹ï¼åéè¦å·æ°ã
ä½ å¯ä»¥ä½¿ç¨é¼ æ æé®çç´æ¥å¨æ è§å¾ä¸å¯¼èªï¼ä»¥åæ¥çç¹æ§åæ´æ¹å¼ã
è¥è¦è·³è½¬å°ç½é¡µä¸çç¹å®å
ç´ ï¼è¯·æ Ctrl+Bï¼æåå»âåå»éæ©å
ç´ â æé®ãå¨ç½é¡µä¸ï¼å½ä½ å°é¼ æ æ¬åå¨å
ç´ ä¸æ¹æ¶å°çªåºæ¾ç¤ºç¸åºçå
ç´ ãåå»æ个å
ç´ æ¶ï¼å°å¨ HTML è§å¾ä¸çªåºæ¾ç¤º DOM æ ä¸å¯¹åºçèç¹ã
å¨âHTMLâé项å¡ä¸éæ©ä¸ä¸ªå
ç´ æ¶ï¼å¯ä½¿ç¨âè§å¾â>âæºâèåå¨ä½ çè§å¾ä¸çéåºæç
§å
ç´ å
³èç CSS æ ·å¼æä»
æç
§å
ç´ æ¬èº«éæ©çå
ç´ ã
â带ææ ·å¼çå
ç´ æºâæé®ä»
å¨æ°çªå£ä¸æ¾ç¤ºéå®å
ç´ ç HTML æºåå
¶å
容ï¼ä»¥åéç¨äºå®ç CSSãè¿æå©äºåªå
³æ³¨éå®å
ç´ çæºæ件ãå¿
é¡»é¦å
使ç¨âHTMLâé项å¡è§å¾éæ© DOM æ ç主ä½å
çæ个 HTML å
ç´ ï¼ç¶åæå¯ä»¥è¿è¡æ¤å½ä»¤ãè¥è¦éæ©æ个å
ç´ ï¼å¯åå»âåå»éæ©å
ç´ âæé®ï¼æå¨ DOM æ ä¸åå»æ个å
ç´ ã
å½ä½ 使ç¨âåå»éæ©å
ç´ âæ¶ï¼é¦å
å·æ°è§å¾æ¯ä¸ªä¸éç主æã
è¥è¦å±å¼ææå æ个å
ç´ çå±æ§ï¼è¯·åå»ç¨å å· (+ ) æåå· (-) æ è®°çæ¡ãHTML å CSS è§å¾ä¸çææå
ç´ é½æ¯å¯ç¼è¾çï¼å¹¶ä¸ç¼è¾æä½ä¼ç«å³çæãéè¿åå»å
ç´ å称æè¾¹çå¤éæ¡ï¼å¯ä»¥æå¼æå
³éæ ·å¼è§ååç¹æ§ã
æ¥çå¨æ HTML 代ç
大å¤æ°ç½ç«ä½¿ç¨å¨æ代ç ã客æ·ç«¯èæ¬é常ç¨äºçæç¨æ·å¯ä»¥çå°çåç°ç HTMLãéæ HTML
代ç çæ°éé常å¾å°ï¼ä»
ç¨äºå¨é¡µé¢ä¸å¯å¨æä½ãç±äº F12 å·¥å
·å°æ¾ç¤ºåç°å¨æµè§å¨ä¸ç HTML å CSS 代ç ï¼èä¸æ¯æ¾ç¤ºä¸¥æ ¼ç HTML
æºï¼å æ¤æ¥æ¾é误æ´å®¹æä¸äºã
âHTMLâé项å¡æ¾ç¤º DOM çå½åç¶æï¼èä¸ä¼èªå¨è·è¸ªæ´æ¹ãå¦æä½ æ´æ¹äºæ个å¼æç¹æ§ï¼ä½å®æ²¡æç«å³æ¾ç¤ºï¼è¯·å¨âHTMLâé项å¡ä¸æ F5 å·æ°è§å¾ã
æ´æ¹å¼åæ·»å ç¹æ§
F12 å·¥å
·å
è®¸ä½ æ´æ¹å ä¹ä»»ä½ç¹æ§æå±æ§çå¼ãä»âHTMLâé项å¡å
ï¼ä» DOM æ ä¸éæ©ä¸ä¸ªå
ç´ æ使ç¨âåå»éæ©å
ç´ âæé®éæ©ä¸ä¸ªå
ç´ ãå¨å±æ§è§å¾ï¼å³çªæ ¼ï¼ä¸ï¼åå»ä¸ä¸ªå¼ä»¥çªåºæ¾ç¤ºå¹¶æ´æ¹å®ã
ä¾å¦ï¼å¨ Internet Explorer 9 ä¸æå¼å¦ä½ä½¿ç¨ CSS3 æ·»å åè§ä¸ç CSS 示ä¾é¡µé¢å¹¶ä¸æ F12 å¯æå¼è¯¥å·¥å
·ãåå»âåå»éæ©å
ç´ âæé® ï¼ç¶ååå»æ è²ç Now in stock at Fourth Coffee æ é¢ã å¨å±æ§çªæ ¼ä¸ï¼åå» "h2" éæ©å¨ä¸çé¢è²ç¹æ§ã é®å
¥ä¸ä¸ªæ°çé¢è²å称æå¼ï¼å¦ blueï¼ç¶åæ Enterãæ é¢çé¢è²å°ç«å³æ´æ¹ã
è¦æ·»å ç¹æ§ï¼è¯·å³é®åå»âHTMLâæâCSSâé项å¡çå·¦çªæ ¼ä¸çå
ç´ ï¼ç¶ååå»ä¸ä¸æèåä¸çâæ·»å å±æ§âãä½ éè¦ç¥é该ç¹æ§çæ ¼å¼ï¼å¦ "background-color:"ï¼åæ£ç¡®å¼ã
è¥è¦å é¤æ个ç¹æ§ï¼ä½ æ·»å çç¹æ§æç°æç¹æ§ï¼ï¼è¯·å¨å³çªæ ¼è§å¾ä¸åå»è¯¥ç¹æ§ï¼ç¶åæ Delete é®ã对äºåå§é¡µä¸çç¹æ§ï¼å¯éè¿å·æ°ç½é¡µæ¢å¤å®ä»¬ãæ·»å çç¹æ§éè¦éæ°åºç¨ã
å¦æä½ åªå¸æå¨æ个ä¼è¯æé´ä¸´æ¶å
³éæ个ç¹æ§ï¼åå¨âHTMLâæâCSSâé项å¡çå³çªæ ¼ä¸æ¸
é¤è¯¥ç¹æ§æè¾¹çå¤éæ¡ã
âHTMLâé项å¡è§å¾åå·¥å
·
å¨å·¦çªæ ¼æ è§å¾ä¸éæ©ä¸ä¸ªå
ç´ æ¶ï¼ä½ å¯ä»¥å¨å³ä¾§æ¥çåæ´æ¹æéå
ç´ åå
¶åå
ç´ çæ ·å¼ãæ¡æ¨¡åå¸å±åç¹æ§ã ä½ æåçæ´æ¹ä¸æ¯æ°¸ä¹
çï¼å½ä½ å·æ°ææå¼å¦ä¸ä¸ªé¡µé¢æ¶è¿äºæ´æ¹ä¼ä¸¢å¤±ãä½æ¯ï¼ä½ å¯ä»¥éè¿åå»âä¿åâæé®æ¥ä¿åä½ ç HTML 代ç ã
å½ä½ æ¥çåºç¨äºâæ ·å¼âåâè·è¸ªæ ·å¼âé项å¡ä¸æéå
ç´ çå¤ä¸ª CSS è§åæ¶ï¼å°æ ¹æ® CSS
è§èï¼åºäºè¿äºè§åçä¸ä¸æ§æ¥æ¾ç¤ºå®ä»¬ãå表页é¦çè§åå°ç¬¬ä¸ä¸ªåºç¨å°æéå
ç´ ï¼èåºé¨çè§åæ¯å½åå®ä¹æéå
ç´ çæ ·å¼å±æ§çè§åãè¿äºè§åçå¼æ¯å¯ç¼è¾
çï¼æ¹æ³ä¸ºï¼åå»æ个å¼ï¼é®å
¥æ°å¼ï¼ç¶åæ
"Enter"ãæ´æ¹ä¼ç«å³å¨ç½é¡µä¸æ¾ç¤ºãè¿ä¸¤ä¸ªå±æ§ç±»åä¸çä¿¡æ¯æ¯ç¸åçãä½å¨âè·è¸ªæ ·å¼âå±æ§ç±»åä¸ï¼ç¸åçä¿¡æ¯æç
§å±æ§ï¼å¨å
¶ä¸é¢æ¾ç¤ºè§åï¼åç»ã
è¿äºå±æ§æåæ¯é¡ºåºååºï¼å¹¶åºäºä¸ä¸æ§å次对è§åæåºã
æ ·å¼ æ¾ç¤ºä½ å¨æ è§å¾ä¸éæ©çå
ç´ çè§ååæ ·å¼ãå®æè§åè¿è¡ç»ç»ï¼å¹¶å
å«ç»§æ¿çç¹æ§åéåçç¹æ§ã
è·è¸ªæ ·å¼ æ¾ç¤ºä¸æ ·å¼ç¸åçä¿¡æ¯ï¼ä½æ¯æå±æ§èä¸æ¯è§ååç»ã
å¸å± æ¾ç¤ºæéå
ç´ çæ¡æ¨¡åãéè¿åå»å¾è¡¨ä¸çç¸åºå¼ï¼å¯æ´æ¹âå¸å±âè§å¾ä¸çä»»æå¼ãâå¸å±âé项å¡å¯¹å¯ç¼©æ¾ç¢éå¾å½¢ (SVG) å
ç´ ç¦ç¨ã
ç¹æ§ æ¾ç¤ºéå®å
ç´ çç¹æ§ï¼å¦ IDãå¯ä»¥æ·»å æå é¤ç¹æ§
å³é®åå»âHTMLâé项å¡ä¸çèå
å¦åé¢æè¿°ï¼å¯å¨âHTMLâé项å¡çå·¦çªæ ¼ä¸å³é®åå»ä¸ä¸ªå
ç´ ãä¸é¢æ¯ä½ å¯ä»¥å¨âHTMLâé项å¡ä¸ä½¿ç¨çé项ã
èå项
ä½ç¨
æ·»å ç¹æ§ åæ è®°æå
ç´ ä¸æ·»å æ°çç¹æ§ã
å¤å¶ å°æ è®°åç¹æ§å¤å¶å°åªè´´æ¿ä¸ã
å¤å¶ InnerHTML å°å
ç´ ç InnerHTML å
容ï¼åææ¬ãå
ç´ åç¹æ§ï¼å¤å¶å°åªè´´æ¿ã
å¤å¶ OuterHTML å°å
ç´ ç OuterHTML å
容ï¼åææ¬ãå
ç´ åç¹æ§ï¼å¤å¶å°åªè´´æ¿ã
å¦æå¨âHTMLâé项å¡ä¸åå»æ个å
ç´ çåèç¹ï¼å¦ "h2" æ è®°çææ¬å
ç´ ï¼åå¯è½æ æ³è·å¾ææé项ãå¦æä½ æªçå°æéçé项ï¼å转å°ç¶å
ç´ å¹¶éè¯ã
æ£æ¥ CSS è§å
âCSSâé项å¡æ¾ç¤ºä½ çæ ·å¼è¡¨ä¹é´çç¸äºå½±åãæ¤é项å¡å¯¹äºä½¿ç¨å¤ä¸ªæ ·å¼è¡¨çç½ç«å¾æç¨ãè¥è¦å¨æ ·å¼è¡¨ä¹é´åæ¢ï¼å¯ä½¿ç¨æ ·å¼è¡¨éæ©å¨ãå½ä½ éæ©æ
ä¸ªæ ·å¼è¡¨æ¶ï¼å·¦çªæ ¼ä¸å°æ¾ç¤ºè§ååå
¶ç¸å
³æ ·å¼å±æ§ãé»è®¤æ
åµä¸ï¼æ¤æé®æ¾ç¤ºå¨ç½é¡µä¸å¼ç¨ç第ä¸ä¸ªæ ·å¼è¡¨ãå¦ææå¤ä¸ªæ ·å¼è¡¨æ£å¨ç½é¡µä¸ä½¿ç¨ï¼ååå»ä¸æå表
以éæ©å
¶ä»æ ·å¼è¡¨ã
âCSSâé项å¡ä¸çå¿«æ·èåé项
å½ä½ å³é®åå»âCSSâé项å¡æ¶ï¼å¿«æ·èåå°ä¼æä¾æ¯âHTMLâé项å¡æ´å¤çé项ãå¯ç¨çé项æ¯ä¸ä¸æç¸å
³çï¼å¹¶åå³äºä½ å¨âCSSâé项å¡ä¸åå»çä½ç½®ã
èå项
ä½ç¨
å³é®åå»çä½ç½®
æ·»å ç¹æ§ åæ è®°æå
ç´ ä¸æ·»å æ°çç¹æ§ã å¨è§åæç¹æ§ï¼ä»»ä½å
ç´ ï¼ä¸ã
æ·»å è§å æ·»å éæ©å¨ã声æææ ·å¼ã å¨ç½è²åºåä¸ï¼èä¸æ¯å¨ç°æå
ç´ ä¸ã
åå è§å å¨å½åè§åä¹åæ·»å éæ©å¨æè§åã å¨ä»»ä½å
ç´ ä¸ã
åå è§å å¨å½åè§åä¹åæ·»å éæ©å¨æè§åã å¨ä»»ä½å
ç´ ä¸ã
å é¤ç¹æ§ã å é¤éå®çç¹æ§ã å¨ä»»ä½ç¹æ§ä¸ã
å é¤è§å å é¤éå®çè§ååææç¸å
³çç¹æ§ã å¨ä»»ä½è§åæéæ©å¨ä¸ã
å¨âCSSâé项å¡ä¸æ´æ¹æ°å CSS å¼
CSS å±æ§çå¼å¯ä»¥å F12 å·¥å
·ä¸çå ä¹ä»»ä½å
¶ä»å±æ§ä¸æ ·è¿è¡æ´æ¹ãéè¿åå»å±æ§å¼å¹¶é®å
¥æ°å¼ï¼å¯ä»¥æ´æ¹ CSS å±æ§ãå¨âCSSâé项å¡ä¸ï¼è¿å¯ä½¿ç¨åä¸é®ååä¸é®å¢å æåå°æ°å¼ã
æç´¢åä¿åæ´æ¹
å F12 å·¥å
·ä¸çå
¶ä½é项å¡ä¸æ ·ï¼ä½ å¯ä»¥ä½¿ç¨âæç´¢âæ¡å¨âHTMLâåâCSSâé项å¡ä¸æç´¢ç¹å®æ è®°ãå±æ§ãç¹æ§æå¼ãåå»âæç´¢âæé®æ¶ï¼å°çªåºæ¾ç¤ºæç´¢å
³é®åçææå®ä¾ï¼å¹¶ä¸çªæ ¼ä¼æ»å¨å°æ¾ç¤ºç¬¬ä¸ä¸ªå¹é
项ã
å¦æåå¨å¤ä¸ªå¹é
项ï¼åå¯ä½¿ç¨âä¸ä¸ä¸ªâåâä¸ä¸ä¸ªâæé®åååååæ»å¨ã
ä½ æåçæ´æ¹ï¼ä¾å¦ï¼è°æ´æ¡æ¨¡åææ·»å ç¹æ§ï¼ä¸æ¯æ°¸ä¹
çãå½ä½ å¨æµè§å¨ä¸éæ°å 载页é¢æ导èªå°å
¶ä»ç½é¡µæ¶ï¼ä½ æåçä»»ä½æ´æ¹é½ä¼ä¸¢å¤±ãè¥è¦ä¿å对 HTML/CSS æ件çæ¬å°å¯æ¬çæ´æ¹ï¼è¯·åå»å·¦çªæ ¼ä¸çâä¿åâæé®ã
温馨提示:答案为网友推荐,仅供参考