160412 html001 html¦‚è¦ç·¨

  • View
    103

  • Download
    0

Embed Size (px)

Text of 160412 html001 html¦‚è¦ç·¨

  • 2016/04/12

    HTMLHTML 01

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 1. HTML / CSS / JavaScript 2. 3. HTML CSS 4. HTML 5. HTML 6. HTML id class7. CSS 8. CSS 1padding / border / margin9. CSS 2float10. CSS 3position11. CSS 412. CSS 5/13. CSS 614. 15.

    2

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 1. HTML / CSS / JavaScript

    HTML Hyper Text Markup Language

    CSS Cascading Style Sheets

    HTML

    JavaScript

    HTML

    3

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 2.

    HTML 10 CSS 70% JavaScript 20%

    4

    CSS

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 3. HTML CSS

    JavaScript

    5

    HTML

    CSS

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 4.HTML1

    6

    header, footer, section, articlehttp://sole-color-blog.com/blog/php/65/

    http://www.confrage.com/html5/html5_1100.html

    HTML5http://www.webdesign-fan.com/html5-matome

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://sole-color-blog.com/blog/php/65/http://www.confrage.com/html5/html5_1100.htmlhttp://www.webdesign-fan.com/html5-matome

  • 4.HTML2

    7

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 4.HTML3

    8

    CSS

    Bootstrap http://getbootstrap.com/css/#buttons

    btn-blue btn-primary

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://getbootstrap.com/css/#buttons

  • 5. HTML

    9

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 6. HTML id class

    id HTML1

    class HTML

    class 1

    CSS JavaScript id class

    10

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 7. CSS

    HTML idclass

    id

    class

    http://weboook.blog22.fc2.com/blog-entry-268.html11

    h1 {font-size:3em;

    }

    #news {background-color:#999999;

    }

    .btn {padding:10px;

    }

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://weboook.blog22.fc2.com/blog-entry-268.html

  • 8. CSS1

    margin border padding

    http://taneppa.net/margin_padding/12

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://taneppa.net/margin_padding/

  • 9. CSS2

    float clear

    http://www.css-designsample.com/beginner/hp/float-base.html

    http://taneppa.net/float/

    http://coliss.com/articles/build-websites/operation/css/how-floating-works-by-ire.html

    13

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://www.css-designsample.com/beginner/hp/float-base.htmlhttp://taneppa.net/float/http://coliss.com/articles/build-websites/operation/css/how-floating-works-by-ire.html

  • 10. CSS3

    position

    http://www.css-designsample.com/beginner/hp/position-base.html

    http://www.koushinclub.com/blog/1453.html

    14

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://www.css-designsample.com/beginner/hp/position-base.htmlhttp://www.koushinclub.com/blog/1453.html

  • 11. CSS4

    css font 2016

    Web Font Google Web Font http://oxynotes.com/?p=8121

    Webhttp://typesquare.com/

    https://h2ham.net/font-awasome

    15

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://oxynotes.com/?p=8121http://typesquare.com/https://h2ham.net/font-awasome

  • 12. CSS5/

    http://www.tagindex.com/html_tag/basic/block_inline.html

    16

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://www.tagindex.com/html_tag/basic/block_inline.html

  • 13. CSS6

    CSS

    http://sole-color-blog.com/blog/php/71/

    17

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://sole-color-blog.com/blog/php/71/

  • 14.

    12

    PC

    HTML5 / CSS3 OKHTML4 XHTML 5

    18

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 15.1HTML5

    SVGActiveX

    canvas

    CSS3

    PC

    19

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

  • 15.2CSS

    CSS

    Bootstrap http://getbootstrap.com/

    Pure http://purecss.io/

    Uikit http://getuikit.com/

    INK http://ink.sapo.pt/

    HTML KickStart http://www.99lime.com/elements/

    20

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://getbootstrap.com/http://purecss.io/http://getuikit.com/http://ink.sapo.pt/http://www.99lime.com/elements/

  • 15.3reset.css

    CSS

    reset.css

    http://www.html5-memo.com/first-html5/html5-002/

    21

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-designhttp://www.html5-memo.com/first-html5/html5-002/

  • 22

    http://www.free-powerpoint-templates-design.com/free-powerpoint-templates-design

    11. HTML / CSS / JavaScript 2. 3. HTML CSS 4.HTML 14.HTML 24.HTML 35. HTML 6. HTML id class7. CSS8. CSS19. CSS210. CSS311. CSS412. CSS5/13. CSS614. 15. 1HTML515. 2CSS15. 3reset.css