HTML5
无论是html5还是html4…他们都是html语言
HTML5就是html这种网页标记语言的一个版本
HTML5网页标记语言的最新的版本，和使用最广泛的版本
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
1.HTML5 语义元素
HTML5 语义元素–语义元素 = 有意义的元素
当我们看到元素的名称之后，就能知道这个html元素的作用
没有HTML5 语义元素之前我们要做一个html网页的头部
<div id=“head”></div>
有HTML5语义元素之后我们要做一个html网页的头部
<header></header>
我们可以简单的认为HTML5语义元素<header></header>代替<div id=“head”></div>
HTML5 提供了新的语义元素来明确一个网页的不同部分:
<header> / <nav> / <section> / <article>/ <aside> / <figcaption> / <figure> / <footer>
<body>
<img src="./img/img1.png" >
<!-- header页面头部 -->
<header>
<h1>页面顶部</h1>
</header>
<!-- 页面导航栏 -->
<nav>
<a href=""style="text-decoration: none;">sd</a>
<a href=""style="text-decoration: none;">dsf</a>
<a href="" style="text-decoration: none;">dsw</a>
</nav>
<!-- article定义独立的区域中包含section -->
<article>
<h1>章节</h1>
<section>
<h3>第一</h3>
<p>article定义独立的区域中包含section</p>
</section>
<section>
<h3>第二</h3>
<p>article定义独立的区域中包含section</p>
</section>
</article>
<aside>
<h1>定义一个侧边栏</h1>
</aside>
<figure>
<figcaption>相册</figcaption>
<img src="./img/avatar1.png">
<img src="./img/avatar2.png">
<img src="./img/avatar3.png">
</figure>
<footer>
<h3>底部区域</h3>
</footer>
</body>
2.HTML新增的有用的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML新增的有用的元素</title>
<script>
function testdialog(){
var open=document.getElementById("dialog1").open;
if(open){
document.getElementById("dialog1").open="";
}else{
document.getElementById("dialog1").open="open";
}
}
//测试进度条的函数
function testprogress(){
var pro1=document.getElementById("pro1");
var i=0;
window.setInterval(function(){
pro1.value=i;
i++;
},300);
}
</script>
</head>
<body>
<h3>details--用于描述文档或文档某个部分的细节</h3>
<h3>summary--设置details元素的标题</h3>
<details open="open">
<summary>我是details元素的标题</summary>
<p>描述details元素的具体内容</p>
</details>
<h5>默认details中的具体内容被隐藏的，通过点击summary标题元素显示</h5>
<h5>details的open属性可以设置默认显示</h5>
<h3>dialog--定义对话框，比如提示框 </h3>
<input type="button" value="测试对话框dialog" onclick="testdialog();"/>
<dialog id="dialog1">这是一个html5提供的对话框元素</dialog>
<h5>open属性设置对话框元素显示</h5>
<h3>mark 定义带有记号的文本.[高亮显示]</h3>
<h4>什么是带有<mark>记号</mark>的文本。</h4>
<h3>meter定义度量衡。仅用于已知最大和最小值的度量。</h3>
<meter value="3" min="1" max="10"></meter>
<h5>value--表示当前值</h5>
<h5>min--最小值</h5>
<h5>max--最大值</h5>
<h3>progress--定义任何类型的任务的进度。</h3>
<input type="button" value="测试进度" onclick="testprogress();"/>
<progress id="pro1" value="0" max="100"></progress>
<h5>value--表示当前进度</h5>
<h5>max--最大值</h5>
</body>
</html>
3.HTML5新增的表单元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5新增的表单元素</title>
</head>
<body>
<h3>html5新增的表单元素</h3>
<h4>datalist--定义为 input 元素输入控件的预定义选项</h4>
<h4>用户会在他们输入数据时看到预定义选项的下拉列表。</h4>
<input list="mylist" name="myTestdatalist"/>
<datalist id="mylist">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<h4>Input 类型: color</h4>
<input type="color" name="mycolor" />
<h4>Input 类型: date</h4>
<input type="date" name="mydate" />
<h4>Input 类型: datetime[google浏览器不支持]</h4>
<input type="datetime" name="mydatetime" />
<h4>Input 类型: datetime-local</h4>
<input type="datetime-local" name="mydatetime" />
<h4>Input 类型: email【在提交表单时，会自动验证 email 域的值是否合法有效】</h4>
<input type="email" name="myemail" />
<h4>Input 类型: month</h4>
<input type="month" name="bdaymonth">
<h4>Input 类型: number</h4>
<input type="number" name="testnumber" max="10" min="1" step="2"><br>
disabled 规定输入字段是禁用的<br>
max 规定允许的最大值<br>
min 规定允许的最小值<br>
readonly 规定输入字段的值无法修改<br>
step 规定输入字段的合法数字间隔<br>
value 规定输入字段的默认值<br>
<h4>Input 类型: range</h4>
<input type="range" name="testrange" min="1" max="10" step="2"><br>
max - 规定允许的最大值<br>
min - 规定允许的最小值<br>
step - 规定合法的数字间隔<br>
value - 规定默认值<br>
<h4>Input 类型: search</h4>
<input type="search" name="testsearch">
<h4>Input 类型: time</h4>
<input type="time" name="testtime">
<h4>Input 类型: url【在提交表单时，会自动验证 url 域的值。】</h4>
<input type="url" name="testurl">
<h4>Input 类型: week</h4>
<input type="week" name="testweek">
</body>
</html>
4.HTML5 新的表单属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 新的表单属性</title>
</head>
<body>
<h4>HTML5 新的表单属性</h4>
<h5>autocomplete--属性规定 form 或 input 域应该拥有自动完成功能</h5>
<h5>当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。</h5>
<h5>novalidate--属性规定在提交表单时不应该验证 form 或 input 域。</h5>
<h5>autofocus--在页面加载时，input元素自动地获得焦点</h5>
<h5>form--属性规定input元素所属的一个或多个表单。</h5>
<h5>formaction--用于描述表单提交的URL地址.会代替form元素中的action属性.</h5>
<h5>action 属性规定当提交表单时，向何处发送表单数据</h5>
<h5>formenctype--属性描述了表单提交到服务器的数据编码 <br>
(只对form表单中 method="post" 表单)<br>
formenctype 属性代替 form 元素的 enctype 属性</h5>
<h5>formmethod 属性定义了表单提交的方式。<br>
formmethod 属性代替了 form 元素的 method 属性。</h5>
<h5>formnovalidate 属性规定在提交表单时不应该验证 form 或 input 域。<br>
formnovalidate 属性代替了 form 元素的 novalidate 属性。</h5>
<h5>formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。<br>
formtarget 属性代替了 form 元素的 target 属性。</h5>
<form id="myform" formaction="test" autocomplete="on">
name:<input type="text" name="myname" autocomplete="off"><br>
email:<input type="email" name="myemail" >
<input type="submit">
</form>
password:<input type="password" name="mypassword" form="myform"><br>
<h5>list--属性设置在input元素上，关联datalist元素这个预定义下拉列表</h5>
<input list="mylist" name="myTestdatalist"/>
<datalist id="mylist">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<h5>multiple--规定<input> 元素中可选择多个值</h5>
选择图片: <input type="file" name="img" multiple><br>
<select multiple>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
</select>
<h5>pattern (regexp)--描述了一个正则表达式用于验证input元素的值</h5>
<form action="login">
name:<input type="text" name="username" pattern="[A-Za-z]{3}" />
<input type="submit" value="提交" />
</form>
<h5>placeholder---属性提供一种提示（hint），描述输入域所期待的值</h5>
<input type="text" name="username" pattern="[A-Za-z]{3}" placeholder="请输入账号"/>
<h5>required--规定必须在提交之前填写输入域（不能为空）</h5>
<form action="login">
<input type="text" name="username" placeholder="请输入账号" required /><br>
<input type="password" name="password" placeholder="请输入密码" required /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
5.HTML5 Video(视频)
HTML5 Video(视频)
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
video–视频窗口
width/height–属性设置视频窗口初始化大小
controls–属性设置视频播放的控制器
source–子元素设置被播放的资源
source–子元素可以在video中出现多个，从第一个可被识别的视频开始播放
src–属性设置资源路径【绝对路径.相对.网络地址】
type–设置被播放资源的类型
元素支持三种视频格式： MP4, WebM, 和 Oggd```html
播放视频的方法
<1>
<video controls="controls">
<source src="res/movie.mp4" type="video/mp4"></source>
<source src="res/movie.mp4" type="video/mp4"></source>
</video>
<2>
```html
<input type="button" value="播放/暂停" onclick="playPause();"/>
<input type="button" value="放大" onclick="makeBig();"/>
<input type="button" value="缩小" onclick="makeSmall();"/>
<input type="button" value="普通" onclick="makeNormal();"/>
<br>
<video id="video1">
<source src="res/movie.mp4" type="video/mp4"></source>
</video>
<script>
//得到的视频对象
var video1obj=document.getElementById("video1");
//播放/暂停
function playPause(){
//判断视频是否暂停如果paused值为true表示当前是暂停状态
if(video1obj.paused){
//play()播放视频
video1obj.play();
}else{
//pause()暂停播放
video1obj.pause();
}
}
//放大
function makeBig(){
video1obj.width="500";
}
//缩小
function makeSmall(){
video1obj.width="200";
}
//普通
function makeNormal(){
video1obj.width="350";
}
</script>
6.HTML5 Audio(音频)
HTML5 Audio(音频)
HTML5 规定了在网页上嵌入音频元素的标准，即使用audio元素。
controls–设置控制器
source–子元素表示被播放的音频资源
src–音频资源路径
type–文件类型
audio元素支持三种音频格式文件: MP3, Wav, 和 Ogg。
autoplay–设置自动播放
loop–设置循环播放
<audio controls="controls" autoplay="autoplay" loop="4">
<source src="res/zijinghuayuan.mp3" type="audio/mp3"></source>
</audio>
7.HTML5 Web 存储
<1>HTML5可以在本地存储用户的网页数据
在没有Web 存储之前网页数据本地存储使用cookie完成
cookie浏览器自带的存储空间，每一个cookie可以存4k
cookie本地存储不安全
HTML5 Web 存储有2中方式 localStorage 和 sessionStorage
共同点:localStorage 和 sessionStorage都允许在浏览器端存储数据localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage 和 sessionStorage用法
1.使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage。
if(typeof(Storage)!=="undefined") {<br>
// 是的! 支持 localStorage sessionStorage 对象! // 一些代码.....<br>
} else { <br>
// 抱歉! 不支持 web 存储。<br>
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<script>
function mylogin(){
//得到用户名的输入框对象
var usernameobj=document.getElementById("username");
//得到密码的输入框对象
var passwordobj=document.getElementById("password");
//得到显示错误提示信息的span对象
var spanObj=document.getElementById("span");
//得到用户输入的用户名和密码
var username=usernameobj.value;
var pass=passwordobj.value;
//判断用户名密码
if(username=="zhangsan" && pass=="12345678"){
if(typeof(Storage)!=="undefined") {
//存储数据--localStorage
//1.localStorage.变量名称="数据值";
//localStorage.myname=username;
//2.localStorage.setItem("名称","数据值");
localStorage.setItem("myname",username);
} else {
alert("不支持,localStorage");
}
window.location.href="success.html";
}else{
//向span元素中设置一段提示文字
spanObj.innerHTML="用户名密码有误,请重新输入！";
}
}
</script>
</head>
<body>
<span id="span"></span><br>
<input type="text" id="username"/><br>
<input type="password" id="password"/><br>
<input type="button" id="button" value="登陆" onclick="mylogin();"/><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆成功</title>
<script>
window.onload=function(){
var hobj=document.getElementById("h1");
if(typeof(Storage)!=="undefined") {
//获取保存的数据值--localStorage
//1.localStorage.变量名称;
//var myval=localStorage.myname;
//2.获取保存的数据值:localStorage.getItem("名称");
var myval=localStorage.getItem("myname");
hobj.innerHTML=myval+",登陆成功";
} else {
alert("不支持,localStorage");
}
}
function myexit(){
if(typeof(Storage)!=="undefined") {
//localStorage.removeItem("名称");删除指定的数据
//localStorage.removeItem("myname");
//localStorage.clear(); 删除所有数据
localStorage.clear();
window.location.href="success.html";
} else {
alert("不支持,localStorage");
}
}
</script>
</head>
<body>
<h1 id="h1">登陆成功</h1>
<input type="button" value="退出" onclick="myexit();"/>
</body>
</html>
<2>localStorage存储数据
localStorage有两种方式:
1.localStorage.变量名称=“数据值”; 获取保存的数据值:localStorage.变量名称;
2.localStorage.setItem(“名称”,“数据值”); 获取保存的数据值:localStorage.getItem(“名称”);
手动删除localStorage对象中存储的数据:
localStorage.removeItem(“名称”);删除指定的数据
localStorage.clear(); 删除所有数据
2.sessionStorage存储数据
sessionStorage有两种方式:
1.sessionStorage.变量名称=“数据值”; 获取保存的数据值:sessionStorage.变量名称;
2.sessionStorage.setItem(“名称”,“数据值”); 获取保存的数据值:sessionStorage.getItem(“名称”);
手动删除sessionStorage对象中存储的数据:
sessionStorage.removeItem(“名称”);删除指定的数据
sessionStorage.clear(); 删除所有数据
注意:sessionStorage对象管理浏览器窗口之后之前保存的数据会自动清空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试sessionStorage 对象</title>
<script>
function testButCount(){
if(typeof(Storage)!=="undefined"){
//判断sessionStorage.clickcount中是否保存过数据值
if(sessionStorage.getItem("clickcount")){
//设置sessionStorage 对象保存数据
//1.sessionStorage.变量名称="数据值"；
//sessionStorage.clickcount= Number(sessionStorage.clickcount)+1;
//2.sessionStorage.setItem("变量名称","数据值")；设置sessionStorage 对象保存数据
//3.sessionStorage.getItem("变量名称")；获取数据
sessionStorage.setItem("clickcount",Number(sessionStorage.getItem("clickcount"))+1);
//4.sessionStorage.removeItem("变量名称");
//5.sessionStorage.clear();
}else{
sessionStorage.setItem("clickcount",1);
}
document.getElementById("h4").innerHTML="你已经点击了该按钮 " + sessionStorage.getItem("clickcount") + " 次 ";
}else{
alert("不支持sessionStorage对象");
}
}
</script>
</head>
<body>
<h1>sessionStorage 对象</h1>
<h2>实例:点击该按钮查看计数器的增加。</h2>
<input type="button" value="测试按钮的点击次数" onclick="testButCount();" /><br>
<h4 id="h4"></h4>
</body>
</html>
8.HTML5 Canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script>
//绘制矩形
function setRect(){
//得到画布对象canvas对象
var canvasobj=document.getElementById("canvas1");
//创建 context 对象--画笔
var con=canvasobj.getContext("2d");
//设置画笔颜色
con.fillStyle="black";
//开始绘制矩形
//fillRect(x,y,w,h);
con.fillRect(10,10,100,100);
}
function setarc(){
//得到画布对象canvas对象
var canvasobj=document.getElementById("canvas1");
//创建 context 对象--画笔
var con=canvasobj.getContext("2d");
con.beginPath();
con.arc(100,75,2*Math.PI,0,2*Math.PI);
con.stroke();
}
</script>
</head>
<body>
<h1>HTML5 Canvas</h1>
<h4>Canvas--就是在html中开辟出来的绘制图形的空间【画布】</h4>
<h4>通过style来设置一些样式</h4>
<h4>通过javascript在canvas画布上绘制图形</h4>
<input type="button" value="绘制矩形" onclick="setRect();"/><br>
<input type="button" value="绘制原型" onclick="setarc();"/><br>
<canvas id="canvas1" style="width: 400px; height: 400px; border: 10px solid red;"></canvas>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
