Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html基础

994 views

Published on

  • Be the first to comment

Html基础

  1. 1. HTML
  2. 2. 1.1 •  HTML1.2 • HTML1.3 • HTML1.4 • HTML1.5 • 
  3. 3. • • • • 
  4. 4. •  HTML(Hyper Text Markup Language ) “ ”•  HTML HTML5•  HTML
  5. 5. •  Web•  IE Internert Explorer Firefox TT•  Firefox•  –  IE6~IE9 –  Firefox 3.x ~Firefox 4.x –  Chrome –  Safari
  6. 6. •  HTML Dreamweaver .htm .html•  Notepad++ VIM•  Firebug IE F12 Chrome
  7. 7. •  HTML•  index.html Firefox HTML
  8. 8. •  html :index.html <!DOCTYPE html> --------------------------------------- <html> --------------------------------------- <head> -------------------------------------- <title> </title> | </head> -------------------------------------- <body> --------------------------------------- <h1> </h1> | |                             | | | </body> --------------------------------------- </html> --------------------------------------
  9. 9. •  <div class=“header” id=“header”> </div>•  <”
  10. 10. • • • • • • 
  11. 11. •  <!DOCTYPE html> –  HTML•  <meta charset=“utf-8“ /> –  gbk
  12. 12. •  HTML tag <html> </ html> <head> </head> <body>.•  “<>” ,•  HTML
  13. 13. • •  < “ ” “ ”……> …… < >•  HTML
  14. 14. •  <head> </head>•  –  <meta> –  <title> </title> –  <link> <style>
  15. 15. •  <body> </body>• •  background text leftmargin
  16. 16. • •  –  <!-- , -->
  17. 17. • • • • • • • 
  18. 18. •  DIV SPAN
  19. 19. •  – •  –  <p> </p> –  <br> –  <pre> </pre> –  <hn> </hn> –  <font> </font> –  ( <b></b>)
  20. 20. •  html <br>• •  <body> <br/> <br> <br> <br> </body>
  21. 21. •  <p> <p> <p>• •  <p> </p>
  22. 22. •  , <pre> , <pre> </pre>.•  <body> <pre>•          •                •                       </pre> </ body >
  23. 23. •  HTML•  <ul> <li> </li> </ul>•  <ol> <li> </li> </ol>
  24. 24. •  HTML <img> –  <img src="flower.jpg" width="270" height="167" border="1" alt=" " />•  HTML PNG JPG GIF
  25. 25. •  – • 
  26. 26. •  <table> </table> –  <table> <table> </table> –  •  bgcolor •  background •  width height •  border •  align
  27. 27. •  <caption> </caption> –  align valign align <table>
  28. 28. •  <tr> </tr> –  <tr> –  <tr> bgcolor background width height align <table> –  align valign align valign
  29. 29. •  <td> </td> –  <td> –  bgcolor background width height align valign <table> <tr> –  <td> rowspan colspan rowspan colspan
  30. 30. •  <th> </th> –  <td>
  31. 31. •  – •  –  <a href=“https://www.alipay.com” target=“_blank” title=“ ”> </a> –  target=“_blank|self|_top|_parent|iframe ”• 
  32. 32. •  <a name=" "> </a>•  name ( )
  33. 33. •  <hr>
  34. 34. •  –  HTML•  and (&) (;)•  –  &nbsp; –  &quot; –  &lt; –  &gt;
  35. 35. • • • 
  36. 36. •  Form
  37. 37. (1)•  <form> </form> –  <form> </form> , –  •  name •  action •  method
  38. 38. •  <input> </input> –  –  <input> •  type[text|password|radio|checkbox|submit|image] •  name •  value
  39. 39. •  <select> </select> –  <option> –  •  name •  size •  multiple •  value •  selected
  40. 40. •  <textarea> </textarea> –  BBS –  •  name •  rows •  cols –  value <textarea> </textarea>
  41. 41. •  <script> –  JavaScript JavaScript –  •  src URL; •  charset utf-8; •  type ; •  async(new) ;
  42. 42. •  <style> –  HTML –  •  src URL; •  media ;
  43. 43. •  <link> –  –  •  href URL; •  media ; •  charset •  rel stylesheet
  44. 44. •  <iframe> –  <iframe> –  •  name •  src •  scrolling •  width height –  <a> <base> target left right
  45. 45. •  DTD/ <!DOCTYPE html>•  xmlns /•  <meta charset="utf-8">•  type <script> // </script>•  <nav><header><footer><section>•  Canvas Video Audio
  46. 46. •  HTML

×