1.HTML语言
无论是html5还是html4...他们都是html语言
HTML5就是html这种网页标记语言的一个版本
HTML5网页标记语HTML5新增的标记和属性
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素，比如 article、footer、header、nav、section
5.新的表单控件，比如 calendar、date、time、email、url、search
1.1HTML5 语义元素
HTML5 提供了新的语义元素来明确一个网页的不同部分
HTML5 语义元素--语义元素 = 有意义的元素
当我们看到元素的名称之后，就能知道这个html元素的作用语义元素：header nav section article aside figcaption figure footer
例如：我们设置一个表头
header 元素描述了网页内容的顶部区域
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="head" style="background-color: aquamarine;width: 100px;height: 50px;"> </div><br /> <header style="background-color: aquamarine;width: 100px;height: 50px;"> </header> </body> </html>
可以看到俩个元素完成的效果完全相同，我们可以简单的认为HTML5语义元素<header></header>代替<div id="head"></div>
由此可以说明 语义元素就是一个带有名称的 div容器
nav 标签定义导航链接的部分
footer元素描述了文档的底部区域
<div id="head" style="background-color: royalblue;width: 100%;height: 50px;"> </div><br /> <nav style="background-color: royalblue;width: 100%;height: 50px;"> </nav><br> <footer style="background-color: royalblue;width: 100%;height: 50px;"> </footer>
我们可以看出nav，footer元素也是可以代替div的。
那么header，nav和footer都是一样可以代替div，为什么会有多个语义元素？
可以看到所有的语义元素都有自己所负责的地方。
大家可以看到其中 article 元素和 section 元素是嵌套关系。
article 标签定义独立的区域内容。
section 标签定义文档中的节（section、区段）
<article> <h3>文章标题</h3> <section> <h4>第一节</h4> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> </section> <section> <h4>第二节</h4> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> </section> <section> <h4>第三节</h4> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> </section> </article>效果如下：
aside 标签定义页面主区域内容之外的内容（比如侧边栏）
<ul> <aside> <span>这是菜单</span> </aside> <aside> <span>这是菜单</span> </aside> <aside> <span>这是菜单</span> </aside> </ul>
aside是主区域内容之外的内容
figure 标签规定独立的流内容（图像、图表、照片、代码等等)
figcaption 标签定义figure元素的标题<figure> <figcaption>我的相册</figcaption> <img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/> <img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/> <img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/> </figure>
以上这些语义元素都是块级元素
1.2HTML新增的元素
details 用于描述文档或文档某个部分的细节
summary 设置details元素的标题<details open="open"> <summary>我是details元素的标题</summary> <p>内容</p> </details>目前，只有 Chrome 和 Safari 6 支持 details 标签。
details 标签规定了用户可见的或者隐藏的需求的补充细节
dialog 元素定义对话框，比如提示框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testdialog(){ var open=document.getElementById("dialog1").open; if(open){ document.getElementById("dialog1").open=""; }else{ document.getElementById("dialog1").open="open"; } } </script> </head> <body> <input type="button" value="测试对话框dialog" onclick="testdialog();"/> <dialog id="dialog1">这是一个html5提供的对话框元素</dialog> </body> </html>
出现按钮后点击一下会跳出对话框
再次点击按钮对话框会消失
mark元素定义带有记号的文本
<h4>小明有一双<mark>黄底</mark>的鞋</h4>
可以看到mark标签只有改变文字背景的作用
meter 定义度量衡 仅用于已知最大和最小值的度量
<meter value="3" min="1" max="10"></meter>
value 表示当前进度 max 最大值 min 最小值
progress 定义任何类型的任务的进度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testprogress(){ var pro1=document.getElementById("pro1"); var i=0; window.setInterval(function(){ pro1.value=i; i++; },300); } </script> </head> <body> <input type="button" value="测试进度" onclick="testprogress();"/> <progress id="pro1" value="0" max="100"></progress> </body> </html>
value 表示当前进度 max 最大值
2.html5新增的表单元素
datalist 定义为 input 元素输入控件的预定义选项
用户会在他们输入数据时看到预定义选项的下拉列表
<input list="mylist" name="myTestdatalist"/> 下拉列表 <datalist id="mylist"> <option value="111"> <option value="222"> <option value="333"> <option value="444"> <option value="555"> </datalist><br>颜色
<input type="color" name="mycolor" />时间
<input type="time" name="mydate" /> <input type="week" name="testweek"> <input type="month" name="bdaymonth"> <input type="date" name="mydate" /> <input type="datetime" name="mydatetime" /> <input type="datetime-local" name="mydatetime" />email【在提交表单时，会自动验证 email 域的值是否合法有效】
<input type="email" name="myemail" />
value 规定输入字段的默认值<input type="number" name="testnumber" value="2">url 在提交表单时，会自动验证 url 域的值
search 类似于搜索域
<input type="url" name="testurl"> <input type="search" name="testsearch">
3.HTML5 新增的表单属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
formnovalidate 属性规定在提交表单时不应该验证 form 或 input 域。
form 属性规定input元素所属的一个或多个表单
autofocus 在页面加载时，input元素自动地获得焦点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form id="myform" formaction="test" autocomplete="on" novalidate> name: <input type="text" name="myname" autocomplete="off"autofocus><br> email: <input type="email" name="myemail"><br> </form> password <input type="password" name="mypassword" form="myform"> <input type="submit"form="myform"value="提交"> </body> </html>
可以看到 form属性把未在表单中的元素包裹进表单中
HTML 5 新元素代替旧元素
formtarget 属性代替了 form 元素的 target 属性。formenctype 属性代替 form 元素的 enctype 属性。
formmethod 属性代替了 form 元素的 method 属性。
formnovalidate 属性代替了 form 元素的 novalidate 属性。
list 属性设置在input元素上，关联datalist元素这个预定义下拉列表
<input list="mylist" name="myTestdatalist"/> <datalist id="mylist"> <option value="111"> <option value="222"> <option value="333"> <option value="444"> <option value="555"> </datalist>list属性规定输入域的 datalist。datalist 是输入域的选项列表。
multiple 规定<input> 元素中可选择多个值
<input type="file" name="img" multiple><br> <select multiple> <option value="111">111</option> <option value="222">222</option> <option value="333">333</option> <option value="444">444</option> </select>效果如下，页面上似乎没有太大差别
点击浏览
选择一个文件后，可以按住Ctrl 键再选择其他的文件，如图选择了三个文件。
placeholder 属性提供一种提示（hint），描述输入域所期待的值
<input type="text" name="username" placeholder="请输入账号"/>
required 规定必须在提交之前填写输入域（不能为空）
<form action="login"> <input type="text" name="username" placeholder="请输入账号" required /><br> <input type="password" name="password" placeholder="请输入密码" required /><br> <input type="submit" value="提交" /> </form>
未填内容直接点击提交
一般用于必填内容框
4.HTML5 Video(视频)
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
video 视频窗口
width/height 属性设置视频窗口初始化大小
controls 属性设置视频播放的控制器
source 子元素设置被播放的资源
source 子元素可以在video中出现多个，从第一个可被识别的视频开始播放
src 属性设置资源路径【绝对路径.相对.网络地址】
type 设置被播放资源的类型
video元素支持三种视频格式： MP4, WebM, 和 Ogg。
4.1 controls 属性设置视频播放的控制器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>controls属性</title> </head> <body> <video controls="controls"> <source src="res/movie.mp4" type="video/mp4"></source> <source src="res/movie.mp4" type="video/mp4"></source> </video> </body> </html>
4.2使用JavaScript的Dom对象控制视频播放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js视频播放/暂停</title> </head> <body> <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> </body> </html>
4.3 HTML5 Audio(音频) 播放
HTML5 规定了在网页上嵌入音频元素的标准，即使用audio元素。
controls 设置控制器
source 子元素表示被播放的音频资源
src 音频资源路径
type 文件类型
autoplay 设置自动播放
loop 设置循环播放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>音频播放暂停</title> </head> <body> <audio controls="controls" autoplay="autoplay" loop="loop"> <source src="res/zijinghuayuan.mp3" type="audio/mp3"></source> </audio> </body> </html>
5 HTML5 Web 存储
HTML5可以在本地存储用户的网页数据
在没有Web 存储之前网页数据本地存储使用cookie完成
cookie浏览器自带的存储空间，每一个cookie可以存4k
cookie本地存储不安全
HTML5 Web 存储有2中方式 localStorage 和 sessionStorage
5.1 localStorage存储数据
localStorage有两种方式:
1.localStorage.变量名称="数据值"; 获取保存的数据值:localStorage.变量名称;
2.localStorage.setItem("名称","数据值"); 获取保存的数据值:localStorage.getItem("名称");手动删除localStorage对象中存储的数据:
localStorage.removeItem("名称");删除指定的数据
localStorage.clear(); 删除所有数据<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <script> function mylogin() { // 获取用户名的输入框对象 var usernameObj = document.getElementById("username"); // 获取密码的输入框对象 var psdObj = document.getElementById("psd"); // 获取显示错误提示信息的span对象 var errorObj = document.getElementById("error"); // 获取用户输入的用户名和密码 var username = usernameObj.value; var psd = psdObj.value; // 判断用户名密码是否正确(假设用户名正确为张三，密码为123456) if (username == "张三" && psd == "123456") { // 判断浏览器是否支持web存储 if (typeof (Storage) !== "undefined") { localStorage.myname = username; } else { alert("不支持localStorage") } window.location.href = "lianxi3-2.html"; } else { // 用户名密码错误时：给span元素中写入一段提示文字 errorObj.innerHTML = "用户名密码有误，请重新输入"; } } </script> </head> <body> <span id="error"></span><br> <input type="text" id="username" placeholder="请输入用户名"><br> <input type="password" id="psd" placeholder="请输入密码"><br> <button id="btn" onclick="mylogin();">登录</button> </body> </html>上述script元素中引入的lianxi3-2.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="lianxi3-2.html"; } else { alert("不支持,localStorage"); } } </script> </head> <body> <h1 id="h1">登陆成功</h1> <input type="button" value="退出" onclick="myexit();"/> </body> </html>效果如下
使用设置的 名称 密码登录后
localStorage.getItem("myname");会保存数据上传到web浏览器上
点击退出后
localStorage.clear();会删除所有数据
如上图所示,null为空。
5.2.sessionStorage存储数据
sessionStorage有两种方式:
1.sessionStorage.变量名称="数据值"; 获取保存的数据值:sessionStorage.变量名称;
2.sessionStorage.setItem("名称","数据值"); 获取保存的数据值:sessionStorage.getItem("名称");手动删除sessionStorage对象中存储的数据:
sessionStorage.removeItem("名称");删除指定的数据
sessionStorage.clear(); 删除所有数据注意:sessionStorage对象管理浏览器窗口之后之前保存的数据会自动清空
6 数据类型
6.1 数字加"字符串"等于"字符串"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据类型</title> <script> window.onload=function(){ var num=100; var num2="100"; alert(num+num2); } </script> </head> <body> </body> </html>
6.2数字加数字等于数字
<script> window.onload=function(){ var num=100; var num2=100; alert(num+num2); } </script>
6.3"字符串"加"字符串"等于"字符串"
<script> window.onload=function(){ var num="200"; var num2="100"; alert(num+num2); } </script>
7 HTML5 Canvas
Canvas 就是在html中开辟出来的绘制图形的空间【画布】
通过style来设置一些样式
通过javascript在canvas画布上绘制图形
7.1 绘制矩形
<!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="#f40"; //开始绘制矩形 //fillRect(x,y,w,h); con.fillRect(10,10,100,50); } </script> </head> <body> <input type="button" value="绘制矩形" onclick="setRect();"/><br> <canvas id="canvas1" style="width: 300px; height: 300px; border: 3px solid #f40;"></canvas> </body> </html>
7.2 绘制椭圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> <script> function setarc(){ //得到画布对象canvas对象 var canvasobj=document.getElementById("canvas1"); //创建 context 对象--画笔 var con=canvasobj.getContext("2d"); con.beginPath(); con.arc(150,75,20*Math.PI,20,20*Math.PI); con.stroke(); } </script> </head> <body> <input type="button" value="绘制圆型" onclick="setarc();"/><br> <canvas id="canvas1" style="width: 300px; height: 300px; border: 3px solid #f40;"></canvas> </body> </html>
