H5+CSS3

最新推荐文章于 2022-07-12 17:59:58 发布

HHG_

最新推荐文章于 2022-07-12 17:59:58 发布

阅读量2.5k

点赞数

分类专栏： H5+CSS3 文章标签： H5 CSS3

本文链接：https://blog.csdn.net/qq_28811731/article/details/82762661

版权

这篇博客详细介绍了HTML5中的新语义化标签、表单元素与事件、多媒体支持，以及DOM操作和CSS3的新特性，如自定义属性、网络监听、全屏接口、拖拽功能和伪类元素等，提供了丰富的示例和资源链接，帮助读者掌握现代网页开发的核心技术。

摘要由CSDN通过智能技术生成

1.语义化标签

2.表单的type属性

<body>
<form action="">

文本搜索<input type="search" name="" id="">
<br>
密码<input type="password" name="" id="">
<br>
邮箱<input type="email" name="" id="">
<br>
时间<input type="time" name="" id="">
<br>
日期<input type="datetime-local" name="" id="">
<br>
数字<input type="number" name="" id="">
<br>
范围<input type="range" max="100" min="0">
<br>
颜色<input type="color">
<br>
电话<input type="tel">
<br>
星期<input type="week">
    <br>
<input type="submit" name="" id="">


</form>


</body>

3.新增的表单属性

 <!--新增的属性-->
    <!--
    placeholder: 提示文本
    autofocus : 自动获取文本
    autocomplete:自动完成  on:打开  off:关闭 (1.必须成功提交过2.当前元素必须有name属性)
    -->
    用户名:<input type="text" name="username" placeholder="请输入用户名" autofocus  autocomplete="on">
    <br>
    <!--
    required:必填项
    pattern:正则
    -->
    手机号:<input type="tel" required pattern="^(\+86)?1\d{10}$" autocomplete="on" name="tel">
    <br>

    <!--
   multiple:可选多个文件
    -->
    文件    <input type="file" multiple>

    <br>
    <!--
    multiple:可填写多个邮箱
    -->
    邮箱<input type="email" multiple>



</form>
<!--
form="myform"
当{地址} 不在表单myform 中时,myform表单提交无法提交地址值是使用
-->
地址<input type="text" name="aa" form="myform">

4.表单新增元素datalist keygen+output

<body>
<form action="">
    专业:    <select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>
</select>


    <br>



<!--下拉框不仅要下拉选择,还想要填写-->
    <!--list="sublist"   input与datalist建立关系-->
  专业:<input type="text" list="sublist">
    <datalist id="sublist">
        <option value="南京市" label="属于江苏"></option>
        <option value="22" label="222"></option>
        <option value="33" label="333"></option>
        <option value="44" label="444"></option>
        <option value="55" label="555"></option>
    </datalist>


<!--注意: 当input 的type="url" 时,value的值必须包含http: <option value="http://www.baidu.com" label="百度"></option>
-->




</form>

<!--
 keygen+output . 多数浏览器不支持,使用频率低.
-->


</body>

5.新增的表单事件 oninput oninvalid

<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(this.value);
    }

    document.getElementById("userPhone").oninput=function(){
        console.log(this.value);
    }

    /*2.oninvalid:当验证不通过时 触发*/

    document.getElementById("userPhone").oninvalid=function(){
        this.setCustomValidity("请输入合法的11位手机号码!");
    }



</script>
</body>

6.进度条

<body>

<!-- 新增的进度条-->
<progress max="100" value="80"></progress>

<br>
<!--度量器: -->
<!-- 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="90"></meter>
</body>

7.表单总结案例

<body>
<form action="">
    <fieldset>
        <legend>学生档案</legend>


    <label for="">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名">

    <label for="">手机号码:</label>
        <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">

        <label for="">邮箱地址:</label>
        <input type="email" name="email" id="email" required>

        <label for="">所属学院:</label>
        <input type="text" name="collge" id="collge" list="cList" placeholder="请选择">
        <datalist id="cList">
            <option value="211"></option>
            <option value="985"></option>
            <option value="清华"></option>
            <option value="北大"></option>
        </datalist>

        <label for="score">入学成绩:</label>
        <input type="number" max="100" min="0" value="1" id="score">

        <label for="">基础水平:</label>
        <meter id="level" max="100" min="0"></meter>

        <label for="">入学日期:</label>
        <input type="date" id="inTime" name="inTime">

        <label for="">毕业日期:</label>
        <input type="date" id="leaveTime" name="leaveTime">


        <input type="submit">
    </fieldset>
</form>
<script>

    document.getElementById("score").oninput=function(){
        document.getElementById("level").value=document.getElementById("score").value;

    }

</script>



</body>

/*
*{margin: 0 auto;}
*/
*{
    padding: 0;
    margin: 0;}

form{
    width: 800px;
    /*height: 600px;*/
    margin: 20px auto;
}
form>fieldset{
    padding: 10px;
}
form>fieldset>meter,
form>fieldset>input{
    width: 100%;
    height: 40px;
    line-height: 30px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 16px;
    padding-left: 5px;
    border: none;
    border: 1px solid #ccc;
    box-sizing: border-box;/*width=内容+padding+border*/
}
form>fieldset>meter{
    padding-left: 3px;
}

8.音频audio 和视频video

<body>

<!--audio  音频-->
<!--
src: 应用地址
controls:音频播放器的控制面板
autoplay: 自动播放
loop: 循环
-->

<audio src="mp3/aa.mp3" controls loop autoplay></audio>


<!--video  视频-->
<!--
src: 应用地址
controls:音频播放器的控制面板
autoplay: 自动播放
loop: 循环
widht:宽
height:高
poster: 当视频还没完全下载,或还没点击播放下载时的 默认画面.

source:用于解决不同浏览器对不同视频文件不支持的情况.
-->

<video src="mp3/bb.mp4" poster="images/1.png" controls></video>
<br>
<video>
    <source src="mp3/flv.flv" type="video/mp4">
    <source src="mp3/bb.mp4" type="video/flv">
    您的浏览器不支持该格式视频播放
</video>


</body>

9.dom操作

<body>

<ul>
    <li class="red">11</li>
    <li>22</li>
    <li>33</li>
    <li>444</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("li:eq(0)").addClass("red");
    });


/*query:查询  selector:选择器    querySelector:传入选择器名称*/
    var java=document.querySelector("li");//这只会返回第一个li
    var java=document.querySelector(".red");

    var allLi=document.querySelectorAll("li");//返回所有的li
</script>



</body>

10.操作元素类样式

<body>
<ul>
    <li>111</li>
    <li class="blue">222</li>
    <li>333</li>
    <li>444</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 () {
        document.querySelector("li").classList.add("red");
        document.querySelector("li").classList.add("underliner");
    }

        /*remove: 删除样式*/
        document.querySelector("#remove").onclick=function () {
            document.querySelector(".blue").classList.remove("blue");

        }

        /*toggle: 切换样式(有就删除,没有就添加)*/
        document.querySelector("#toggle").onclick=function () {
            document.querySelector("li")[2].classList.toggle("blue");

        }

        /*toggle: 是否包含样式*/
        document.querySelector("#contain").onclick=function () {
            var bool=document.querySelector("li")[3].classList.contain("blue");
        }
  }
</script>

</body>

11.自定义属性

<body>

<!--1.定义-->
<!--规范
1:data- 开头
2.data-a-b
-->


<p data-hfw-hhg="hhg">hfw</p>

<!--2.取值-->
<script>
    Window.onload=function(){
        var p=document.querySelector("p");
       var v = p.dataset["hfwHhg"];
      console.log(v);
    }


</script>

</body>

12.网络监听接口

<body>

<script>
/*1.ononline : 网络连通的时候触发*/
window.addEventListener("ononline",function(){
    alert("网络连通了");
});

/*2.onofline : 网络断开时触发*/
window.addEventListener("onofline",function(){
    alert("网络断开了");
});




</script>
</body>

13.全屏接口的使用

<body>
<div>
    <img src="images/1.png" alt="">
    <input type="button" id="full" value="全屏">
    <input type="button" id="cancelFull" value="退出全屏">
    <input type="button" id="isFull" value="是否全屏">
</div>


<script>
    /*
    * 全屏操作的方法和属性
    * 1.requestFullScreen() : 开启全屏显示    ||不同的浏览器要加不同的前缀 chrome:webkit  firefox:moz    ie:ms  opera:o
    * 2.cancelFullScreen()  : 退出全屏显示    ||不同的浏览器要加不同的前缀 chrome:webkit  firefox:moz    ie:ms  opera:o
    *                                           退出全屏只能在docment 下操作.
    * 3.fullScreenElement : 是不是全屏状态?
    *
    * */

  window.onload=function(){
            var div=document.querySelector("div");
            /*添加按钮的点击事件*/
            document.querySelector("#full").onclick=function(){  //1.全屏按钮
               div.webkitRequestFullScreen();
               // div.mozRequestFullScreen();
            }


      document.querySelector("#cancelFull").onclick=function(){  //2.退出全屏按钮
          document.webkitCancelFullScreen();
      }

      document.querySelector("#isFull").onclick=function(){  //3.是否是全屏
          if ( document.fullScreenElement){
              alert(true);
          }else{
              alert(false);
          }

      }

  }



</script>

</body>

14.fileReader文件读取

<body>

<!--<img src="images/1.png" alt="">-->

<!--需求案例:即时预览-->
<form action="">
    文件:
    <input type="file" name="myFile" id="myFile" onchange="getFileContent()"><br>
    <input type="submit" value="提交">
</form>
<img src="" alt="即时浏览的图片">

<script>
    /*FileReader: 读取文件内容
    * 1.readerAsText() : txt文本,返回字符串 默认UTF-8
    * 2.readerAsBinaryString() : 读取任意类型文件,返回二进制字符串.*此方法一般用于存储文件内容*.
    * 3.readerAsDataURL() : 读取一段文件以data开头的字符串.本质就是将文本嵌入到文档的方案. abort() : 中断读取
    *
    * */

    function getFileContent(){
       // alert("123");
        // 1.创建文件读取对象
        var reader=new FileReader();
        //2.读取文件,获取DataURL
            //2.1:此方法没有返回值.
            //2.2:需要传递一个参数.
var file=document.querySelector("#myFile").files;
    reader.readAsDataURL(file[0]);
   // alert(reader.result);

    /*onabort : 中断时触发
    * onerror : 读取错误时触发
    * onload : 文件读取成功时触发
    * onloadend: 文件读取完成,不论失败还是成功.
    * onloadstart : 读取文件开始时触发
    * onprogress : 读取文件过程中触发.
    *
    * */
    reader.onload=function(){
        alert(reader.result);
        document.querySelector("img").src=reader.result;

     }
    }
</script>
</body>

15.拖拽接口(上)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            float: left;
            margin-right: 15px;
        }
    </style>
</head>
<body>



<div id="div1" class="div1">
    <p id="pe" draggable="true">试试把我拖拽过去</p>
</div>

<div id="div2" class="div2">

</div>





<script>
   //1.在H5中给对象元素添加draggable="true".才可实现拖拽.图