二、HTML学习笔记（HTML标签-上）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46108997/article/details/136496750

title: 二、HTML学习笔记（HTML标签-上）
date: 2024/02/02

HTML 语法规范

基本语法概述

HTML 标签是由尖括号包围的关键词，如：<html>
绝大部分标签是成对出现的，我们称之为双标签，第一个称为开始标签，第二个称为结束标签，并且结束标签需要加 /，如：<html></html>、<div></div>
有一些特殊标签是单个出现的，无需结束标签，我们称之为单标签，只需要自身添加 / 即可，如：<br />

01-HTML 语法规范.html
```
<html></html>
<div></div>
<br />
```

标签关系

标签关系可以分为两类：包含关系和并列关系

包含关系
```
<head>
	<title></title>
</head>
```
并列关系
```
<head></head>
<body></body>
```

HTML 基本结构标签

第一个 HTML 网页

每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。

HTML 页面也被成为 HTML 文档

表签名	定义	说明
`<html>`	HTML标签	页面中最大的标签，称为`根标签`
`<head>`	文档的头部标签	其中必须包含 `title` 标签
`<title>`	文档的标题标签	设置网页标题
`<body>`	文档的主体标签	元素包含文档的所有内容，页面内容基本都是放到 `body` 标签中

02-第一个页面.html

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		键盘敲烂，月入过万
	</dody>
</html>

网页开发工具`（ Visual Studio Code）`

VSCode 的使用

双击打开软件
新建文件（Ctrl + N）
保存文件（Ctrl + S），注意保存为 html 格式
输入 ! 生成页面骨架结构，注意是英文的感叹号
右键选择 Open In Defult Browser 或 Open In Other Browser

03-vscode创建页面.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>我利用vscode创建的第一个页面</title>
</head>
<body>
	键盘敲烂，月入过万
</body>
</html>

VSCode 插件以及快捷键

略

新增标签含义

<!DOCTYPE> 标签，文档类声明，作用就是告诉浏览器使用哪个版本的 HTML 来解析代码
<html lang="en"> ，lang=“en" 作用是定义当前文档的显示语言，en：英文、zh-CN：中文
<meta charset="UTF-8">，charset="UTF-8" 作用是定义当前文档使用的字符集，UTF-8、GB2312、GBK、BIG5，其中 UTF-8 被称为万国码

HTML 常用标签

标签语义

学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是记住每个标签的含义，即这个标签是用来做什么的

根据标签的语义，在合适的地方合理使用标签，可以让页面结构更加清晰

标题标签

为了使网页更具有语义化，我们通常会在页面中使用到标题标签，HTML 提供了 6 种不同等级的标题标签，从大到小依次是<h1> ~ <h6>

<!-- 标题标签独占一行，显示的时候不与其他标签显示在一行-->
<h1>我是一级标题标签</h1>

语义：在页面中作为标题使用，根据标题大小和重要程度递减

04-标题标签.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>标题标签<