大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新……

  • github：https://github.com/Daotin/Web
  • 微信公众号：Web前端之巅
  • 博客园：http://www.cnblogs.com/lvonve/
  • CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

  • email
  1. <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  2. 邮箱：<input type="email">
  • tel
  1. <!--tel并不是来验证手机号码的，因为全球手机号码格式的标准不同。它的目的是能够在移动端打开数字键盘，而数字键盘就限制了用户只能填写数字而不能填写其他字符。（在PC端无法展示）-->
  2. 手机：<input type="tel">
  • url
  1. <!--url 提供了网址的合法格式验证。必须包含 http:// 或者 https://-->
  2. 手机：<input type="url">
  • number
  1. <!--number只能输入数字和小数点，不能输入其他字符，并且输入框最右边有上下调节按钮-->
  2. <!--value:默认值-->
  3. <!--min:最小值-->
  4. <!--max:最大值-->
  5. <!--step:步伐-->
  6. 数量：<input type="number" value="50" min="0" max="100" step="5">
  • search
  1. <!--search可以在输入框输入文本后右边显示“x”，可以将输入的文本清除-->
  2. 搜索：<input type="search">
  • range
  1. <!--range范围-->
  2. <!--step:步伐-->
  3. 范围：<input type="range" step="5">
  • color
  1. <!--color颜色选择器-->
  2. 颜色：<input type="color">

时间日期相关

  1. <!--时间：时分-->
  2. <input type="time">
  3. <!--日期：年月日-->
  4. <input type="date">
  5. <!--日期+时间：年月日时分-->
  6. <input type="datetime-local">
  7. <!--年+月-->
  8. <input type="month">
  9. <!--年+周-->
  10. <input type="week">
  1. <!--提示用户输入信息-->
  2. <input type="text" placeholder="请输入文本" autofocus autocomplete="on" required pattern="xxx">

1、placeholder：提示文本

2、autofocus：自动获取焦点

3、autocomplete：自动完成：on 打开，off 关闭。

前提：必须成功提交过；添加 autocomplete 的元素必须有 name 属性。

4、required：必须输入，如果未输入将阻止表单提交

5、pattern：正则表达式验证

  1. <input type="file" multiple>

multiple：可以一次选择多个文件（在 email中，multiple 允许填写多个邮件地址，中间用逗号隔开）

datalist 元素

功能：拓展下拉菜单，可以手动输入选项。

  1. <input type="text" list="field">
  2. <datalist id="field">
  3.   <option value="嵌入式" label="c"></option>
  4.   <option value="前端" label="web"></option>
  5.   <option value="后端" label="java"></option>
  6. </datalist>

1、因为能够手动输入选项，所以需要输入框；

2、输入框通过 list 属性和 datalist 关联起来；

3、value 为选中后输入框的内容，label 为 value 的辅助描述性内容。

注意：如果 type 的类型为 url 网址的话，value 的值必须加 http:// 或 https:// 才能够显示出来。

  • oninput：当元素中的内容改变时，就会触发。
  • oninvalid：当验证不通过时触发。
  1. <body>
  2. <form action="">
  3.     用户名：<input type="text" placeholder="请输入用户名" id="user"><br>
  4.     手机号：<input type="tel" id="phone" pattern="^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$"><br>
  5.     <input type="submit"> <br>
  6. </form>
  7. <script>
  8.     document.getElementById("user").oninput = function (ev) {
  9.         console.log(this.value);
  10.     };
  11.     document.getElementById("phone").oninvalid = function (ev) {
  12.         // 设置默认提示信息
  13.         this.setCustomValidity("请输入正确的手机号码！")
  14.     };
  15. </script>
  17. </body>

setCustomValidity：修改 pattern 校验失败时，默认的提示信息。

  • progress：

属性： max 最大值，value：当前值

  • meter（度量器）：

属性：

high：被界定为高的值的范围。
low：被界定为低的值的范围。
max：规定范围的最大值。
min：规定范围的最小值。
optimum： 规定度量的最优值。
value：规定度量的当前值。

  1. <progress max="100" value="30"></progress>
  2. <br>
  3. <meter max="100" min="0" high="70" low="30" value="20"></meter>
  4. <meter max="100" min="0" high="70" low="30" value="50"></meter>
  5. <meter max="100" min="0" high="70" low="30" value="90"></meter>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  12.         form {
  13.             width: 600px;
  14.             margin: 10px auto;
  15.         }
  17.         form > fieldset {
  18.             padding: 10px 10px;
  19.         }
  21.         form > fieldset > meter,
  22.         form > fieldset > input {
  23.             width: 100%;
  24.             height: 30px;
  25.             margin: 8px 0;
  26.             border: none;
  27.             border: 1px solid #aaa;
  28.             border-radius: 4px;
  29.             font-size: 16px;
  30.             padding-left: 5px;
  31.             box-sizing: border-box; /*避免padding+border的影响*/
  32.         }
  34.         form > fieldset > meter {
  35.             padding: 0;
  36.         }
  38.     </style>
  39. </head>
  40. <body>
  41. <form action="">
  42.     <fieldset>
  43.         <legend>学生档案</legend>
  44.         <label for="txt">姓名：</label>
  45.         <input type="text" name="userName" id="txt" placeholder="请输入姓名" required>
  47.         <label for="phone">手机号码：</label>
  48.         <input type="tel" name="phone" id="phone" required
  49.                pattern="^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$">
  51.         <label for="em">邮箱：</label>
  52.         <input type="email" name="myemail" id="em" required>
  54.         <label for="collage">学院：</label>
  55.         <input type="text" name="collage" id="collage" list="dl" required>
  56.         <datalist id="dl">
  57.             <option value="电气与电子工程学院"></option>
  58.             <option value="经济与管理学院"></option>
  59.             <option value="外国语学院"></option>
  60.             <option value="艺术与传媒学院"></option>
  61.         </datalist>
  63.         <label for="num">入学成绩：</label>
  64.         <input type="number" name="num" id="num" required max="100" min="0" value="0" step="0.5">
  66.         <label for="level">基础水平：</label>
  67.         <meter id="level" max="100" min="0" high="90" low="59"></meter>
  69.         <label for="edt">入学日期：</label>
  70.         <input type="date" name="dt" id="edt" required>
  72.         <label for="ldt">毕业日期：</label>
  73.         <input type="date" name="dt" id="ldt" required>
  75.         <input type="submit" id="sub">
  76.     </fieldset>
  77. </form>
  78. <script>
  79.     document.getElementById("phone").oninvalid = function () {
  80.         this.setCustomValidity("请输入11位正确的手机号码！");
  81.     };
  82.     document.getElementById("num").oninput = function () {
  83.         document.getElementById("level").value = this.value;
  84.     };
  85. </script>
  86. </body>
  87. </html>

3

  • audio：音频

属性：

src：播放的音频文件路径

controls：显示音频播放器的控制面板

autoplay：自动播放

loop：循环播放

  1. <audio src="mp4/1.mp3" controls autoplay></audio>
  • video

属性：

src：播放的音频文件路径

controls：显示音频播放器的控制面板

autoplay：自动播放

loop：循环播放

weight：宽度（一般只需要设置宽度或者高度，可以使视频等比例缩放。）

height：高度

poster：视频未播放时展示的画面。默认为视频第一帧的画面。

  1. <video src="mp4/2.mp4" controls autoplay width="500px" poster="1.jpg"></video>
  • source

由于不同浏览器支持的视频格式不同，所以我们在进行视频添加的时候，需要考虑浏览器是否支持。我们可以准备多种不同格式的视频文件，然后使用 source 标签，让浏览器选择支持的视频格式播放视频。

  1. <video controls>
  2.     <source src="mp4/2.mp4" type="video/mp4">
  3.     <source src="mp4/2.flv" type="video/flv">
  4.     浏览器不支持该格式的视频文件
  5. </video>

浏览器或从上至下，如果浏览器支持mp4格式就播放，不支持看下一个flv格式，如果都不支持就输出 “ 浏览器不支持该格式的视频文件”。

  1. document.querySelector("选择器");
  2. document.querySelectorAll("选择器");
  1. document.querySelector("选择器").classList.add("类样式"); // 添加类样式
  2. document.querySelector("选择器").classList.remove("类样式"); // 移除类样式
  3. document.querySelector("选择器").classList.toggle("类样式"); // 反转类样式（有则删除，无则添加）
  4. document.querySelector("选择器").classList.contains("类样式"); //是否包含类样式
  5. document.querySelector("选择器").classList.item(索引); // 获取类样式

PS：classList 的方式与 document.querySelector(“选择器”).className 的方法对比：

classList 的方法添加和删除不会清除原来的 class 类样式，只是在其基础上添加和删除。而 className的方式直接对源类样式操作，容易遗漏和误操作。

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .red {
  8.             color: red;
  9.         }
  11.         .green {
  12.             color: green;
  13.         }
  15.         .blue {
  16.             color: blue;
  17.         }
  18.         .underline {
  19.             text-decoration: underline;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <ul>
  25.     <li>第一个li标签</li>
  26.     <li class="green">第二个li标签</li>
  27.     <li>第三个li标签</li>
  28.     <li>第四个li标签</li>
  29. </ul>
  31. <input type="button" value="添加样式" id="btn1">
  32. <input type="button" value="删除样式" id="btn2">
  33. <input type="button" value="反转样式" id="btn3">
  34. <input type="button" value="判断样式" id="btn4">
  36. <script>
  37.     // 点击第一个按钮给第一个标签添加样式
  38.     document.querySelector("#btn1").onclick = function () {
  39.         document.querySelector("li").classList.add("red");
  40.         document.querySelector("li").classList.add("underline");
  41.         // 获取样式：获取元素的样式，索引代表样式的位置
  42.         var class1 = document.querySelector("li").classList.item(0);
  43.         var class2 = document.querySelector("li").classList.item(1);
  44.         console.log(class1 + "=====" + class2); // red=====underline
  45.     };
  46.     // 点击第二个按钮给第二个标签删除样式
  47.     document.querySelector("#btn2").onclick = function () {
  48.         document.querySelectorAll("li")[1].classList.remove("green");
  49.     };
  50.     // 点击第三个按钮给第三个标签反转样式
  51.     document.querySelector("#btn3").onclick = function () {
  52.         document.querySelectorAll("li")[2].classList.toggle("blue");
  53.     };
  54.     // 点击第四个按钮判断第四个标签是否包含某样式
  55.     document.querySelector("#btn4").onclick = function () {
  56.         var flag = document.querySelectorAll("li")[3].classList.contains("red");
  57.         console.log(flag);
  58.     };
  59. </script>
  60. </body>
  61. </html>

定义：以 “data-” 开头，后面必须有至少一个字符，多个单词间用 “-” 连接。

建议：

1、名称中应该都是用小写字符；

2、名称中不要包含任何特殊符号；

3、名称中不要由纯数字组成。

  1. <p data-user-name="Daotin"></p>

获取自定义属性的值

  1. <script>
  2.     var pObj = document.querySelector("p");
  3.     var value = p.dataset["userName"];
  4.     console.log(value); // Daotin
  5. </script>

使用 “元素.dataset[]” 的方式获取自定义属性的值。其中自定义属性的名称要使用驼峰命名法填写。

版权声明：本文为lvonve原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lvonve/p/9367733.html