您的位置：首页 > Web前端 > HTML5

三天学会HTML5 之第一天

2016-02-02 11:29 585 查看
引言HTML5一直是非常热门的话题，因此此系列文章主要从一些基本功能开始讲起，逐步深入了解HTML5的新概念。首先了解一些基本的术语和概念。SGML,HTML,XML三者之间的区别
Doc类型是什么
HTML5有什么新特点新优势。
学习HTML5在开始之前首先来区分SGMC，HTML,XML三者的概念。SGML即StandardGlobalizedMarkupLanguage是用来定义标准的标记语言，简单的说，就是定义文档的元语言。HTML是基于SGML的超链接语言，可以用于创建Web页面。在DTD内部定义了标签的规则，DTD就是使用SGML语言创建的。XML是从SGML衍生而来的，它主要处理互联网方面的需求，HTML有很多限制，XML是SGML的子集，可用于表示数据。

Doc类型

创建HTML页面时会自动生成以下代码：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.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非常简单：
<!DOCTYPEhtml>

HTML5新特性


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

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

HTML5定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。注意：这些标签不提供特殊的渲染功能，仅仅使的HTML文档结构更具有意义。

Lab2_新的输入属性

新类型值之前为了获得不同的UI元素，如DatePicker,rangePicker,colorPicker等，会使用不同的类库。HTML5为输入元素引入了新属性“type”，看以下示例：

Number

<inputtype="number"name="MyNuberElement"id="MyNumberElement"/>




Range
<inputtype="range"name="MyRangeElement"id="MyRangeElement"/>




Color
<inputtype="color"id="MyColorElement"name="MyColorElement"/>



Date
<inputtype="date"id="MyDateElement"name="MyDateElement"/>



Time
<inputtype="time"id="MyTimeElement"name="MyTimeElement"/>




Datetime-local
<inputtype="datetime-local"id="MyDateTimeLElement"name="MyDateTimeLElement"/>




DateTime(Alsoincludetimezone)
<inputtype="datetime"id="MyDateTimeElement"name="MyDateTimeElement"/>



Month
<inputtype="month"id="MyMonthElement"name="MyMonthElement"/>



Week
<inputtype="week"id="MyWeekElement"name="MyWeekElement"/>



下面列举一些有用的属性：
Autofocus该属性表示在页面加载时，可初始化焦点。
…

<labelfor="birthMonth">BirthMonth</label>

<inputtype="month"id="MyMonthElement"name="MyMonthElement"autofocus/>

…
上面代码实现了，当页面加载时，鼠标聚焦于“MyMonthElement”控件，“autofocus”则绑定到多控件。

Placeholder新的输入控件

<inputtype="text"placeholder="EnterValue"id="MyPlaceHolderControl"

name="MyPlaceHolderControl"/>


实验3——了解HTML5Datalist控件
DataList是HTML5中的新标签，能够在输入框中，实现自动完成功能。
可通过3个步骤实现：
1.创建DataList
<datalistid="Hobbies">

<option>Readingbooks</option>

<option>Watchingmovies</option>

<option>Playinggames</option>

</datalist>

2.创建输入控件，绑定List
<inputtype="text"name="TxtHobbies"value=""list="Hobbies"/>

3.运行测试

实验4输出元素
HTML5中引入标准的语义“Output”元素
<divoninput=

"document.getElementById(MyOutputElement).value=

(document.getElementById('input1').valueAsNumber)+

(document.getElementById('input2').valueAsNumber)">

<inputid="input1"name="input1"type="number"value="1">+

<inputid="input2"name="input2"type="number"value="2">=

<outputid="MyOutputElement">3</output>

</div>

实验5,6,7-学习HTML5验证功能
验证是开发应用最重要的功能，之前都会使用JQuery验证等功能，在新版的HTML5中提供了验证支持。Lab5—使用输入元素的type属性，实现验证功能：
<form>

<table>

<tr>

<td>

<label>E-mail:</label>

<inputtype="email"id="email"name="email"/>

<label>URL:</label>

<inputtype="url"id="url"name="url"/>

<label>Telephone</label>

<inputtype="tel"id="phone"name="phone"/>

<label>NumberDemo:</label>

<inputtype="number"name="MyNumberElement"id="MyNumberElement"/>

<label>RangeDemo:</label>

<inputtype="range"name="MyRangeElement"id="MyRangeElement"/>

<label>ColorDemo</label>

<inputtype="color"id="MyColorElement"name="MyColorElement"/>

</td>

<td>

<label>DateDemo</label>

<inputtype="date"id="MyDateElement"name="MyDateElement"/>

<label>TimeDemo</label>

<inputtype="time"id="MyTimeElement"name="MyTimeElement"/>

<label>DateTimeLocalDemo</label>

<inputtype="datetime-local"id="datetime"name="datetime"/>

<label>MonthDemo</label>

<inputtype="month"id="month"name="month"/>

<label>WeekDemo</label>

<inputtype="week"id="MyWeekElement"name="MyWeekElement"/>

<divstyle="text-align:right">

<inputtype="submit"value="validate"/>

</div>

</td>

</tr>

</table>

</form>

2.运行测试

实验6-使用自定义验证属性实现验证
1.创建输入控件
<form>

<label>Email</label>

<inputtype="email"name="TxtEmail"

id="TxtEmail"required/>

<label>UserName</label>

<inputtype="text"name="username"

id="username"pattern="[a-zA-Z]{5,}"/>

<label>Age</label>

<inputtype="number"name="TxtAge"

id="TxtAge"min="10"max="50"/>

<br/><inputtype="submit"value="Register"/>

</form>

输出：


实验7——自定义验证
通过处理oninvalid事件完成自定义HTML5验证功能。
1.创建输入控件，并绑定验证属性，添加自定义错误提示。
<form>

<label>Email</label>

<inputtype="email"name="TxtEmail"

id="TxtEmail"required/>

<spanclass="MissingEmailSpaninvalid">EmailMissing</span>

<spanclass="InvalidEmailSpaninvalid">Invalidemail</span>

<label>UserName</label>

<inputtype="text"name="username"

id="username"pattern="[a-zA-Z]{5,10}"/>

<spanclass="InvalidUserNameSpaninvalid">Usernamenotmatchingwithpattern</span>

<label>Age</label>

<inputtype="number"name="TxtAge"

id="TxtAge"min="10"max="50"/>

<spanclass="AgeIsNotInRangeSpaninvalid">Agemustbebebetween10and50</span>

<spanclass="InvalidAgeSpaninvalid">InvalidAge</span>

<br/><inputtype="submit"value="Register"/>

</form>

2.添加style标签，创建CSS来隐藏错误信息
<style>

.invalid{

display:none;

}

</style>

3.点击提交按钮，隐藏错误信息
<inputtype="submit"value="Register"onclick="$('.invalid').hide();"/>

4.当输入控件包含非法值时触发
<inputtype="email"name="TxtEmail"id="TxtEmail"oninvalid="OnInvalidEmail();"required/>

5.创建EventHandlerJavaScript函数
functionOnInvalidEmail()

{

event.preventDefault();

varelement=event.srcElement;

varvalidity=element.validity;

if(validity.valueMissing){

$('.MissingEmailSpan').show();

}

elseif(validity.typeMismatch){

$('.InvalidEmailSpan').show();

}

}
event.preventDefault();会组织默认行为的发生，将错误信息置顶
event.srcElement；获取包含非法值的控件，如上的Emailtextbox;
element.validity;包含控件的验证信息，如valueMissing，typeMismatch，badInput等。
6.运行


实验8——HTML5的缓存技术
如下是简答的缓存Demo1.创建新的ASP.NETWeb应用2.添加Style.css,在Block中添加以下类：
.DivStyle{

background-color:silver;

}

3.创建manifest文本文件：
CACHEMANIFEST

#ver1

CACHE:

/Styles/Style.css

4.创建需要缓存的文件
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="MyPage.aspx.cs"Inherits="MyPage"%>

<!DOCTYPEhtml>

<htmlmanifest="MyCache.txt">

<headrunat="server">

<title></title>

<linkhref="Styles/Style.css"rel="stylesheet"/>

</head>

<body>

<formid="form1"runat="server">

<divclass="DivStyle"id="MyDiv">

Hi,Executioncountis1

</div>

</form>

</body>

</html>

5.运行

6.设置离线，查看结果

7.刷新页面8修改MyPage.aspx文件，修改Mydiv
<divclass="DivStyle"id="MyDiv">

Hi,Executioncountis2

</div>

9.运行程序10.修改manifest文件
CACHEMANIFEST

#ver3

CACHE:

/Styles/Style.css

11再次刷新网页
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航