å端 html css
ä¸ä¸ªå®æ´çç½é¡µæ¯ç±htmlï¼è¶ ææ¬æ è®°è¯è¨ï¼ï¼cssï¼å±å æ ·å¼è¡¨ï¼JavaScriptï¼å¨æèæ¬è¯è¨ï¼ä¸é¨åç»æ
ä¸ãhtml
æ¦å¿µï¼è¶ ææ¬æ è®°è¯è¨ï¼âè¶ ææ¬âå°±æ¯æ页é¢å å¯ä»¥å å«å¾çãé¾æ¥ï¼çè³é³ä¹ãç¨åºçéæåå ç´
ç»ææé ï¼è¶ ææ¬æ è®°è¯è¨çç»æå æ¬â头âé¨åï¼è±è¯ï¼Headï¼ãåâ主ä½âé¨åï¼è±è¯ï¼Bodyï¼ï¼å ¶ä¸â头âé¨æä¾å ³äºç½é¡µçä¿¡æ¯ï¼â主ä½âé¨åæä¾ç½é¡µçå ·ä½å 容
声æ<!DOCTYPEhtml>
htmlä¹æå¤ä¸ªä¸åççæ¬ï¼åªæå®å ¨æç½é¡µé¢ä¸ä½¿ç¨çç¡®åHTMLçæ¬ï¼æµè§å¨æè½æ£ç¡®å°æ¾ç¤ºHTML页é¢ï¼è¿å°±æ¯ç¨å¤
ä»ä¹æ¯æ ç¾:
1ãæå°æ¬å·å å´çå ³é®è¯
2ãé常æ¯æ对åºç°ç
3ãä¹æåç¬åç°çæ ç¾ï¼å¦ï¼<img src="ç¾åº¦ç¾ç§.jpg" />çã
4ãæ ç¾ä¸åºå大å°å.<html> å <HTML>. æ¨è使ç¨å°å
5ãæ ç¾å¯¹ä¸ç第ä¸ä¸ªæ ç¾æ¯å¼å§æ ç¾ï¼ç¬¬äºä¸ªæ ç¾æ¯ç»ææ ç¾
6ãä¸è¬æ对åºç°çæ ç¾ï¼å ¶å 容å¨ä¸¤ä¸ªæ ç¾ä¸é´ãåç¬åç°çæ ç¾ï¼åå¨æ ç¾å±æ§ä¸èµå¼ãå¦<h1>æ é¢</h1>å <input type="text" value="æé®" />
7ãæäºæ ç¾åè½æ¯è¾ç®å.使ç¨ä¸ä¸ªæ ç¾å³å¯.è¿ç§æ ç¾å«åèªéåæ ç¾.ä¾å¦: <br/> <hr/> <input /> <img />
8ãæ ç¾å¯ä»¥åµå¥.ä½æ¯ä¸è½äº¤ååµå¥. <a><b></a></b>
æ ç¾çå±æ§:
1ãå±æ§æ¯ç¨æ¥ä¿®é¥°æ å¿ç
2ãé常æ¯ä»¥é®å¼å¯¹å½¢å¼åºç°ç. ä¾å¦ name="alex"
3ãå±æ§åªè½åºç°å¨å¼å§æ ç¾ æ èªéåæ ç¾ä¸.
4ãå±æ§ååå ¨é¨å°å. *å±æ§å¼å¿ 须使ç¨åå¼å·æåå¼å·å 裹 ä¾å¦ name="alex"
5ãå¦æå±æ§å¼åå±æ§åå®å ¨ä¸æ ·.ç´æ¥åå±æ§åå³å¯. ä¾å¦ readonly
htmlææ¡£æ å½¢ç»æå¾
1ãhtmlä¸headæ ç¾ï¼
<head>æ ç¾ä¸ï¼æ é¢ãåç¬¦æ ¼å¼ãè¯è¨ãå ¼å®¹æ§ãå ³é®åãæè¿°çä¿¡æ¯
<body>æ ç¾ä¸ï¼èç½é¡µéå±ç¤ºçå 容éåµå¥å¨ãæäºæ¶åä¸ææ å书å代ç è½ç¶å¯ä»¥æ£å¸¸æ¾ç¤ºï¼ä½æ¯ä½ä¸ºèä¸ç´ å »ï¼è¿æ¯åºè¯¥å »ææ£è§ç¼åä¹ æ¯
å®ä¹åç¨æ³ï¼
ç¨äºæè¿°ææ¡£çåç§å±æ§åä¿¡æ¯ï¼ææ¡£çæ é¢ãç¼ç æ¹å¼ãå¨wedä¸çä½ç½®ã以åå ¶ä»ææ¡£çå ³ç³»çï¼ï¼æ档头é¨æå å«ççä¿¡æ¯ä¸ä¼ä½ä¸ºä¸»ä½å 容æ¾ç¤ºç»è¯»è
ä¸é¢è¿äºæ ç¾å¯ç¨å¨ head é¨åï¼<base>, <link>, <meta>, <script>, <style>, 以å <title>ã
<title> å®ä¹ææ¡£çæ é¢ï¼å®æ¯ head é¨åä¸å¯ä¸å¿ éçå ç´
æ示å注éï¼
æ示ï¼åºè¯¥æ <head> æ ç¾æ¾å¨ææ¡£çå¼å§å¤ï¼ç´§è·å¨ <html> åé¢ï¼å¹¶å¤äº <body> æ ç¾æ <frameset> æ ç¾ä¹åã
æ示ï¼è¯·è®°ä½å§ç»ä¸ºææ¡£è§å®æ é¢
<meta>æ ç¾ï¼æä¾æå ³é¡µé¢çå ä¿¡æ¯ï¼çç»æï¼metaæ ç¾å ±æ两个å±æ§ï¼å®ä»¬åå«æ¯http-equivå±æ§åname å±æ§
1ãnameå±æ§
nameå±æ§ä¸»è¦ç¨äºæè¿°ç½é¡µï¼ä¸ä¹å¯¹åºçå±æ§å¼ä¸ºcontentï¼contentä¸çå 容主è¦æ¯ä¾¿äºæç´¢å¼ææºå¨äººæ¥æ¾ä¿¡æ¯åå类信æ¯ç¨ç
metaæ ç¾çnameå±æ§è¯æ³æ ¼å¼æ¯ï¼
AãKeywords(å ³é®å)ã
说æï¼keywordsç¨æ¥åè¯æç´¢å¼æä½ ç½é¡µçå ³é®åæ¯ä»ä¹
说æï¼descriptionç¨æ¥åè¯æç´¢å¼æä½ çç½ç«ä¸»è¦å 容
2ãhttp-equivå±æ§
http-equiv顾åæä¹ï¼ç¸å½äºhttpçæ件头ä½ç¨ï¼å®å¯ä»¥åæµè§å¨ä¼ åä¸äºæç¨çä¿¡æ¯ï¼ä»¥å¸®å©æ£ç¡®å精确å°æ¾ç¤ºç½é¡µå 容ï¼ä¸ä¹å¯¹åºçå±æ§å¼ä¸ºcontentï¼contentä¸çå å®¹å ¶å®å°±æ¯å个åæ°çåéå¼
metaæ ç¾çhttp-equivå±æ§è¯æ³
AãExpires(æé)
说æï¼å¯ä»¥ç¨äºè®¾å®ç½é¡µçå°ææ¶é´ãä¸æ¦ç½é¡µè¿æï¼å¿ é¡»å°æå¡å¨ä¸éæ°ä¼ è¾
BãRefresh(å·æ°)
说æï¼èªå¨å·æ°å¹¶æåæ°é¡µé¢
<link> æ ç¾æ常è§çç¨éæ¯é¾æ¥æ ·å¼è¡¨ï¼ç¨äºå¼å ¥ç½é¡µæ é¢åé¢çå¾æ logï¼
1
|
< link rel="icon" href="http://www.jd.com/favicon.ico">
|
2ãhtmlä¸bodyæ ç¾ï¼
bodyæ ç¾å å«ææ¡£çææå 容ï¼æ¯å¦ææ¬ãè¶ é¾æ¥ãå¾åãè¡¨æ ¼åå表çç
ä¸ åºæ¬æ ç¾
<hn>: nçåå¼èå´æ¯1~6; ä»å¤§å°å°. ç¨æ¥è¡¨ç¤ºæ é¢ï¼åç¶æ ç¾ï¼
<p>: 段è½æ ç¾. å 裹çå 容被æ¢è¡.并ä¸ä¹ä¸ä¸å 容ä¹é´æä¸è¡ç©ºç½ï¼åç¶æ ç¾ï¼
<br>:æ¢è¡ï¼åç¶æ ç¾ï¼
<hr>:水平线ï¼åç¶æ ç¾ï¼
<b> ï¼å ç²æ ç¾ï¼å èæ ç¾ï¼
<strong>: å ç²æ ç¾ï¼å èæ ç¾ï¼
<strike>: 为æåå ä¸ä¸æ¡ä¸çº¿ï¼å èæ ç¾ï¼
<em>: æååææä½ï¼å èæ ç¾ï¼
<sup>ï¼ä¸è§æ ï¼å èæ ç¾ï¼
<sub>: ä¸è§è¡¨ï¼å èæ ç¾ï¼
<span>ï¼å ç´ å å«çå 容ï¼å¨æ¾ç¤ºæ ¼å¼ä¸æ²¡æä»»ä½ååï¼æ²¡æå 为æå ¥<span>å ç´ è产çæ¢è¡æè å ¶ä»æçææãè¿æ ·çæ¾ç¤ºææ称为âè¡å å ç´ âï¼å èæ ç¾ï¼
<div>ï¼å ç´ æå å«çå 容ï¼å¨æ ¼å¼ä¸ææååï¼æ¯ä¸ä¸ª<div>å ç´ æå å«çå 容é½å¦èµ·ä¸è¡ï¼æµè§å¨ä¸ºä»ä»¬åé äºä¸ä¸ªç¬ç«åºåï¼å½¢æä¸ä¸ªä¸ä¸ªâåâï¼å æ¤<div>ä¹è¢«ç§°ä½âå级å ç´ âï¼åç¶æ ç¾ï¼
常è§çåç¶æ ç¾ï¼
address - å°å block - åå¼ç¨ center - å± ä¸å¯¹é½å(ä¸æ¨è) dir - ç®å½å表(HTML5踢åº) div - 常ç¨çä¸è½å常ç¨äºdl - å表 fieldset - ä¸ä¸ªå å«çformç»çæ¡ form - 表äºä¸ªå h1 ~ h6 åç§å°ºå¯¸æ é¢ hr - æ°´å¹³åé线 menu - èåå表 noframes - æµè§å¨ä¸æ¯æ framesæ¾ç¤ºçå noscript - æµè§å¨ä¸æ¯æ scriptæ¾å ol - æåºå表 ul - æ åºå表 p - æ®µè½ pre - æ ¼å¼åææ¬ table - 表äºä¸ªæ ¼
常è§çå èæ ç¾ï¼
a - éç¹ abbr - 缩å(è¯ä¹ãå©äºæç´¢å¼æ) b - ç²ä½(ä¸æ¨è) big - 大åä½(ä¸æ¨è)
cite - å¼ç¨(è¯ä¹ãå©äºæç´¢å¼æ) code - å¼ç¨æºç (è¯ä¹) em - 强è°(å¦æä» ä¸ºäºæä½è¯·ç¨<i>) font - åä½è®¾å®(ä¸æ¨è)
i - æä½ img - å¾ç input - è¾å ¥æ¡ label - 表åæ ç¾(äºä»¶å ³è对åºè¡¨å项)
q - çå¼ç¨ s - ä¸å线(ä¸æ¨è) samp - ç¨äºæåå 容 select - 项ç®éæ©
small - å°åä½(ä¸æ¨è) strong - ç²ä½(ä¸æ¨è) sub - ä¸æ sup - ä¸æ
textarea - å¤è¡ææ¬è¾å ¥æ¡ u - ä¸å线 var - å®ä¹åé
ç¹æ®å符å°åï¼
http://tool.chinaz.com/Tools/htmlchar.aspx?qq-pf-to=pcqq.group&jdfwkey=s0gsw
äº å¾å½¢æ ç¾: <img>
ããsrc: è¦æ¾ç¤ºå¾ççè·¯å¾.
ããalt: å¾ç没æå è½½æåæ¶çæ示.
ããtitle: é¼ æ æ¬æµ®æ¶çæ示信æ¯.
ããwidth: å¾çç宽ã
ããheight:å¾ççé« (宽é«ä¸¤ä¸ªå±æ§åªç¨ä¸ä¸ªä¼èªå¨çæ¯ç¼©æ¾.)
ä¸ è¶ é¾æ¥æ ç¾(éæ ç¾)<a>:
ããhref:è¦è¿æ¥çèµæºè·¯å¾ æ ¼å¼å¦ä¸: href="http://www.baidu.com"
ããtarget: _blank : å¨æ°ççªå£æå¼è¶ é¾æ¥. æ¡æ¶å称: å¨æå®æ¡æ¶ä¸æå¼è¿æ¥å 容
ããname: å®ä¹ä¸ä¸ªé¡µé¢ç书ç¾
ããç¨äºè·³è½¬ href : #书ç¾å称 ----------->ç®æ æ ç¾ä¸æid=â书ç¾å称â
ããç¨äºè·³è½¬çä¿©ç§æ¹å¼ä¹ï¼ id ï¼è¿æ ·çå®ä½å¯ä»¥é对任ä½æ ç¾æ¥å®ä½ï¼
ã <a href="#456"> 第ä¸</a>
ãã<div id="456">å 容</div>ï¼ç®æ æ ç¾å¯ä»¥æ¯ä»»ææ ç¾ï¼
ããç¨äºè·³è½¬çä¿©ç§æ¹å¼ä¹ï¼name ï¼ä½¿ç¨nameå±æ§åªè½é对aæ ç¾æ¥å®ä½ï¼è对divçå ¶ä»æ ç¾å°±ä¸è½èµ·å°å®ä½ä½ç¨ï¼
ãã<a href="#5F">éç¹5</a>
ãã<a name="5F">1111</a>
å å表æ ç¾ï¼
ããä¸ãå®ä¹æåºå表: <ol>
ããå±æ§ï¼
ããtypeï¼ å¯ä»¥è®¾ç½®æåºçæ ·å¼ ï¼åªè½æ¾å°olä¸ï¼å 为æ¾å°liä¸ä¸åºææï¼
ããstartï¼åè¡¨èµ·ç¹ ï¼åªè½æ¾å°olä¸ï¼ä¸è½æ¾å°liä¸ï¼
ãã1表示以 1,2,3,4 æ¥è¡¨ç¤º
ããa 表示以 a,b,c,d æ¥è¡¨ç¤º
ããA 表示以 A,B,C,D æ¥è¡¨ç¤º
ããi 表示以 i,ii ,iii æ¥è¡¨ç¤º
ããI 表示以 I,II,IIIæ¥è¡¨ç¤º
ãã<li>:å表å 容
ããäºãå®ä¹æ åºå表ï¼<ul>
ããå±æ§ï¼
ããtypeï¼å¯ä»¥è®¾ç½®æåºçæ ·å¼ ä¹å¯ä»¥ç»liåç¬å è¿ä¸ªå±æ§
ããdise å®å¿å(é»è®¤å¼)
ããcircle 空å¿å
ããsquare å®å¿æ¹å
ãã<li>:å表å 容
ããä¸ãä¸ä¸å±å表æ ç¾:<dl>..</dl>ï¼
ããä¸å±dt
ããä¸å±dd
ã ï¼å°è£ çå 容ä¼è¢«èªå¨ç¼©è¿çææ
äº è¡¨æ ¼æ ç¾: <table>:
borderï¼ç¨äºè®¾ç½®è¡¨æ ¼çº¿
rowspan: åå æ ¼ç«è·¨å¤å°è¡ï¼åå æ ¼çºµåå并ï¼
colspan: åå æ ¼æ¨ªè·¨å¤å°åï¼å³å并åå æ ¼ï¼ï¼å并è¡ï¼
tr å ç´ å®ä¹è¡¨æ ¼è¡
th å ç´ å®ä¹è¡¨å¤´ï¼æå ç²å± ä¸ææï¼
td å ç´ å®ä¹è¡¨æ ¼åå
å 表åæ ç¾ï¼djangoï¼<form>:ï¼è¡¨åç¨äºåæå¡å¨ä¼ è¾æ°æ®ï¼
ç¨æ¥å建ä¸ä¸ªè¡¨åï¼å¨æ ç¾å¯¹ä¹é´ç表åæ§ä»¶é½å±äºè¡¨åçå 容ï¼è¡¨åå¯ä»¥è¯´æ¯ä¸ä¸ªå®¹å¨
1ã<form>æ ç¾å±æ§ï¼
2ã<form>æ ç¾å¸¸ç¨å±æ§è¯¦è§£ï¼
actionå±æ§ï¼ å®ä¹ä¸ä¸ª URLãå½ç¹å»æ交æé®æ¶ï¼åè¿ä¸ª URL åéæ°æ®ã
methodå±æ§ï¼ ç¨äºå action URL åéæ°æ®ç HTTP æ¹æ³
method: 表åçæ交æ¹å¼ post/get é»è®¤åå¼ å°±æ¯ getï¼ä¿¡å°ï¼
get: 1.æ交çé®å¼å¯¹.æ¾å¨å°åæ ä¸urlåé¢. 2.å®å ¨æ§ç¸å¯¹è¾å·®. 3.对æ交å 容çé¿åº¦æéå¶.
post:1.æ交çé®å¼å¯¹ ä¸å¨å°åæ . 2.å®å ¨æ§ç¸å¯¹è¾é«. 3.对æ交å 容çé¿åº¦ç论ä¸æ éå¶
enctypeå±æ§ ï¼ å¯¹è¡¨åå 容è¿è¡ç¼ç ç MIME ç±»å
targetå±æ§ï¼ç®æ æ¾ç¤ºæ¹å¼ãtargetå±æ§ç¨æ¥æå®ç®æ çªå£çæå¼æ¹å¼
_blankæ¯æå°è¿åçä¿¡æ¯æ¾ç¤ºå¨æ°æå¼ççªå£ä¸
_parentæ¯æå°è¿åä¿¡æ¯æ¾ç¤ºå¨ç¶çº§çæµè§å¨çªå£ä¸
_selfå表示å°è¿åä¿¡æ¯æ¾ç¤ºå¨å½åæµè§å¨çªå£
_top表示å°è¿åä¿¡æ¯æ¾ç¤ºå¨é¡¶çº§æµè§å¨çªå£ä¸
表åå ç´
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<! DOCTYPE html>
< html lang="en"> #å®ä¹è¯è¨ä¸ºè±è¯ zh为ä¸æ
< head >
< meta charset="UTF-8"> #ç¼ç å½¢å¼
< title >luxiaojun</ title > #ææ¡£æ é¢
ãã< link rel="icon" href="http://www.jd.com/favicon.ico"> #å¾æ log
</ head >
< body >
< h3 >ç»å½</ h3 > #æ®éæ ç¾
< form action="" method="post" enctype="multipart/form-data"> #表åæ ç¾ å
¶ä¸actionåè·åéæ°æ®çå°å method为æ°æ®æ交æ¹å¼ enctype="multipart/form-data"为ä¸ä¼ æ件æ¶å¿
é¡»æ
< p >ç¨æ·å:< input type="text" name="user"></ p > #ææ¬è¾å
¥æ¡
< p >å¯ç :< input type="password" name="pwd"></ p > #å¯ç è¾å
¥æ¡
< input type="submit" value="ç»å½"> #ææ¬æ交æé®
ãã < input type="reset" value="éæ°è¾å
¥">#æ¸
é¤ææ¬å
容æé®
< p >西ç< input type="checkbox" name="shuiguo" value="1"></ p > #å¤éæ¡
< p >åç< input type="checkbox" name="shuiguo" value="2"></ p > #å¤éæ¡
< p >ç·< input type="radio" name="sex"></ p > #åéæ¡
< p >女< input type="radio" name="sex"></ p > #åéæ¡
éæ©ä½ çåºçå°:
< select name="bir" id="123" size="0"> #ä¸ææ ç¾ï¼size为ä¸ææ ç¾æ¾ç¤ºå è¡(é»è®¤ä¸è¡),è¿éè¿æä¸ä¸ªåæ°multiple="multiple"ï¼å ä¸çè¯è¡¨ç¤ºå¯ä»¥å¤éï¼æä½Ctrlï¼å¯ä»¥ç®å为multipleï¼
< option value="">--请éæ©--</ option >
< optgroup label="山西"> #表示å®ä¹é项ç»ï¼æç¸å
³çé项ç»åå¨ä¸èµ·ï¼ä¸ºæ¯ä¸é¡¹å ä¸åç»
< option value="dt">大å</ option > #ä¸æéä¸çæ¯ä¸é¡¹ å±æ§ï¼value:表åæ交项çå¼
< option value="ty">太å</ option > ##ä¸æéä¸çæ¯ä¸é¡¹ å±æ§ï¼value:表åæ交项çå¼
</ optgroup >
</ select >< br >
< p >请çè¨:< textarea name="qq" id="" cols="30" rows="10"></ textarea ></ p > #ææ¬å name:表åæ交项çé®. cols:ææ¬åé»è®¤æå¤å°å rows:ææ¬åé»è®¤æå¤å°è¡
< p >请éæ©éè¦ä¸ä¼ çæ件: < input type="file" name="myfile"></ p > #æ交æ件ï¼form表åéè¦å ä¸å±æ§enctype="multipart/form-data"
</ form >
</ body >
</ html >
|
<input>æ ç¾å¸¸ç¨å±æ§è¯¦è§£ï¼
typeï¼
text ææ¬è¾å ¥æ¡
password å¯ç è¾å ¥æ¡
radio åéæ¡
checkbox å¤éæ¡
submit æ交æé®
reset æ¸ é¤ææ¬å 容æé®
button æé®(éè¦é åjs使ç¨.) buttonåsubmitçåºå«ï¼
file æ交æ件ï¼form表åéè¦å ä¸å±æ§enctype="multipart/form-data"
buttonä¸submitçåºå«ï¼submitä¼æ表åå 容æ交ç»åå°ï¼èbuttonæé®ä¸åå°ä¸äº¤äºï¼å¦ç¹ä¸ä¸æé®ä¼å¼¹åºä¸ä¸ªæ¡ï¼æä»æ°è·åéªè¯ç
<select> ä¸æéæ ç¾å±æ§ï¼
name 表åæ交项çé®
size é项个æ°
multiple multiple
<option> ä¸æéä¸çæ¯ä¸é¡¹ å±æ§ï¼value:表åæ交项çå¼. selected: selectedä¸æéé»è®¤è¢«éä¸
<optgroup> 为æ¯ä¸é¡¹å ä¸åç»
<textarea> ææ¬å ï¼
name:表åæ交项çé®. cols:ææ¬åé»è®¤æå¤å°å rows:ææ¬åé»è®¤æå¤å°è¡
<label>
ãã<label for="www">å§å</label>
ãã<input id="www" type="text">
<fieldset>
<fieldset>
ãã<legend>ç»å½å§</legend>
ãã<input type="text">
< /fieldset>