什么是HTML？
初始HTML：
要建立web(网络)页面，需要创建用超文本标记语言（超文本标记语言，简写为HTML）编写的文件，把它们放在一个网站服务器上。根据web页面的超文本标记语言，浏览器可以了解到显示页面所需的全部信息。简单来说，HTML是浏览器显示页面的关键。
浏览器则通过阅读HTML来翻译文本中的所有标记，标记就是尖括号括起来的词或字符，例如<head>、<p>、<h1>等。标记会告诉浏览器文本的结构和含义，所以并不是交给浏览器一大堆的文本，利用HTML、你可以用标记告诉浏览器哪些文本是标题，哪些文本是段落哪些文本需要强调，或者图像需要放在什么位置。
如下面的一个简单页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎来到动物之家</title>
</head>
<body>
<h1>动物介绍</h1>
<h2>老虎</h2>
<img src="img/picture1.jpg" alt="" width="200px">
<p>老虎是典型的山地林栖动物，由南方的热带雨林、常绿阔叶林，以至北方的落叶阔叶林和针阔叶混交林，都能很好的生活。</p>
<img src="img/picture2.jpg" alt="" width="200px">
<p>兔，是兔形目兔科 兔属草食性脊椎动物 。</p>
</body>
</html>运行如下：
HTML的相关定义：
HTML
（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
“超文本”（hypertext）
是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。
“标记”（markup）
HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 <head>、<title>、<body>、<header>、<footer>、<article>、<section>、<p>、<div>、<span>、<img>、<aside>、<audio>、<canvas>、<datalist>、<details>、<embed>、<nav>、<output>、<progress>、<video>、<ul>、<ol>、<li> 等等。
“标签”（tag）
HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<title> 标签可以写成 <Title>，<TITLE> 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。
创建一个HTML文件
我们可以在电脑中创建一个文件夹，之后我们所有的操作都会在这个文件中进行，方便查询存储，用Visual Studio Code打开该文件，在这里我们先创建一个名称为 标签.html 的文件
然后在该文档中输入英文字符的 ！，选择第一个自动生成模板
而接下来我们重点介绍的就是标签，让我们来一起了解一下在HTML中有哪些标签。
标签
首先我们看一下这个自动生成模板中的标签有哪些含义
<!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>
</body>
</html>
1.html
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
2.head
<head> 元素是元数据（关于数据的数据）的容器，位于 <html> 标签 和 <body> 标签 之间。
元数据是有关 HTML 文档的数据。元数据不会被显示。
元数据通常定义文档标题、字符集、样式、脚本和其他元信息。
以下元素可以放置在 <head> 元素内：
- <title>（必需）
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
3.title
<title> 标签定义文档的标题。标题必须是纯文本的，显示在浏览器的标题栏或页面的选项卡中。
<title> 标签在 HTML 文档中是必需的！
如在初始HTML中以“欢迎来到动物之家”为标题的页面
4.body
<body> 标签定义文档的主体。
HTML 文档的元数据和文档信息包装在 head 元素中，文档的内容则包装在 body 元素中。
body 元素总是紧跟在 head 元素之后，它是 html 元素的第二个子元素。
<body> 元素包含 HTML 文档的所有内容，例如标题、段落、图像、超链接、表格、列表等
后面我们将要介绍的标签也主要是body里头的标签。
5.文本标签:span
<!-- 文本标签:span -->
<span>在这里输入文本内容</span>6.标题标签 : h1~h6
<!-- 标题标签:h1~h6（主要是大小有所区别） -->
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>运行效果如下图：
7.竖着布局的标签 : div
<!-- 竖着布局的标签 div -->
<h1>竖着布局的标签 div</h1>
<div>aaaaa</div>
<div>bbbbb</div>
<div>ccccc</div>
<div>ddddd</div>运行结果如下：
8.段落标签 : p
<p>段落标签p</p>9.超链接标签标签 : a
<a href="https://www.bilibili.com/" target="_blank" >点击跳转到哔哩哔哩</a>herf 设置资源路径
target 设置窗口打开方式 ：
_self 默认在本窗口打开
_blank 在新窗口打开...
窗口名（可以自定义，该方式将与锚点相结合）
10.锚点标签 : a
该标签类似于游戏之中的存档点，在点击相应位置后可以跳转到相关位置，为了让该效果明显一些，我们拿如下代码作为例子：
<!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>
<!-- 1.文本标签:span -->
<a name="aa">锚点--------------------文本标签</a>
<h1>1.文本标签:span</h1>
<span >hello </span><span>world</span>
<span>在这里输入文本内容</span>
<!-- 2.标题标签:h1~h6（主要是大小有所区别） -->
<a name="bb">锚点--------------------标题标签</a>
<h1>2.标题标签:h1~h6（主要是大小有所区别）</h1>
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>
<!-- 3.竖着布局的标签 div -->
<a name="cc">锚点--------------------竖着布局的标签</a>
<h1>3.竖着布局的标签 div</h1>
<div>竖着布局的标签div</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<!-- 4.段落标签 p -->
<a name="dd">锚点--------------------段落标签</a>
<h1>4.段落标签 p</h1>
<p>段落标签p</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<!-- 注意：所有标签共有的属性有三个：id class style -->
<!-- 5.超链接标签标签 a -->
<a name="ee">锚点--------------------超链接标签标签</a>
<h1>5.超链接标签标签 a </h1>
<a href="https://www.bilibili.com/" target="_blank" >点击跳转到哔哩哔哩</a>
<!-- 6.锚点标签 a -->
<a href="#aa">跳转到文本标签</a>
<a href="#bb" >跳转到标题标签</a>
<a href="#cc" >跳转到竖着布局的标签</a>
<a href="#dd" >跳转到段落标签</a>
<a href="#ee" >跳转到超链接标签标签</a>
</body>
</html> 在代码的底部，我们相当于设置了跳转到本页面中对应位置的超链接
，而这些链接我们也起了不同的名字用于区分，比如我们在页面中点击“跳转到文本标签”，在HTML当中就会跳转到名字叫做aa,即<a name="aa">锚点--------------------文本标签</a>所在的位置
如果我们想要超链接部分在页面的固定位置显示，可以做出如下修改：
<!-- 6.锚点标签 a -->
<a href="#aa" style="position: fixed;right: 30px;bottom: 200px;">跳转到文本标签</a>
<a href="#bb" style="position: fixed;right: 30px;bottom: 160px;">跳转到标题标签</a>
<a href="#cc" style="position: fixed;right: 30px;bottom: 120px;">跳转到竖着布局的标签</a>
<a href="#dd" style="position: fixed;right: 30px;bottom: 80px;">跳转到段落标签</a>
<a href="#ee" style="position: fixed;right: 30px;bottom: 40px;">跳转到超链接标签标签</a>相当于我们更改了其标签样式，位置（position）改为固定，并距页面最右端30像素，最底端xxx像素效果如下图：
11.图片标签 : img
为了方便管理，在插入图片之前，我们可以在我们所创建的HTML文件夹中创建新的文件夹img，用于存放相关资源,同时注意.html文件与图片之间的关系，注意点如下：
src:引用的图片资源
路径：
相对路径： 访问资源与被访问资源的关系
兄弟关系 src="picture.jpg"
叔侄关系 src="picture.jpg"
表兄弟关系 src="../img/picture.jpg"
绝对路径： 资源的绝对位置
alt：当图片资源不能正常展示时，显示alt里边的内容
例子
<img src="img/picture1.jpg" alt="这是一张老虎的图片">
<img src="img/pic.jpg" alt="这是一张兔子的图片">运行：
12.列表标签 : li
分为无序列表ul和有序列表ol两种
<!--列表标签 -->
<ul> <!-- 无序列表ul -->
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
</ul>
<ol> <!-- 有序列表ol -->
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
</ol>运行：
13.表格标签 : table
<table>放表格的容器
<tr>行
<td> 单元格 <th>单元格（加粗居中）
border表格有边框
width="500px"设置宽
height="400px"设置高
cellpadding="10px" 单元格填充度
cellspacing="0" 单元格之间的间距 0 表示挨在一起
thead tbody tfoot 用于调整表格顺序
rowspan 把行合并
colspan 把列合并
<!-- border="1"为表格样式 -->
<table border="1" width="400px" height="300px" cellpadding="10px">
<tr>
<!-- 相比较于td,th会有内容加粗居中的效果 -->
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr>
<td>1</td>
<td colspan="2">张宇一</td>
<!-- 合并几行写几 -->
<td>男</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>李明名</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李华</td>
<td>20</td>
<td>女</td>
</tr>
</table>运行：
14.框架标签 iframe嵌套其他页面
src:嵌套的资源
width设置页面的宽
height设置页面的高
frameborder="0"：去掉边框，将页面嵌入更加真实
<iframe src="https://leetcode.cn/" width="1200px" height="600px" frameborder="0" name="aaa"></iframe>
<br><br>
<a href="https://www.bilibili.com/" target="aaa" >点击跳转到哔哩哔哩</a>
<a href="https://leetcode.cn/" target="aaa" >点击跳转到力扣</a>
<a href="https://www.baidu.com/" target="aaa" >点击跳转到百度</a>
15.音频标签
console手动播放，让播放器显示出来
console的取值true false(html中不用加，有就是true，没有就是false；js中需要添加）
autoplay自动播放（播放完后就会停止）
autoplay loop循环播放
<audio src="img/Men.mp3" controls></audio>
16.视频
视频标签与音频相类似，这里不再做演示
17.收集用户信息的标签
补充：br表示换行
<!-- 收集用户信息的标签 -->
<form>
<input type="text">单行文本框<br><br>
<input type="password">密码框<br><br>
<input type="radio">单选框<br><br>
<!-- name相同的之中只能选择一个-->
<input type="radio" name="1">男生 <input type="radio" name="1">女生 <br><br>
<br><br>
<input type="checkbox">复选框<br><br>
<input type="checkbox" name="sport">足球 <input type="checkbox" name="sport">篮球 <input type="checkbox" name="sport">排球<br><br>
<br><br>
<input type="file">文件选择器（可以用来选择文件）
<input type="color">颜色拾取器<br><br>
<br><br>
<input type="date">日期<br><br>
<input type="datetime-local">日期时间<br><br>
<input type="week">周选择器<br><br>
<input type="range" min="0" max="100" value="80" >滑块<br><br>
<input type="number" min="0" max="100" value="80" step="5" >数字<br><br>
<select>
<option value="">数学</option>
<option value="">英语</option>
<option value="">语文</option>
<option value="1">语文</option>
</select><br><br>
<textarea rows="10" cols="50" ></textarea>多行文本域<br><br>
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<!-- 若想要这些按钮有用，必须将收集用户信息的标签放到form表单里头 -->
</form>运行：
