HTML5第二节_html/css_WEB-ITnose-html教程-PHP中文网

HTML5第二节_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:21:33

原创

1607人浏览过

第二回合：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>HTML5</title>  <link rel="stylesheet" href="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>            @@##@@        </aside><!-- 定义侧边栏目 -->        <footer>            <h2>Footer</h2>        </footer>    </div></body></html><br /><br />css代码如下：<br />

登录后复制

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;            }        }/*定义动画*/<br />效果图如下图所示

登录后复制

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

登录后复制