导读：网页设计、尤其是大名鼎鼎的H5，相信大家都有所耳闻，其实就是我们每天上网时看到的各种网页界面，手机端有它、PC端有它，Ipad也有它，反正哪里都有它，哪儿都会用它，想不想通过此文自己也快速学会制做一个简单的网页？随我来！

一、浏览网页的本质

无论是在PC端，还是移动终端，只要上网，我们就离不开网页的浏览，神马企业营销宣传，会议邀请，当我们打开一个网页或者做一个链接点击操作，就会弹出一个个网页，好的网页设计会给企业或个人带来意想不到的流量和收获。我们看下面两个网页，上面的是PC端某企业的网站页面，我们看到的内容包括文字、图片，还有部分可以跳转的链接。当然，如图2所示的手机端营销宣传或邀请函的H5网页我们也经常看到，其本质和PC端并无差别，有一些网页为了增加酷炫效果，还加入了视频和动图效果。这些网页其实就是用“超文本标记语言（HTML）”等语言撰写的一行行代码。

图1

图2

html有多火，看看下图这位大叔，居然把html语言作为纹身刺在脖子上…….

二、花2分钟用html写一个网页

说一千道一万，不如亲手做一遍，为了让大家看得见、摸得着一个真正的网页，我们一起花2分钟定制开发一个网页，分以下几个步骤：

Step1：新建一个文件名为“江雪”的txt文档

Step2：打开文档，复制粘贴以下代码：

<html>

<head><title>江雪</title></head>

<body>

<center>

<h2>江雪</h2>

作者：柳宗元

<hr color = “blue”>





千山鸟飞绝，万径人踪灭。 

孤舟蓑笠翁，独钓寒江雪。 



</center>

</body>

</html>

Step3：将.txt文件扩展名改为.html文件后保存。

Step4：双击运行“江雪.html”文件，显示出下面的网页界面：

Step5：点击键盘上的“F12”，我们就能看到这个网页的html程序。

好了，就这样，一个内容为“柳宗元.江雪”的网页就被我们用HTML(超文本标记语言)写出来了。这个简单的网页，里面仅包括一些格式整理过的文字，并不涉及图片、链接、文本框、视频等内容，但其本质和我们日常接触的浏览器页面都是一样的，下面让我们结合这个例子再来看看HTML语言到底是如何实现网页开发的。

三、超文本标记语言（HTML）如何应用

刚刚我们用在html语言写的网页文档，的开头和结尾分别是<html>和</html>，需要我们了解两点内容：其一，当我们看到这个开头和结尾的文档时，我们就应该知道它是用html语言写的程序；其二，html语言开头和结尾是成对出现的，并且结束标识多了一个“/”。

{!– PGC_COLUMN –}

<head><title>江雪</title></head> —–网页名称

<body> ……….</body> —–内容体

我们再来看看用html语言写的网页内容的应用情况：

1.<center> —–居中

2.<h2>江雪</h2> —–标题“江雪”红色显示

3.作者：柳宗元 —–作者，“柳宗元”，加粗字体

4.<hr color = “blue”> —–蓝色分隔线

5. —–段落

6.主体内容

——–加粗

—–斜体，绿色，3号字体

千山鸟飞绝，万径人踪灭。 ——段落内，换行

孤舟蓑笠翁，独钓寒江雪。

—–斜体结束符

—–加粗结束符。

四、再看“超文本标记语言（HTML）”

我们最后对html做个总结：HTML就是一门语言，所谓超文本的意思就是不止是文本，还可以包含图片，链接，音乐，甚至程序等非文字元素。HTML和我们日常交流使用的语言并没有本质区别，只不过HTML则是用于人与浏览器之间的交流的语言而已。要让浏览器展示出我们期望的酷炫效果，我们就得学会用HTML语言来告诉浏览器，在页面的哪个位置，放置一个什么控件。