HTML5+CSS3的读书笔记(one)第二章：全新的HTML52.1新的语法结构2.2新的页面架构2.3.1新增的元素

第二章：全新的HTML5

2.1新的语法结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML4</title>
</head>
<body>
	<p>HTML4</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>HTML5</title>
</head>
<body>
	<p>HTML5</p>
</body>
</html>

2.2新的页面架构

<!DOCTYPE>
<html>
<meta charset="utf-8" />
<style type="text/css">
nav{float:left;width:20%;list-style: none;}
article{float:right;width:80%;}
footer{clear:both}
</style>
<title></title>
<header>
	<p>标题</p>
</header>
<nav>
	<ul>
		<li>导航菜单1</li>
		<li>导航菜单2</li>
		<li>导航菜单3</li>
	</ul>
</nav>
<article>
	<p>用于定义页面中上下两段相对独立的信息内容1</p>
</article>
<article>
	<p>用于定义页面中上下两段相对独立的信息内容2</p>
</article>
<footer>
	<p>脚注区域</p>
</footer>
</html>

2.3.1新增的元素

1.video元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<div><video src=""  controls="controls"></video></div>
</body>
</html>

2.audio元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<audio src="" controls="controls">

</audio>
</body>
</html>

3.embed元素-主要向页面插入多媒体插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<div>
    
<embed src="https://www.baidu.com/">

</embed>
   
</div>
</body>
</html>

4.mark元素

5.progress元素

6.details元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<details open="open">
<summary>HTML5</summary>
<p>可隐藏的区域内容</p></p>
</details>
</body>
</html>

7.datalist元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input id="favLang" list="language" />
<datalist id="language">
  <option value=".NET">
  <option value="Java">
  <option value="PHP">
</datalist>
</body>
</html>

8.ouput元素--实时更新数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 
</body>
</html>

2.43全局属性

1.contentEditable属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table id="myTable" border="1" contenteditable="true" width="50%">
	<tr>
		<td>xxx</td>
		<td>xxx</td>
	</tr>
	<tr>
		<td>xxx</td>
		<td>28</td>
	</tr>
	<tr>
		<td>xxx</td>
		<td>xxx</td>
	</tr>            
</table>
</body>
</html>

第三章：HTML5的表单

3.1日期时间类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form>
	<fieldset>
		<legend>
			请输入有效时间
		</legend>
		<input type="time">
		<input type="datetime">
		<input type="datetime-local">
	</fieldset>
	<fieldset>
		<legend>
			请输入有效日期
		</legend>
		<input type="date">
	</fieldset>
	<fieldset>
		<legend>
			请输入有效星期
		</legend>
		<input type="week">
	</fieldset>
	<fieldset>
		<legend>
			请输入有效月份
		</legend>
		<input type="month">
	</fieldset>
</form>
</body>
</html>

3.2 email类型

3.3 number类型

3.4 range类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function getValue()
{
	var value = document.getElementById("rangeInput").value;
	var result = document.getElementById("result");
	result.innerText = value;
}
</script>
<form>
	<fieldset>
		<legend>
			请选择你的年龄
		</legend>
		<input id="rangeInput" type="range" min="0" max="100" onChange="getValue()">
		<span id="result"></span>
	</fieldset>
	
</form>
</body>
</html>

3.5 search类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form>
	<fieldset>
		<legend>
			请输入您要搜索的信息内容
		</legend>
		<input type="search">
		<input type="submit" value="�ύ">
	</fieldset>
</form>
</body>
</html>

3.6 url类型

3.7 autofous属性

3.8 required属性

<input type="text" autofocus="true" required="true">

3.9 pattern属性

<input type="text" id="txtUserName" autofocus="true"
pattern="^[a-zA-Z0-9]{6,}$">

3.10 step

input type="number" step="3">

3.11 min/max

<input type="number" min="0" max="100">

第四章：HTML5的多媒体

autoplay属性
controls属性
error属性

该属性是一个只读属性用于当多媒体元素加载或读取媒体文件过程中
出现错误或异常时，返回一个错误对象MediaError,用于指示错误类
型。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function show()
{
	var video = document.getElementById("myvideo");
	var errorCode = video.error.code; // 获取MediaError返回值
	if(errorCode=="1")
	{
		alert("读取或加载媒体文件出错");
	}
	else if(errorCode=="2")
	{
		alert("网络资源不可用");
	}
	else if(errorCode=="3")
	{
		alert("解码错误");
	}
	else
	{
		alert("不支持的媒体格式");
	}
}
</script>
<video id="myvideo" src="video/4_12.txt" controls="true" onError="show()">
</video>
</body>
</html>

4.poster属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<video id="myvideo" src="1.mp4" controls="true" poster="li.png">
</video>
</body>
</html>

5.networkState属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function checkProgress()
{
	var video = document.getElementById("myvideo");
	var state = video.networkState; //获取媒体加载状态
	var result = document.getElementById("result");
	if (state=="0")
	{
		result.innerHTML="媒体信息正在初始化";
	}
	else if (state=="1")
	{
		result.innerHTML="媒体加载完毕,请单击播放";
	}
	else if (state=="2")
	{
		result.innerHTML="正在加载媒体信息";
	}
	else
	{
		result.innerHTML="媒体加载失败";
	}
}
</script>
<video id="myvideo" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11c70c96529b6e6938567ec1aa0910e0.mp4" onProgress="checkProgress()"controls=" true"></video>
 <p>
<span id="result"></span>
</p>
</body>
</html>

6.width/height属性

7.readyState属性

该属性用于返回播放器房前媒体文件的播放状态
当媒体文件开始播放时，通过调用onplay事件获取当前媒体播放状态值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function checkLoad()
{
	var video = document.getElementById("myvideo");
	var state = video.readyState;
	var result = document.getElementById("result");
	if (state=="0")
	{
		result.innerHTML="无可播放媒体";
	}
	else if (state=="1")
	{
		result.innerHTML="无法播放媒体信息";
	}
	else if (state=="2")
	{
		result.innerHTML="无法获取后续媒体信息";
	}
	else if (state=="3")
	{
		result.innerHTML="已获取后续媒体信息，正常播放";
	}
	else
	{
		result.innerHTML="已充分获取媒体信息资源";
	}
}
</script>
<video id="myvideo" src="1.mp4" onPlay="checkLoad()" controls="true">
</video>
<p>
<span id="result"></span>
</p>
</body>
</html>

其他属性

played属性
可以获取当前播放媒体文件已经播放的时长信息，
通过played属性的TimeRangeds对象，
可以获取当前播放文件的开始时间和结束时间信息

paused属性
可以获取当前播放器的播放状态
该属性返回true时，表示当前播放器处于暂停状态
该属性返回false时，表示当前播放器处于等待播放或正在播放状态

ended属性
可以获取当前播放文件是否播放完毕
该属性值返回值为true时，表示播放文件已经播放完毕
该属性值返回值为false时，表示播放文件没有播放完毕

defaultplaybackRate属性
用于控制默认播放器默认媒体播放速度
该属性初始值为1

playbackRate属性
用于控制播放器默认媒体播放速度

<script>
myVid=document.getElementById("video1");
function getPlaySpeed()
  { 
  alert(myVid.defaultPlaybackRate);
  } 
function setPlaySpeed()
  { 
  myVid.defaultPlaybackRate=0.5;
  myVid.load();
  } 
</script>

volume/muted

volume属性用于控制播放器播放媒体时的音量
该属性的取值范围为0~1
当volume取值为0时，播放器使用最低音量播放
当volume取值为1时，播放器使用最高音量播放

muted用于控制播放器是否静音
当muted属性值设置为true时，播放器静音
当muted属性值为false时，取消播放器静音

9.多媒体支持性检测方法

1.Theora
2.ogg
3.vp8
4.aac
5.h.264
6.webm

canplayType(type)
type参数为要检测的多媒体类型，可以为音频或视频格式，该方法返回值由三种类型
1.空字符：表示应用浏览器不支持当前待播放的媒体文件格式
2.maybe:不确定应用浏览器是否能够支持当前播放的媒体文件格式
3.probably:应用浏览器支持当前待播放的媒体文件格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function chekSupportType()
{
	//定义多媒体格式数组
	var typeArray = new Array(
		'audio/mpeg;',
		'audio/mov;',
		'audio/mp4;codecs="mp4a.40.2"','video/mp44;codecs="avc1.42E01E, mp4a.40.2"',
		'audio/ogg;codecs="vorbis"','video/ogg;codecs="theora, vorbis"',
		'video/webm;codecs="vp8,vorbis"',
		'audio/wav;codecs="1"'
	);
	var video = document.getElementById("myVideo");
	var result = document.getElementById("result");
	var returnString = "";
	//遍历typeArray数组逐一进行检测
	for(i=0 ; i<typeArray.length ; i++)
	{
		//调用canPlayType方法对浏览器是否支持对应多媒体格式
		var temp = video.canPlayType(typeArray[i]);
		switch(temp)
		{
			case "":
				returnString += typeArray[i]+" :不支持";
				returnString +="<br>";
				break;
			case "maybe":
				returnString += typeArray[i]+" :可能支持";
				returnString +="<br>";
				break;
			case "probably":
				returnString += typeArray[i]+"支持";
				returnString +="<br>";
				break;
		}
	}
	//显示检测结果
	result.innerHTML=returnString;
}
</script>
<fieldset>
<legend>浏览器对多媒体格式进行支持性检测</legend>
<video id="myVideo" controls="true" src="1.mp4"></video>
<br>
<span id="result"></span>
</fieldset>
<button onclick="chekSupportType()">开始检测</button>
</body>
</html>

10.timeupdate事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function update()
{
	var video = document.getElementById("myVideo");
	var result = document.getElementById("result");
	var duration = video.duration; //获取视频播放总时长
	var currentTime = video.currentTime; //获取当前已播放时长
	result.innerHTML = Math.floor(currentTime) + " / " + Math.floor(duration)+" (秒)"
}
</script>
<fieldset>
<legend>timeupdate事件应用</legend>
<video id="myVideo" controls="true" src="1.mp4" onTimeUpdate="update()"></video>
<br>
<span id="result"></span>
</fieldset>
</body>
</html>

11.多媒体播放方法

1.load方法
用于重新加载待播放的媒体文件
调用load方法时会自动将多媒体元素的playbackRate属性设置为defaultPlaybackRate属性的值
同时将error属性值设置为null

2.play方法
会自动将元素paused的属性设置为false

3.pause方法
会自动将元素paused的属性设置为true

12.回顾事件方法 12.DIY视频播放器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>
	<div>
		<video id="video" src="1.mp4" width="600">当前浏览器不支持video元素</video>
	</div>
	<div id="progressTime" style="display:none">
		<div style="float:left">
		<progress id="progress" max="100" style="width:450px">
		</progress>
		</div>
		<div id="showTime" style="float:left;margin-left:15px"></div>
		<div style="clear:both"></div>
	</div>
	</div>
	<div>
		<input type="button" id ="btnPlay" onclick="playOrPause()" value="播放"/> 
		<input type="button" id="btnSpeedUp" onclick="speedUp()" value="快放" /> 
		<input type="button" id="btnSpeedUpDown" onclick="speedDown()" value="慢放" /> 
		<input type="button" id="btnVolumeUp" onclick="volumeUp()" value="提高音量" /> 
		<input type="button"  id="btnVolumeDown" onclick="volumeDown()" value="降低音量" /> 
	</div>
</div>
<script>
var speed=1; //设置默认播放速度
var volume=1; //设置默认播放音量
var video=document.getElementById("video");
var playBtn=document.getElementById("btnPlay"); //播放按钮
var btnSpeedUp=document.getElementById("btnSpeedUp"); //快放按钮
var btnSpeedUpDown=document.getElementById("btnSpeedUpDown"); //慢放按钮
var btnVolumeUp=document.getElementById("btnVolumeUp"); //提高音量按钮
var btnVolumeDown=document.getElementById("btnVolumeDown"); //降低音量按钮
var showTime=document.getElementById("showTime");

//给video添加timeupdate监听事件
video.addEventListener('timeupdate',updateProgress,false); //为播放器添加时间改变监听事件
var progress=document.getElementById("progress"); 
progress.onclick=progressOnClick; //为progress控件添加单击事件

//播放和暂停
function playOrPause()
{
	var progressTime=document.getElementById("progressTime");
	progressTime.style.display=""; //显示播放进度条和时间
	if(video.paused) //如果当前播放状态为暂停，单击后开始播放
	{
		playBtn.value="暂停";
		video.play(); //会自动将元素paused的属性设置为false
		video.playbackRate=speed;  //重新将媒体播放速度设置为speed(1)
		video.volume=volume; //重新将媒体播放音量设置为volume(1)
		//启用控制条工具其他按钮(当点击暂停按钮时)
		btnSpeedUp.disabled="";
		btnSpeedUpDown.disabled="";
		btnVolumeUp.disabled="";
		btnVolumeDown.disabled="";
	}
	else //如果当前播放状态为播放，单击后暂停播放
	{
		playBtn.value="播放";
		video.pause();
		//禁用控制条按钮
		btnSpeedUp.disabled="disabled";
		btnSpeedUpDown.disabled="disabled";
		btnVolumeUp.disabled="disabled";
		btnVolumeDown.disabled="disabled";
	}	
}
//提高播放速度--playbackRate
function speedUp()
{
	video.playbackRate+=1;
	speed=video.playbackRate;
}
//降低播放速度
function speedDown()
{
	video.playbackRate-=1;
	if(video.playbackRate<0)
	{
		video.playbackRate=0;	
	}
	speed=video.playbackRate;
}
//增大音量--判断临界值0的音量情况
function volumeUp()
{
	if(video.volume<1)
	{
		video.volume+=0.1;
		if(video.volume>0)
		{
			video.muted=false;
		}
	}
	volume=video.volume;
}
//降低音量
function volumeDown()
{
	if(video.volume>0)
	{
		video.volume-=0.1;
		if(video.volume==0)
		{
			video.muted=true;
		}
	}
	volume=video.volume;
}
//播放条进度单击事件，单击后从单击位置开始播放
function progressOnClick(event)
{
	var progress=document.getElementById("progress");
	if(event.offsetX) //获取鼠标当前单击位置与当前位置相比存在偏移量
	{	
		////设置播放器新的播放设置
		//video.currentTime是获取当前已经播放的时长
		//video.duration是获取视频播放总时长
		video.currentTime=video.duration*(event.offsetX/progress.clientWidth); 
	}
	else
	{  //兼容处理
		video.currentTime=video.duration*(event.clientX/progress.clientWidth);
	}
}
//更新进度条状态
function updateProgress()
{	
	//计算当前播放时长与总时长之比
	//Math.round(-11.5)的返回值是-11
	//Math.round(-11.6)的返回值是-12
	//算法为Math.floor(x+0.5),即将原来的数字加上0.5后再向下取整
	//四舍六入五考虑，五后非零就进一，五后皆零看奇偶，五前为偶应舍 去，五前为奇要进一
	// 	Math.Round(3.44, 1); //Returns 3.4.  四舍
	// Math.Round(3.451, 1); //Returns 3.5  五后非零就进一
	// Math.Round(3.45, 1); //Returns 3.4. 五后皆零看奇偶, 五前为偶应舍 去
	// Math.Round(3.75, 1);  //Returns 3.8  五后皆零看奇偶,五前为奇要进一
	// Math.Round(3.46, 1); //Returns 3.5. 六入
	var currentPercent=Math.round(
		Math.floor(video.currentTime)/Math.floor(video.duration)*100
	,0);	
	var progress=document.getElementById("progress");
	progress.value=currentPercent;
	//显示播放时间
	showTime.innerHTML=calculateTime(Math.floor(video.currentTime))+"/"+calculateTime(Math.floor(video.duration));
}
//将当前传入的时间转换为hh:MM:ss的格式
function calculateTime(time)
{
	var h;
	var m;
	var s;
	h=String(parseInt(time/3600,10));
	if(h.length==1)
	{
		h='0'+h;
	}
	m=String(parseInt((time%3600)/60,10));
	if(m.length==1)
	{
		m='0'+m;
	}
	s=String(parseInt(time%60),10)
	if(s.length==1)
	{
		s='0'+s;
	}
	return h+":"+m+":"+s;
}
</script>
</body>
</html>