HTML5 section II

Second round: new features of HTML5

Compared to the previous HTML4.01, HTML5 adds a lot of changes:

① New semantic elements :<article>, <aside>, <figure>, <figcaption>, <footer>,

② new element attributes: Add new element attributes, form elements, validation features, and more.

③ Multimedia : Add <audio> audio, <video> video elements and more.

④ 2d/3d Drawing : Adding <canvas> drawing elements.

⑤ Storage : Add online, offline storage.

⑥ Connectivity : Increase the client-server interaction with two content: Web Sockets (Client-to-server persistent connection) and Server-sent events (server push data).

⑦ Integration : Provides powerful features such as Web Workers, History API, Requestanimationframe, geolocation, and more.

⑧ Device Access : Provides support for cameras and mobile devices.

⑨ CSS3 Style : Provides new background style features, animations, borders, and more.

Below we use the example to illustrate the use of each label and the H5 and C3 cooperation.

The HTML code is as follows:

<! DOCTYPE html>
The CSS code is as follows:

Body {background-color: #CCCCCC;    Font-family:geneva,arial,helvetica,sans-serif;    margin:0px Auto;    max-width:900px;    Border:solid; Border-color: #FFFFFF;}    Header {background-color: #F47D31;    Display:block;    Color: #FFFFFF; Text-align:center;} Header h2 {margin:0px;}    h1 {font-size:72px; margin:0px;}    h2 {font-size:24px;    margin:0px;    Text-align:center; Color: #F47D31;}    h3 {font-size:18px;    margin:0px;    Text-align:center; Color: #F47D31;}    h4 {color: #F47D31;    Background-color: #fff;    -webkit-box-shadow:2px 2px 20px #888;    -webkit-transform:rotate ( -45DEG);    -moz-box-shadow:2px 2px 20px #888;    -moz-transform:rotate ( -45DEG);    Position:absolute;    padding:0px 150px;    top:50px;    Left: -120px;    Text-align:center;    }nav {display:block;    width:25%; Float:left;}    Nav A:link, nav a:visited {display:block;    BORDER-BOTTOM:3PX solid #fff;    padding:10px;    Text-decoration:none; Font-weight: Bold margin:5px;}    Nav a:hover {color:white; Background-color: #F47D31;}    Nav h3 {margin:15px; Color:white;} #container {background-color: #888;}    section {Display:block;    width:50%; Float:left;}    Article {background-color: #eee;    Display:block;    margin:10px;    padding:10px;    -webkit-border-radius:10px;    -moz-border-radius:10px; border-radius:10px;}    Article header {-webkit-border-radius:10px;    -moz-border-radius:10px;    border-radius:10px; padding:5px;}    Article footer {-webkit-border-radius:10px;    -moz-border-radius:10px;    border-radius:10px; padding:5px;}    Article h1 {font-size:18px;}    aside {display:block;    width:25%; Float:left;}    aside H3 {margin:15px; Color:white;}    aside p {margin:15px;    Color:white;    Font-weight:bold;    Font-style:italic;}        footer {Clear:both;    Display:block;    Background-color: #F47D31;    Color: #FFFFFF;    Text-align:center; padding:15px;}    Footer H2 {font-size:14px; Color:white;} /* Links */a {color: #F47D31;} a:hover {text-decoration:underline;}.            Show {-webkit-animation:show 25s ease-out infinite;            -moz-animation:show 25s ease-out Infinite;            -o-animation:show 25s ease-out Infinite;            Animation:show 25s ease-out Infinite;            -webkit-transform:translate3d (0, 0, 0);            -ms-transform:translate3d (0, 0, 0);            -o-transform:translate3d (0, 0, 0);        Transform:translate3d (0, 0, 0);                }/* Call animation */@-webkit-keyframes Show {0% {background: #f47d31;            Color:white;                } 50% {background: #e0a014;            Color: #a3d9ff;                } 100% {background:purple;            Color:pink; }}/* Definition Animation */
As shown

I believe that now we have a strong interest in H5, then you can now do their own code, with H5 development page, in the next section I will continue to explain the application of H5

HTML5 section II