文档章节

三天学会HTML5 之第一天

葡萄城技术团队
 葡萄城技术团队
发布于 2016/02/02 11:32
字数 1696
阅读 147
收藏 9

引言

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


© 著作权归作者所有

葡萄城技术团队

葡萄城技术团队

粉丝 404
博文 583
码字总数 900180
作品 20
西安
高级程序员
私信 提问
Top100summit全球软件案例研究峰会案例干货大放送

Top100summit是科技界一年一度的技术创新盛会,每年评选出最具代表的100个技术创新案例,分享他们在本年度最值得的总结、盘点的实践。案例分享者均来自一线研发管理者、核心技术骨干。每个入...

msup
2013/08/28
2.1K
8
一个Bug的修复,促使我写了一个package

项目地址:vue-webview-js-bridge 主要功能:基于WebViewJavascriptBridge开发的webview-js-bridge的vue插件,后面废话较多,可以直接看项目。如果刚好闲来无事,权当打发时间 故事背景 本人...

Kntt
02/19
0
0
基于HTML5 geolocation 实现的天气预报功能

最近一直在学习HTML5,因为要开发手机项目所以先把HTML5学习下。 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置。 2. 根据用户设置的城市切换到所在...

随风随影
2013/08/20
2.5K
1
HTML5实例教程——简易涂鸦板-何韬-专题视频课程

HTML5实例教程——简易涂鸦板—6858人已学习 课程介绍 用CANVES制作一个涂鸦板,让初学者初步了解HTML5的语言与功能。 课程收益 快速学会涂鸦板的做法,同时对HTML5有一个初步了解。 讲师介绍...

pkutao
2015/06/02
0
0
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
2018/06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js如何控制table中的某一行动态置顶

两行代码搞定: $('#'+item.roadCode).fadeOut().fadeIn();//获取到需要置顶的行 $(".table").prepend($('#'+item.roadCode)); 其中,fadeOut()方法 作用 --- 从可见到隐藏 如下: prepend(......

码妞
50分钟前
3
0
四种解决Nginx出现403 forbidden 报错的方法

我是在在本地用虚拟机中通过yum安装nginx的,安装一切正常,但是访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log。打开日志发现报错Permission denied,详细报错如下: 1....

dragon_tech
57分钟前
3
0
获取RestResultResponse返回的值

Springboot项目,需要调其他服务的接口,返回值类型是RestResultResponse 打断点的结果集是这个 打印出来的getData(): [{id=3336b624-8474-4dd9-bd5b-c7358687c877, paraNo=104, para=Postpo...

栾小糖
今天
4
0
【小学】 生成10以内的加减法

#!/usr/bin/env python# coding: utf-8from random import randrange# 题目的最大数值R_MAX = 10# 生成的题目的数量R_PAGE = 70# 生成减法列表def get_sub_list():...

Tensor丨思悟
今天
11
0
JavaScript设计模式——适配器模式

  适配器模式是设计模式行为型模式中的一种模式;   定义:   适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修...

有梦想的咸鱼前端
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部