前端全栈学习第九天-H5

最新推荐文章于 2023-02-07 09:05:09 发布

推开世界的门

最新推荐文章于 2023-02-07 09:05:09 发布

阅读量254

点赞数

分类专栏：前端学习笔记文章标签：学习笔记前端

本文链接：https://blog.csdn.net/qq_38845858/article/details/86710943

版权

前端学习笔记专栏收录该内容

45 篇文章 5 订阅

订阅专栏

1：什么是H5，h5是在原有的基础上有又新增的标签

兼容性问题(ie9以下的版本)

常用新标签

header：定义文档的头部，页眉

nav：定义导航链接部分

footer：定义文档或节的底部，页脚

section：定义文档中的节（session,时区）

article：定义文章

aside：定义其所处内容之外的内容，侧边
ie9也是部分支持，那该怎么解决呢？由于默认的标签类型都是行及元素，只需要加上disply:block就可以了

但是到了ie8更绝望，所有的(语意)h5标签都不支持，那该怎么办？

A：”通过js手动创建标签

不支持的标签，默认的标签的类型都是行及元素，需要转化为块级元素

B：引入第三方插件

在默认情况下，ie8级以下版本不支持h5，通过引入html5shiv.min.js插件就可以做到兼容

但是问题出现了，举个例子，引入这个插件，就好像，你再火车站下车了，有很多人来接你，问你坐不坐车，是不是很烦？这个插件也一样，并不是所有的浏览器都需要用这个插件来兼容，这个时候就引出了条件注释：

用条件注释将插件包起来，lt是小于 lte是小于等于 IE8，后面具体是什么版本，自己定

下面示范一下怎么安装这个插件，其实和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>