推开HTML5的大门

发布时间:2019-03-13 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了推开HTML5的大门脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!

作者:华清远见讲师

随着互联网技术的迅猛发展,尤其是移动互联网正发生着日新月异的变化。html5作为连接传统互联网与移动互联网的桥梁,已经成为未来互联网发展的主流。要想学好html5,首先要知道以下几点:

1.什么是html5

要想深入学习一门语言,或者想要从事一种行业,首先要知道它是什么。html5是W3C(万维网联盟)和WHATWG(网络超文本应用技术工作组)合作产生的,不是区别于HTML的,但它是最新的HTML标准,它的目标是提供所有内容,而不是需要像falsh,silverlight等额外插件的支持。

2.既然html5是最新的HTML标准,那它与前面的HTML标准有什么不同?

接触过HTML的人都知道,一个典型的WEB页面包含头部,脚部,导航,中心区域,侧边栏。但是这些页面结构要想呈现出来,HTML4及其以前需要使用DIV标签,但是在html5中,这些DIV标签被元素名称所取代,这就使得HTML更加可读,形成页面结构的html5元素的名称主要有:<header>:代表HTML的头部数据,<footer>:页面的脚部区域,<nav>:页面导航元素,<article>:自包含的内容,<section>:使用内部article定义区域或者把分组内容放到区域里,<aside>:代表页面的侧边栏内容;HTML4及其以前的页面头部会包含很长的声明,而html5只需要放入<!DOCTYPE HTML>,浏览器就能自动识别它是HTML文档,同时html5的标签也能够正常使用,否则html5标准下,它无法正常工作;相对于HTML4及其以前版本,html5增加了多个元素标签,如对音视频的支持等。

3.哪些浏览器支持html5

现在的主流浏览器都支持,如Safari,FireFox,Chrome,Opera,ie等。

4.刚才我们说过html5增加了多个元素标签,那么html5中有哪些不同的新的表单元素类型?

Color:显示颜色选择对话框,如<input type=”color” name=”favcolor”>

Date:显示日历对话框,如<input type=”date” name=”dayq”>

Datetime-local:显示含有本地时间的日历,如<input type=”datetime-local” name=”daytimey”>

Email:创建含有email校验的HTML文本框,如<input type=”email” name=”email”>

Time:只能输入时间,如<input type=”time” name=”timey”>

Url:设置URL的验证类型为url,如<input type=”url” name=”seturl”>

Range:显示控制范围,如<input type=”range” min=”0” max=”10” step=”2” value=”5>

Telephone:使用文本框接受电话号码,如<input type=”tel” name=”tele”>

Number:使用文本显示数字范围,如<input type=”number” name=”quantity” min=”1” max=”8”>

Search:让文本框作为搜索引擎,如<input type=”search” name=”engine”>

5.html5中的canvas是什么?以及如何使用Canvas来画一条简单的线?

Canvas是HTML中你可以绘制图形的区域。要想画一条简单的线,要做3步:首先是定义Canvas区域,其次是获取访问canvas上下文区域,第三是绘制图形。

定义Canvas区域:<canvas id=”mycanvas” width=”600” height=”400” style=”border:1px solid #000000”></canvas>

获取访问canvas上下文区域:var c=document.getElementById(“mycanvas”);

var ctx=c.getContext(“2d”);

绘制图形:调用“move”方法并从一个点开始,使用线条方法绘制线条然后使用stroke方法结束。如:ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();

6.CSS是什么?CSS中的选择器是什么?以及如何使用ID值来应用一个CSS样式?

CSS的全称为cascading style sheets,级联样式表,CSS的选择器在我们想要应用一个样式的时候,帮助我们去选择元素。如,简单的被命名为”instro”的样式,他适用于HTML元素显示红色背景

<style>

.intro{

background-color:red;

}

</style>

应用上面的”intro”样式给div,我们可以使用”class”选择器:

<div class="intro">

<p>My name is Shivprasad koirala.</p>

<p>I write interview questions.</p>

</div>

那么如何使用ID值来应用一个CSS样式呢?首先假设,你有一个HTML段落标签,使用id是”mytext”,就和下面的片段中显示的那样,

<p id="mytext">This is HTML interview questions.</p>

可以使用”#”选择器和”id”的名字创建一种样式,并把CSS值应用到段落标签中,因此应用样式到”mytext”元素,我们可以使用”#mytext”,如下所示:

#mytext

{

background-color:yellow;

以上6点,只是推开了我们走向HTML开发的大门,要想深入了解HTML,还需要我们不断的努力,去探索与实践,才能在HTML的世界自由翱翔。

文章选自华清远见嵌入式培训

>>>更多优秀技术博文每日更新

总结

以上是脚本之家为你收集整理的推开HTML5的大门全部内容,希望文章能够帮你解决推开HTML5的大门所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。