Web基础 – HTML5基础构成

发布于 2025-05-21  90 次阅读


HTML 是一种超文本标记语言,标记语言是一套标记标签,标签是由尖括号包围的关键字;

标签有两种表现形式:

① 双标签,例如:<html></html>

② 单标签,例如:<img>

以下是标准的 HTML 格式

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=2.0">
	<title>Document</title>
</head>

<body>
	Hello World! This is a standard HTML format!
</body>

</html>

DOCTYPE 声明

<!DOCTYPE html> 声明了文档类型为 html,DOCTYPE 是 document type(文档类型)的缩写。

( 注意:<!DOCTYPE html> 不是标签!)

<!DOCTYPE html>

html 标签

定义 HTML 文档, <html> 标签是 HTML 文档的根元素,其中 lang="en" 属性指定文档的主要语言为英语,这对于 SEO优化 和辅助阅读很重要。

<!DOCTYPE html>
<html lang="en">
</html>

head 标签

<head> 标签用于定义文档头部,包含文档的 元数据(metadata)标题(title)等属性和信息,这些信息不会直接显示在页面上。

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=2.0">
	<title>Document</title>
</head>

body 标签

<body> 标签定义文档的主体,包含文档的所有内容,这部分内容会在浏览器中呈现。

<!DOCTYPE html>
<html>
<head>
	<title>Standard HTML Format</title>
</head>
<body>
	<p>Hello World! This is a standard HTML format!</p>
</body>
</html>

title 标签

<title> 标签用于设置文档的标题,这个标题会显示在浏览器标签页上。

<title> 标签是 <head> 标签中唯一必须要求包含的东西,<title>有利于 SEO 优化。

<!DOCTYPE html>
<html lang="en">
<head>
	<title> head标签中必须有title标签 </title>
</head>

<body>
</body>
</html>

meta 标签

<meta> 标签用来描述一个HTML网页文档的属性、关键词等,

例如:charset="UTF-8" 定义文档的字符编码为 UTF-8,该编码支持多语言字符,确保文本显示正确;

例如:name="viewport" 定义网页在不同设备上的显示方式,width=device-width 设置视口宽度为设备的宽度,nitial-scale=2.0 设置初始缩放比例为 2 倍,意味着页面在加载时会放大。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2.0">

VSCode 生成浏览器文件格式 .html 的快捷键

! + Enter

VSCode 常用快捷键列表

① 代码格式化:Shift + Alt + F

② 向上或向下移动一行:Alt + UpAlt + Down

③ 快速保存:Ctrl + S

④ 快速查找:Ctrl + F

⑤ 快速替换:Ctrl + H