三天學會HTML5 之第一天

時間 2019-11-07

標籤三天 3天學會 html5 html 第一天欄目 HTML5 简体版

原文原文鏈接

引言css

HTML5 一直是很是熱門的話題，所以此係列文章主要從一些基本功能開始講起，逐步深刻了解HTML5的新概念。html

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

SGML, HTML,XML三者之間的區別緩存
Doc類型是什麼ide
HTML5 有什麼新特色新優點。函數
學習HTML5學習

在開始以前首先來區分SGMC，HTML,XML 三者的概念。測試
SGML 即 Standard Globalized Markup Language 是用來定義標準的標記語言，簡單的說，就是定義文檔的元語言。ui
HTML 是基於SGML 的超連接語言，能夠用於建立Web頁面。在DTD 內部定義了標籤的規則，DTD就是使用SGML 語言建立的。url
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 再次刷新網頁

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

三天學會HTML5 之第一天

Doc 類型

HTML5 與以前的版本區別

HTML5 新特性

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