新建一个HTML项目

正式开发,我们都建专门的开发目录。现在我们初学,先不用管那么多,直接桌面上建个叫做html的文件夹就行了。然后把它拖到你最喜爱的编辑器中。

里面再新建一个叫做index.html的文件。这里的index不是乱取的,它在程序世界中是有特殊含义的,它表示这是一个网站的首页

基本格式

我们刚才说了,HTML是由标签组成的,标签其实就是一些带有尖括号的英文单词。如果你英文不太好,那也不要紧。HTML常用的就那么几个常见单词,多写个几次,很快就熟练掌握了。

html标签

那么我们先来写第一个标签,这个标签的名字,就叫html

<html>

</html>

HTML的最基础格式,就是要有一对html标签,注意下面这个位置的标签有一个/。这个/的意思,表示这个标签结束了。

head和body标签

然后我们再来写其他的标签。注意下了,其他所有的HTML标签,都必须写在这一对html标签中。

<html>
    <head>
    </head>

    <body>
    </body>
</html>

好,我们再来认识这两个非常重要的标签了。HTML就像一个人一样,它分成两个部分,头部(head)身体(body)

title标签

头部里面,我们再来放一个叫做title的标签。它就是整个网站的标题了。

<head>
    <title>Hello,各位,我就是标题啊!</title>
</head>

内容

身体里面,我们放点实际内容。

<body>
    欢迎你学习HTML哦!
</body>

编码

这样一个基本的HTML页面就已经做完了,直接双击这个文件打开就行。如果你的页面出现了乱码,在head中还需要加一点点代码。

<head>
    <meta charset="utf-8">
    <!-- ... -->
</head>

这个代码的作用,是为了设定浏览器的编码。设定后,浏览器就能正确的显示中文了。现在初学,如果你不懂编码是啥意思,那也先不用管那么多。反正照着东哥的写,总是不会错的?。

观察浏览器

注意看下,我们所书写的title,显示在了浏览器的标签页这个地方。 而body中写的内容,就显示到了浏览器主体里。

恭喜你,我们已经一起完成了人生的第一个HTML页面了。

完成

最终完成的完整代码

<html>
<head>
    <!-- 编码一定要写哦,不然中文会乱码! -->
    <meta charset="utf-8">
    <title>Hello,各位,我就是标题啊!</title>
</head>
<body>
    欢迎你学习HTML哦!
</body>
</html>

总结

可以看到,HTML其实是由各种标签组成的。 它的结构包括头部(head)、和身体(body),其中头部里网页的一些基础信息,身体部分放网页展现给用户看的具体内容。

那我们来尝试修改下titilebody里面的内容,然后重新刷新浏览器,可以看到浏览器中会跟着发生变化。 好了,这一节你学会了吗?学会了就赶紧继续看下一节吧,我们一起来学习更多更好玩的HTML标签。