Home > Developer > JavaScript
1. The best way to learn web pages: learn others' web pages.
2. Document Structure
<Html> (Hypertext Markup Language)
<Head> <title>
<Body> </body>
</Html>
3. <font size = "7" color = "red"> </font> font marker. The font size is 7 and the color is red.
4. <B> </B> bold
<Strong> </strong> enhanced tone
<I> </I> italic <em> </em> enhanced tone
<Sup> </sup> upload
<Sub> </sub> subscript
<Br/> line feed
<Hr width = "80%" size = "" noshade = "noshade"/> horizontal line, 80% of screen width, size, solid shape
<U> </u> underline
<S> </s> strikethrough
<P align = "center"> </p> section
<H1 align = "right">
5. meta tag
(1) Put it in the head mark
(2) <meta name = "keywords" content = "value1, value2"> set webpage keywords
(3) <meta name = "description" content = "extended value1"> set description
(4) <meta name = "author" content = "author name"> set the author
(5) <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> sets the character set. content-type indicates Chinese characters,
(6) <meta http-equiv = "refresh" content = "2; URL = http://www.itcast.cn"/> set page timed jump
6. <! -- Annotation mark -->
7. Do not understand w3cschool help manual
8. <body bgcolor = "red" text = "white" leftmargin = "0"> </body>
9. Some html tags have some default values.
10. describe our webpage with appropriate html tags
Differences between 11.80% and 80 PX
12. Remember the webpage creation process
13. <blockquote cite = "URL"> </blockquote> the entire segment is Indented by two characters, defining a block reference and the reprinted address.
14. <pre> </pre> pre-format
15. & nbsp; space
& Copy; Copyright No.
& Reg; trademark No.
& Amp ;&
& Lt; <
& Gt;>
& Quot ;"
16. unordered list <ul type = ""> </ul> <li type = ""> </li> type value: disc, circle, square
Ordered list <ol type = ""> </ol> <li type = ""> </li> type value: A a 1
Custom list <dl> </dl> <dt> </dt> <dd> </dd>
17. gif (Graphic Interchange Format): 256 colors, supporting transparent colors and animations
Jpeg (joint image expert group): 1670 colors
Png (Portable Network format): 1670 colors, supporting transparent colors
18.
19. absolute path relative path src = "01.png" src =" pic/01.png" src = "../01.png"
Role HTML ------ control page display
21. table <table border = "" bordercolor = "" bordercolorlight = "" bordercolordark = "" cellspacing = "" cellpadding = "" align = "width =" "height =" "frame = "" rules = "none">
<Caption align = "top"> </caption> table question
<Colgroup align = "" valign = "" bgcolor = "" span = ""> </colgroup>
<Thead>
<Th> </th>
<Th> </th>
</Thead>
<Body>
<Tr> <td colspan = "" align = "" valign = "" bgcolor = ""> 1 </td> <td rowspan = ""> 2 </td> </tr>
</Body>
<Foot> </foot>
</Table>
22. <a href = "" title = "" target = "_ blank In addition, _ self itself, _ parent, _ top"> </a>
23. <a href = mailto: email address> </a>
24. <a href = "# name"> </a>
<A name = "name"> </a> anchor
<A href = "xx.html # name"> </a> jump to the anchor of the xx.html page # name
25. <form action = url method = "post, get" name = "">
<Input type = "text, password" name = "" value = "" size = "" maxlength = "" readonly = "readonly"/>
<Input type = "submit" value = "OK"/>
<Input type = "reset" value = "cancel"/>
<Input type = "button" value = "OK"/>
<Input type = "radio" name = "sex" value = "man" checked = "cehcked"/> male
<Input type = "radio" name = "sex" value = "woman"/> female
<Lable for = "man"> male </lable>
<Input type = "radio" name = "sex" value = "man1" id = "man"/>
<Lable for = "woman"> female </lable>
<Input type = "radio" name = "sex" value = "woman1" id = "woman"/>
<Select>
<Optgroup lable = "region">
<Option value = "1"> Beijing </option>
<Option value = "2"> Nanjing </option>
</Optgroup> <option value = "3"> Guangzhou </option>
</Select>
<Select name = "" size = "2" multiple = "multiple">
<Option value = "1"> Beijing </option>
<Option value = "2"> Nanjing </option>
</Select>
<Input type = "checkbox" name = "" value = ""/>
<Input type = "file" name = ""/>
<Input type = "image" src = ""/>
<Textarea name = "" cols = "" rows = ""> </textarea>
<Fieldset> <legend> </fieldset>
</Form>
26. web Standard composition: Structure xhtml, representation css (stacked style sheet), behavior javascript benefits: representation and content Separation
27. <style type = "text/css"> selector {attribute: value;} </style>
29. If you want to use a special font, you can use an image to represent it. When designing, try to use a general font.
30. length unit: em px
31. webpage method (1) inline: <p style = "color: red;"> </p>
(2) embedded: <style type = "text/css"> </style>
(3) External link: <link href = "" rel = "stylesheet" type = "text/css"/>
(4) import: <style type = "text/css"> @ import url (""); </style>
32. 1. Tag selector: h1
2. class selector :.
3. id selector :#
4. wildcard :*
5. Contains the selector: body p (commonly used)
6. Grouping: p, div, body
7. Tag-specific selector: p # class
8. Combination selector: h1.p1, # conternt h1, h2
33.css Style Features 1. Inheritance: child elements inherit certain styles of the parent Element
2. Cascade: Some styles of child elements overwrite the styles of parent elements.
3. The subsequent style will overwrite the previous Style
34.css style Priority 1. Embedded-embedded-external link-import 2 .! Important Privilege Escalation
35. text 1. text-indent: 2em
2. text-align: left center right
3. white-space (blank processing in the object): normal pre nowrap
4. vertical-align (vertical align of elements): sup sub top text-bottom
5. color: # FFFFFF, red
6. font-size: 12px
7. font-family: Arial, ''
8. line-height: 1.5em
9. font-weight: bold, normal (normal)
10. font-style: normal italic (italic)
11. text-decoration: none underline overline line-through (strikethrough)
12. letter-spacing (Character spacing): normal length
13. word-spacing (word spacing): normal length
36. pseudo Class 1.: link not accessed
2. visited has accessed
3. Move the hover mouse over the link
4.: active mouse click link a. a1: link {}
37. naming method 1. Hump: navMenuRedButton
2. Pascal: NavMenuRedButton
3. Hungary: red_navMenuButton
38. content of the Box Model
Padding filling (do not add this attribute to the outer layer easily because it will change the width of the outer layer)
Border
Fill outside the margin (do not add this attribute to the outer layer easily because it will change the width of the outer layer) formula: = content + (padding * 2) + (border * 2) + (margin * 2)
39. margin: 20px: upper right bottom left
Margin: 20px 20px: Upper/lower, right left
Margin: 20px 20px 20px: Upper, right left, bottom
Margin: 20px 20px 20px 20px
Margin: 0 auto; indicates the center of the box
40. border: 1px solid red: indicates that the top right bottom left border pixel is 1, solid line, red
41. Set the default internal and external margins of the elements we use to zero.
42. padding: 10px: upper right bottom left
43. list-style: none outside none;: indicates that the list style is none.
44. Element Classification 1. Block elements: div, p, body, h1 ~ H6 can be used as a container and exclusive to a row
2. inline elements: a, span
3. You can use the inline element: {display: block;} to convert inline into blocks, so setting the height and width of inline elements takes effect.
45. background: fixed position of Color Image tiled
Background-color: gold; background-image: url (); background-repeat: no-repeat; background-position: center horizontal vertical center background-attachment: fixed image (scroll rolling) IE6 only has two elements: html and body, supporting this function
46.css genie Idea 1: Prepare two images of the same size and different content. One is normal and the other is enabled through the pseudo class.
Idea 2: Prepare a synthetic image and locate it through background-position.
47. layout 1. default file stream
2. Floating: float: left; floating principle: separated from the file stream. The original position is filled by the following objects. If you want to have multiple fast and same columns, you can keep the floating direction consistent.
3. absolute positioning: position: absolute principle: separation from the file stream. If the relative object is not specified, it is the body. Use position: relative to specify relative positioning on the object: position: relative top = "" left = "" principle: not separated from the file stream, the relative object is itself
4. clear floating: clear: both; eliminate floating impact on sub-classes eliminate floating impact on parent classes 1. add an empty subclass named. class {clear: both}; 2. overflow: The den subclass cannot have a positioning layout. 3 .. clearFix: after {clear: both; display: block; visibility: hidden; height: o; line-height: 0; centent :"";}. clearFix {zoom: 1;} 48. overflow overflov: visible (do not cut or add a scroll bar) hidden (do not show content beyond the object size) scroll (display scroll bar) auto (cut or scroll bar)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
