每天15min-HTML5(2)-第一个HTML程序

来源：互联网发布：时时彩彩票精准算法编辑：程序博客网时间：2024/05/16 14:08

工欲善其事必先利其器，开发程序的之前最重要的是找一个趁手的工具，可能有些朋友已经在网络上了解过，可以用于HTML开发的工具非常的多，但是其中名气最大，资历最老的，功能也最强大的就是Adobe公司的DreamWeaver。这个工具非常的牛叉，号称可以让不懂HTML语言的人也能够做出漂亮的网站，是一种所见即所得的开发工具。对于初学者而言，只需要使用鼠标把控件拖入到窗口之中，再放一放图片，或者是选一选背景，就可以做出非常漂亮的网页。但是这对于初学者而言，这个工具的自动化实在是太高了，把大量的开发程序的细节都隐藏了起来，这就对大家掌握HTML的基础概念带来了很大的障碍。就比如说，我们在最开始学习算数的时候，是绝对不能使用计算器的，否则可能这辈子也无法学会让外国人闻风丧胆的乘法口诀的。
那么我们为大家准备的开发工具是什么呢？当然是同样的功能强大，而且是逼格满满的Sublime Text。大家看看这样的界面，这才是程序员应该用的开发工具，灰黑色的背景，高亮的语法提示，闪电般的启动速度，让人有一种随便敲进去几行代码就能分分钟让导弹发射的感脚，简直酷毙了！当然最关键的还是这样牛叉的开发工具居然是不要钱的！
工具准备好了，是不是感觉写代码的欲望已经憋得相当难受了？已经喷薄欲出了？让我们开始愉快的写代码吧？等等我们要从哪里开始呢？当然是从HTML最核心的概念--标签开始！
什么是标签呢？所谓的标签就是用来修饰内容的代码，让我们来看一个最简单的例子。如果我们希望显示一行斜体的Hello World，那么首先我们需要有内容，也就是Hello这一样字，然后在这行字的两端分别加上<i>，这就是一个HTML标签，它的含义就是标识着在他们中间的内容将会被斜体显示。这行代码被发送到浏览器之后，浏览器将会识别其中的HTML标签和文本，最终显示出一行斜体的Hello World！这就是HTML标签最基本的运行方式。也就是说我们负责编写代码，代码由以下的两个部分组成：
内容：可能是文本，也可能是超文本的数据，例如图片、音频和视频等等，这些内容最终会在浏览器当中显示出来。
标签：标签本身不会在浏览器当中显示出来，但是标签可以用来改变内容的显示形式，例如说文本加粗、斜体或者是图片的大小等等；
标签通常来说都有开始和结束两个部分组成，前面的<i>是标签的开始，后面的</i>是标签的结束，被加在这中间的内容,都会受到标签的影响而变成斜体。
当浏览器读取HTML代码的时候，就会解析判断究竟是哪一个标签，以及他们修饰的内容分别是什么，然后在浏览器当中以合适的方式显示出来。这就是HTML代码运行的基本机制。
在了解了标签的基本作用之后，下面让我们看看一个网页的基础框架结构。所谓的基础框架，指的就是我们在开发每一个网页都会用到的内容，所以请大家特别的注意。
一个网页首先需要一个<html></html>标签将这个网页当中的所有内容包含进去，这个标签本身只是用于说明在其中包含的内容都是HTML代码，没有什么其他的作用。 HTML标签当中包含有另外两个标签，第一个是<head></head>标签，另外一个是<body></body>标签，这两个标签将整个网页分成了两个部分，第一是头部，第二是身体。具体是什么意思呢？举个现实当中的例子给大家解释一下，比如说我们现在去邮寄一封信，那么就必须写好信封，包括邮政编码，收件人地址和发件人的地址，然后再把写好的信塞入到信封当中，就形成了一封完整的信。如果把一封信看成是一个HTML文件，那么head标签当中的内容就相当于是信封，而body当中的内容就是信的正文。
在日常的开发当中head标签当中的内容通常用于对整个HTML网页进行设置，比如说网页是否能够显示中文，网页的标题是什么。而body标签当中的内容才是真正的要显示在浏览器当中供用户观看的内容。下面我们就在head标签和body标签当中分别加入内容，让我们的网页运行起来！
首先在head当中可以加入<title></title>标签，这个标签的作用是将其中包裹的内容显示在浏览器的标题栏当中。其次我们就可以在body标签当中加入内容了，加入什么呢？当然是一行牛逼闪闪的Hello World！
全部写好之后就可以用你喜欢的浏览器把它运行起来了，比如Chrome，Firefox之类的，神马？你问只有IE怎么办？负分！滚粗！赶紧去给我把Chrome、Firefox和Opera装起来！

自学Mars老师的HTML5视频教程第一季第二集--第一个HTML程序。

代码地址：https://github.com/HXQWill/Quan_Mars_HTML/blob/master/firstHtml.html

0 0