第一节:基本的html文件结构

简单的事情重复做,你就是专家。

在开始本节前,我们先复习下上一章中的内容:在计算机的任意位置上,新建index.html文件,并输入<h1>Hello World!<h1>。然后在当前目录下,执行git bash,输入http-server来启动这个服务。

然后按提示输入相应的网址,我们将得到如下界面。

/WebCourse2017/assets/image/chapter2/2.png

虽然我们输出了Hello World!,但这距离规范的html语句却相差甚远。同样是Hello World!,规范的html语句,是这样写的:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

其实你完全可以不管上面的代码都是什么意思,只需要知道有如下对应关系就可以了。

/WebCourse2017/assets/image/chapter2/4.png

其它的,都是固有的写法。因为是固有的写法,所以当我们以后再新建html文件时,直接将上面的代码copy过去就可以了。

如果你在会使用的前提下,还想知道它都代表了什么意思,请阅读以下选学内容:

选学

它有两大部分组成: /WebCourse2017/assets/image/chapter2/3.png

第一部分,声明文档类型。 如果你不清楚它是什么东西,或是不想清楚它是什么东西的话,那么需要知道它是固定写法就可以了。

html文档类型分为htmlhtml5html5是新的规范,兼容html,本课程中,我们使用的正是html5。有了这行声明,浏览器就知道按照什么规范来对html进行解析了。

https://zhidao.baidu.com/question/363882088.html


第二部分: html代码主体部分。

html代码部分,又分为head部分和body部分。在head中,我们定义了两项内容。第一项是个自闭合的<meta>标签, 它定义了charset="UTF-8",来告诉浏览器我们的文件所使用的编码格式(我们在课程中,全部使用utf-8),这样做能够有效的防止页面乱码。 body部分,是html代码的主体部分,我们在大多数代码,都要书写在这里。

参考:http://www.runoob.com/html/html-intro.html