前端全栈学习第九天-H5

布满荆棘的人生 2021-09-18 00:08 317阅读 0赞

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

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

常用新标签

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

nav：定义导航链接部分

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

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

article：定义文章

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

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

B：引入第三方插件

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

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

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

![20190410102341860.png][]

![20190131100308832.png][]

下面示范一下怎么安装这个插件，其实和jquery，node之类的安装插件的方法是一样的

我是在淘宝镜像上面安装的

1：百度淘宝镜像，进入官网：或者直接进这个网址：[https://npm.taobao.org/package/html5shiv.min.js][https_npm.taobao.org_package_html5shiv.min.js]

进去以后是这个样子的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

想要搜搜那个插件，只需要在框框里面搜索就行。

给了两种下载该插件的方法：第一种通过命令行 ：$cnpm install html5shiv.min.js

win+R 打开控制台：输入cmd

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

![2019013110085057.png][]

想要切换切换下载盘符，直接盘符名称加：就可以。进入D盘以后，想要下载到具题目录，可以cd git（自己的目录）

![20190131101059363.png][]

然后cnpm install html5shiv.min.js就可以了。前面$代表管理员，一般应不着

接下来看第二种方法，直接在网上下载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

点击就可以。至此h5兼容插件就安装完毕

2：表单新增的其他属性

看代码把：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <form action="" id="myForm">
            
            
            
            
            
            用户名：
            <input type="text" placeholder="输入就行" name="user" autofocus autocomplete="on"><br>
            <input type="submit" value="提交">
            
            
            
            手机号：<input type="tel" name="telphone" id="" required pattern="^(\+86)?1\d{10}$"> <br>
            
            文件：<input type="file" name="photo" id="" multiple><br>
            
            邮箱：<input type="email" name=email"" id="" multiple><br>
        </form>
        
        
        地址: <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 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>
    		
    		
    		
    		专业：
    		<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" 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>

效果：![20190131143704918.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4][]

进度条：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语义化标签不起作用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6][]

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获取的是满足条件的所有元素--数组，可以在后面加角标来单个选取![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7][]

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>
    
    
    
    <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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/823997ccbfa845fdad991907afa194fd.png
[20190410102341860.png]: /images/20210812/441d5861ce1c4a4b8b85b392e43e05d1.png
[20190131100308832.png]: /images/20210812/d2192643f5be4887974e15c26ff73704.png
[https_npm.taobao.org_package_html5shiv.min.js]: https://npm.taobao.org/package/html5shiv.min.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/17d489c9ab9a4d2b87c1a4704de23115.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/0c058bbc3549440abff13842abe4b046.png
[2019013110085057.png]: /images/20210812/25fc9fbe6de042f1bbb57061e835fb89.png
[20190131101059363.png]: /images/20210812/ae02120ae7f1441492b909f9484cf79d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/58349fa9331341879a2bcd303c107bcd.png
[20190131143704918.png]: /images/20210812/74e1183823d2497582a45c57004a5a90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]: /images/20210812/21d37059843b4951bc8ef62c5c6b905d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5]: /images/20210812/d2c58847a27f46a582f767d494cbdf82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6]: /images/20210812/a408beae91374059a33b57fcdadd2845.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7]: /images/20210812/c802bc7842d846cb90396d1fb0e8c4ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8]: /images/20210812/f6fbbfb4bbf54449abec9c866b0fac40.png