小白教您HTML5

目录 前端技术

什么是HTML5

官方概念:HTML5草案的前身名为Web Applications 1.0,是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性,加强了网页的标准、语义化与web表现性能,同时还增加了本地数据库等 Web 应用的功能。

广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括:HTML5,CSS3,Javascript,API在内的一套技术组合

HTML 5发展时间表

小白教您HTML5

由上面图可知:现在的HTML5还不是一个最终统一的版本,所以说HTML5用在手机端的开发。

目前支持HTML5的浏览器

小白教您HTML5

不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准。(现在处在一个推广阶段),但是大部分是一样的。

HTML5的特点

更简单

标签语义化

语法更宽松

多设备跨平台

自适应网页设计

从头说起——文档的声明

Xhtml1.0的页面架构

小白教您HTML5

Html5的页面架构

小白教您HTML5

HTML5标签的语义化

在以前的html中,盒子用div或span。

在html5中,标签的最大变化是标签都有了语义,以前的div和span都没有语义,仅仅表示一个盒子。

<header> 头标签

<nav> 导航标签

<aside> 侧边栏标签

<article> 文章标签

<footer> 页脚

<section> 章节,页眉,栏目

小白教您HTML5

HTML5新增的表单三个属性

1、required:必填属性

小白教您HTML5

2、placeholder:默认显示内容

小白教您HTML5

3、autofocus:自动获取焦点

小白教您HTML5

Html5中新增input标记的type属性

属性 描述
email 邮件
date 日期
url 网址格式
number 数字
range 范围
color 颜色

小白教您HTML5

完整代码

<form>

邮件:<input type=”email” name=”email”><br>

日期:<input type=”date” name=”mydate”><br>

网址:<input type=”url”><br>

手机号:<input type=”number”><br>

亮度:<input type=”range” min=”0″ max=”255″><br>

颜色:<input type=”color”><br>

地址:

<select>

<optgroup label=”北京”>

<option>西城区</option>

<option>东城区</option>

</optgroup>

<optgroup label=”天津”>

<option>河西区</option>

<option>河东区</option>

</optgroup>

</select><br>

搜索车型:<input type=”text” list=”car”>

<datalist id=”car”>

<option>奥迪</option>

<option>奥拓</option>

<option>大众</option>

</datalist>

<input type=”submit” value=”提交”>

</form>

小白教您HTML5

Range调背景色

小白教您HTML5

代码如下:

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>无标题文档</title>

<script src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

//当页面准备完毕的时候

$(document).ready(function(e) {

$(‘input’).change(function(e) {

var red=$(‘#red’).val(); //得到红色的值

var green=$(‘#green’).val(); //得到绿色的值

var blue=$(‘#blue’).val(); //得到蓝色的值

var value=$(this).val(); //当前修改的值

$(this).next().html(value); //将值付给当前修改元素后面的span

$(‘body’).css(‘background-color’,’rgb(‘+red+’,’+green+’,’+blue+’)’);

});

});

</script>

</head>

<body>

红色:<input type=”range” id=”red” min=”0″ max=”255″ value=”255″><span>255</span><br>

绿色:<input type=”range” id=”green” min=”0″ max=”255″ value=”255″><span>255</span><br>

蓝色:<input type=”range” id=”blue” min=”0″ max=”255″ value=”255″><span>255</span>

</body>

</html>

音频播放

第一种写法

小白教您HTML5

如果声音的格式html5不支持,就显示标记之间的提示信息

第二种写法:

小白教您HTML5

视频播放

小白教您HTML5

使用video标记来插入视频 autoplay表示自动播放,controls表示显示控制面板。

小白教您HTML5

360音乐导航

小白教您HTML5

完整代码如下:

<style type=”text/css”>

#nav{

list-style-type:none; /*去掉无序列表前面的点*/

margin:50px auto 0px; /*上边界50px,左右居中,下边界为0*/

width:960px; /*整个导航的宽度*/

height:38px;

color:#333;

font-size:14px;

padding:0px; /*填充清0*/

overflow:hidden; /*超出尺寸的部分不显示*/

}

#nav li{

width:105px;

height:36px;

float:left; /*所有的li从左到右排列*/

text-align:center; /*文字居中对齐*/

line-height:38px; /*设置行高,目的是让文字垂直居中*/

border-top:#C9CBCE solid 1px;

border-left:#C9CBCE solid 1px;

border-bottom:#C9CBCE solid 1px;

cursor:pointer; /*光标移动到li上变成手形*/

}

#nav li:last-child{ /*#nav下的最后一个li*/

border-right:#C9CBCE solid 1px;

}

#nav .liclick{

border-top:#54B82A solid 2px;

border-bottom:none;

}

#nav span{

width:100%;

height:38px;

display:block; /*只有块显示标记才能设置宽度和高度*/

position:relative; /*相对定位,目的为了span可以移动*/

z-index:-1; /*设置span上下层的顺序,让它在文字的下面*/

}

</style>

<script src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//点击li

$(‘#nav li’).click(function(e) {

$(‘.liclick’).removeClass(‘liclick’);

$(this).addClass(‘liclick’);

});

//每个li下面添加一个底色

var color=[‘#B9D329′,’#C0EBF7′,’#B9D329′,’#69BCF3′,’#79D9F3′,’#FA5F94′,’#ACD180′,’#FAB4CC’,’#FFAE5B’];

$(‘#nav li’).append(‘<span>’);

$(‘#nav span’).each(function(index, element) {

$(this).css(‘background-color’,color[index]);

});

//移动到li上的时候颜色色块升起

$(‘#nav li’).hover(function(){

$(this).children(‘span’).animate({‘top’:-38},200);

//获得当前li的索引编号

var index=$(this).index();

$(‘audio’).get(index).play(); //播放第index个音乐

},function(){

$(this).children(‘span’).animate({‘top’:0},200);

});

});

</script>

</head>

<body>

<ul id=”nav”>

<li>我的主页</li>

<li>新闻头条</li>

<li>电 视 剧</li>

<li>最新电影</li>

<li>小 游 戏</li>

<li>小说大全</li>

<li>旅游度假</li>

<li>今日团购</li>

<li>品牌特卖</li>

</ul>

<audio src=”360music/m1.mp3″></audio>

<audio src=”360music/m2.mp3″></audio>

<audio src=”360music/m3.mp3″></audio>

<audio src=”360music/m4.mp3″></audio>

<audio src=”360music/m5.mp3″></audio>

<audio src=”360music/m6.mp3″></audio>

<audio src=”360music/m7.mp3″></audio>

<audio src=”360music/m8.mp3″></audio>

<audio src=”360music/m9.mp3″></audio>

</body>

相关例题:http://pan.baidu.com/s/1hsDGA8k 密码:55ic