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>分行标签等,这样的标签不多,很容易记住

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.