526互联

让你一天就可以掌握HTML5的基础

发布时间 2023-07-24 10:53:34作者: delish

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 新特性

        https://img1.sycdn.imooc.com/5ae9845d000128f106780829.jpg 

        1. 理解新的页面结构语义

        HTML 旧版本并没有标准的文档定义规则，比如如何定义文档Header或Footer等，很多人都在使用div来修饰一些CSS ，常常会导致不一致性。

        https://img3.sycdn.imooc.com/5ae9846f00016c5c02660174.jpg

        HTML5 定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。

        注意： 这些标签不提供特殊的渲染功能，仅仅使的HTML 文档结构更具有意义。

        https://img2.sycdn.imooc.com/5ae9848000018c2a01820206.jpg

         

        Lab2_ 新的输入属性

        新类型值

        之前为了获得不同的UI 元素，如DatePicker,range Picker,color Picker等，会使用不同的类库。

        HTML5 为输入元素引入了新属性“type”，看以下示例：

      • Number

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

      • https://img3.sycdn.imooc.com/5ae984990001974202130035.jpg

      • Range

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

      • https://img4.sycdn.imooc.com/5ae984ab0001769d02100029.jpg

      • Color

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

        https://img2.sycdn.imooc.com/5ae984b9000142e003530180.jpg

         

      • Date

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

        https://img4.sycdn.imooc.com/5ae984e000018e0101850147.jpg

      • Time

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

      • https://img4.sycdn.imooc.com/5ae984e9000172f002060026.jpg

      • Datetime-local

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

        https://img3.sycdn.imooc.com/5ae984f40001589b02620208.jpg

      • DateTime (Also include time zone)

        <input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>

        https://img2.sycdn.imooc.com/5ae985010001f22b02340224.jpg

      • Month

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

        https://img2.sycdn.imooc.com/5ae9850900019e5d02610208.jpg

      • Week

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

        https://img3.sycdn.imooc.com/5ae985100001ec5203080207.jpg

         

      • 下面列举一些有用的属性：

      • 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" />

        https://img1.sycdn.imooc.com/5ae985b00001110002080026.jpg

 

实验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. 运行测试

  •  

      https://img3.sycdn.imooc.com/5ae986bb00018ebc06050152.jpg

    实验 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. 运行测试

    https://img4.sycdn.imooc.com/5ae9872a00014b5c05900385.jpg

     

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

    输出：

    https://img4.sycdn.imooc.com/5ae9877600013a0304350287.jpg

    实验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. 运行

  https://img2.sycdn.imooc.com/5ae988790001e1ae04800140.jpg

 

实验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. 运行

    https://img4.sycdn.imooc.com/5ae988ef0001625002920072.jpg

    6. 设置离线，查看结果

    https://img1.sycdn.imooc.com/5ae988f70001605f04340135.jpg

    7. 刷新页面

    8 修改MyPage.aspx 文件，修改Mydiv

    <div class="DivStyle" id="MyDiv">
    Hi, Execution count is 2
</div>

  • 9. 运行程序

    10. 修改manifest 文件

1
2
3
4
CACHE MANIFEST
# ver 3
CACHE:
/Styles/Style.css

  • 11 再次刷新网页