育知同创-专注移动互联网,专注强师高品质课程|Android培训|HTML5培训|Java培训|VR培训

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 深圳 大连 武汉

▶ 您现在的位置:首页 > 视频教程 > 《Mars亲授HTML5开发视频教程》第02讲-第一个HTML程序

《Mars亲授HTML5开发视频教程》第02讲-第一个HTML程序

时间:2016-03-08 22:23:27  来源:育知同创  作者:育知

  •  

     
     

    开发工具的原则

    工欲善其事必先利其器,开发程序的之前最重要的是找一个趁手的工具,可能有些朋友已经在网络上了解过,可以用于HTML开发的工具非常的多,但是其中名气最大,资历最老的,功能也最强大的就是Adobe公司的DreamWeaver。

     

    这个工具非常的牛叉,号称可以让不懂HTML语言的人也能够做出漂亮的网站,是一种所见即所得的开发工具。对于初学者而言,只需要使用鼠标把控件拖入到窗口之中,再放一放图片,或者是选一选背景,就可以做出非常漂亮的网页。但是这对于初学者而言,这个工具的自动化实在是太高了,把大量的开发程序的细节都隐藏了起来,这就对大家掌握HTML的基础概念带来了很大的障碍。就比如说,我们在最开始学习算数的时候,是绝对不能使用计算器的,否则可能这辈子也无法学会让外国人闻风丧胆的乘法口诀的。

     

    那么我们为大家准备的开发工具是什么呢?当然是同样的功能强大,而且是逼格满满的Sublime Text。大家看看这样的界面,这才是程序员应该用的开发工具,灰黑色的背景,高亮的语法提示,闪电般的启动速度,让人有一种随便敲进去几行代码就能分分钟让导弹发射的感脚,简直酷毙了!当然最关键的还是这样牛叉的开发工具居然是不要钱的!

     

    大家可以到我们公司的官方网站的下载专栏下载,也可以在我的微信公众号当中回复Sublime,就可以看到下载的地址。安装非常的简单,双击文件,一直点击NEXT就安装好了,如果你连这个软件都装不好,那么智商也就基本告别编程了!

     

    工具准备好了,是不是感觉写代码的欲望已经憋得相当难受了?已经喷薄欲出了?让我们开始愉快的写代码吧?等等我们要从哪里开始呢?当然是从HTML最核心的概念--标签开始!

     

    什么是标签呢?所谓的标签就是用来修饰内容的代码,让我们来看一个最简单的例子。如果我们希望显示一行斜体的Hello World,那么首先我们需要有内容,也就是Hello这一样字,然后在这行字的两端分别加上和,这就是一个HTML标签,它的含义就是标识着在他们中间的内容将会被斜体显示。这行代码被发送到浏览器之后,浏览器将会识别其中的HTML标签和文本,最终显示出一行斜体的Hello World!这就是HTML标签最基本的运行方式。也就是说我们负责编写代码,代码由以下的两个部分组成:

    内容:可能是文本,也可能是超文本的数据,例如图片、音频和视频等等,这些内容最终会在浏览器当中显示出来。

    标签:标签本身不会在浏览器当中显示出来,但是标签可以用来改变内容的显示形式,例如说文本加粗、斜体或者是图片的大小等等;

     

    标签通常来说都有开始和结束两个部分组成,前面的是标签的开始,后面的是标签的结束,被加在这中间的内容,都会受到标签的影响而变成斜体。当浏览器读取HTML代码的时候,就会解析判断究竟是哪一个标签,以及他们修饰的内容分别是什么,然后在浏览器当中以合适的方式显示出来。这就是HTML代码运行的基本机制。

     

    在了解了标签的基本作用之后,下面让我们看看一个网页的基础框架结构。所谓的基础框架,指的就是我们在开发每一个网页都会用到的内容,所以请大家特别的注意。

     

    一个网页首先需要一个标签将这个网页当中的所有内容包含进去,这个标签本身只是用于说明在其中包含的内容都是HTML代码,没有什么其他的作用。 HTML标签当中包含有另外两个标签,第一个是标签,另外一个是标签,这两个标签将整个网页分成了两个部分,第一是头部,第二是身体。具体是什么意思呢?举个现实当中的例子给大家解释一下,比如说我们现在去邮寄一封信,那么就必须写好信封,包括邮政编码,收件人地址和发件人的地址, 然后再把写好的信塞入到信封当中,就形成了一封完整的信。如果把一封信看成是一个HTML文件,那么head标签当中的内容就相当于是信封,而body当中的内容就是信的正文。

     

    在日常的开发当中head标签当中的内容通常用于对整个HTML网页进行设置,比如说网页是否能够显示中文,网页的标题是什么。而body标签当中的内容才是真正的要显示在浏览器当中供用户观看的内容。下面我们就在head标签和body标签当中分别加入内容,让我们的网页运行起来!

     

    首先在head当中可以加入标签,这个标签的作用是将其中包裹的内容显示在浏览器的标题栏当中。 其次我们就可以在body标签当中加入内容了,加入什么呢?当然是一行牛逼闪闪的Hello World!

    全部写好之后就可以用你喜欢的浏览器把它运行起来了,比如Chrome,Firefox之类的,神马?你问只有IE怎么办? 负分!滚粗!赶紧去给我把Chrome、Firefox和Opera装起来!

     
     
    往期回顾

    《Mars亲授HTML5开发视频教程》第00讲-课程综述

    《Mars亲授HTML5开发视频教程》第01讲-学习方法





上一篇:《Mars亲授HTML5开发视频教程》第01讲-学习方法

下一篇:《Mars亲授HTML5开发视频教程》第03讲-文本标签


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号