(第二天)HTML5新增元素、屬性(下)及Range對象(上)

HTML5新增元素(下)

  • output：輸出元素冗疮，與label同樣有for屬性，常作為實時(或JS)輸出的載體贞奋。
<!--output demo-->
<!--oninput屬性:輸入即觸發(fā)-->
<form oninput="x.value = parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="a" value="50"> +
    <input type="number" id="b" value="50"> =
    <output name="x" for="a b"></output>
</form>

  • figure與figcaption：

    • figure：獨立內容赌厅，移除對網頁無影響；通常用來表示圖片統計圖轿塔，代碼示例特愿，表格統計，音視頻插件等勾缭；
    • figcaption：在figure元素之內揍障，作為標題元素使用；一個figure內建議只使用一個figcaption俩由，并放在figure元素的第一個或最后一個位置毒嫡。


<figure>
<figcaption>這是一群美女</figcaption>
<img src="1.jpg" alt="" width="50">
<img src="2.jpg" alt="" width="50">
<img src="3.jpg" alt="" width="50">
</figure>

* ***details與summary***：
  * *details*：有一個open屬性，true/false幻梯；可通過鼠標點擊改變其open狀態(tài)兜畸；默認為閉合狀態(tài)，可添加open屬性改變默認值碘梢，也可通過js改變open屬性的值實現咬摇；
  * *summary*：作為標題元素使用；若不存在該元素煞躬，瀏覽器會默認為details元素添加一個標題(使用"詳細信息",但不添加summary元素)肛鹏；summary元素只可以有一個，若存在多個恩沛，只有第一個summary能實現其標題功能在扰，其他與普通元素一樣；可以放在details元素內任何位置雷客，但建議放在第一個芒珠，更易代碼閱讀。

  ```html
<!--details & summary demo-->
<head>
    <meta charset="UTF-8">
    <title>Details與Summary的示例</title>
    <script>
    function check() {
        var details = document.getElementById("details");
        details.open = true; /*可通過這種形式打開佛纫，也可通過在details元素中直接添加open屬性打開*/
        // alert(details.open);
    }
    </script>
</head>
<body onload="check()">
<!--此處添加了open屬性,即details元素默認為打開狀態(tài); 否則默認為閉合狀態(tài)-->
    <details id="details" open>
        <!-- 若不存在summary妓局，則瀏覽器會使用默認字符，如"詳細信息" -->
        <summary>文章列表</summary>
        <p>第一篇文章</p>
        <p>第一篇文章</p>
        <p>第一篇文章</p>
        <p>第一篇文章</p>
    </details>
</body>
  • mark：通過該元素可以高亮顯示元素中的內容呈宇。
    <p><mark>mark</mark>是高亮的</p>
  • progress：進度條好爬；兩個屬性：value當前進度值，max最大值甥啄。
<!--progress 從0到100實時變化 demo-->
<body>
    <script>
    // 傳入rate值存炮，實時更新progress的執(zhí)行方法
    function btn() {
        var i = 0;
        var supdate = setInterval(update, 100); /*不停的根據指定周期執(zhí)行指定函數，并返回一個對象*/

        function update() {
            if (i < 100) {
                i++;
                updateProgress(i);
            } else {
                clearInterval(supdate); /*根據setInterval返回的對象進行人為終止*/
                console.log(i);
            }
        }

    }

    // 更新進度條方法
    function updateProgress(rate) {
        var progressBar = document.getElementById("p");
        // 進度條的value = span標題的內容 = 傳入的rate值
        progressBar.value = document.getElementsByTagName("span")[0].textContent = rate;
    }
    </script>
    <section>
        <h2></h2>
        <p>完成的百分比
            <progress id="p" max="100" value="0"></progress><span>0</span>%
        </p>
        <input type="button" onclick="btn()" value="點擊">
    </section>
</body>

  • meter：指定范圍的度量器，作為計量器穆桂，尺度使用宫盔。共六個屬性如下：

    • value：當前度量值；
    • min：最小值享完；
    • max：最大值灼芭；
    • low：下限值；
    • high：上限值般又；
    • optimum：最佳值彼绷；

    <small>注：high < value < low時，meter顯示為黃色茴迁；low <= value <= high顯示綠色寄悯。

  • cite：引用，通常用作表示作品堕义，如小說作品猜旬，電影作品等；以斜體形式顯示倦卖。
    <cite>速度與激情</cite>

  • small：小型文本洒擦，通常作為旁注；如免責聲明怕膛，注意事項秘遏，法律限制，版權聲明等嘉竟。

<!--small demo-->
<footer>
    <small>版權聲明：</small>
</footer>
<!--small demo2-->
<dl>
    <dt>單人間</dt>
    <dd>399 元 <small>含早餐，不含稅</small></dd>
    <dt>雙人間</dt>
    <dd>599 元 <small>含早餐洋侨，不含稅</small></dd>
</dl>

HTML5新增屬性(下)

  • start,type,reversed：三個ol元素的屬性舍扰，其中start，type為HTML4.01不贊成而HTML5支持的屬性希坚，reversed為HTML5新增的屬性蚓聘。

    • start：設置起始(列表第一個)索引值顿苇；
    • type：設置索引值類型，有如下5種類型：1，A级野，a，I休傍，i搭儒；
    • reversed：設置是否反轉；若添加該屬性获洲，則索引值(和內容無關)會反轉阱表。
      <!-- start表示li起始索引值，reversed表示反轉 -->
  <!--此示例顯示的序列為E,D,C,B,A start定義了第一個索引值為E，reversed定義了逆向最爬，即按E,D順序-->
  <ol start="5" reversed type="A">
      <li>第1個列表</li>
      <li>第2個列表</li>
      <li>第3個列表</li>
      <li>第4個列表</li>
      <li>第5個列表</li>
  </ol>

* ***control***：label對象(非元素,可通過JS獲取label元素返回label對象涉馁，也可通過JS創(chuàng)建label對象)的屬性；通過該對象屬性爱致，可以訪問label標簽下的第一個表單元素烤送，如表單元素中存在for屬性綁定，則優(yōu)先訪問綁定的第一個表單元素糠悯。
> <small>表單元素(共7個)：input帮坚、select、textarea逢防、button叶沛、datalist、keygen忘朝、output (最后3個為HTML5新增的表單元素)灰署。

  ```html
<!--label對象control屬性 demo-->
<body>
    <script>
    // 設置郵編默認值
    function setValue() {
        // 創(chuàng)建label對象，這里只用來說明創(chuàng)建方法
        // var label = document.createElement("LABEL");
        // 獲得label對象
        var label = document.getElementById("label");
        // 訪問label對象綁定的第一個表單元素,如無綁定,則訪問第一個表單元素
        var inputValue = label.control;
        inputValue.value = "1000001"; /*這里的值可以突破maxlength屬性的限制*/
    }
    </script>
    <form>
        <label for="txt" id="label">
            郵編:
            <input maxlength="6" id="txst">
            <!-- control屬性訪問的是這個input元素 -->
            <input maxlength="6" id="txt">
            <small>請輸入6位數字</small>
        </label>
        <input type="button" value="設置默認值" onclick="setValue()">
    </form>
</body>
  • placeholder：文本框元素屬性局嘁；文本框未輸入狀態(tài)時顯示的提示用語（常見的文本框中的灰色提示文字）溉箕。輸入字符后自動消失。
    <input type="text" placeholder="請輸入姓名">

<small>文本框元素：input悦昵、textarea肴茄。

  • list：文本框元素屬性；引用數據列表(▽提示下拉)但指，其中包含輸入字段的預定義選項寡痰，也允許用戶輸入；屬性值為某個datalist表單元素的id棋凳；輸入字符時拦坠，若字符存在datalist中，會自動提示剩岳。

    • datalist：定義選項列表贞滨。請使用 input 元素的 list 屬性來綁定 datalist。datalist 及其選項不會被顯示出來拍棕，它僅僅是合法的輸入值列表晓铆。
      <input type="text" list="listgroup">
  <!-- list屬性值為datalist元素的id值 -->
  <datalist id="listgroup">
      <!-- 輸入value相關字符，會自動提示绰播； 輸入的是value值骄噪，后面的文字只是解釋說明作用-->
      <option value="ios">IOS學習</option>
      <option value="hack">入侵學習</option>
      <option value="golang">GO學習</option>
  </datalist>

* ***autocomplete***：form、input元素屬性蠢箩；規(guī)定輸入字段是否應該啟用自動完成功能腰池，on/off尾组，默認值一般為on，默認值由瀏覽器預定義示弓。自動完成允許瀏覽器預測對字段的輸入讳侨。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值奏属，應該顯示出在字段中填寫的選項跨跨。
> <small>autocomplete 屬性適用于 <form>，以及下面的 <input> 類型：text, search, url, telephone, email, password, datepickers, range 以及 color囱皿。

  ```html
    <form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get" autocomplete="on">
        First name:
        <input type="text" name="fname" />
        <br /> Last name:
        <input type="text" name="lname" />
        <br /> E-mail:
        <!--email涉及到個人隱私勇婴，未保證隱私不泄露，這里將autocomplete設置為off嘱腥；即瀏覽器下次無法提示曾用email-->
        <input type="email" name="email" autocomplete="off" />
        <br />
        <input type="submit" />
    </form>
  • pattern：input屬性耕渴，規(guī)定用于驗證輸入字段的正則表達式。

<small>pattern 屬性適用于以下 <input> 類型：text, search, url, telephone, email 以及 password齿兔。

<!--pattern demo-->
<form>
  <label>
      姓名：
      <!-- pattern規(guī)定此輸入框必須輸入A-Z之間的三個字符 -->
      <input type="text" pattern="[A-Z]{3}">
  </label>
  <input type="text" list="datalist" pattern="[A-Z]{3}">
  <datalist id="datalist">
      <option value="IOS">IOS學習</option>
      <!-- 此項value值不符合pattern規(guī)則橱脸，所以在下拉列表中不會顯示 -->
      <option value="ANDROID">android學習</option>
      <option value="WEB">web學習</option>
  </datalist>
  <input type="submit" value="提交">
</form>

  • selectionDirection：input&textarea屬性，用于獲取用戶選擇方向的行為分苇，須通過JS方法獲取添诉。

    • forward：返回值，表示用戶從左往右選擇医寿，或是有字符未選擇的默認值栏赴；
    • backward：返回值，表示用戶從右往左選擇靖秩；
    • none：表示文本框中未輸入任何字符

    <small>若從右往左選擇后须眷，進行了刪除、替換沟突、點擊等行為柒爸，均返回forward。


<body>
<script>
function AD() {
// var txt = document.getElementById("txt");
// 上方方法與下方方法結果相同事扭，只是不同獲取input節(jié)點的方法。
var txt = document.forms[0]['txtName'];
var userAction = txt.selectionDirection;
alert(userAction);
}
</script>
<form>
<input type="text" id="txt" name="txtName">
<input type="button" value="獲取用戶選擇文字方向" onclick="AD()">
</form>
</body>

* ***indeterminate***：input元素***checkbox***類型的屬性乐横，表示非明確狀態(tài)求橄，即選取與非選取之間。必須通過JS修改葡公，默認值為false罐农；該狀態(tài)的下一個狀態(tài)為選中。
```html
<input type="checkbox" id="cb">
<script>
var cb = document.getElementById("cb");
cb.indeterminate = true;
</script>
  • height,width：input元素image類型的新屬性催什，定義圖片按鈕的高度和寬度涵亏。
    <input type="image" src="submit.gif" width="20" height="20">

HTML5之Range[范圍]對象-(上)

Range對象為頁面上一段連續(xù)區(qū)域，可通過Range對象獲取或修改網頁上的任何區(qū)域。

Selection對象與Range對象的使用

  1. 通過var selection = document.getSelection()獲取被選中的信息气筋，包括選中區(qū)域數拆内，區(qū)域內容等；
  2. 通過selection.rangeCount屬性獲取被選中的區(qū)域數宠默；
  3. 若rangeCount大于0麸恍，說明存在選中區(qū)域；則可通過selection.getRangeAt(i)獲取對應i索引值的區(qū)域內容搀矫。

<small>1. 索引值i：根據內容的先后順序依次索引抹沪，并非根據選擇先后順序索引；</small>
<small>2. 根據瀏覽器的不同瓤球，可選擇區(qū)域也會不同融欧；如chrome只能選擇一個區(qū)域，firefox則可選擇多個區(qū)域卦羡。</small>

<!--Selection & Range Demo-->
<body>
    <script>
    function showRanges(argument) {
        var html;
        var rangesContainer = document.getElementById("rangesContainer");
        var selection = document.getSelection();
        if (selection.rangeCount > 0) {
            html = "您選取了" + selection.rangeCount + "個區(qū)域<br/>";
            for (var i = 0; i < selection.rangeCount; i++) {
                /*返回指定索引值的range對象*/
                var rangeContent = selection.getRangeAt(i);
                console.log(rangeContent + "--" + rangeContent.toString());
                /*直接打印range對象和range.toString()效果相同*/
                html += "第" + (i + 1) + "段內容為：" + rangeContent + "<br/>";
            }
            rangesContainer.innerHTML = html;
        }
    }
    </script>
    <h3>Selection對象與Range對象示例</h3>
    <input type="button" value="點擊顯示選擇區(qū)域的數量與內容" onclick="showRanges()">
    <div id="rangesContainer"></div>
</body>

Range對象的方法

<small>關于節(jié)點噪馏、子節(jié)點：<p>this is a <b>text</b></p>，其中p對象為一個節(jié)點虹茶，this is a是p節(jié)點的第一個子節(jié)點(是一個text對象)逝薪；節(jié)點即元素(標簽)對象；獲取子節(jié)點的方法：節(jié)點.firstChild即可獲取第一個子節(jié)點蝴罪。更多節(jié)點可通過節(jié)點.childNodes[i]訪問董济。</small>

  • Range的選擇與刪除
    • selectNode(refNode)：選取整個元素（包含節(jié)點本身）,參數refNode:被選中的節(jié)點，如<p>text</p>要门；
    • selectNodeContents(refNode)：選取元素中的內容(所有子節(jié)點虏肾，不包含節(jié)點本身)，如<p>text<b>demo</b>text</p>中的text<b>demo</b>text欢搜；
    • deleteContents()：刪除選取的Node或Contents封豪，根據使用上述兩個不同的選取方法決定；


<body>
<script>
function deleteContents(mode) {
// 創(chuàng)建一個Range對象
var rangeObj = document.createRange();
var demoArea = document.getElementById("demo");
if (mode) { /如果為true炒瘟，表示刪除整個元素/
// 選取整個Node
rangeObj.selectNode(demoArea);
rangeObj.deleteContents();
} else { /如果為false吹埠，表示僅刪除元素中的內容/
// 選擇Node中的Contents
rangeObj.selectNodeContents(demoArea);
rangeObj.deleteContents();
}
}
</script>
<div id="demo" style="background-color: #f00; width: 300px; height: 300px;">這是一個Range方法DEMO</div>
<button onclick="deleteContents(true)">刪除整個元素</button>
<button onclick="deleteContents(false)">僅刪除元素中的內容</button>
</body>


* ######Range范圍起始的設置
  * ***setStart***(*refNode*,*offset*)：設置Range的開始位置，`refNode：包含新的開始點的節(jié)點疮装；offset：新開始點在refNode中的位置`缘琅；
  * ***setEnd***(*refNode*,*offset*)：設置Range的結束位置，`refNode：包含新的開始點的節(jié)點廓推；offset：新開始點在refNode中的位置`刷袍；
> <small> setEnd設置的位置如果超出refNode的長度，則會設置失敗樊展。

  ```html
<!--setStart & setEnd Demo-->
<body>
    <script>
        function deleteChar(argument) {
            var div = document.getElementById("rangeDemo");
            // 獲取div對象的第一個子節(jié)點,即"13123123asdasdasd這是";無法使用div這個節(jié)點呻纹，這個節(jié)點沒有l(wèi)ength堆生、也沒有data屬性，Range無法選取范圍雷酪。
            //var child = div.firstChild;
            
            //通過另一種方法獲取第一個子節(jié)點淑仆，第一個子節(jié)點是文本對象，有l(wèi)ength和data
            //第二個子節(jié)點為<b>...</b>太闺，這個下面還有一個子節(jié)點糯景，也是文本對象。
            //<b>...</b>節(jié)點的長度為1省骂，如要操作該節(jié)點的子節(jié)點蟀淮，則如下：
            //var child = div.childNodes[1].firstChild;
            var child = div.childNodes[0];
            printObj(child);
            var rangeObj = document.createRange();
            var begin = document.getElementById("begin").valueAsNumber;
            var end = document.getElementById("end").valueAsNumber;
            rangeObj.setStart(child, begin); /*設置range在節(jié)點中的起始位置*/
            //end若超出child的長度，則會再控制臺報錯钞澳，設置失敗
            rangeObj.setEnd(child, end); /*設置range在節(jié)點中的結束位置(含)*/
            rangeObj.deleteContents();
        }

        function printObj(obj) {
            var str = "";
            var printPlace = document.getElementById("printObj");
            //obj是一個鍵值對
            for(var key in obj) {
                str += key + ":" + obj[key] + "<br/>";
            }
            printPlace.innerHTML = str;
        }
    </script>
    <div id="rangeDemo" style="background-color: #00f; width: 300px;height: 300px;">13123123asdasdasd這是<b>一個很多子節(jié)點的怠惶，</b>用來被刪除的內容</div>
    <label>起始位置：
    <input type="number" id="begin" value="0">
</label>
    <label>結束位置：
    <input type="number" id="end" value="3">
</label>
    <button onclick="deleteChar()">刪除指定位置內容</button>
    <div id="printObj"></div>
</body>
  • setStartBefore(refNode)：設置Range的開始位置位于refNode節(jié)點之前；
  • setEndAfter(refNode)：設置Range的結束位置位于refNode節(jié)點之后轧粟；
  • setStartAfter(refNode)：設置Range的開始位置位于refNode節(jié)點之后策治；
  • setEndBefore(refNode)：設置Range的結束位置位于refNode節(jié)點之前；
<!--setStartBefore & setEndAfter  Demo-->
<body>
  <script>
  // 逐行刪除兰吟，從第一行開始
  function deleteRow() {
      var table = document.getElementById("myTable");
      /*判斷表單行數是否大于0通惫，若等于0，則不能進行刪除操作*/
      if (table.rows.length > 0) {
          // 創(chuàng)建Range對象
          var rangeObj = document.createRange();
          var row = table.rows[0]; /*獲取table的第一行*/
          // 設置Range的開始范圍為row節(jié)點之前
          rangeObj.setStartBefore(row);
          // 設置Range的結束范圍為row節(jié)點之后
          rangeObj.setEndAfter(row);
          // 刪除節(jié)點混蔼，row節(jié)點之前和row節(jié)點之后履腋，Range的范圍就是整個row節(jié)點，即刪除第一行惭嚣。
          rangeObj.deleteContents();
      }
  }
  </script>
  <table id="myTable" border="1" cellpadding="0" cellspacing="0">
      <tr>
          <td>內容1</td>
          <td>內容2</td>
      </tr>
      <tr>
          <td>內容3</td>
          <td>內容4</td>
      </tr>
      <tr>
          <td>內容5</td>
          <td>內容6</td>
      </tr>
  </table>
  <button onclick="deleteRow()">刪除第一行內容</button>
</body>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末遵湖，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子晚吞，更是在濱河造成了極大的恐慌延旧，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,110評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件槽地，死亡現場離奇詭異迁沫，居然都是意外死亡，警方通過查閱死者的電腦和手機捌蚊，發(fā)現死者居然都...
    沈念sama閱讀 93,443評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門集畅，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人逢勾，你說我怎么就攤上這事∶晁保” “怎么了溺拱？”我有些...
    開封第一講書人閱讀 165,474評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵逃贝，是天一觀的道長。 經常有香客問我迫摔，道長沐扳，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,881評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任句占，我火速辦了婚禮沪摄，結果婚禮上，老公的妹妹穿的比我還像新娘纱烘。我一直安慰自己杨拐，他們只是感情好，可當我...
    茶點故事閱讀 67,902評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布擂啥。 她就那樣靜靜地躺著哄陶，像睡著了一般。 火紅的嫁衣襯著肌膚如雪哺壶。 梳的紋絲不亂的頭發(fā)上屋吨，一...
    開封第一講書人閱讀 51,698評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機與錄音山宾，去河邊找鬼至扰。 笑死，一個胖子當著我的面吹牛资锰，可吹牛的內容都是我干的敢课。 我是一名探鬼主播，決...
    沈念sama閱讀 40,418評論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼台妆，長吁一口氣：“原來是場噩夢啊……” “哼翎猛！你這毒婦竟也來了？” 一聲冷哼從身側響起接剩，我...
    開封第一講書人閱讀 39,332評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤切厘，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后懊缺，有當地人在樹林里發(fā)現了一具尸體疫稿，經...
    沈念sama閱讀 45,796評論 1贊 316
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年鹃两，在試婚紗的時候發(fā)現自己被綠了遗座。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,110評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡俊扳，死狀恐怖途蒋，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情馋记，我是刑警寧澤号坡，帶...
    沈念sama閱讀 35,792評論 5贊 346
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布懊烤，位于F島的核電站，受9級特大地震影響宽堆，放射性物質發(fā)生泄漏腌紧。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一畜隶、第九天 我趴在偏房一處隱蔽的房頂上張望壁肋。 院中可真熱鬧，春花似錦籽慢、人聲如沸浸遗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0贊 22
  • 一樁弒父案嗡综，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽乙帮。三九已至，卻和暖如春极景，著一層夾襖步出監(jiān)牢的瞬間察净，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工盼樟， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留氢卡，地道東北人。 一個月前我還...
    沈念sama閱讀 48,348評論 3贊 373
  • 代替公主和親
    正文 我出身青樓晨缴，卻偏偏與公主長得像译秦，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子击碗，可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2贊 355

推薦閱讀更多精彩內容