HTML5第二节 - 追梦-dream

第二回合：HTML5的新特性

与之前的HTML4.01相比，HTML5增加了非常多的改变：

① 新的语义元素：

、

、

、

、

、

、

、

和

等等

② 新的元素特性：增加新的元素属性、表单元素、验证功能等内容。

③ 多媒体：增加

④ 2D/3D 绘图：增加绘图元素。

⑤ 存储：增加在线、离线存储功能。

⑥ 连通性：增加客户端与服务器交互的两个内容：Web Sockets(客户端与服务器持久连接)和Server-sent events(服务器推送数据)等。

⑦ 集成：提供Web Workers、History API、requestAnimationFrame、地理位置等强大的功能。

⑧ 设备访问：提供对摄像头、移动设备的支持。

⑨ CSS3样式：提供了新的背景样式特性、动画、边框等样式。

下面我们用实例来说明下各个标签的使用以及h5与c3的配合。

html代码如下：

DOCTYPE html>
html>

head>
  meta charset="utf-8" />
  title>HTML5title>
  link rel="stylesheet" href="html5.css">

head>

body>

   header class="show">
     h1>Headerh1>
     h2>Subtitleh2>
 
   header>

    div id="container">

        nav>
          h3>Navh3>
          a href="">HTML5a>
          a href="">CSS3a>
          a href="">Javascripta>
        nav>

        section>
            article>
                header>
                    h1>Article Headerh1>
                header>
                p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.p>
                p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.p>
                footer>
                    h2>Article Footerh2>
                footer>
            article>
            article>
                header>
                    h1>Article Headerh1>
                header>
                p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odiop>
                footer>
                    h2>Article Footerh2>
                footer>
            article>
        section>

        aside>
            h3>Asideh3>
            p>do you love this case? if you want make friends with me ,you can add my qq: 1125911451,thank you for your join.p>
            img src="lian.jpg" alt="" width="220" height="250">
        aside>
        footer>
            h2>Footerh2>
        footer>
    div>
body>

html>

css代码如下：

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);
        }/*调用动画*/
 @-webkit-keyframes show {
            0% {
                background: #f47d31;
                color:  white;
            }

            50% {
                background: #e0a014;
                color: #a3d9ff;
            }

            100% {
                background: purple;
                color: pink;
            }
        }/*定义动画*/
效果图如下图所示

我相信 现在大家对h5已经产生了浓厚的兴趣，那么现在可以自己动手去撸代码，用h5开发页面，在下一节里我将继续为大家讲解h5的应用