HTML5系列二（標簽元素、FileReader、拖放） @ 互聯網

文章出處

nav元素的使用場合

頁面中可以包含多個nav元素，通常情況下頭部和尾部都會包含導航，這樣提高了可訪問性，訪客能夠清晰的將其辨認出來。nav元素是一個可以用來作為頁面導航的鏈接組；其中的導航元素鏈接到其他頁面或當前頁面的其他部分。

<nav>
  <ul>
    <li><a href="http://www.cnblogs.com">博客園</a></li>
    <li><a href="/home/">首頁</a></li>
    <li><a href="/newBlog/">新隨筆</a></li>
    <li><a href="/link/">聯系</a></li>
    <li><a href="/manage/">管理</a></li>
  </ul>
</nav>

section：頁面的邏輯區域或內容組合

section區段是頁面上的邏輯區域，在描述頁面邏輯區域時，我們可以使用section元素來代替之前被隨意濫用的div標簽，section可以表示成一個小節。事實上我們就是利用section元素將內容合理歸類。一般來說一個section包含一個head和一個content內容塊。

section元素不是一般的容器元素，所以如果一個元素需要定義相應的style或者script腳本的話，那推薦使用div元素，section的使用條件是確保這個元素的內容能夠明確地展示在文檔的大綱里。

article正文或一篇完整的內部

最適合描述網頁實際內容的元素非article標簽莫屬。section標簽視為對文檔邏輯部分的描述，而將article標簽視為對具體內容的描述。區段可以包含多篇文章，文章內容又可以劃分若干區段。section元素是更通用的元素，可以用來從邏輯上對其他元素進行分組。如果元素的內容集中到一起顯示可以表達相應的意思的話，那就可以定義成article元素，而沒必要使用section元素。

我們可以在article元素內部使用header元素和footer元素，以更方便的描述具體的邏輯區域，也可以使用section元素將文檔分為多個部分。

article代表了一個文檔內容的獨立片段，article 是一個特殊的 section 標簽，它比 section 具有更明確的語義, 它代表一個獨立的、完整的相關內容塊。一般來說， article 會有標題部分(通常包含在 header 內)，有時也會包含 footer 。雖然 section 也是帶有主題性的一塊內容，但是無論從結構上還是內容上來說，article 本身就是獨立的、完整的。當 article 內嵌 article 時，原則上來說，內部的 article 的內容是和外層的 article 內容是相關的。

aside元素的使用場合

有時候我們需要為主要內容添加一些附加信息，如引言、圖表、相關鏈接等，這時候就可以使用aside標簽來標識。

aside元素主要有以下兩種使用方法：

1、被包含在article中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋等

2、在article元素之外使用，作為頁面或站點全局的附屬信息部分

自定義數據屬性

開發人員可以在任何元素上定義他們想要的任何屬性，只要他們在其之前加上 data- 的前綴，以此避免與未來的HTML版本的沖突，asp.net MVC下的jQuery驗證就是采用這種方式。使用自定義數據屬性為客戶端腳本提供了額外的信息。自定義數據屬性不會使瀏覽器出錯，同時HTML5文檔類型聲明可保證文檔是有效的。因為所有自定義數據屬性都是以data-前綴開頭，HTML5文檔的驗證器會在驗證時忽略它。幾乎在所有的瀏覽器中你都能夠使用自定義屬性，所以我們就可以用JavaScript中輕易獲取它們。

構造可訪問的頁面，第一步就是確保禁用JavaScript的情況下，所有功能仍然能夠正常運轉。順便說一句在HTML5中，廢棄了onclick等，這是因為像onclick屬性它讓行為和內容太緊密耦合了。

看看如下代碼，想想它的用途：

    <!--[if lt IE 9]-->
    <script type="text/javascript">
        document.createElement('nav');
        document.createElement('header');
        document.createElement('footer');
        document.createElement('aside');
        document.createElement('article');
    </script>

html5細節概述

1、一個網頁內并未限制header元素的個數，可以擁有多個，也可以為每個內容區塊加一個header元素（footer同理）

header元素是一種具有引導和導航作用的元素。頭部可能包含從公司LOGO到搜索框在內的各種各樣的內容，所以不要把header與h1等標簽混為一談。同一個頁面中可以包含多個header元素，每個獨立的區段或文章段都可以擁有自己的頭部。

footer元素用來為文檔或相鄰區段定義尾部信息。HTML5規范中允許在同一個頁面中出現多個footer元素，也就是說在section或者article中也可以使用footer,footer與header類似通常也包含其它元素。footer通常包括其相關區塊的附加信息，如作者、相關閱讀鏈接以及版權信息等。

2、autofocus：一個頁面上只能有一個控件具有該屬性

autofocus屬性穩定生效的前提是頁面中設置了唯一的autofocus屬性，如果設置了多個，瀏覽器會把用戶光標定位到最后一個設置了autofocus屬性的表單域上。

        function hasAutofocus() {
            var element = document.createElement('input');
            return 'autofocus' in element;
        }

3、pattern屬性：要求輸入內容符合一定的格式

<input pattern="[0-9][A-Z]{3}" name="part" placeholder="輸入內容：一個數字與三個大寫字母" />

4、form元素與input元素都具有一個checkValidity方法，調用該方法可以顯式的進行有有效性驗證

5、兩種方法取消表單驗證：1）利用form元素的novalidate屬性2）利用input元素的input元素或submit元素的formnovalidate屬性，因為利用input元素的formnovalidate屬性可以讓表單驗證對單個input失效，而如果用submit元素的formnovalidate屬性則整個表單都失效

6、自定義錯誤可利用input類型元素的setCustomValidity方法

7、mark元素的兩個應用場景：1）搜索結果中高亮顯示關鍵字2）引用原文的時候，將原文作者沒有特別重要標示出來的內容標示出來

8、progress元素的使用示例

    <h2>progress元素的使用示例</h2>
    <p>完成百分比：<progress id="p" max="100">         <span>0</span>%</progress></p>
    <input type="button" value="請點擊" onclick="btnClick()" />
    <script type="text/javascript">

        function btnClick() {
            var progressBar = document.getElementById('p');
            progressBar.getElementsByTagName('span')[0].textContent = '0';
            for (var i = 0; i < 100; i++) {
                updateProgress(i);
            }
        }
        function updateProgress(newValue) {
            var progressBar = document.getElementById('p');
            progressBar.value = newValue;
            progressBar.getElementsByTagName('span')[0].textContent = newValue;
        }
    </script>

9、html5中FileList對象與file對象簡單示例（下例中accept屬性表示可以上傳的文件格式）

    <input type="file" id="file" multiple size="80"  accept="image/*"/>
    <input type="button" onclick="showFileName();" value="文件上傳" />
    <script type="text/javascript">
        function showFileName() {
            var file;//= document.getElementById('file');
            for (var i = 0; i < document.getElementById('file').files.length; i++) {
                file = document.getElementById('file').files[i];
                console.log(file.name);//文件名
                console.log(file.lastModifiedDate);//文件最后一次修改時間
                console.log(file.size);//文件字節長度
                console.log(file.type);//文件類型 對于圖像類型的文件，Blob對象的type屬性是以image/開頭
            }
        }
    </script>

10、autocomplete屬性用以通知瀏覽器不要為當前表單域自動填充數據。某些瀏覽器能夠記錄用戶之前輸入的數據，而在某些場合下，我們想告知瀏覽器我們不希望用戶使用記錄數據，這時候autocomplete屬性就起作用啦。

11、contenteditable屬性可以自動完成數據輸入部分的工作，為了保存編輯過的數據，還需要編寫少量用于向服務器端發送數據的JavaScript代碼。任何元素使用contenteditable屬性的話，代表該元素是一個可編輯的區域。用戶可以改變元素的內容以及操作標記。

<h3 contenteditable="true">這是一個可編輯的標題。請試著編輯該文本。</h3>

contenteditable屬性有3種值可選：true, false和空字符，空字符代表true。

如果用js對框架頁面設置contenteditable,可用：框架ID.document.designMode="on" 。

12、spellcheck 屬性規定是否對元素內容進行拼寫檢查

<p contenteditable="true" spellcheck="true">這是可編輯的段落。您可以試試看您編輯的文本是否需要進行拼寫檢查</p>

13、draggable 和 dropzone 屬性可以與新的拖放API一起使用，draggable為是否允許拖放，dropzone代表可以拖放到哪個區域

<p draggable="true" dropzone="myHolder">拖放測試</p>

HTML5中input元素的種類

使用search類型創建搜索域：search 輸入類型用于搜索字段，比如站內搜索或谷歌搜索等。搜索字段的外觀與常規的文本字段無異。
使用range類型創建滑塊
使用數值框處理數字
日期控件
Email類型
URL類型
Color類型

下面來一一詳細說明一下：

使用range類型創建滑塊

<input type="range" min="0" max="10" name="myRange" value="0" id="myRange" />

屬性	值	描述
max	number	規定允許的最大值。
min	number	規定允許的最小值。
step	number	規定合法數字間隔（如果 step="3"，則合法數字是 -3,0,3,6，以此類推）
value	number	規定默認值。

使用數值框處理數字

number 輸入類型用于包含數字值的輸入字段。您可以設置可接受數字的限制。

與range類型的滑塊類似，可以設定最大值和最小值。但是直接輸入的數字不受最小值和最大值的限制。控件增減的步長由step屬性來指定，step屬性可以是任意數字，其默認值為1

屬性	值	描述
max	number	規定允許的最大值。
min	number	規定允許的最小值。
step	number	規定合法數字間隔（如果 step="3"，則合法的數字是 -3,0,3,6, 以此類推）
value	number	規定默認值。

Points: <input type="number" name="points" min="1" max="10" />

日期控件

HTML5 擁有多個供選擇日期和時間的新的輸入類型：

date - 選擇日、月、年
month - 選擇月、年
week - 選擇周、年
time - 選擇時間（時、分）
datetime - 選擇時間、日期、月、年（UTC 時間）
datetime-local - 選擇時間、日期、月、年（本地時間）

Date: <input type="month" name="user_month" />

Email類型

email 輸入類型用于應該包含電郵地址的輸入字段。當提交表單時，會自動地對 email 字段的值進行驗證。iPhone 的 Safari 瀏覽器會識別 email 輸入類型，然后改變觸摸屏的鍵盤來適應它

E-mail: <input type="email" name="user_email" />

URL類型

url 輸入類型用于應該包含 URL 地址的輸入字段。會在提交表單時對 url 字段的值自動進行驗證。iPhone 的 Safari 瀏覽器會識別 url 輸入類型，然后改變觸摸屏的鍵盤來適應它

Homepage: <input type="url" name="user_url" />

Color類型

color 輸入類型用于規定顏色。該輸入類型允許您從拾色器中選取顏色。

Color: <input type="color" name="user_color" />

現在暫時只有opera實現了color類型的input，那么我們如何用js來判斷瀏覽器是否支持color類型呢

function hasColorSupport() {
            var input = document.createElement('input');
            input.setAttribute('type', 'color');
            var hasColorType = (input.type != 'text');
            if (hasColorType) {
                var testString = 'foo';
                input.validationMessage = testString;
                hasColorType = (input.value != testString);
            }
            return (hasColorType);
        }

FileReader接口

FileReader接口的方法API如下圖所示：

下面用一個示例來說明：

    <script type="text/javascript">
        var result = document.getElementById('result');
        var file = document.getElementById('file');
        if (typeof FileReader == 'undefined') {
            result.innerHTML = '您的瀏覽器不支持FileReader'
            file.setAttribute('disabled', 'disabled');
        }
        function readAsDataURL() {
            var file = document.getElementById('file').files[0];
            if (!/image\/\w+/.test(file.type)) {
                alert('請確保文件為圖像類型');
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                var result = document.getElementById('result');
                result.innerHTML = '<img src="' + this.result + '" alt="" />';
            }
        }
        function readAsBinaryString() {
            var file = document.getElementById('file').files[0];
            var reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload = function (e) {
                var result = document.getElementById('result');
                result.innerHTML = this.result;
            }
        }
        function readAsText() {
            var file = document.getElementById('file').files[0];

            var reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function (e) {
                var result = document.getElementById('result');
                result.innerHTML = this.result;
            }
        }
    </script>
    <p>
        <label>請選擇一個文件：</label>
        <input type="file" id="file" />
        <input type="button" value="讀取圖像" onclick="readAsDataURL()" />
        <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />
        <input type="button" value="讀取文件文件" onclick="readAsText()" />

    </p>
    <div id="result"></div>

FileReader接口的事件API如下圖所示：

    <script type="text/javascript">
        var result = document.getElementById('result');
        var file = document.getElementById('file');
        if (typeof FileReader == 'undefined') {
            result.innerHTML = '您的瀏覽器不支持FileReader'
            file.setAttribute('disabled', 'disabled');
        }
        function readFile() {
            var file = document.getElementById('file').files[0];
            if (!/image\/\w+/.test(file.type)) {
                alert('請確保文件為圖像類型');
                return false;
            }
            var reader = new FileReader();            
            reader.onload = function (e) {
                console.log('onload');
                var result = document.getElementById('result');
                result.innerHTML = '<img src="' + this.result + '" alt="" />';
            }
            reader.onprogress = function () {
                console.log('progress');
            }
            reader.onabort = function () {
                console.log('abort');
            }
            reader.onerror = function () {
                console.log('loadstart');
            }
            reader.onloadstart = function () {
                console.log('loadstart');
            }
            reader.onloadend = function () {
                console.log('loadend');
            }
            reader.readAsDataURL(file);
        }        
    </script>
    <p>
        <label>請選擇一個圖像文件：</label>
        <input type="file" id="file" />
        <input type="button" value="顯示圖像" onclick="readFile()" />
    </p>
    <div id="result"></div>

拖放API

<script type="text/javascript">
    function init() {
        var source = document.getElementById('dragme');
        var dest = document.getElementById('text');
        var dragIcon = document.createElement('img');
        dragIcon.src = 'http://files.cnblogs.com/files/liyunhua/ctrip.gif';
        source.addEventListener('dragstart', function (ev) {
            var dt = ev.dataTransfer;//向dataTransfer對象追加數據
            dt.effectAllowed = 'copy';//設置effectAllowed屬性
            //dt.setDragImage(dragIcon, -10, 10); //設定自定義圖標
            dt.setData('text/plain', '你好');
        }, false);
        dest.addEventListener('dragover', function (ev) {
            var dt = ev.dataTransfer;
            dt.dropEffect = 'copy';//設定dropEffect屬性
            ev.preventDefault();
        }, false);
        /*因為默認情況下，拖放的目標元素是不允許接受元素的，為了把元素拖放到其中，必須把默認處理給關閉掉*/
        dest.addEventListener('dragend', function (ev) {
            ev.preventDefault();//不執行默認行為（拒絕被拖放）
        }, false);
        /*必須在目標元素的drop事件中關閉默認處理，否則目標地元素不能接受被拖放的元素*/
        dest.addEventListener('drop', function (ev) {
            var dt = ev.dataTransfer;//從dataTransfer對象獲得數據
            var text = dt.getData('text/plain');
            dest.textContent += text;
            ev.preventDefault();//不執行默認行為（拒絕被拖放）
            ev.stopPropagation();//停止事件傳播
        }, false);
    }
    //還必須設定整個頁面為不執行默認處理（拒絕被播放）
    document.ondragover = function (e) {
        e.preventDefault();
    }
    document.ondrop = function (e) {
        e.preventDefault();
    }
</script>
<body onload="init()">
    <div id="dragme" draggable="true" style="width: 200px; border: 1px solid gray;">請拖放 </div>
    <div id="text" style="width: 300px; height: 300px; border: 1px solid gray;"></div>
</body>

不含病毒。www.avast.com

AutoPoster

互聯網 - 大數據

AutoPoster 發表在痞客邦留言(0) 人氣()

E-mail轉寄

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

BloggerAds