SlideShare une entreprise Scribd logo
1  sur  47
Télécharger pour lire hors ligne
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基础

Contenu connexe

Plus de Alipay

Javascrpt arale
Javascrpt araleJavascrpt arale
Javascrpt araleAlipay
 
Javascript 基础
Javascript 基础Javascript 基础
Javascript 基础Alipay
 
Css101
Css101Css101
Css101Alipay
 
Web encoding 元则
Web encoding 元则Web encoding 元则
Web encoding 元则Alipay
 
学会站在设计的角度做开发
学会站在设计的角度做开发学会站在设计的角度做开发
学会站在设计的角度做开发Alipay
 
洞察、创造与想象
洞察、创造与想象洞察、创造与想象
洞察、创造与想象Alipay
 
从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用Alipay
 
谈谈Javascript设计
谈谈Javascript设计谈谈Javascript设计
谈谈Javascript设计Alipay
 
行为化体验度量
行为化体验度量行为化体验度量
行为化体验度量Alipay
 
前端本地环境初探
前端本地环境初探前端本地环境初探
前端本地环境初探Alipay
 
前端本地环境初探
前端本地环境初探前端本地环境初探
前端本地环境初探Alipay
 
重构用户体验
重构用户体验重构用户体验
重构用户体验Alipay
 
Js in js
Js in jsJs in js
Js in jsAlipay
 

Plus de Alipay (13)

Javascrpt arale
Javascrpt araleJavascrpt arale
Javascrpt arale
 
Javascript 基础
Javascript 基础Javascript 基础
Javascript 基础
 
Css101
Css101Css101
Css101
 
Web encoding 元则
Web encoding 元则Web encoding 元则
Web encoding 元则
 
学会站在设计的角度做开发
学会站在设计的角度做开发学会站在设计的角度做开发
学会站在设计的角度做开发
 
洞察、创造与想象
洞察、创造与想象洞察、创造与想象
洞察、创造与想象
 
从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用从小书签到浏览器扩展的应用
从小书签到浏览器扩展的应用
 
谈谈Javascript设计
谈谈Javascript设计谈谈Javascript设计
谈谈Javascript设计
 
行为化体验度量
行为化体验度量行为化体验度量
行为化体验度量
 
前端本地环境初探
前端本地环境初探前端本地环境初探
前端本地环境初探
 
前端本地环境初探
前端本地环境初探前端本地环境初探
前端本地环境初探
 
重构用户体验
重构用户体验重构用户体验
重构用户体验
 
Js in js
Js in jsJs in js
Js in js
 

Html基础

  • 2. 1.1 •  HTML 1.2 • HTML 1.3 • HTML 1.4 • HTML 1.5 • 
  • 4. •  HTML(Hyper Text Markup 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> •  <”
  • 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. •  •  –  <!-- , -->
  • 18. •  DIV SPAN
  • 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 ( )
  • 34. •  –  HTML •  and (&) (;) •  –  &nbsp; –  &quot; –  &lt; –  &gt;
  • 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