第二回合：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第二节的更多相关文章
	

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

	


随机推荐
	

    
									
  1. Android中将布局文件转成bitmap
			
    在实践中发现,有些需要打印的小票高度小于屏幕的高度,而有些小票内容过多高度高于屏幕高度. 小于屏幕高度的布局文件转成bitmap较为容易,高于屏幕高度的布局文件转成长图bitmap较为复杂. 一.小于 ...
    
			
    2. 
						
  2. 多线程NSThread基本用法
			
        #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...
    
			
    3. 
						
  3. 【C++】自绘控件基础
			
    由于我们对控件的功能.外观的需求,公共控件并不能很好地满足这一点,所以我们就得自绘控件. 自绘控件有许多方法,比如:处理WM_PAINT消息,设置ownDraw风格,处理WM_CTLCOLOR消息,等 ...
    
			
    4. 
						
  4. 伪元素小tips
			
    1.伪元素的是dom看不见的,表现为行内元素.我这里说的伪元素是指::before ::after.其他的像:first-letter :visited 则属于伪类. 2.因为dom不可见,所以伪元素 ...
    
			
    5. 
						
  5. Python学习笔记1——Python基础
			
    一． 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...
    
			
    6. 
						
  6. Mac OS X 常用快捷键
			
       
    
			
    7. 
						
  7. 【原】react-router项目实战
			
    摘要: react-router相对于flux和redux来说,比较好容易理解一点和容易入门一点.这个是根据我之前的一个项目,然后我用react+react-router+webpack重新写的. 不 ...
    
			
    8. 
						
  8. 高性能网站架构设计之缓存篇（1）- Redis的安装与使用
			
    一.什么 Redis REmote DIctionary Server,简称 Redis,是一个类似于Memcached的Key-Value存储系统.相比Memcached,它支持更丰富的数据结构,包 ...
    
			
    9. 
						
  9. MQTT V3.1--我的理解
			
    最近因为工作需要,需要对推送消息了解,因此对MQTT进行了整理,这里更多的是对MQTT英文版的翻译和理解. MQTT(Message Queue Telemetry Transport),遥测传输协议 ...
    
			
    10. 
						
  10. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（一）Hello World!
			
    ReactMixhttps://github.com/xueduany/react-mix自从昨天发布起来,得到了不少小伙伴的热捧,很高兴帮助大家解决了憋在心中很久的问题“如果我只会HTML,Css, ...
    
			
    11.