web前端學習（二）html學習筆記部分（2）-- 改良的元素（input元素等等）

1.2.5  HTML5 改良的 input 元素的種類

1.2.5.1  新增的input元素種類中的改良與增加 input 元素的種類 (1)

　　新增的input元素種類中的url類型、email類型、date類型、time類型、datetime類型和datetime-local類型

url類型

<form>
    <input type="url" name="url" value="https://www.baidu.com">測試
    <input type="submit" value="送出">
</form>
<br/>
<form>
    <input type="email" name="email" value="[email protected]">測試
    <input type="submit" value="送出">
</form>
<input type="date" name="date" value="2018/11/13">
<input type="time" name="date" value="10:00">
<input type="datetime" name="datetime" value=""><!--datetime好像并沒有什麼卵用-->
<input type="datetime-local">      

1.2.5.2  改良與增加 input 元素的種類 (2)

　　新增的input元素種類中的month類型、week類型、number類型、range類型、search類型、tel類型和color類型。

<script>
    function  sum(){
        var n1 = document.getElementById("num1").value;
        var n2 = document.getElementById("num2").value;
        document.getElementById("result").valueAsNumber = n1 + n2;
    }
    function  sum2(){
        var n1 = document.getElementById("num1").valueAsNumber;
        var n2 = document.getElementById("num2").valueAsNumber;
        document.getElementById("result").valueAsNumber = n1 + n2;
    }
    //第一種方法計算的是将字元串連結起來，第二種方法是數字計算
</script>
<input type="month" name="month" value="2010-01">
<input type="week" name="week">
<input type="number" name="number" value="15" min="10" max="100" step="10">
<form>
    <input type="number" id="num1">
    +
    <input type="number" id="num2">
    =
    <input type="number" id="result" readonly>
    <input type="button" value="計算" onclick="sum2()">
</form>      

1.2.5.3  改良與增加 input 元素種類 (3) 和表單驗證

　　新增的input元素種類中的output元素的追加，包含表單的驗證。讓使用者對input元素有更加深入的了解。

　　color屬性的例子真的難了解<form>

<form>
    <input type="range" name="range" value="25" min="0" max="100" step="5">
    <input type="search">
    <input type="tel">
    <input type="color" onchange="document.body.style.backgroundColor = this.value;">
    <!--<input type="color" οnchange="document.body.style.backgroundColor =
    document.getElementById('currentColor').textContent = this.value;">
    這句不寫也沒有問題-->
    <!--onchange 事件屬性
    當元素值改變時才會運作腳本:-->
    <span id="currentColor"></span>
</form>      

output使用

<form>
    <input type="range" id="range" min="0" max="100" step="10" value="10" onchange="value_change()">
    <output id="output">10</output>
</form>      

<script>
   function check(){
       var email = document.getElementById("email");
       if(email.value == ""){
           alert("請輸入email");
           return false;
       }else if(!email.checkValidity()){
           alert("請輸入正确的email位址");
           return false;
       }
   }
</script>
<form id="testform" onsubmit="check()" novalidate="novalidate">
    <!--novalidate是指當送出表單時不對表單資料（輸入）進行驗證：在這裡這個屬性不管用
    因為在js中又寫了檢測的代碼，可以不寫-->
    <label for="email">email</label>
    <input type="email" name="email" id="email"><br/>
    <input type="submit">
</form>      

1.2.7  html5增強的頁面元素

1.2.7.1  figure、figcaption、details、summary 和 mark 元素

<!--figure元素和figcaption元素
    figure元素中隻能有一個figcaption元素代表figure的标題-->
    <figure>
        <img src="1.jpg" alt="圖1">
        <img src="2.jpg" alt="圖2">
        <img src="3.jpg" alt="圖3">
        <figcaption>圖檔</figcaption>
    </figure>
    <!--details元素和summary元素
    有些浏覽器不支援這種新特性
    這裡我的google浏覽器不知道為啥不能正确顯示
    内容還是會占據網頁内容的，不像動态加載網頁，本來不顯示後來就顯示了。-->
    <script>
        function detail_onclick(detail){
            var p = document.getElementById("p");
            if(detail.open){
                p.style.visibility = "hidden";
            } else{
                p.style.visibility = "visible";
            }
        }
    </script>
    <details id="detail" onclick="detail_onclick(this)">
        <summary>速度與激情7</summary>
        <!--省略summary元素速度與激情7會顯示為詳細資訊這四個字-->
        <p id="p" style="visibility:hidden;">你好嗎？</p>
    </details>
    <!--mark元素-->
    <p><mark>mark</mark>元素測試</p>      

1.2.7.2  progress 和 meter 元素

　　HTML5增強頁面元素，包含progress和meter元素，progress元素代表一個任務的完成進度，這個進度是不确定的，表示進度正在進行，可以以進度百分比進行展示。

<script>
     function  btn(){
    //     for(var i = 0; i <= 100; i++){
    //         setTimeout(function () {
    //             updateprogress(i);
    //         },2000)
    //     }
    //
    //上面這一段語言由于js是單線程的，是以程式在将所有i都循環到
    //101時之後才會開始執行循環内的setTimeout裡的間隔函數。
    //應該改成下面的函數才會一步步改變顔色。

         var i = 0;
         function thread_one(){
             if(i<=100){
                 i++;
                 updateprogress(i);
             }
         }
          setInterval(thread_one,200);
         //setINterval執行無數次；取決于内部函數的結束。
         // setTimeout(thread_one,200);
         //setTimeout隻執行一次
     }
    function updateprogress(newValue){
        var progressBar = document.getElementById("p");
        progressBar.value = newValue;
        progressBar.getElementsByTagName("span")[0].textContent = newValue;
    }
</script>
<section>
    <h2>progress元素的使用</h2>
    <p>完成的百分比 <progress style="background-color: aliceblue" id="p" max="100"><span>0</span>%</progress></p>
    <input type="button" value="點選" onclick="btn()" value="點選">
</section>      

注意js是單線程的程式。

meter元素表示規定範圍内的數值量

<meter value="10" min="0" max="100" low="20" optimum="90">999</meter>      

表示進度條顔色的變化

1.2.7.3  ol、dl、cite 和 smal l元素

　　HTML5 增強的頁面元素，包含ol、dl、cite和small元素。其中主要對ol進行詳細講解包含新增的start和reversed屬性。

<!--ol改良-->
<ol start="5" reversed>
    <!--reversed翻轉（倒序）-->
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ol>
<!--dl（多個名字的清單項，dt後跟着一個或多個dd元素）（類似于聊天）-->
<dl>
    <dt>aaa</dt>
    <dd>你好啊</dd>
    <dd>hello</dd>
    <!--dd元素在後-->
    <dt>是啊</dt>
    <!--dt元素在前-->
</dl>
<!--cite斜體（表示作品的标題）-->
<p>cite <cite>測試</cite></p>
<!--small元素（辨別小字印刷體的元素）-->
<small></small>      

轉載于:https://www.cnblogs.com/foreverlin/p/9954524.html