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="cal@163.com">测试
    <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" onchange="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>