HTML
1.1 •        HTML

1.2 • HTML

1.3 • HTML

1.4 • HTML

1.5   • 
• 
• 
• 
• 
•  HTML(Hyper Text Markup Language )   “
         ”

•      HTML              HTML5
•         HTML
•                                 Web
•                                    IE   Internert
   Explorer             Firefox
     TT
•          Firefox
• 
   –  IE6~IE9
   –  Firefox 3.x ~Firefox 4.x
   –  Chrome
   –  Safari
•  HTML
              Dreamweaver
                            .htm   .html

•                Notepad++ VIM
•                        Firebug   IE F12
     Chrome
•              HTML
•                     index.html
     Firefox          HTML
•                         html                :index.html
     <!DOCTYPE html>           ---------------------------------------
     <html>                    ---------------------------------------

     <head>                      --------------------------------------
     <title>   </title>                                                   |
     </head>                     --------------------------------------

     <body>                    ---------------------------------------
     <h1>                  </h1>                                      |
                                                                     |
                                                                               |

                                                                          |
                                                                           |
     </body>                   ---------------------------------------

     </html>                     --------------------------------------
•                                                <div
     class=“header” id=“header”>        </div>
•                                  <”
• 
• 
• 
• 
• 
• 
•  <!DOCTYPE html>
  –                           HTML
•  <meta charset=“utf-8“ />
  –                                  gbk
•    HTML           tag
                            <html> </
   html> <head> </head> <body>.
•                      “<>”

            ,
• 
      HTML
• 

•                 <         “       ”
            “   ”……> …… <       >
•    HTML
•                        <head> </head>


• 
     –  <meta>
     –  <title> </title>
     –                   <link> <style>
•                      <body> </body>

• 
• 
     background text     leftmargin
• 




• 
     –  <!--   ,   -->
• 
• 
• 
• 
• 
• 
• 
•  DIV   SPAN
• 
     – 


• 
     –  <p> </p>
     –  <br>
     –  <pre> </pre>
     –  <hn> </hn>
     –  <font> </font>
     –              ( <b></b>)
•                                 html
                    <br>

• 
•  <body>
               <br/>
     <br>        <br>      <br>
     </body>
•    <p>


           <p>           <p>

• 
•           <p>   </p>
•                         ,   <pre>      ,
                                 <pre>       </pre>.
• 
     <body>
     <pre>

•          
•                
•                      
   </pre>
   </ body >
•    HTML

• 


      <ul>
         <li>   </li>
      </ul>
• 


      <ol>
         <li>   </li>
      </ol>
•     HTML           <img>

     –  <img src="flower.jpg" width="270" height="167"
        border="1" alt="    " />
•      HTML                                       PNG
     JPG GIF
• 
     – 

• 
•  <table> </table>
  –  <table>             <table> </table>

  – 

       •  bgcolor
       •  background
       •  width height
       •  border
       •  align
•  <caption> </caption>
  –                               align
       valign             align
                <table>
•  <tr>   </tr>
   –                         <tr>
   –  <tr>           bgcolor background width
      height align                  <table>

   –  align valign   align
                     valign
•  <td> </td>
  –    <td>

  –             bgcolor background width height
     align valign                       <table>
        <tr>
  –  <td>                           rowspan
     colspan    rowspan
     colspan
•  <th> </th>
  – 
       <td>
• 
     – 
• 
     –  <a href=“https://www.alipay.com” target=“_blank”
        title=“      ”>       </a>
     –  target=“_blank|self|_top|_parent|iframe   ”
• 
•  <a name="   ">       </a>
•  name
                    (
     )
•  <hr>
• 
     –           HTML

•                       and
     (&)                      (;)
• 
     –  &nbsp;
     –  &quot;
     –  &lt;
     –  &gt;
• 
• 
• 
•    Form
(1)
•  <form> </form>
  – 
        <form>      </form>     ,


  – 
       •  name
       •  action
       •  method
•  <input> </input>
  – 


  –  <input>
       •  type[text|password|radio|checkbox|submit|image]
       •  name
       •  value
•  <select> </select>
  – 
       <option>
  – 
        •  name
        •  size
        •  multiple
        •  value
        •  selected
•  <textarea> </textarea>
  – 

       BBS
  – 
        •  name
        •  rows
        •  cols
  –                             value
       <textarea> </textarea>
•  <script>
   –                            JavaScript   JavaScript

   – 
        •  src                  URL;
        •  charset              utf-8;
        •  type         ;
        •  async(new)       ;
•  <style>
   –               HTML
   – 
        •  src            URL;
        •  media                 ;
•  <link>
   – 
   – 
        •  href         URL;
        •  media               ;
        •  charset
        •  rel
           stylesheet
•  <iframe>
  –     <iframe>
  – 
     •  name
     •  src
     •  scrolling
     •  width height
  –  <a>          <base>   target   left right
•        DTD/                        <!DOCTYPE html>
•      xmlns            /
•                           <meta charset="utf-8">
•  type
     <script>
     //
     </script>
•                <nav><header><footer><section>
•  Canvas Video             Audio
•    HTML
Html基础

Html基础

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