三天學會HTML5 之第一天

77rou發表於2016-02-02
HTML

引言

HTML5 一直是非常熱門的話題，因此此係列文章主要從一些基本功能開始講起，逐步深入瞭解HTML5的新概念。

 

首先了解一些基本的術語和概念。

    • SGML, HTML,XML三者之間的區別
    • Doc型別是什麼
    • HTML5 有什麼新特點新優勢。
    • 學習HTML5

       

      在開始之前首先來區分SGMC，HTML,XML 三者的概念。

      SGML 即 Standard Globalized Markup Language 是用來定義標準的標記語言，簡單的說，就是定義文件的元語言。

      HTML 是基於SGML 的超連結語言，可以用於建立Web頁面。在DTD 內部定義了標籤的規則，DTD就是使用SGML 語言建立的。

      XML 是從SGML 衍生而來的，它主要處理網際網路方面的需求，HTML 有很多限制，XML 是SGML 的子集，可用於表示資料。

       

      Doc 型別

      建立HTML 頁面時會自動生成以下程式碼： 

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

       

    •  

      這句程式碼簡單的介紹了HTML 版本號，有了Doctype，就引入了對應的DTD（定義了HTML文件的組織結構），在頁面中新增的所有標籤才會是合法的，簡單的說DTD 就是定義HTML的語法規則。

      即使在沒有引入DTD的情況下，很多瀏覽器也可以識別HTML元素，因為它們自身包含對HTML 元素的定義，這就是為什麼很多開發人員沒有感受到DTD 的存在。

      HTML5 與之前的版本區別

      HTML5不是基於SGML 語言的，因此不需要DTD ，它是一種全新的標記語言，有自己的解析規則，HTML5的語法規則與之前版本有很大的差別，可以稱的上是一種全新的語言。

      HTML5 的Doctype 非常簡單： 

      <!DOCTYPE html>

    • HTML5 新特性

       

      1. 理解新的頁面結構語義

      HTML 舊版本並沒有標準的文件定義規則，比如如何定義文件Header或Footer等，很多人都在使用div來修飾一些CSS ，常常會導致不一致性。

      HTML5 定義標準tag如Header,Footer,nav,FlipCaption等。這些標籤可使得標記語言更有意義。

      注意： 這些標籤不提供特殊的渲染功能，僅僅使的HTML 文件結構更具有意義。

       

      Lab2_ 新的輸入屬性

      新型別值

      之前為了獲得不同的UI 元素，如DatePicker,range Picker,color Picker等，會使用不同的類庫。

      HTML5 為輸入元素引入了新屬性“type”，看以下示例：

    • Number 

      <input type="number" name="MyNuberElement" id="MyNumberElement" />

    • Range 
      <input type="range" name="MyRangeElement" id="MyRangeElement"/>

    • Color 
      <input type="color" id="MyColorElement" name="MyColorElement" />

       

    • Date 
      <input type="date" id="MyDateElement" name="MyDateElement" />

    • Time 
      <input type="time" id="MyTimeElement" name="MyTimeElement"/>

    • Datetime-local 
      <input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />

       

    •  

    • DateTime (Also include time zone) 
      <input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>
    • Month 
      <input type="month" id="MyMonthElement" name="MyMonthElement" />

    • Week 
      <input type="week" id="MyWeekElement" name="MyWeekElement" />

       

    • 下面列舉一些有用的屬性：

    • Autofocus 該屬性表示在頁面載入時，可初始化焦點。 
      &hellip;

<label for="birthMonth">Birth Month</label>

<input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />

&hellip;
      上面程式碼實現了，當頁面載入時，滑鼠聚焦於“MyMonthElement”控制元件，“autofocus” 則繫結到多控制元件。
    • Placeholder 新的輸入控制元件 
       
    • <input type="text" placeholder="Enter Value" id="MyPlaceHolderControl" name="MyPlaceHolderControl" />
       

      實驗3——瞭解HTML5 Datalist 控制元件 

      DataList是HTML5中的新標籤，能夠在輸入框中，實現自動完成功能。
      可通過3個步驟實現：
      1. 建立DataList
      <datalist id="Hobbies">

    <option>Reading books</option>

    <option>Watching movies</option>

    <option>Playing games</option>

</datalist>

       

    • 2. 建立輸入控制元件，繫結List 

      <input type="text" name="TxtHobbies" value="" list="Hobbies" />

       

    • 3. 執行測試

       

      實驗 4  輸出元素

      HTML5 中引入標準的語義“Output”元素 

      <div oninput= "document.getElementById(MyOutputElement).value =

        (document.getElementById('input1').valueAsNumber) +

        (document.getElementById('input2').valueAsNumber)">

    <input id="input1" name="input1" type="number" value="1"> +

    <input id="input2" name="input2" type="number" value="2"> =

    <output id="MyOutputElement">3</output>

</div>

    • 實驗 5,6,7-學習HTML5 驗證功能

      驗證是開發應用最重要的功能，之前都會使用JQuery 驗證等功能，在新版的HTML5中提供了驗證支援。

      Lab5—使用輸入元素的type屬性，實現驗證功能： 

      <form>

 <table>

  <tr>

    <td>

        <label>E-mail:</label>

        <input type="email" id="email" name="email" />


        <label>URL:</label>

        <input type="url" id="url" name="url" />


        <label>Telephone</label>

        <input type="tel" id="phone" name="phone" />


        <label>Number Demo:</label>

        <input type="number" name="MyNumberElement" id="MyNumberElement" />


        <label>Range Demo:</label>

        <input type="range" name="MyRangeElement" id="MyRangeElement" />


        <label>Color Demo</label>

        <input type="color" id="MyColorElement" name="MyColorElement" />

    </td>

    <td>

        <label>Date Demo</label>

        <input type="date" id="MyDateElement" name="MyDateElement" />


        <label>Time Demo</label>

        <input type="time" id="MyTimeElement" name="MyTimeElement" />


        <label>DateTime Local Demo</label>

        <input type="datetime-local" id="datetime" name=" datetime" />


        <label>Month Demo</label>

        <input type="month" id="month" name="month" />


        <label>Week Demo</label>

        <input type="week" id="MyWeekElement" name="MyWeekElement" />


        <div style="text-align:right">

          <input type="submit" value="validate" />

        </div>

    </td>

  </tr>

 </table>

</form>

    •  

      2. 執行測試

       

      實驗6-使用自定義驗證屬性實現驗證 

      1. 建立輸入控制元件
      <form>

    <label>Email</label>

    <input type="email" name="TxtEmail" id="TxtEmail" required />


    <label>User Name</label>

    <input type="text" name="username" id="username" pattern="[a-zA-Z]{5,}" />


    <label>Age</label>

    <input type="number" name="TxtAge" id="TxtAge" min="10" max="50" />


    <br /><input type="submit" value="Register" />

</form>
    • 輸出：

      實驗7——自定義驗證 

      通過處理oninvalid 事件完成自定義HTML5 驗證功能。
      1. 建立輸入控制元件，並繫結驗證屬性，新增自定義錯誤提示。
      <form>

    <label>Email</label>

    <input type="email" name="TxtEmail" id="TxtEmail" required/>

    <span class="MissingEmailSpan invalid">Email Missing

    <span class="InvalidEmailSpan invalid">Invalid email


    <label>User Name</label>

    <input type="text" name="username" id="username" pattern="[a-zA-Z]{5,10}" />

    <span class="InvalidUserNameSpan invalid">Username not matching with pattern


    <label>Age</label>

    <input type="number" name="TxtAge" id="TxtAge" min="10" max="50" />

    <span class="AgeIsNotInRangeSpan invalid">Age must be be between 10 and 50

    <span class="InvalidAgeSpan invalid">Invalid Age


    <br /><input type="submit" value="Register" />

</form>

       

    •  

      2.  新增style 標籤，建立CSS 來隱藏錯誤資訊 

      <style>

        .invalid {

            display: none;

        }

</style>
    • 3. 點選提交按鈕，隱藏錯誤資訊 
      <input type="submit" value="Register" onclick="$('.invalid').hide();" />

       

    •  

      4. 當輸入控制元件包含非法值時觸發 

      <input type="email" name="TxtEmail" id="TxtEmail" oninvalid="OnInvalidEmail();" required/>

       

    •  

      5. 建立Event Handler JavaScript函式 

      function OnInvalidEmail()

{ event.preventDefault();

    var element = event.srcElement;

    var validity = element.validity; if (validity.valueMissing) {

        $('.MissingEmailSpan').show();

    } else if (validity.typeMismatch) {

        $('.InvalidEmailSpan').show();

    }

}
      event.preventDefault();  會組織預設行為的發生，將錯誤資訊置頂
      event.srcElement；獲取包含非法值的控制元件，如上的Email textbox;
      element.validity; 包含控制元件的驗證資訊，如valueMissing，typeMismatch，badInput等。

      6. 執行

    •  

      實驗8——HTML5的快取技術

      如下是簡答的快取Demo

      1.建立新的ASP.NET Web 應用

      2. 新增Style.css,在Block 中新增以下類： 

      .DivStyle {

    background-color:silver;

}

    • 3. 建立manifest 文字檔案： 

      CACHE MANIFEST

# ver 1


CACHE:

/Styles/Style.css

    • 4. 建立需要快取的檔案 

      <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>


<!DOCTYPE html>


<html  manifest="MyCache.txt">

<head runat="server">

    <title></title>

    <link href="Styles/Style.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">      

    <div class="DivStyle" id="MyDiv">

        Hi, Execution count is 1

    </div>

    </form>

</body>

</html>

       

    •  

      5. 執行

      6. 設定離線，檢視結果

      7. 重新整理頁面

      8 修改MyPage.aspx 檔案，修改Mydiv 

      <div class="DivStyle" id="MyDiv">

    Hi, Execution count is 2

</div>

    • 9. 執行程式

      10. 修改manifest 檔案 

      CACHE MANIFEST

# ver 3


CACHE:

/Styles/Style.css

       

  • 11 再次重新整理網頁

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-1985529/，如需轉載，請註明出處，否則將追究法律責任。

相關文章