HTML简介,文档基本结构
什么是HTML
HTML是一种用来描述网页的超文本标记语言,英文为Hyper Text Markup Language。我们可以借助一个完整的文档结构来看一看。
HTML文档基本结构
大家可以打开上一节中介绍的vscode编辑器,然后在左侧栏资源管理器里的工作区新建一个HTML文件,可以随便命名,比如test.html,如果没有工作区,就新建文件夹,然后在工具栏的“文件”中将文件保存为工作区。
单击新建的"test.html"文件,右边的代码编辑区就会打开一个空的html编辑区域,将输入法转换成英文,然后输入“!”,vscode会自动补全html代码,是一个基本的文档结构(如果不能自动补全,可以参考上一章的vscode的插件安装部分)。如下:
文档实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>每个网页都应当包含一个h1标题</h1>
<p>p标签标记段落</p>
</body>
</html>
示例解析
上面的代码就是HTML文档的基本结构了,大致可以分为五个部分。
1、<!DOCTYPE html> 声明文档类型为html,可以不用管
2、 <html> </html> 介于这两者之间的文本用来描述网页,可以不用管
3、 <head></head> 包含的文本用于指示浏览器在何处找到css、js等信息,后面会重点介绍
4、 <body></body> 显示内容的地方,为我们编写的HTML代码的主要区域
5、 <h1></h1> body中的h1表示大标题,并不是html文档所必须的,但是作为网页使用,应当要有个h1标题,便于搜索引擎的抓取,这也是鄙人将其罗列为HTML文档的重要部分的原因。
试一试
大家可以在vscode的代码编辑区域右击鼠标,然后单击弹出的菜单中的"Open In Default Browser",这是用电脑默认的浏览器打开文档,形成一个本地的网页,显示的内容如下:
每个网页都应当包含一个h1标题
p标签标记段落
HTML文档的后缀名
- .html 较为常用
- .htm
HTML标签
- 标签用'<'和'>'括住
- 标签通常成双成对出现,比如<title>和</title>
- 成对出现的标签分为开始标签和结束标签两种,如<p>和</p>
- 也有不成对出现的标签,比如上面的<meta>,还要<br>分行标签等,这样的标签不多,很容易记住