從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操做元素，自定義屬性

時間 2019-11-17

標籤開始 web html5 html 表單多媒體新增內容獲取元素自定義屬性欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......html

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！前端

1、表單新增內容

一、表單新增屬性

1.一、type相關屬性

<!--email提供了郵箱的完整驗證，必須包含@和後綴，若是不知足驗證，會阻止表單提交-->
郵箱：<input type="email">

<!--tel並非來驗證手機號碼的，由於全球手機號碼格式的標準不一樣。它的目的是可以在移動端打開數字鍵盤，而數字鍵盤就限制了用戶只能填寫數字而不能填寫其餘字符。（在PC端沒法展現）-->
手機：<input type="tel">

<!--url 提供了網址的合法格式驗證。必須包含 http:// 或者 https://-->
手機：<input type="url">

number

<!--number只能輸入數字和小數點，不能輸入其餘字符，而且輸入框最右邊有上下調節按鈕-->
<!--value:默認值-->
<!--min:最小值-->
<!--max:最大值-->
<!--step:步伐-->
數量：<input type="number" value="50" min="0" max="100" step="5">

<!--search能夠在輸入框輸入文本後右邊顯示「x」，能夠將輸入的文本清除-->
搜索：<input type="search">

range

<!--range範圍-->
<!--step:步伐-->
範圍：<input type="range" step="5">

color

<!--color顏色選擇器-->
顏色：<input type="color">

時間日期相關java

<!--時間：時分-->
<input type="time">
<!--日期：年月日-->
<input type="date">
<!--日期+時間：年月日時分-->
<input type="datetime-local">
<!--年+月-->
<input type="month">
<!--年+周-->
<input type="week">

1.二、表單其餘屬性

<!--提示用戶輸入信息-->
<input type="text" placeholder="請輸入文本" autofocus autocomplete="on" required pattern="xxx">

一、placeholder：提示文本git

二、autofocus：自動獲取焦點github

三、autocomplete：自動完成：on 打開，off 關閉。web

前提：必須成功提交過；添加 autocomplete 的元素必須有 name 屬性。正則表達式

四、required：必須輸入，若是未輸入將阻止表單提交後端

五、pattern：正則表達式驗證瀏覽器

<input type="file" multiple>

multiple：能夠一次選擇多個文件（在 email中，multiple 容許填寫多個郵件地址，中間用逗號隔開）微信

二、表單新增元素

datalist 元素

功能：拓展下拉菜單，能夠手動輸入選項。

<input type="text" list="field">
<datalist id="field">
  <option value="嵌入式" label="c"></option>
  <option value="前端" label="web"></option>
  <option value="後端" label="java"></option>
</datalist>

一、由於可以手動輸入選項，因此須要輸入框；

二、輸入框經過 list 屬性和 datalist 關聯起來；

三、value 爲選中後輸入框的內容，label 爲 value 的輔助描述性內容。

注意：若是 type 的類型爲 url 網址的話，value 的值必須加 http:// 或 https:// 纔可以顯示出來。

三、新增表單事件

oninput：當元素中的內容改變時，就會觸發。
oninvalid：當驗證不經過時觸發。

<body>
<form action="">
    用戶名：<input type="text" placeholder="請輸入用戶名" id="user"><br>
    手機號：<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>
    <input type="submit"> <br>
</form>
<script>
    document.getElementById("user").oninput = function (ev) {
        console.log(this.value);
    };
    document.getElementById("phone").oninvalid = function (ev) {
        // 設置默認提示信息
        this.setCustomValidity("請輸入正確的手機號碼！")
    };
</script>

</body>

setCustomValidity：修改 pattern 校驗失敗時，默認的提示信息。

四、進度條

progress：

屬性： max 最大值，value：當前值

meter（度量器）：

屬性：

high：被界定爲高的值的範圍。
low：被界定爲低的值的範圍。
max：規定範圍的最大值。
min：規定範圍的最小值。
optimum：規定度量的最優值。
value：規定度量的當前值。

<progress max="100" value="30"></progress>
<br>
<meter max="100" min="0" high="70" low="30" value="20"></meter>
<meter max="100" min="0" high="70" low="30" value="50"></meter>
<meter max="100" min="0" high="70" low="30" value="90"></meter>

五、案例：表單總結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        form {
            width: 600px;
            margin: 10px auto;
        }

        form > fieldset {
            padding: 10px 10px;
        }

        form > fieldset > meter,
        form > fieldset > input {
            width: 100%;
            height: 30px;
            margin: 8px 0;
            border: none;
            border: 1px solid #aaa;
            border-radius: 4px;
            font-size: 16px;
            padding-left: 5px;
            box-sizing: border-box; /*避免padding+border的影響*/
        }

        form > fieldset > meter {
            padding: 0;
        }

    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>學生檔案</legend>
        <label for="txt">姓名：</label>
        <input type="text" name="userName" id="txt" placeholder="請輸入姓名" required>

        <label for="phone">手機號碼：</label>
        <input type="tel" name="phone" id="phone" required
               pattern="^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$">

        <label for="em">郵箱：</label>
        <input type="email" name="myemail" id="em" required>

        <label for="collage">學院：</label>
        <input type="text" name="collage" id="collage" list="dl" required>
        <datalist id="dl">
            <option value="電氣與電子工程學院"></option>
            <option value="經濟與管理學院"></option>
            <option value="外國語學院"></option>
            <option value="藝術與傳媒學院"></option>
        </datalist>

        <label for="num">入學成績：</label>
        <input type="number" name="num" id="num" required max="100" min="0" value="0" step="0.5">

        <label for="level">基礎水平：</label>
        <meter id="level" max="100" min="0" high="90" low="59"></meter>

        <label for="edt">入學日期：</label>
        <input type="date" name="dt" id="edt" required>

        <label for="ldt">畢業日期：</label>
        <input type="date" name="dt" id="ldt" required>

        <input type="submit" id="sub">
    </fieldset>
</form>
<script>
    document.getElementById("phone").oninvalid = function () {
        this.setCustomValidity("請輸入11位正確的手機號碼！");
    };
    document.getElementById("num").oninput = function () {
        document.getElementById("level").value = this.value;
    };
</script>
</body>
</html>

2、多媒體新增內容

audio：音頻

屬性：

src：播放的音頻文件路徑

controls：顯示音頻播放器的控制面板

autoplay：自動播放

loop：循環播放

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

video

屬性：

src：播放的音頻文件路徑

controls：顯示音頻播放器的控制面板

autoplay：自動播放

loop：循環播放

weight：寬度（通常只須要設置寬度或者高度，可使視頻等比例縮放。）

height：高度

poster：視頻未播放時展現的畫面。默認爲視頻第一幀的畫面。

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

source

因爲不一樣瀏覽器支持的視頻格式不一樣，因此咱們在進行視頻添加的時候，須要考慮瀏覽器是否支持。咱們能夠準備多種不一樣格式的視頻文件，而後使用 source 標籤，讓瀏覽器選擇支持的視頻格式播放視頻。

<video controls>
    <source src="mp4/2.mp4" type="video/mp4">
    <source src="mp4/2.flv" type="video/flv">
    瀏覽器不支持該格式的視頻文件
</video>

瀏覽器或從上至下，若是瀏覽器支持mp4格式就播放，不支持看下一個flv格式，若是都不支持就輸出「瀏覽器不支持該格式的視頻文件」。

3、新增獲取/操做元素

一、新增獲取元素

document.querySelector("選擇器");
document.querySelectorAll("選擇器");

二、新增操做元素類樣式

document.querySelector("選擇器").classList.add("類樣式"); // 添加類樣式
document.querySelector("選擇器").classList.remove("類樣式"); // 移除類樣式
document.querySelector("選擇器").classList.toggle("類樣式"); // 反轉類樣式（有則刪除，無則添加）
document.querySelector("選擇器").classList.contains("類樣式"); //是否包含類樣式
document.querySelector("選擇器").classList.item(索引); // 獲取類樣式

PS：classList 的方式與 document.querySelector("選擇器").className 的方法對比：

classList 的方法添加和刪除不會清除原來的 class 類樣式，只是在其基礎上添加和刪除。而 className的方式直接對源類樣式操做，容易遺漏和誤操做。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .blue {
            color: blue;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<ul>
    <li>第一個li標籤</li>
    <li class="green">第二個li標籤</li>
    <li>第三個li標籤</li>
    <li>第四個li標籤</li>
</ul>

<input type="button" value="添加樣式" id="btn1">
<input type="button" value="刪除樣式" id="btn2">
<input type="button" value="反轉樣式" id="btn3">
<input type="button" value="判斷樣式" id="btn4">

<script>
    // 點擊第一個按鈕給第一個標籤添加樣式
    document.querySelector("#btn1").onclick = function () {
        document.querySelector("li").classList.add("red");
        document.querySelector("li").classList.add("underline");
        // 獲取樣式：獲取元素的樣式，索引表明樣式的位置
        var class1 = document.querySelector("li").classList.item(0);
        var class2 = document.querySelector("li").classList.item(1);
        console.log(class1 + "=====" + class2); // red=====underline
    };
    // 點擊第二個按鈕給第二個標籤刪除樣式
    document.querySelector("#btn2").onclick = function () {
        document.querySelectorAll("li")[1].classList.remove("green");
    };
    // 點擊第三個按鈕給第三個標籤反轉樣式
    document.querySelector("#btn3").onclick = function () {
        document.querySelectorAll("li")[2].classList.toggle("blue");
    };
    // 點擊第四個按鈕判斷第四個標籤是否包含某樣式
    document.querySelector("#btn4").onclick = function () {
        var flag = document.querySelectorAll("li")[3].classList.contains("red");
        console.log(flag);
    };
</script>
</body>
</html>

4、自定義屬性

定義：以「data-」開頭，後面必須有至少一個字符，多個單詞間用「-」鏈接。

建議：

一、名稱中應該都是用小寫字符；

二、名稱中不要包含任何特殊符號；

三、名稱中不要由純數字組成。

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

獲取自定義屬性的值

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

使用 "元素.dataset[]" 的方式獲取自定義屬性的值。其中自定義屬性的名稱要使用駝峯命名法填寫。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。