设为首页收藏本站
查看: 2967|回复: 0

[前端开发] 012 HTML5详解（二）

[复制链接]
真是低调le
  • TA的每日心情
    开心
    2024-1-13 00:31

    • 签到天数: 535 天

    [LV.9]以坛为家II
    发表于 2021-9-15 20:08:16 | 显示全部楼层 |阅读模式
    本帖最后由 真是低调le 于 2021-9-15 20:02 编辑

    表单元素（标签）

    这里讲两个表单元素。

    1、<datalist> 数据列表：

    1. <input type="text" list="myData">
    2. <datalist id="myData">
    3.     <option>本科</option>
    4.     <option>研究生</option>
    5.     <option>不明</option>
    6. </datalist>
    复制代码


    上方代码中，input里的list属性和 datalist 进行了绑定。

    效果：



    上图可以看出，数据列表可以自动提示。

    2、<keygen>元素：

    keygen 元素的作用是提供一种验证用户的可靠方法。

    keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。

    私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

    3、<meter>元素：度量器

    - low：低于该值后警告

    - high：高于该值后警告

    - value：当前值

    - max：最大值

    - min：最小值。

    举例：

    1.         <meter  value="81"    min="0" max="100"  low="60"  high="80"/>
    复制代码


    表单属性

    - placeholder 占位符（提示文字）

    - autofocus 自动获取焦点

    - multiple 文件上传多选或多个邮箱地址

    - autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)

    - form 指定表单项属于哪个form，处理复杂表单时会需要

    - novalidate 关闭默认的验证功能（只能加给form）

    - required 表示必填项

    - pattern 自定义正则，验证表单。例如

    代码举例：

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6.     <style>
    7.         form {
    8.             width: 100%;
    9.             /* 最大宽度*/
    10.             max-width: 640px;
    11.             /* 最小宽度*/
    12.             min-width: 320px;
    13.             margin: 0 auto;
    14.             font-family: "Microsoft Yahei";
    15.             font-size: 20px;
    16.         }

    18.         input {
    19.             display: block;
    20.             width: 100%;
    21.             height: 30px;
    22.             margin: 10px 0;
    23.         }
    24.     </style>
    25. </head>
    26. <body>

    28. <form action="">
    29.     <fieldset>
    30.         <legend>表单属性</legend>
    31.         <label for="">
    32.             用户名：<input type="text" placeholder="例如：smyhvae" autofocus name="userName" autocomplete="on" required/>
    33.         </label>

    35.         <label for="">
    36.             电话：<input type="tel" pattern="1\d{10}"/>
    37.         </label>

    39.         <label for="">
    40.             multiple的表单: <input type="file" multiple>
    41.         </label>

    43.         <!-- 上传文件-->
    44.         <input type="file" name="file" multiple/>

    46.         <input type="submit"/>
    47.     </fieldset>
    48. </form>

    50. </body>
    51. </html>
    复制代码


    表单事件

    - oninput()：用户输入内容时触发，可用于输入字数统计。

    - oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。


    举例：

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6.     <style>
    7.         form {
    8.             width: 100%;
    9.             /* 最大宽度*/
    10.             max-width: 400px;
    11.             /* 最小宽度*/
    12.             min-width: 200px;
    13.             margin: 0 auto;
    14.             font-family: "Microsoft Yahei";
    15.             font-size: 20px;
    16.         }

    18.         input {
    19.             display: block;
    20.             width: 100%;
    21.             height: 30px;
    22.             margin: 10px 0;
    23.         }
    24.     </style>
    25. </head>
    26. <body>
    27. <form action="">
    28.     <fieldset>
    29.         <legend>表单事件</legend>
    30.         <label for="">
    31.             邮箱：<input type="email" name="" id="txt1"/>
    32.         </label>
    33.         <label for="">
    34.             输入的次数统计：<input type="text" name="" id="txt2"/>
    35.         </label>

    37.         <input type="submit"/>
    38.     </fieldset>
    39. </form>
    40. <script>

    42.     var txt1 = document.getElementById('txt1');
    43.     var txt2 = document.getElementById('txt2');
    44.     var num = 0;

    46.     txt1.oninput = function () {  //用户输入时触发

    48.         num++;  //用户每输入一次，num自动加 1
    49.         //将统计数显示在txt2中
    50.         txt2.value = num;
    51.     }
    52.     txt1.oninvalid = function () {  //验证不通过时触发
    53.         this.setCustomValidity('亲，请输入正确哦');  //设置验证不通过时的提示文字
    54.     }

    56. </script>
    57. </body>
    58. </html>
    复制代码


    效果：



    多媒体

    在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。

    H5里面提供了视频和音频的标签。

    音频

    HTML5通过<audio>标签来解决音频播放的问题。

    使用举例：

    1.         <audio src="music/yinyue.mp3" autoplay controls> </audio>
    复制代码


    效果如下：



    我们可以通过附加属性，来更友好地控制音频的播放，如：

    - autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。

    - controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里）

    - loop 循环播放。

    - preload 预加载 同时设置 autoplay 时，此属性将失效。

    处理兼容性问题：

    由于版权等原因，不同的浏览器可支持播放的格式是不一样的：



    为了做到多浏览器支持，可以采取以下兼容性写法：

    1. <!--推荐的兼容写法：-->
    2. <audio controls loop>
    3.     <source src="music/yinyue.mp3"/>
    4.     <source src="music/yinyue.ogg"/>
    5.     <source src="music/yinyue.wav"/>
    6.     抱歉，你的浏览器暂不支持此音频格式
    7. </audio>
    复制代码


    代码解释：如果识别不出音频格式，就弹出那句“抱歉”。

    视频

    HTML5通过<video>标签来解决视频播放的问题。

    使用举例：

    1.         <video src="video/movie.mp4" controls autoplay></video>
    复制代码


    我们可以通过附加属性，来更友好地控制视频的播放，如：

    - autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。

    - controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里）

    - loop 循环播放。

    - preload 预加载 同时设置 autoplay 时，此属性将失效。

    - width：设置播放窗口宽度。

    - height：设置播放窗口的高度。

    由于版权等原因，不同的浏览器可支持播放的格式是不一样的：



    兼容性写法：

    1.     <!--<video src="video/movie.mp4" controls  autoplay ></video>-->
    2.     <!--  行内块 display:inline-block -->
    3.     <video controls autoplay>
    4.         <source src="video/movie.mp4"/>
    5.         <source src="video/movie.ogg"/>
    6.         <source src="video/movie.webm"/>
    7.         抱歉，不支持此视频
    8.     </video>
    复制代码


    DOM 操作

    获取元素

    - document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。

    - document.querySelectorAll("selector")  通过CSS选择器获取符合条件的所有元素，以类数组形式存在。

    类名操作

    - Node.classList.add("class") 添加class

    - Node.classList.remove("class") 移除class

    - Node.classList.toggle("class") 切换class，有则移除，无则添加

    - Node.classList.contains("class") 检测是否存在class

    自定义属性

    js 里可以通过 box1.index=100;  box1.title 来自定义属性和获取属性。

    H5可以直接在标签里添加自定义属性，但必须以 data- 开头。

    举例：

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6. </head>
    7. <body>
    8. <!-- 给标签添加自定义属性 必须以data-开头 -->
    9. <div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
    10. <script>
    11.     var box = document.querySelector('.box');

    13.     //自定义的属性 需要通过 dateset[]方式来获取
    14.     console.log(box.dataset["content"]);  //打印结果：我是一个div
    15.     console.log(box.dataset["myName"]);    //打印结果：smyhvae

    17.     //设置自定义属性的值
    18.     var num = 100;
    19.     num.index = 10;
    20.     box.index = 100;
    21.     box.dataset["content"] = "aaaa";

    23. </script>
    24. </body>
    25. </html>
    复制代码

    回复

    使用道具 举报

    返回列表
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    红盟社区--红客联盟 

    Processed in 0.061527 second(s), 24 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    备案号：冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

    首页

    资讯

    社区

    互助

    家园

    群组

    文库

    文图

    组织活动

    总排行榜

    个人日志

    音乐电台

    爱心赞助

    每日签到

    微信机器

    微信图片

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表