前端全栈学习第九天-H5
1：什么是H5，h5是在原有的基础上有又新增的标签
兼容性问题(ie9以上的版本)
常用新标签
header：定义文档的头部，页眉
nav：定义导航链接部分
footer：定义文档或节的底部，页脚
section：定义文档中的节（session,时区）
article：定义文章
aside：定义其所处内容之外的内容，侧边
ie9也是部分支持，那该怎么解决呢？由于默认的标签类型都是行及元素，只需要加上disply:block就可以了
但是到了ie8更绝望，所有的(语意)h5标签都不支持，那该怎么办？
A：”手动创建标签
不支持的标签，默认的标签的类型都是行及元素，需要转化为块级元素
B：引入第三方插件
在默认情况下，ie8级以下版本不支持h5，通过引入html5shiv.min.js插件就可以做到兼容
下面失范一下怎么安装这个插件，其实和jquery，node之类的安装插件的方法是一样的
我是在淘宝镜像上面安装的
1：百度淘宝镜像，进入官网：或者直接进这个网址：https://npm.taobao.org/package/html5shiv.min.js
进去以后是这个样子的
想要搜搜那个插件，只需要在框框里面搜索就行。
给了两种下载该插件的方法：第一种通过命令行 ：$cnpm install html5shiv.min.js
win+R 打开控制台：输入cmd
想要切换切换下载盘符，直接盘符名称加：就可以。进入D盘以后，想要下载到具题目录，可以cd git（自己的目录）
然后cnpm install html5shiv.min.js就可以了。前面$代表管理员，一般应不着
接下来看第二种方法，直接在网上下载
点击就可以。至此h5兼容插件就安装完毕
2：表单新增的其他属性
看代码把：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" id="myForm">
<!-- plachholder:提示文本，提示站位 -->
<!-- autofocus：自动获取焦点 -->
<!-- autocomplete：自动完成，on：打开，off关闭 -->
<!-- 1：必须成功提交过：提交过才有记录 -->
<!-- 2：当前添加的autocomplete必须有nema属性 -->
用户名：
<input type="text" placeholder="输入就行" name="user" autofocus autocomplete="on"><br>
<input type="submit" value="提交">
<!-- tel并不会实现验证，仅仅是在移动端能够弹出数字键盘 -->
<!-- required:必须输入，如果没有输入就会组织当前当前数据提交 -->
<!-- 正则：
1 *：代表任意个
2 ?:代表0或一个
3 +:代表一个或多个 -->
手机号：<input type="tel" name="telphone" id="" required pattern="^(\+86)?1\d{10}$"> <br>
<!-- multiple:可以选择多个文件 -->
文件：<input type="file" name="photo" id="" multiple><br>
<!-- email有默认验证，在email中multiple容许输入多个邮箱地址，以逗号隔开 -->
邮箱：<input type="email" name=email"" id="" multiple><br>
</form>
<!-- 下面这个表单并没有包含在form中，默认情况下，下面表单元素数据不会进行提交 -->
<!-- form指定表单id，那么么 在将来指定id号的表单进行数据提交 -->
地址: <input type="text" name="address" form="myForm">
</body>
</html>3：h5新增元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<!-- select只能选择不能输入 -->
<!-- value具体指，lable提示信息，辅助值 -->
<select name="" id="">
<option value="数据结构">数据结构</option>
<option value="大数据">大数据</option>
<option value="java">java</option>
<option value="js">js</option>
<option value="c++">c++</option>
</select>
<br>
<!-- 不仅可以输入，而且还可以选择 -->
<!-- 通过datalist创建选择列表 -->
<!-- option标签可单可双 -->
专业：
<input type="text" list="sub">
<datalist id="sub">
<option value="数据结构" label="有点难">数据结构</option>
<option value="大数据" label="赚钱多">大数据</option>
<option value="java" label="老牌语言">java</option>
<option value="js" label="前端必备">js</option>
<option value="c++" label="做游戏">c++</option>
</datalist>
<!-- 如果input输入框的type类型是url，那么value值必须是http：//开头 -->
网址：
<input type="url" name="" id="" list="urls">
<datalist id="urls">
<option value="http://sublimecodeintel.github.io" label="有点难">数据结构</option>
<option value="https://github.com" label="赚钱多">大数据</option>
<option value="https://github.com" label="老牌语言">java</option>
<option value="https://github.com/1self" label="前端必备">js</option>
<option value="http://emmet.io" label="做游戏">c++</option>
</datalist>
</form>
</body>
</html>新增表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
用户名：
<input type="text" id="userName" name="userName"><br>
手机号：
<input type="tel" name="phone" id="phone" pattern="^1\d{10}$">
<input type="submit" value="提交">
</form>
<script>
// oninput监听当前指定元素内容改变，只要内容改变就会触发这个这个事件
document.getElementById("userName").oninput = function() {
console.log("oninput:" + this.value);
}
// onkeyup:键盘弹起 的时候触发，每一个键的弹起就会触发一次
document.getElementById("phone").onkeyup = function() {
console.log("onkeyup:" + this.value);
}
// oninvalid:当验证不通过时触发
document.getElementById("phone").oninvalid = function() {
this.setCustomValidity("请输入合法的11位手机号");
}
</script>
</body>
</html>效果：
进度条：progress
学了这么多h5表单，写个小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单总结案例</title>
<style>
fieldset{
width: 600px;
margin:100px auto;
}
</style>
</head>
<body>
<fieldset>
<legend>学生档案</legend>
<form action="">
姓名:
<br>
<input type="text" placeholder="请输入用户名" autofocus autocomplete="on"><br>
手机号码：
<br>
<input type="tel" name="" id="phone" pattern="^1\d{10}$"><br>
邮箱地址：
<br>
<input type="email" name="" id="" multiple>
<br>
所属学院：
<br>
<input type="text" list="school"><br>
<datalist id="school">
<option value="内蒙古大学" label="挺好"></option>
<option value="山西大学" label="凑活"></option>
<option value="山西师院" label="我在呢"></option>
</datalist>
入学成绩：<br>
<input type="number" name="" id="score" max="100" min="0" value="0">
<br>
基础水平：<br>
<meter max="100" min="0" low="60" high="90" id="leave"></meter><br>
入学日期：<br>
<input type="date" name="" id=""><br>
毕业日期：<br>
<input type="date" name="" id=""><br>
<input type="submit" value="提交">
</form>
</fieldset>
</body>
<script>
document.getElementById("phone").oninvalid = function() {
this.setCustomValidity("请输入11位的合法数字");
}
document.getElementById("score").oninput = function() {
document.getElementById("leave").value = this.value;
}
</script>
</html>效果图，在Chrome下运行，不然有的h5语义化标签不起作用
6：h5demo操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.green{
background:green;
}
</style>
</head>
<body>
<ul>
<li class="green">java</li>
<li class="red">c</li>
<li class="black">WEB</li>
<li class="yellow">Py</li>
</ul>
</body>
<script>
// query:查询selector：选择器 queryselector：(传入选择器名称)
var java = document.querySelector(".green");
console.log(java);
var all = document.querySelectorAll("li");
console.log(all);
</script>
</html>
需要注意的是querySelector获取的是满足条件的所有元素--数组，可以在后面加角标来单个选取
html：5类样式操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.blue {
color: red;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<ul>
<li>前端与移动端开发</li>
<li class="blue">java</li>
<li>c++</li>
<li class="aa">java</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"/>
</body>
<script>
document.getElementById("add").onclick = function () {
// add:为元素指定名称的样式，一次只能添加一个样式
// classlist当前所有元素的列表-数组
document.querySelector("li").classList.add("red");
}
// remove为元素移除指定名称样式，一次只能移除一个
document.getElementById("remove").onclick = function () {
document.querySelector(".blue").classList.remove("blue");
}
// toggle：切换元素样式
document.getElementById("toggle").onclick = function () {
document.querySelector(".blue").classList.toggle("green");
}
// contains:判断元素是否包含指定名称的样式，true，false
document.getElementById("contain").onclick = function () {
var li = document.querySelectorAll("li")[3].classList.contains("aa");
console.log(li);
}
</script>
</html>
html5:自定义属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--规范-->
<!--1：data-开头-->
<!--2：data-必须至少有一个字符，多个单词用-连接-->
<P data-school-name="xixihaha">嘻嘻哈哈</P>
<!--取值-->
</body>
<Script>
window.onload = function () {
var p = document.querySelector("p");
// 获取自定义属性值
var value = p.dataset["schoolName"];
// data-school-name
console.log(value);
}
</Script>
</html>