首页 > 代码库 > HTML5第二节

HTML5第二节

2024-09-18 02:24:53   218人阅读

第二回合：HTML5的新特性

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

① 新的语义元素：<article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<hgroup>、<nav>和<section>等等

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

③ 多媒体：增加<audio>音频、<video>视频元素等内容。

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

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

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

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

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

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

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

html代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>HTML5</title>
  <link rel="stylesheet" href="http://www.mamicode.com/html5.css">

</head>

<body>

   <header class="show">
     <h1>Header</h1>
     <h2>Subtitle</h2>
 
   </header><!-- 头部结束 -->

    <div id="container">

        <nav>
          <h3>Nav</h3>
          <a href="">HTML5</a>
          <a href="">CSS3</a>
          <a href="">Javascript</a>
        </nav><!-- 导航链接部分 -->

        <section>
            <article>
                <header>
                    <h1>Article Header</h1>
                </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 Footer</h2>
                </footer><!-- 定义尾部 -->
            </article><!-- 定义文章 -->
            <article>
                <header>
                    <h1>Article Header</h1>
                </header>
                <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
                <footer>
                    <h2>Article Footer</h2>
                </footer>
            </article>
        </section><!-- 定义文档中的节 -->

        <aside>
            <h3>Aside</h3>
            <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="http://www.mamicode.com/lian.jpg"  width="220" height="250">
        </aside><!-- 定义侧边栏目 -->
        <footer>
            <h2>Footer</h2>
        </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的应用


HTML5第二节






























        

            
                
                  
                
                

                    联系

                    我们