HTML_CSS

  1. "Content is king".
  2. "Well-Marked-Up content is king".
  3. <!DOCTYPE html>: declaration is the doctype for HTML5.
  4. tags:<html><body><p><a><img>
  5. <br>: defines a line break; <hr>: creates a horizental line; <b>: bold (<strong>); <i>: italic(<em>); <small><sub>: subscript;<sup>
  6. comments: <!-- This is a comment -->
  7. Browsers automatically add an empty line before and after a paragraph.
  8. <pre>: preserves as it is.(good for displaying computer code)
  9. <!--These are useful for computer code-->
    <code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var> 

    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    <p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

      <address>
      Written by W3Schools.com<br>
      <a href="mailto:us@example.org">Email us</a><br>
      Address: Box 564, Disneyland<br>
      Phone: +12 34 56 78
      </address>

      

      <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
      <p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>

      <bdo dir="rtl">
      Here is some Hebrew text
      </bdo>

  10. "<": &lt; ">": &gt;
  11. <blockquote cite="http://www.worldwildlife.org/who/index.html">...</blockquote>: <blockquote> is block element
  12. <q></q>: defines a short quote, browser add double quote, <q> is inline element
  13. <a href="url">Link text</a>
  14. If you set the target attribute to "_blank", the link will open in a new browser window/tab: <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> 
  15. The id attribute can be used to create a bookmark inside an HTML document

  16. The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more

  17. <base href="http://www.w3schools.com/images/" target="_blank"> in the head area
  18. The <link> tag is most used to link to style sheets: <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
  19. Inside the <style> element you specify how HTML elements should render in a browser:
  20. The <div> tag is used to group block-elements to format them with CSS. By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.
  21. <li>: list element; <ol>:ordered list ;<ul>: unodered list; (they are all block element).
  22. List type: <ol>, <ul>, <dl>(<dt><dd>)(definition list)
  23. ">": &gt; "<": &lt; "&": &amp; More: http://www.w3schools.com/tags/ref_entities.asp
  24. <strong>  ~~ <b>; <code>
  25. Hosting Providers: http://www.w3schools.com/tags/ref_entities.asp
  26. default port ":80"
  27. <a href="http://sickedlysmart.com/buzz" title="Read all about caffeine on the Buzz">Caffeine Buzz</a> // title attribute give a tool tip on a link.
  28. #: link to a specific destination in a page: <a href="index.html#chai">see chai tea</a>; <a href="#top">back to top</a>
  29. PNG has a slightly better compression than GIF, but GIF support animation.
  30. use http://validator.w3.org to validate your html page.
  31. <meta charset="utf-8">: tells us that we are using unicode encoding.
  32. h1 { font-family: arial; color: maroon; border-bottom: 1px solid black;} (border-bottom: thin dotted #888888)
  33. link css file from the same directory: <link type="text/css" rel="stylesheet" href="lounge.css"> type is option in HTML5
  34. Inheritance: all of the styles that affect the way your text looks are inherited.
  35. CSS comments: /* ... */
  36. <p class="greentea">...</p>   // (.css:) p.greentea{ color: green; }
  37. .greentea { color: green; } apply to all members (elements) belong to the specified class.
  38. <p class="greentea raspberry blueberry">: multiple class.
  39. If you can't resolve a conflict because two selector are equally specific, you use the ordering of the rules in your style sheet file, that is you use the rule listed last in the CSS file.
  40. If you got an error in your CSS file, usually the rules below the error are ignored.
  41. font-weight: ; font-size: 14px, 21px; color:; font-family: ; text-decoration:; 
  42. Five font family; sans-serif, serif, monospace, cursive, fantacy:
  44. body{font-family: Verdana, Geneva, Arial, sans-serif;}
  45. CSS rule: @font-face { font-family: "..."; src: url(...), url(...);}
  46. more web fonts option: http://www.google.com/webfonts ; font-size: 14px; body{ font-size: 14px;} h1{ font-size: 150%;} h2{ font-size: 1.2em;}(scales 1.2). You can specify a font size as xx-small, x-small, small, medium, large, x-large, or xx-large and the browser will translate these keywords into pixel values using defaults that are defined in the browser. Usually 20% larger each, and small is 12px.
  47. Better：choose a keyword(small, medium recommended) as body font-size, then using % to scale other elements. Default font size will be 16 px.
  48. font-weight: bold; font-weight: normal; font-style: italic; font-style: oblique;
  49. body { background-color: rgb(204, 102, 0); } or body { background-color: rgb(80%, 40%, 0%); }
  50. h1, h2{color: #c60; text-decoration: underline;}: text-decoration property: underline, overline, line-through, none.
  51. HTML element: <del>: like line-through decoration, <ins>: like underline.
  52. body {line-height: 1.6em;} means: 1.6 times of the font size.
  53. CSS box model: content, padding, border, margin; border-color: black; border-style: solid; border-width: 1px; background-color: black; background-image: rul(images/background.gif); background-repeat: no-repeat;<other options: repeat-x, repeat-y, inherit> background-position: top left; padding: 25px; margin: 30px; color: #a7cece; font-style: italic; font-family: Arial, sans-serif; font-size: 12px;  
  54. Border Style: border-style: groove;  solid, dotted, double, dased, inset, outset, ridge. 
  55. Border Color: border-color: red; or using rgb(100%, 0%, 0%) or #ff0000;
  56. Border Width: border-width: thin; or using pixels like 5px; thin, medium, thick.
  57. Border Sides: border-top-color: black; or border-top-style: dashed; ...
  58. Border Corner: border-radius: 15px; border-top-left-radius: 3em; border-bottom-right-radius: 3em;
  59. Padding: padding-left: 20px; padding-top, padding-right; padding-bottom; as margin-left: 20px;
  60. text-align: center; a
  61. Using a class when you might want to use a style with more than one element. The id attribute is strictly for naming unique elements.
  62. <p id="footer">...<p>   CSS: #footer { color: red;} or p#footer { color: red;}
  63. You can specify several stylesheets in a html document, and the order matters, latter override the former.
  64. <link href="lounge-mobile.css" rel="stylesheet" media="print"> or media="screen and (max-device-width: 480px)" or you can add rules in the .css file: @media print {body{font-family: Times, "Times New Roman", serif;}}
  65. <div> and width property(work for content only). Usually we leave the height unspecified.
  66. default padding on a <div> is 0 px;
  67. text-align will align all the inline content in a block element. text-align should be set only on block element.
  68. #elixirs h2 {color: black;}: h2 is a descendant of div whose id is elixirs.=> descendant selector. Descendant selector select any descendant inside, no matter how deep it is nested. Use #elixirs > h2 to select direct child.
  69. #elixirs blockquote h2 {...}: parent, child, desendant.
  70. 1: size of its own, 1em: size of the element font size. eg: line-height: 1; line-height: 1em;

  72. Same as margin: margin: 0px 20px 30px 10px; padding: 20px; means: padding top, right, bottom, left 20px.

  76. Use <span class="cd">..</span> to group different inline elements.
  77. <a> element state: link; visited; hover; focus; active; a:link{ color: red; }
  78. #elixirs a:link{color: red;} element selector
  79. Cascade Rule: 0(ids?)0(class?)0(element names?)  eg:010 > 001. ol li p=>003, #elixirs h1=> 101, a:link=>011.
  80. The reader can override a style by putting an "!important" on end of his property declarations. h1 {font-size: 200% !important;} and this will override any author style.
  81. div and float property: #elixirs {float: right;}
  82. float:http://www.elated.com/articles/css-floats/; float works great for floating images within a paragraph of text. a requirement of any floating element is that is has a width. when the inline elements are flowed within the block elements, they flow around the borders of the floating element. 
  83. when the inline elements are positioned, they respect the boundaries of the floated element. So they are flowed around it.
  84. When the browser places two block elements on top of each other, it collapse their shared margins together, the height of the collapsed margin is the height of the largest margin. unless outer one has border.

  85. the CSS clear property on an element to request that as the element is being flowed onto the page, no floating content is allowed on the left, right, or both sides of the element.
    floated elements don’t collapse margins. It is common to float an image with padding.

  86. Liquid and Frozen design. Jello design. Absolute Position(property: z-index).
  87. Liquid to Frozen:  add a div <div id="allcontent"></div>; add jello design: #allcontent{width: 800; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; margin-left: auto; margin-right: auto;}
  88. Position property: static(default), absolute, fixed, relative. Fixed positioning places an element in a location that is relative to the browser window. Relative positioning is commonly used for more advanced positioning and special effects.
  89. CSS table display. The table will automatically expand to accommodate the cell widths and heights.
  90. CSS table: 
     1 <!--header-->
 2 <div id="tableContainer">
 3     <div id="tableRow">
 4         <div id="main">
 5         </div>
 6 
 7         <div id="sidebar">
 8         </div>
 9     </div>
10 <div> 
11 
12 
13 CSS:
14 
15 div#tableContainer {
16     display:        table;
    17     border-spacing: 10px;
    18 }
19 div#tableRow {
20     display:        table-row;
21 }
22 #main {
23     display:        table-cell;
    24     vertical-align: top;
    25 }
  91. Table: border-spacing: 10px; vertical-align: top; Margins don't collapse with border spacing property. You can use width property to size the width of the table cell, like width: 20%;
  92. #div1{position: absolute; top: 30px; left: 30px; z-index: 0;} #div2{position: absolute; top:30px; left:30px; z-index: 1;}. Usually just setting the z-index to 1 is enough to make sure an element is above other element in the page.
  93. fixed positioning: offset from the browser window other than the page.
  94. relative positioning: positions an element relative to its containing element by leaving it in the normal flow, and then shifting it over by an amount you specify.
  95.  use <section> to group together related content, and use <article> to enclose a self- contained piece of content like a news article, a blog post, or a short report.
  96. <time datetime="2012-02-18">2/18/2012</time>
  97. ul {list-style-type: none;}: remove bullets from lists.  ul li { display: inline;}: make block element li to be inline element. <li class="selected">..</li>: for CSS to decorate.
  98. <video controls autoplay width="512" height="288" src="video/tweetsip.mp4" poster="images/poster.png" id="video"></video>: controls and autoplay are boolean attributes. poster attribute: when not playing, that image show up.
  99. video attribute: loop(loop play), poster, controls, autoplay, src, preload(value: none, metadata, auto), width, height.
  100. Three major video format: WebM, MP4, Ogg. 
  101. <video controls autoplay width="512" height="288">
    <source src="video/tweetsip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <p>Sorry, your browser doesn't support the video element</p>
</video>

    let the browser choose which video to play.  You can get a lot more information on type parameters at http://wiki.whatwg.org/wiki/Video_type_parameters.

  102. new stuff about HTML5: 
    aside:
section:
footer:
header:
article:
video:
mark: highlight some text.
progress: to show progress on a task like 90% done.
meter:
audio:
nav:
time:
canvas: used to display graphics and animation drawn with javascript
figure: define self-contained content like diagram, code list, photo.
  103. Table: tr: for table row; td: for table data; th: for table heading; CSS: table {caption-side: bottom;}. we call the space between table cells border-spacing.  table { border-spacing: 10px 30px;}: border-spacing for horizental 10px, 30px for vertical. border-collapse: collapse; means border-spacing: 0px;
  104. nth-child pseudo-class: 
    <section>
    <p>The first child</p>
    <p>The second child</p>
    <p>The third child</p>
    <p>The forth child</p>
</section>

CSS:
p:nth-child(even) {
    background-color:    red;   
}

p:nth-child(odd) {
    background-color:    green;   
}

or 

p:nth-child(2n) {
    background-color:    red;   
}

p:nth-child(2n+1) {
    background-color:    green;  
}
  105. If you use rowspan property, you have to delete the corresponding cell data on next row: (or colspan property) 
          <tr>
    <td rowspan="2">Truth or Consequences, NM</td>
    <td class="ca">August 9th</td>
    <td class="ca">93</td>
    <td rowspan="2" class="ra">4,242 ft</td>
    <td rowspan="2" class="ra">7,289</td>
    <td class="ca">5/5</td>
      </tr>
      <tr>
    <td>August 27th</td>
    <td class="ca">98</td>
    <td class="ca">4/5</td>
      </tr>
  106. list-style-type property: 
    li {
  list-style-type:    disc;    /*disc is the default type*/
}

li {
  list-style-type:    circle;
}

li {
  list-style-type:    square;
}

li {
  list-style-type:    none;
}

      li {
        list-style-image: url(images/backpack.gif);    /*use costomized marker*/
        padding-top: 5px;
        margin-left: 20px;
      }

  107. forms: a form is basically a web page with input fields that allows you to enter information. control, submit, 
  108. input element: <input type="text" name="fullname"> : for entering one line of text. The submit <input> element creates a button that allows you to submit a form. When you click this button, the browser sends the form to the server script for processing. <input type="submit">; Radio button: <input type="radio" name="hotornot" value="hot"> <input type="radio" name="hotornot" value="not"> same name but different value; Check Box: <input type="checkbox" name="spice" value="Salt"> <input type="checkbox" name="spice" value="Pepper"> <input type="checkbox" name="spice" value="Garlic"> same name but different value. Text Area: <textarea name="comments" rows="10" cols="48">The initial text</textarea> use name attribute to give an element an unique name, the text between the tags are initial text inside the area. Number input:<input type="number" min="0" max="20">. Range Input: <input type="range" min="0" max="20" step="5">, both number input and range input can have an attribute step. Color Input: <input type="color">. Date Input: <input type="date">. Email Input: <input type="email">. Tel Input: <input type="tel">. URL Input: <input type="url">. Submit Button: <input type="submit" value="Order Now!"> Select: 
  109. <select name="characters">
    <option value="Buckaroo">Buckaroo Banzai</option>
    <option value="Tommy">Perfect Tommy</option>
    <option value="Penny">Penny Priddy</option>
    <option value="Jersey">New Jersey</option>
    <option value="John">John Parker</option>
</select>
  110. Use "checked" in radio element, so the radio will default choose the checked one.
  111. <input type="type" readonly="true">
  112. When use POST over GET: information private, or when you include an user comment <textarea>
  113. we should label radio button like this: <input type="radio" name="hotornot" value="hot" id="hot"> <label for="hot">hot</label> <input type="radio" name="hotornot" value="not" id="not"> <label for="not">not</label>

  114. <fieldset> and its <legend>:
    <fieldset>
    　　<legend>Condiments</legend>
    </fieldset>

  115. <input type="password" name="secret">; <input type="file" name="doc">: upload file
  116. Multiple Selection: 

    <select name="characters" multiple>
        <option value="Buckaroo">Buckaroo Banzai</option>
        <option value="Tommy">Perfect Tommy</option>
        <option value="Penny Priddy">Penny</option>
        <option value="New Jersey">Jersey</option>
        <option value="John Parker">John</option>
    </select>

  117. Use placeholder to give a hint： <input type="text" placeholder="Buckaroo Banzai" required> requried indicate that the input field is required.
  118. pseudo-element: p:first-letter{font-size: 3em;} p:first-line{font-style: italic;}
  119. Attribute selector: img[width] { border: black thin solid; } img[height="300"] { border: red thin solid; } image[alt~="flowers"] { border: #ccc thin solid; }
  120. Select by sibling: 

    h1+p {
    font-style: italic;
    } // select paragraph only has preceding h1 element.

  121. Complex selector: div#greentea > blockquote p:first-line { font-style: italic; } div element has an id="greentea", which has a child blockquote which has a pseudo-element p:first-line.
  122.     <style>
      #box {
          position: absolute;
          top: 100px;
          left: 100px;
          width: 200px;
          height: 200px;
          background-color: red;
          transition: transform 2s;
          -webkit-transition: -webkit-transform 2s;
          -moz-transition: -moz-transform 2s;
          -o-transition: -o-transform 2s;
      }
      #box:hover {
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -0-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
      }
    </style>
  123. Web fonts: www.google.com/webfonts; www.fonts.com/web-fonts; www.extensis.com. Limit the fonts in your @font-face rule to only the fonts used on a paticular page. As with conventional fonts, always include a fallback font in case your page's font isn't available or an error is encountered retrieving or decoding it.
  124. <audio src="Heartless_KW.mp3" id="heartless" controls autoplay>Sorry but audio is not supported in your browser</audio>. Chrome support mp3, wav, Ogg Vorbis.
  125. Frames: http://www.w3.org/TR/html401/present/frames.html

Appendix:

  1. list-style:The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image. 
    list-style:square url("sqpurple.gif");
  2. text-decoration:  
    1 h1 {text-decoration:overline}
2 h2 {text-decoration:line-through}
3 h3 {text-decoration:underline}
  3. measurement: 2em(scalable, 2 times); 2px(pixel);
  4. <label> tag: The <label> tag defines a label for an <input> element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
  5. body > * means "any element that is a direct child of the body element."
  6. twitter bootstrap：http://twitter.github.io/bootstrap/index.html
  7. <div class="scroll"></div> // css code: div.scroll {overflow: scroll;};
  8. overflow: scroll and hidden value.
  9. mailto: <a href="mailto:youremailaddress">Contact us</a>
  10. different kind of required attribute: 
    1 <input type="text" id="car" required>
2 <input type="text" id="car" required="">
3 <input type="text" id="car" required=''>
4 <input type="text" id="car" required=required>
5 <input type="text" id="car" required="required">
6 <input type="text" id="car" required='required'>
  11. <meta http-equiv="refresh" content="5" > will refresh the page every other 5 second.
  12. v
  13. v
  14. v
  15. v
posted @ 2013-02-28 12:09  wxwcase  阅读(377)  评论(0)  编辑  收藏  举报