HTML5 common label | practical dry goods

content:

HTML5 new structure label

HTML5 new other label

HTML5 new INPUT type

HTML5 new attribute

HTML5 advanced application

HTML4 and HTML5 comparison:

HTML4 representative example:

div>

div>

HTML5 code example:

header>

HTML5常用的标签 |实用干货

article>

section>

footer>

header> page

footer> Footer

section> Content block

article> Article block

hgroup> title group

frame> data group

figcaption> Data Group title

header> usage

Web Title h1>

header>

Article Title h1>

article text content p>

article>

footer> Usage

Article main body

Article footnote

HTML5常用的标签 |实用干货

footer>

  • Station link li>
  • station link li>
  • station link li>
  • ul>

  • link content li>
  • NAV>

    section> usage

    Title h1>

    content p>

    article> usage

    h1>

    • li> ul>

    hgroup> usage

    Main Title h1>

    subtitle h2>

    hgroup>

    text p>

    Figure> Usage

    Title Figcaption>

    HTML5常用的标签 |实用干货

    figure>

    New element label addict:

    Explanation: Because many browsers have not supported HTML5 new elements, the new elements must be added as follows

    // appended Block description

    Article, Aside, Dialog, Figure, Footer, Header, Legend, NAV, Section {Display: block}

    Also: The browser before IE8 does not support the CSS method, and must be used as follows:

    Document.createElement (“HEADER”);

    Document.createElement (“NAV”);

    Document.createElement (“article”);

    Document.createElement (“Footer”);

    script>

    HTML5常用的标签 |实用干货

    Embed> Multimedia

    mark> tag

    HTML5常用的标签 |实用干货

    Time> Time

    WBR> Soft Rank

    canvas> Drawing

    HTML5常用的标签 |实用干货

    Embed> Usage

    Embed>

    HTML5常用的标签 |实用干货

    mark> Usage

    Thank you for your visit to this site Segment Mr. Section Mark>. p>

    TIME> Usage

    9:00 Time> in the morning. p>

    I have a date with Valentine’s Day Time>. p>

    WBR> Usage

    Learn the web design must learn the software:

    Photoshop Dreamweaver FLASH.

    p>

    canvas> usage

    grammar:

    canvas>

    Note: The Canvas tag is just a map container, and you must use the script to draw graphics.

    HTML5常用的标签 |实用干货

    Example of use:

    canvas>

    Var canvas = document.getlementByid (‘mycanvas’);

    Var ctx = canvas.getContext (‘2D’);

    Ctx.fillstyle = ‘# ff0000’;

    CTX.FillRect (0, 0, 80, 100);

    E-mail address text box

    URL Address Text Box

    Value Text Box

    Numerical Scope Text Box

    HTML5常用的标签 |实用干货

    Date-related type:

    Form related properties

    Link related properties

    HTML5常用的标签 |实用干货

    Other properties

    Global attribute

    AutoComplete properties

    AutoFocus property automatically gets focus properties

    PlaceHolder property prompt information properties

    FORM property form declares attribute

    Required property content verification properties

    New Media Attribute

    New HREFLANG attribute

    new SIZES attribute

    New Target property

      New Reverse Attribute

    New Charset Attribute

    New Type and Label properties

    HTML5常用的标签 |实用干货

    new Scoped property

    New Async property

    Sandbox, Seamless, Srcdoc

    Editable content attribute ContenTedITable

    Page Editable Properties DesignMode

    Hidden element properties Hidden

    Spell check attribute SPELLCHECK

    Focus Get Properties TabINDEX

    Drawing application Canvas

    Multimedia control

    form validation

    Draw graphics with Canvas

    Draw gradient with Canvas

    Draw variant graphics with Canvas

    Draw an image

    Animation effect

    Draw graphics with Canvas – Draw a rectangle

    Get the Canvas element

    Get 2D graphics (get context)

    Set the drawing style FillStyle, Strokestyle

    HTML5常用的标签 |实用干货

    Set line width linewidth

    Draw graphics with Canvas – Draw Path

    Create a path beginpath ()

    HTML5常用的标签 |实用干货

    Create a circular path ARC (X, Y, Radius, Startangle, Endangle, AnticLockWise)

    Close path closepath ()

    Draw graphics with Canvas – Draw round

    Var canvas = document.getlementByid (“Mycanvas”);

    Var ctx = canvas.getContext (“2D”);

    HTML5常用的标签 |实用干货

    CTX.ARC (150, 100, 100, 0, (math.pi / 180) * 360, true);

    CTX.FillStyle = “RGBA (255, 0, 0, 0.4)”;

    Ctx.fill ();

    HTML5常用的标签 |实用干货

    Draw graphics with Canvas – Draw triangles

    Method Moveto (X, Y), Lineto (X, Y):

    Var obj = document.getlementByid (“Mycanvas”);

    Var context = obj.getContext (“2D”);

    Context.StrokeStyle = “Red”;

    Context.moveto (0,0);

    Context.lineto (10,100);

    Context.lineto (130, 100);

    Context.lineto (0,0);

    Context.Stroke ();

    HTML5常用的标签 |实用干货

    Draw graphics with Canvas – Draw arc

    Method Beziercurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y))

    Context.beziercurveto (10, 0, 100, 0, 100, 100);

    Draw gradient with Canvas – Draw linear gradient

    Method CREATELINEARGRADIENT (XStart, YStart, Xend, Yend);

    Method AddColorstop (Offset, Color);

    Var objlg = context.createlineargradient (0,100,500,100);

    Objlg.addcolorstop (0, “Red”);

    Objlg.addcolorstop (0.5, “Green”);

    Objlg.addcolorstop (1, “blue”);

    Context.FillStyle = Objlg;

    Context.FillRect (0,0,500,300);

    Draw gradient with Canvas – Draw radiation gradient

    Method CreateradialGradient (X0, Y0, R0, X1, Y1, R1);

    HTML5 new structure label

    HTML5 new other label

    HTML5 new INPUT type

    HTML5 new attribute

    HTML5 advanced application

    section>

    HTML5常用的标签 |实用干货

    header>

    header>

    header>

    HTML5常用的标签 |实用干货

    Article Title h1>

    article>

    article>

    article>

    article>

    HTML5常用的标签 |实用干货

    footer>

    footer>

      ul>

    • link content li>
    • link content li>
    • content p>

      script>

      Form related properties

      Link related properties

      Other properties

      Global attribute

      Drawing application Canvas

      Get the Canvas element

      Get 2D graphics (get context)

      Var obj = document.getlementByid (“Mycanvas”);

      Var obj = document.getlementByid (“Mycanvas”);

      Var context = obj.getContext (“2D”);

      Var context = obj.getContext (“2D”);

      Context.StrokeStyle = “Red”;

      Context.moveto (0,0);

      Context.Stroke ();

      Method AddColorstop (Offset, Color);

      Var obj = document.getlementByid (“Mycanvas”);

      HTML5常用的标签 |实用干货

      Var context = obj.getContext (“2D”);

      Var rg = context.createradialgradient (50, 50, 0, 50, 50, 50);

      Context.creater

      Rg.addcolorstop (0, “red”);

      Rg.AddColorstop (1, “Green”);

      Context.fillstyle = rg;

      Context.FillRect (0, 0, 150, 150);

      Drawing a variant graphic with Canvas – Translation

      Method: Translate (x, y);

      Context.translate (100, 150);

      Context.FillStyle = “Red”;

      Context.FillRect (0,0,200,200);

      HTML5常用的标签 |实用干货

      Drawing Dormforms with Canvas – Zoom

      Method: scale (x, y);

      Context.scale (2, 2);

      Context.FillRect (0, 0, 10, 10);

      Draw a variant graphic with Canvas – Rotate

      Method: Rotate (ANGLE);

      Context.Rotate (Math.pi / 180 * 5);

      Context.FillRect (0,0,100,100);

      Draw an image

      Method: DrawImage (Image, X, Y, W, H)

      Var image = new image ();

      Image.src = “img.jpg”;

      Context.drawImage (image, 0,0,500,300);

      Image tile

      Method: CreatePattern (Image, Type)

      Var img = new image ();

      Img.src = “img.jpg”;

      Var PTRN = context.createpattern (IMG, “repeat”);

      Context.FillStyle = Ptrn;

      HTML5常用的标签 |实用干货

      Context.FillRect (0,0,2000,2000);

      HTML5常用的标签 |实用干货

      Please reply to “666”, do more surprises for the strokes of the stroke ~

      ………………………………………… …………….

      My WeChat public number: UI is strict

      -The harder, the more fortunate

      Var obj = document.getlementByid (“Mycanvas”);

      Var obj = document.getlementByid (“Mycanvas”);

      HTML5常用的标签 |实用干货

      Var obj = document.getlementByid (“Mycanvas”);

      Var obj = document.getlementByid (“Mycanvas”);

      Var obj = document.getlementByid (“Mycanvas”);

      Var context = obj.getContext (“2D”);

      Var context = obj.getContext (“2D”);

      Var context = obj.getContext (“2D”);

      Var context = obj.getContext (“2D”);

      Var context = obj.getContext (“2D”);

      Context.FillStyle = “Red”;

      Context.FillStyle = “Red”;