1.什么是HTML5
html5
<!--html:5 +tab-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!--html:xt +tab:XHTML过渡型文档类型-->
<!--：网址规范的解析的规则 transitional：过渡-->
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!--html:4s +tab-->
<!--strict:严格：完全按照h4的请求进行解析-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML5语义标签
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
HTML5标签兼容性
<!--第一种方式：手动创建标签-->
<!--<script>
/*手动创建标签:默认的标签的类型都是行级元素*/
document.createElement("header");
document.createElement("nav");
document.createElement("main");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
转换为块级元素
</script>-->
<!--第二种方式：引入第三方插件-->
<!--html5shiv.min.js:在默认情况下，IE8及以下的IE版本不支持HTML5,引入这个文件就可以做到兼容-->
<script src="../js/html5shiv.min.js"></script>
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
HTML5新增type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名：<input type="text" name="userName"> <br>
密码：<input type="password" name="userPwd"> <br>
<!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->
邮箱：<input type="email"> <br>
<!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
电话：<input type="tel"> <br>
<!--验证只能输入合法的网址：必须包含http://-->
网址：<input type="url"> <br>
<!--number：只能输入数字(包含小数点)，不能输入其它的字符
max:最大值
min:最小值
value:默认值-->
数量：<input type="number" value="60" max="100" min="0"> <br>
<!--search：可以提供更人性化的输入体验-->
请输入商品名称：<input type="search"> <br>
<!--range:范围-->
范围：<input type="range" max="100" min="0" value="50"> <br>
颜色：<input type="color"> <br>
<!--日期时间相关-->
<!--time:时间：时分秒-->
时间：<input type="time"> <br>
<!--date：日期：年月日-->
日期：<input type="date"> <br>
<!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
日期时间：<input type="datetime"><br>
<!--datetime-local:日期和时间-->
日期时间：<input type="datetime-local"> <br>
月份：<input type="month"> <br>
星期：<input type="week">
<!--提交-->
<input type="submit">
</form>
</body>
</html>
05-HTML5-表单中新增的其它属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="myForm">
<!--placeholder：提示文本，提示占位-->
<!--autofocus:自动获取焦点-->
<!--autocomplete:自动完成：on:打开 off:关闭
1.必须成功提交过:提交过才会记录
2.当前添加autocomplete的元素必须有name属性-->
用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
<!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘-->
<!--required:必须输入，如果没有输入则会阻止当前数据提交-->
<!--pattern:正则表达式验证
*:代表任意个
?:代表0个或1个
+：代表1个或多个-->
手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
<!--multiple：可以选择多个文件-->
文件：<input type="file" name="photo" multiple> <br>
<!--email:有默认验证 在email中，multiple允许输入多个邮箱地址，以逗号分隔-->
邮箱：<input type="email" name="email" multiple><br>
<!--提交：-->
<input type="submit"> <br>
</form>
<!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交-->
<!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交-->
地址：<input type="text" name="address" form="myForm">
</body>
</html>
06-HTML5-新增的表单元素-datalist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<!--专业：
<select name="" id="">
<option value="1">前端与移动开发</option>
<option value="2">java</option>
<option value="3">javascript</option>
<option value="4">c++</option>
</select>-->
<!--不仅可以选择，还应该可以输入-->
<!--建立输入框与datalist的关联 list="datalist的id号"-->
专业：<input type="text" list="subjects"> <br>
<!--通过datalist创建选择列表-->
<datalist id="subjects">
<!--创建选项值：value:具体的值 label:提示信息，辅助值-->
<!--option可以是单标签也可以是双标签-->
<option value="英语" label="不会"/>
<option value="前端与移动开发" label="前景非常好"></option>
<option value="java" label="使用人数多"></option>
<option value="javascript" label="做特效"></option>
<option value="c" label="不知道"></option>
</datalist>
网址：<input type="url" list="urls">
<datalist id="urls">
<!--如果input输入框的type类型是url,那么value值必须添加http://-->
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sohu.com"></option>
<option value="http://www.163.com"></option>
</datalist>
</form>
</body>
</html>
07-HTML5-新增的表单元素2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名：<input type="text" name="userName"><br>
密码：<input type="password" name="userPwd"> <br>
加密：<keygen></keygen><br>
<input type="submit">
</form>
<!--显示输出信息：只能显示不能修改
1.语义性更强
2.值需要你去设置，不能自动计算-->
<output>总金额：￥100.00</output>
</body>
</html>
08-HTML5-表单的新增事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名：<input type="text" name="userName" id="userName"><br>
电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
<input type="submit">
</form>
<script>
/*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
document.getElementById("userName").oninput=function(){
console.log("oninput:"+this.value);
}
/*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
document.getElementById("userName").onkeyup=function(){
console.log("onkeyup:"+this.value);
}
/*oninvalid:当验证不通过时触发*/
document.getElementById("userPhone").oninvalid=function(){
/*设置默认的提示信息*/
this.setCustomValidity("请输入合法的11位手机号");
}
</script>
</body>
</html>
09-HTML5-进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--max:最大值
value:当前进度值-->
<progress max="100" value="100"></progress>
<!--度量器：衡量当前进度值-->
<!--high:规定的较高的值
low:规定的较低的值
max:最大值
min:最小值
value:当前度量值-->
<meter max="100" min="0" high="80" low="40" value="30"></meter>
<meter max="100" min="0" high="80" low="40" value="60"></meter>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>
</body>
</html>
表单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/formCss.css">
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名">
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email">
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score">
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime">
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime">
<input type="submit">
</fieldset>
</form>
<script>
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
</html>
多媒体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--embed:可以直接插入音频视频，本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件 兼容性-->
<!--flash: 1.先学习flash,增加使用成本 2.iphone,ipd,不支持flash-->
<!--audio:音频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放-->
<!--<audio src="../mp3/aa.mp3" controls></audio>-->
<!--video：视频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放
poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像
width:视频的宽度
height:视频的高度
-->
<!--注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放-->
<!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>-->
<!--source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择-->
<!--<video src="../mp3/flv.flv" controls></video>-->
<video controls>
<!--视频源，可以有多个源-->
<source src="../mp3/flv.flv" type="video/flv">
<source src="../mp3/mp4.mp4" type="video/mp4">
</video>
</body>
</html>
HTMLDOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<ul>
<li>请选择</li>
<li class="red">前端</li>
<li class="green">java</li>
<li class="blue">javascript</li>
<li id="c">c++</li>
</ul>
<script>
/*获取第一个li标签*/
window.onload=function(){
/*ElementsByTagName获取的是数组*/
/*索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加*/
/*var cli=document.getElementsByTagName("li")[1];
console.log(cli);*/
/*query:查询 Selector：选择器 querySelector(传入选择器名称)*/
/*querySelector:获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素*/
/*参数要求：如果是类选择器，必须添加. 如果是id选择器， 必须添加# ,否则当成标签处理*/
var javaLi=document.querySelector(".green");
//var javaLi=document.querySelector("#c");
console.log(javaLi);
/*querySelectorAll获取满足条件的所有元素--数组*/
var allLi=document.querySelectorAll("li")[0];
console.log(allLi);
}
</script>
</body>
</html>
HTML5类样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color:red
}
.green{
color: green;
}
.blue{
color: blue;
}
.underline{
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li class="red">前端与移动开发</li>
<li class="blue">java</li>
<li>javascript</li>
<li class="red">c++</li>
</ul>
<input type="button" value="为第一个li元素添加样式" id="add">
<input type="button" value="为第二个li元素移除样式" id="remove">
<input type="button" value="为第三个li元素切换样式" id="toggle">
<input type="button" value="判断第四个li元素是否包含某个样式" id="contain">
<script>
window.onload=function(){
/*add:为元素添加指定名称的样式.一次只能添加一个样式*/
document.querySelector("#add").onclick=function(){
/*classList:当前元素的所有样式列表-数组*/
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underline");
//document.querySelector("li").className="red underline"
/*获取样式*/
var result=document.querySelector("li").classList.item(2);
console.log(result);
}
/*remove:为元素移除指定名称的样式(不是移除class属性)，一次也只能移除一个*/
document.querySelector("#remove").onclick=function(){
document.querySelector(".blue").classList.remove("blue");
}
/*toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加。如果有则移除*/
document.querySelector("#toggle").onclick=function(){
document.querySelectorAll("li")[2].classList.toggle("green");
}
/*contains:判断元素是否包含指定名称的样式，返回true/false*/
document.querySelector("#contain").onclick=function(){
var isContain=document.querySelectorAll("li")[3].classList.contains("red");
console.log(isContain);
}
}
</script>
</body>
</html>
14-HTML5-自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定义-->
<!--规范：
1.data-开头
2.data-后必须至少有一个字符，多个单词使用-连接
建议：
1.名称应该都使用小写--不要包含任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要副作用纯数字-->
<p data-school-name="itcast">传智播客</p>
<p data-name="itcast">传智播客</p>
<!--取值-->
<script>
window.onload=function(){
var p=document.querySelector("p");
/*获取自定义属性值*/
/*将data-后面的单词使用camel命名法连接:必须使用camel合法法获取值否则有可能无法获取到值*/
//var value=p.dataset["schoolname"];//data-schoolname
var value=p.dataset["schoolName"];//data-school-name
console.log(value);
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
