HTML5第二节

第二回合：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="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="lian.jpg" alt="" 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第二节的更多相关文章

自学HTML5第二节（标签篇---新增标签详解）
HTML5新增标签: <article> 标签规定独立的自包含内容.一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源 ...
《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第二节：MVC5项目结构
第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...
android内部培训视频_第二节布局基础
第二节:布局入门一.线性布局需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
seajs第二节，seajs各模块依赖关系
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
VUE2.0实现购物车和地址选配功能学习第二节
第二节创建VUE实例购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
第二节安装CentOS
Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...
源码讲解 node+mongodb 建站攻略（一期）第二节
源码讲解 node+mongodb 建站攻略(一期)第二节上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...
第二节：Web前端-ASP.NET之C#基础
第二节:Web前端-ASP.NET之C#基础学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...

随机推荐

mysql获取所有分类的前n条记录的两种方法浅析
项目中有个需求是获取出展会分类下的前n条展商. 刚开始的思路是用group by 获取出展会的分类,后面再根据分类获取该分类下的n个展商,但也需要第一次获取出展会的时候也获取所有的每个展会分类下的 ...
改变html中鼠标形状
要修改的属性是: style=”cursor:default” 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 pointer:是手型. crosshair:是十字 ...
bzoj 3110
题意:戳这里思路:可以用cdq分治(很明显这种模型妹纸分治法很解决)..不过为了学习树套树特地写了一下.. 所谓的树套树也第一层(最外层)普通的维护的是一个node,而树套树维护的是一个数据结构(一 ...
zabbix3.x web设置手册(2)
在浏览器中输入:http://10.50.32.48/zabbix/setup.php 如下图: 点击Next step: 如上图,右侧全为ok,则点击Next step:若右侧有fail的情况,需要 ...
html中使用js实现内容过长时部分
有时数据内容太长时我们并不希望其全部显示出来,因为这样可能会导致用于显示这些内容的标签被撑开影响美观. 这时就希望能够实现默认只显示部分内容,在鼠标放上去的时候再将全部的内容显示出来. 这里提供一个简 ...
Python札记 -- 装饰器补充
本随笔是对Python札记 -- 装饰器的一些补充. 使用装饰器的时候,被装饰函数的一些属性会丢失,比如如下代码: #!/usr/bin/env python def deco(func): def ...
android 启动过程
android系统启动的时候首先会启动Linux的基础进程,加载Linux kernel启动初始化(init)进程. 接着,回启动Linux deamon(守护进程)会启动以下的内容: ①启动USBd ...
Excel使用技巧总结
Excel博大精深,此文用来记录Excel的使用技巧 1.多个单元格值添加单引号,比如:A1单元格的值为123444,添加单引号之后变为'123444',可以在B1或者其他任一空的单元格内输入公式:& ...
Xamarin.Android之UI Test简单入门
一.前言相信Xamarin免费之后会有更多的人加入进来,这也是我一直以来最希望看到的事,更多的人加入到这个社区中,为这个社区贡献自己的一份力量,国内当前还没有一个比较正规或者说是名气比较大的Xama ...
[.NET领域驱动设计实战系列]专题八：DDD案例：网上书店分布式消息队列和分布式缓存的实现
一.引言在上一专题中,商家发货和用户确认收货功能引入了消息队列来实现的,引入消息队列的好处可以保证消息的顺序处理,并且具有良好的可扩展性.但是上一专题消息队列是基于内存中队列对象来实现,这样实现有一 ...

HTML5第二节

HTML5第二节的更多相关文章

随机推荐

热门专题