三天學會HTML5 之第一天

本文轉載自查看原文 2016-01-29 18:30 2268 HTML/CSS

引言

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>

    <span class="InvalidEmailSpan invalid">Invalid email</span>


    <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</span>


    <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>

    <span class="InvalidAgeSpan invalid">Invalid Age</span>


    <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 再次刷新網頁

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 7天學會Maven（第一天——了解 Maven）七天學會NodeJS——第一天第一天 VueJS第一天沖刺第一天 python第一天 linux第一天 2019第一天博客第一天爬蟲第一天