推开HTML5的大门

    xiaoxiao2021-12-03  56

    作者:华清远见讲师

    随着互联网技术的迅猛发展,尤其是移动互联网正发生着日新月异的变化。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”,如下所示:

    <style>

    #mytext

    {

    background-color:yellow;

    }

    </style>

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

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

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

    转载请注明原文地址: https://ju.6miu.com/read-679915.html

    最新回复(0)