首页 > 其他分享 >让你一天就可以掌握HTML5的基础

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

时间:2023-07-24 10:55:06浏览次数:51  
标签:控件 掌握 Demo 一天 DTD HTML HTML5 验证

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 再次刷新网页

标签:控件,掌握,Demo,一天,DTD,HTML,HTML5,验证
From: https://www.cnblogs.com/delishcomcn/p/17576656.html

相关文章

  • 每日汇报 第五周第一天 CSS颜色
    今日学习:CSS颜色的学习,代码如下:html1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="utf-8">5<metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • html5-新特性
    新增了header,nav,article,section,footer等语义标签新增了input表单类型mail,url,date,time,month,week,nubmer,tel,search,color新增表单属性require(必填属性)placeholder(提示文本)autofocus(自动聚集)autocomplete(自动完成)multiple(多选文件)......
  • 设计师必看的10个HTML5动画工具
    如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具。HTML5是设计师用来打造时尚网站的最流行的编程语言之一。在过去三年内,这种编程语言的使用人数急剧增长。开发人员可以使用这种语言来创建各种改进的内容并放到万维网上。......
  • 一文掌握如何前后端分离?
    随着科技的进步和发展,低代码开发产品拥有广阔的市场前景。前后端分离似乎早已经是发展趋势了,因为做好前后端分离对于前后端的工程师而言是非常有利的,这样也有利于提升办公协作效率。那么,如何前后端分离?分别都有哪些内容?别着急,这篇文章将会围绕客户关心的问题,给大家一一做出解答。......
  • 小旋风超级模板站群788套整站html5模板(已经过xxfseo处理)免费下载
    这784套整站模板来源于市面上的html5英文模板,经过机器处理(替换、过滤、精简、压缩)后,生成的。适用于超级模板站群。本来是1千多套的,删除了后台模板、单页模板。剩下784套不错的模板。整站多页面模板。----------------------------------------------------------------------使......
  • html5页面中使用vue组件DEMO
    资源下载npmhttp-vue-loader:https://www.npmjs.com/package/http-vue-loader http-vue-loader.js下载 普通html5使用vue组件1、页面引入相关JS文件 2、创建components组件 3、主页面创建vue实例 引入相关组件名 4、html中使用vue组件 ......
  • 自学前端-HTML5+CSS-综合案例一-热词
    综合案例一-热词目录综合案例一-热词1、设计需求2、设计所需标签和CSS样式3、设计具体步骤4、遇到的问题设计图如下1、设计需求①需要鼠标放上去有显示透明②需要点击后跳转到相应页面且保留原页面2、设计所需标签和CSS样式所需标签:divCSS样式:伪类hover,颜色color,字大小fo......
  • html5 - 支持word上传的富文本编辑器
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • 14款超时尚的HTML5时钟动画
    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟、3D时钟、个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助。1、可爱的CSS3圆盘时钟......
  • 周二 历史上糟糕的一天
    对不起老师 我今天就像是已经毕业又被强行拉上考场的考生,全程被监考老师死死盯着,出一点无关紧要的小叉子就被破口大骂,骂完再告诉我是为了我好,我好个()()!去你()(),我()()有事就得自己憋着倒也无所谓,被事硬拉我是真烦烦死了今天我好想我爷爷奶奶 去()()()()()()()的为了我好 主键约束(PrimaryKeyC......