# # Front end `` `python all users can see the interface: the front end of the page, pc end application exe, mobile client application App, micro-letters applet, time interface bracelet html5 based front end: Web, App, micro-channel applet html5: HTML5 is the html language, the number 5 is the version of the language; language development html files are .html suffix, making running front-end interface presented to the user in a browser, the language used is HTML (HyperText Mark - up Language). <B> </ B> <Owen> </ Owen> <ZERO> ' no right or wrong, only the presence or absence of the effect of the points ' ` # # trio distal ` Python "" " . 1, HTML5: page structure frame tag => Society nested structure of tags 2, css3: page layout and style 3, javaScript: interaction logic page "" " ` `` # # knowledge of HTML `` `Python ' Escape character command tags: the beginning of the <> parcel letters, numbers, and may be combined with legitimate characters can be parsed browser markup - alphanumeric - ' tag characteristic three labels semantics: <br> wrap labels Range: <h1> tag scope is intermediate, controlled by the tag, with the default style </ h1> tag can modify the contents of the style: <style = XYZ " Color: Red " > 000 </ XYZ> ' escape character: a & and; package can be made decimal numbers in combination, may be made a special word abbreviation composition & gt; (greater than sign) =>> & lt; (less than No. => < ' instructions: <> wrapped at the outset! document type instruction: < ! doctype html> Note: <! - comment -> ` # # Label ` Python points of Mono Tags: Single label no content, the main function, can be omitted terminator /; Ditags primary contents, requires scope, end tags must be clear <a> </a> commonly used tags: h1 of ~ H6 title p paragraph b bold i italic a hypertext link img picture connection (local or www.) UL > Li columns of table > TR> TH | TD table th: b table headers, tr: cell, td: cell contents tag portion: . 1 table table tab. 2 Caption title tag table. . 3 thead head region form labels. , tbody table body region label, tfoot form the tail region of the label, can be omitted, do not write 4 TR table row tag. 4 TH table header cell tag, td table ordinary cell label. form > the INPUT | the Button | the TextArea | the SELECT> the Option form (submitted for background) <Action form = "" Method = "" > <input type=" Text " name = " the User " placeholder = " Please enter the name " width = " 50 " > <the INPUT of the type = " password " name = " password " value = " 123456 " > # must have a name in order to submit the background, value is submitted value. No value, the user enters a value, the default value as presented to the background value. Radio buttons, check boxes, selection lists can not be submitted as value value value value need to write. <the INPUT of the type = " Color " > <the INPUT of the type = " File " > < name="gender" ，value="male"> <input type="radio" name="gender"> <input type="submit" value="登录"> <select name="subject" multiple> <option value="chinese">语文</option> <option value="math">数学</option> <option value="python"> Python </ the Option> </ the SELECT> <-! text field -> <the TextArea> </ the TextArea> <-! Three buttons -> <the Button of the type = " the Button " > button </ the Button> < Button type = " rESET " > reset </ Button> <Button type = " Submit " > submit </ Button> </ form> span: no semantic peer displayed (without wrap) div: no semantics, shown with a line ( comes wrap) `` ` # nesting rule # tags, page architecture (Key) ` `` Python <! DOCTYPE HTML> <HTML> <head> <Meta charset = ". 8-UTF " > <title> page architecture </ title> <Link the rel ="stylesheet" href="./css/4.样式.css"> </head> <body> <div class="site"> <div class="top"> <div> <img src="" alt=""> <form action=""></form> </div> <ul> <li></li> ... <li></li> </ul> </div> <div class="mian"> <!--.left+.center+.right--> <div class="left"></div> <div class="center"> <div class="box1"> <h2></h2> <div> <p></p> <p></p> </div> <h3></h3> </div> </div> <div class="right"></div> </div> <div class="foot"></div> </div> <div class="pp p1"></div> <div class="pp p2"></div> <div></div> </body> </html> ``` ## 样式的引入 ```python <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Style </ title> <style> <!- 1, between the line: directly, poor readability -> .dd { width: 200px; height: 200px; } .D1 { background - Color: Yellow; } .dd.d2 { background - Color: Red; } .D2 { background - Color: Brown; } </ style> <Link the rel = " this stylesheet " the href = " . ./css/4 style .css " > </ head> <body> ! <- width of the label will adapt parent, distraction height by a content -> <div style = " width: 200px; height: 200px; background- color:pink;" > </ Div> <div style = " width: 300px by; height: 200px; background-Color: GreenYellow; " > 123 </ div> <- 2, inline:! Enhance the readability, reusability (internal file multiplexed) head-> style tag -> <div class = " dd D1 " > </ div> <div class = " dd D2 " > </ div> <div> </ div> <! - -3 outreach formula: team development, reusability (text level multiplexing) head-> link-> css external file -> <div class = " PP P1 " > </ div> <div class = "pp p2"></div> <div></div> </body> </ HTML> `` ` # # base selector ` `` Python <! DOCTYPE HTML> <HTML> <head> <Meta charset = " UTF-. 8 " > <title> base selector </ title> <style> / * priority: a scope size distinction, are higher priority scope * / / * Important> between line> ID>! class > tag> the wildcard * / / * key: class selector - class single multi name class name * / / * 1 with selector system * / * { font - size: 30px; Color: Brown; } / * 2.The tag selector: label name * / div { span { Color: DarkCyan; Color: Orange; } } / * Class selector 3: class name * /. .Aa { Color: Indigo; } /*4.id selector: # id name * / # BB { Color: Green; } / * in combination: find id aa is bbclass to the * div / div # bb.aa { Color: Red; } .aa { Color: Red Important;! } </ style> </ head> <body> <div class = " aa " ID = " BB " style = " ! Color: Gold Important; ">d1</div> <div class="aa">d2</div> <div>d3</div> <span class="aa">s1</span> <span>s2</span> <span>s3</span> </body> </html> ```