一、基本标签
1、HTML 结构
HTML CSS JS 三者之间的关系
HTML的主要结构，由html head body 构成
<!-- 这里是告诉浏览器这是一个 html网页 -->
<!DOCTYPE html>
<!-- html 的标签都是一对一对的 这里是整个 <html> 的开始，它会以 </html> 结尾 -->
<html>
<!-- 这里是html的头部，主要用户写文档的类型、定义样式、导入CSS/JS 等相关操作 -->
<head>
</head>
<!-- 这里是html的身体，用户所看到的文档内容相关 后面会有一些标签来帮助我们编写html网页-->
<body>
</body>
</html>通常我们需要给一个html网页定义语言，可以在html 中加入 lang="zh-CN"
<!-- 在html标签内添加 lang="zh-CN" 可以告诉浏览器这是一个中文网页 -->
<html lang="zh-CN">
<head>
</head>
<body>
</body>
</html>
<!-- 当然在这里面也可以添加其他国家语言，例如英语lang="en" -->
<html lang="en">
<head>
</head>
<body>
</body>
</html>
<!-- 香港的可以设置为lang="zh-HK"，其他国家语言可以自行百度 -->2、 head 标签
通过上一小节可以知道head标签是比较特殊的，事实上仅有小部分特殊标签才能放在head标签内。其他大部分标签都是放在body里面的。
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 头部标签 -->
<head>
</head>
<!-- 身体标签 -->
<body>
</body>
</html>2.1、title 标签
title这个标签唯一的作用仅仅只是定义网页的标签,展示图如下。
- title属性的内容是提供给用户看的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>我是测试网页</title>
</head>
<body>
</body>
</html>
2.2、 meta 标签
meta标签一般用于定义页面的特殊信息，例如：关键字、页面描述等。这些不是给用户看的，而是给我们的搜索引擎看的，方便引擎索引网页。
- name属性
| 属性值 | 解释 |
|---|---|
| keywords | 网页关键字 |
| description | 网页描述 |
| author | 网页作者 |
| copyright | 版权信息 |
<!DOCTYPE html>
<html>
<head>
<!-- 网页关键字 -->
<!--
keywords 网页关键字，可以定义多个用 英文逗号隔开
description 网页描述
author 网页作者
copyright 版权信息
-->
<!-- 用法 name="属性值" content="变量" -->
<!-- 网页关键字 -->
<meta name="keywords" content="这是网页关键字 , 关键字2 , 关键字3">
<!-- 网页描述 -->
<meta name="description" content="这个网页用于介绍网页关键字的">
<!-- 网页作者 -->
<meta name=" author" content="作者名字">
<!-- 版权信息 -->
<meta name=" copyright" content=" 本站版权所有归xxxxx">
</head>
<body>
</body>
</html>http-equiv属性
html中http-equip，仅用于定义网页编码 和 定义网页自动刷新跳转
定义网页编码
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">但在HTML5表中，上面这段代码简写成这样
<meta charset="UTF-8">
定义网页自动刷新跳转
下面这段代码的意思是 在浏览器6秒后 自动跳转
<meta http-equiv="refresh" content="6;https://wwww.baidu.com" />
2.3、style 标签
在HTML中，style常用于定义元素的CSS样式，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/* 这里写CSS样式 */
</style>
</head>
<body>
</body>
</html>2.4、script 标签
在HTML中，script常用于定义元素的JavaScript样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 这里写JavaScript代码
</script>
</head>
<body>
</body>
</html>2.5、link 标签
在HTML中，link标签常用语引入外部样式文件（CSS文件）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="文件地址" type="text/css">
</head>
<body>
</body>
</html>2.6、base 标签
没有意义的标签，知道有这么一个东西就好了，可以直接忽略
3 body 标签
在前面的介绍中，“head”为页面头部，那么“body”是页面的身体，用户所看到的所有内容都是写在这里的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>body标签</title>
</head>
<body>
<h3>标题</h3>
<p>我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落我是一个段落，我是一个段落。</p>
</body>
</html>
4 HTML 注释
注释的作用仅仅为了给我们编写的代码做注释 做解释，在未来开发中我们可能编写的代码运行一个月都没有问题，那些突然代码就出现问题了，然而已经几个月过去了，你不记得了你当初写的是什么了，这样你就学业从头到尾阅读自己的代码。代码可读性差点，都可能还需要重新编代码。
- 通常在html代码中 的注释是这样的<!-- 注释内容 -- > 注释内容不会被浏览器显示出来，用于给开发人员看
- 在CSS中，是这样的 / 注释内容 /
- 在JavaScript中，是这样的 // 注释内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML注释</title>
<style>
/* 给h3标题定义颜色 */
h3 {
color: blue;
}
p {
color: orange;
}
</style>
<script>
// 这是JS中的注释
</script>
</head>
<body>
<h3>标题</h3>
<p>我是一个段落，我是一个段落</p>
<!-- 单行注释 -->
<!--
多行注释
-->
</body>
</html>