HTML5的基础介绍

来源：互联网发布：淘宝实名认证的截图编辑：程序博客网时间：2024/06/03 23:49

1、HTML5的基本介绍

HTML4包含下面4部分：

1）html标签：页面的基本结构

2）css：用来控制页面上的元素的显示

3）javascript：主要是用来控制页面上的逻辑

HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了WEB应用开发的一系列标准，成为第一个将web作为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等；还提供了一些javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现原生应用，甚至结合Canvas开发网页版游戏。

H5范称

HTML5标签+css3+JS（js的API）

2、语义标签

nav----导航

header----页眉

footer----页脚

section----区块

acticle----文章

process----进度条

使用这些语义标签，更有利于搜索引擎或者辅助设备来理解HTML页面内容。

3、新增标签（还有很多）

几个具有颠覆性的标签：这两个标签可以在网页中播放视频

video：用来控制视频的播放

audio：用来控制音频的播放

4、新增js API

1）换肤：在用户的客户端去存一些东西，早之前我们存储数据都是用cookie；

html5新增了两个对象：

sessionStorage：保存在浏览器内存中

localStorage：永久保存

小案例1：换肤，使用localStorage保存数据

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>换肤</title>

</head>

<body>

<div style="float: right;">

<select>

<option value="none">换肤</option>

<option value="yellow">黄色</option>

<option value="green">绿色</option>

<option value="blue">蓝色</option>

<option value="pink">粉色</option>

</select>

</div>

<script type="text/javascript" src="js/jquery.js" ></script>

<script type="text/javascript">

//每次打开页面时，先去读取localStorage中的color，并且设置背景

var color = window.localStorage.getItem("color");

if(color){

document.body.style.background = color;

}

document.querySelector("select").onchange = function(){

var color = this.value;

document.body.style.background = color;

//把这个数据保存到localStorage中

//以键值对的方式保存

window.localStorage.setItem("color",color);

};

</script>

</body>

</html>

总结：百度搜索记住用户的搜索关键字也是这样实现的。

2）定位：JS提供API可以获取用户的经纬度，早期只能通过ip进行定位。

现在使用js获取用户经纬度，然后调用第三方的接口，比如百度地图、高德地图；

基于lbs的服务:Location base service。

使用pc去获取经纬度存在一些问题。

小案例2：百度地图

首先要进入百度地图的api官网

1：获取用户的经纬度

2：调用百度地图，把我们的经纬度传过去

3：渲染

3）CSS3动画：CSS库，别人写好的一系列CSS库，比如animate.css

animate.css：一款强大的CSS动画库；预设了引起弹跳（bounce）、摇摆(swing）、颤抖（wobble）、抖动（shake）、闪烁（flash）、翻转（flip）、旋转（rotate）、淡入淡出（fale）、滑动（sliding）、光速（lightspeed）、缩放变焦（zoom）、翻滚（roll）等多达70中动画特效。

小案例3：支付宝咻一咻特效

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>支付宝特效</title>

<style type="text/css">

html,body{

height: 100%;

}

/*使用c3的伸缩布局*/

body{

display: flex;

/*调整主轴和侧轴的对齐方式*/

justify-content: center;

align-items: center;

background: #1e577e;

overflow: hidden;

}

.center{

cursor: pointer;

}

.center img{

width: 128px;

height: 128px;

}

.main{

width: 128px;

height: 128px;

position: relative;

}

.main>div{

width: 128px;

height: 128px;

position: absolute;

left: 0;

top: 0px;

}

.circle{

border: 1px solid #ccc;

border-radius: 50%;

opacity: 0;

}

.circle.go{

/*animation: change 1s linear infinite;*/

animation-name: change;

animation-duration: 3s;

/*执行动画的速度*/

animation-timing-function: linear;

/*动画执行次数*/

animation-iteration-count: infinite;

}

@keyframes change{

0%{

transform: scale(1);

opacity: 0.4;

}

100%{

transform: scale(4);

opacity: 0;

}

}

</style>

</head>

<body>

<div class="main">

<div class="circle">

</div>

<div class="circle">

</div>

<div class="circle">

</div>

<div class="circle">

</div>

<div class="circle">

</div>

<div class="center">

<img src="img/zhipay.png"/>

</div>

</div>

<audio src="music/6944.wav"></audio>

<script type="text/javascript">

document.querySelector(".center").onclick=function(){

var circles = document.querySelectorAll(".circle");

//js操作必须一个一个便利，然后单独操作

//如果使用jquery则可以批量操作

for(var i=0;i<circles.length;i++){

//把动画效果加上去，实现方式：定义一个类名

circles[i].style.animationDelay = i*0.6+"s";

circles[i].classList.add("go");

}

//播放一段音频

var audio = document.querySelector("audio");

//只播放一次

audio.loop = "loop";

audio.play();

};

</script>

</body>

</html>

小案例4：宇宙

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{

margin: 0px;

padding: 0px;

background: #800080;

overflow: hidden;

}

ul{

width: 600px;

height: 600px;

list-style: none;

margin: 40px auto;

position: relative;

}

ul li{

border: 1px solid green;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50% ,-50%);

/*animation: change 3s linear infinite;*/

animation: change;

animation-timing-function: linear;

animation-iteration-count: infinite;

}

li:nth-of-type(1){

width: 60px;

height: 60px;

border: none;

background: yellow;

/*设置核子阴影*/

box-shadow: 0px 0px 50px #c90;

}

li span{

position: absolute;

width: 12px;

height: 12px;

left: 50%;

top: -6px;

background: red;

border-radius: 50%;

}

li:nth-of-type(2){

width: 120px;

height: 120px;

animation-duration: 3.2s;

}

li:nth-of-type(3){

width: 180px;

height: 180px;

animation-duration: 4.2s;

}

li:nth-of-type(4){

width: 240px;

height: 240px;

animation-duration: 5.2s;

}

li:nth-of-type(5){

width: 300px;

height: 300px;

animation-duration: 7.2s;

}

li:nth-of-type(6){

width: 360px;

height: 360px;

animation-duration: 9.2s;

}

li:nth-of-type(7){

width: 420px;

height: 420px;

animation-duration: 11.2s;

}

li:nth-of-type(8){

width: 480px;

height: 480px;

animation-duration: 12.2s;

}

li:nth-of-type(9){

width: 540px;

height: 540px;

animation-duration: 16.2s;

}

li:nth-of-type(10){

width: 600px;

height: 600px;

animation-duration: 18.2s;

}

@keyframes change{

0%{

transform: translate(-50%, -50%) rotate(0deg);

}

100%{

transform: translate(-50%, -50%) rotate(360deg);

}

}

</style>

</head>

<body>

<ul>

<li></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

<li><span></span></li>

</ul>

<script type="text/javascript">

</script>

</body>

</html>

阅读全文

0 0