html介绍
晴空闲云 664 0

本篇目标

  1. 了解html是什么,能做什么。
  2. 掌握编写第一个网页。
  3. 掌握html网页的文档结构。

内容摘要

本篇介绍了什么是html,然后编写了第一个网页,最后介绍了网页的文档结构。

阅读时间预计10~15分钟。

html是什么

超文本标记语言(英语:Hyper Text Markup Language,简称:html)是一种用于创建网页的标准标记语言。

其中超文本就是指页面内可以包含图片、链接、视频、音频等非文本的内容。标记就是指用特定的标签表示特定的内容,如标题、段落、图片、链接等等。

平时我们经常打开的学校网站、企业网站、百度等等都可以看到html的影子,我们以百度网站为例打开看看。

html介绍

其中导航条上的视频、贴吧、学术就是链接,下面的百度logo就是一张图片,这些和页面其他元素就构成了一个网页。

那么简单总结来看,html就是用来开发网页的,然后可以在浏览器上访问,下面将开始编写我们的第一个网页。

第一个网页

实际上html页面是以后缀html结尾的文件,可以通过浏览器打开,然后浏览器会渲染出网页效果,根据这个我们来编写第一个网页。

1) 新建txt文件

在桌面新建一个记事本 hello.txt 文件,打开并输入内容 "Hello world!",然后保存。

我们做网页怎么搞起了记事本?别急,后面的操作来了。

2) 修改后缀为html

将后缀txt修改为html,如果电脑正常配置了谷歌浏览器为默认浏览器,那么这个文件会变为谷歌浏览器的图标了。

我们双击打开,这会就可以在浏览器上显示了 "Hello world!",如下图所示:

html介绍

从这里我们可以发现,其实网页文件本质上就是一个文档文件,只不过后缀是html而已

至此第一个网页就编写完成了,是不是非常简单呢?

注意:

如果系统隐藏了后缀名,那么修改后缀后文件实际名称为 hello.html.txt,需要显示出后缀名再修改。

网页结构

上面我们做出了第一个网页,只是这个页面感觉好简单的说,就一个"Hello world!",说好的链接、图片、视频、段落、标题呢?

这些东西当然也是可以放到网页上去的,只是说这么多东西,没有一个规则那不是乱套了,所以说html有一个规则来编写这些东西,这个规则我们俗称语法

下面我们看下html最基础的语法,即html网页最基础的结构,请参考如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
    </head>
    <body>
    Hello world!
    </body>
</html>

我们可以在刚才的 hello.html 文件写入这些内容,然后运行看看:

html介绍

效果和刚才的类似,就是标题不一样了,这里先对每行代码进行一下说明:

<!DOCTYPE html> 表示说明我们这个文档类型是一个html文档,固定写法。
<html>...</html> 表示html文档的开始和结束,<html>表示开始,</html>表示结束。
<head>...</head> 表示html文档的头部的开始和结束,一般用来设置网页标题、描述等。
<meta charset="utf-8"> 设置网页编码为utf-8。
<title>...</title> 这个用来设置网页标题,就是浏览器tab上显示的标题。
<body>...</body> 网页正文主体,文字、段落、标题、视频等都在这里面编写。

为了方便理解,我画了一个示例图:

html介绍

因为这边设置了一下网页的标题,所以标题显示就和上个例子不一样了。

然后这边html、header、title、body等都叫做标签,每个标签都有指定的作用。大家这边先对标签有一个概念,后面会再对标签进行详解。

练习:

读者可以尝试修改一下title标签里内容和body标签里的内容,然后访问页面观察看看发生了什么变化。

本篇总结

  1. html是用于编写网页的,编写的网页可以在浏览器上显示。
  2. html文件是一个网页文件,本质是一个文档文件。
  3. html文件有自己的文档结构,如:html、head、title、body等。

练习题

  1. html是什么?
  2. 新建一个网页,在页面输出任意内容,并在浏览器访问。
  3. 尝试修改系统默认的浏览器,观察html文档的图标变化。
  4. html中title标签的作用是什么?
  5. html中body标签作用是什么?
  6. 编写一个网页,页面要符合html文档结构,网页显示内容:"Stay humble, stay hungry." 。
评论区

索引目录