HTML
HTML（Hyper Text Markup Language），中文名叫超文本标记语言，是一种用来描述网页的语言。实际上我们上网所浏览的网页就是一个个HTML文件，网页的集合就形成了网站。所谓超文本的意思就是不仅能添加文字，还能加入图片、视频、声音等，而且可以通过链接实现文件之间的跳转。为了后续学习，这里需要下载谷歌浏览器作为后续测试HTML文件的工具。
Web标准
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。统一化的标准让网页能被更多的设备，不同的浏览器访问。
Web标准主要包含结构、表现、和行为三个部分，分别对应前端技术中的HTNML、CSS、Javascript，而Web标准针对它们提出的最佳体验方案就是将三者分离。
一个形象的比喻，HTML是人的身体，CSS是人的衣服和装饰品，Javascript是人的行为（走路、说话）。
HTML语法规范
HTML中的标签都是由尖括号包起来的，并且一般成对出现，偶尔也会有但标签出现，因为但标签比较少，所以遇到一个记住一个即可，比如
<html></html>
<head></head>
<br /> #单标签
各标签之间的关系有两种，包含关系和并列关系。
包含关系：
<head>
<title> </title>
</head>
并列关系：
<head> </head>
<body> </body>
HTML基本结构标签
有了这些我们就可以制作第一个网页了。前面提到网页实际上就是一个HTML文件，所以我们编写的文件的后缀名必须是html或者是htm，并且使用浏览器打开，下面是网页的基础代码
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
网页测试文档
</body>
</html>
从这里我们就可以知道一个网页的基本结构了
开发工具
选择vscode作为开发工具，并且安装几个相应的插件
首先是中文插件，在vscode左侧的扩展功能的搜索框中，输入Chinese，找到下面这个插件安装即可
然后是浏览器打开的插件，输入open，找到下图插件安装
最后是一个访问我们编写代码的工具，在我们修改其中一个标签的名字时，预期对应的标签会自动更名
此时我们在vscode里面新建一个html文件，输入！然后确认，会发现它自动给我们生成了一个主体结构，但是有些许不一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
首先是第一行，<!DOCTYPE html>这是一个文档声明标签，它的作用时告诉浏览器我们使用的HTML的版本。第二行是我们的html标签，但是后面多了一个东西lang="en"，它定义的时当前文档的语言种类，en就是表示English，zh-CN就是中文，这并不表示我们在主体结构编写的时候要使用对应的语言，就算是en我们也可以在里面写中文，它是提示浏览器的，因为浏览器一般会自带翻译功能，这就是提示浏览器这个网页是什么语言为主的。第三个就是<meta charset="UTF-8">，它是告诉浏览器应该使用哪一种模式的字符编码，这样计算机才能识别存储我们输入的信息，所以后面那个chayset就是用来指定编码类型的。UTF-8就是被称为万国码的编码，包含世界上几乎所有国家使用的文字和符号，所以一般用它就可以。
常用HTML标签
1.标题标签
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
2.段落标签和换行标签
<p>据点道中雷环境爆发高压比较严重，防毒奶词条可带隔板。</p>
队伍整体全甲精通，虽来原文中维内托主带高爆，我个人倾向457搭配双炮双火控速射，总伤比较高，不太怕BOSS关拖时间，下限也高一点。<br />
德雷克版对中重打击能力出色，吾妻下限略高，不太怕任何毒奶内鬼奶相关词条，更肉但是输出较差些。
<p>作者：臧贺Lunmta https://www.bilibili.com/read/cv14758467?spm_id_from=333.999.0.0<br /> 出处：bilibili</p>
这里注意一下，换行标签是一个单标签
3.文本格式化标签
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除</del>的文字
我是<ins>下划线</ins>的文字
重点记忆加粗和倾斜的文本格式化标签。
4.<div> 和<span>标签
<div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
<span> 标签用来布局，一行上可以多个 <span>。小盒子
5.图像标签
<img src = "图像URL"/>
src后面就是图像的路径，这个标签可以将图片加入到网页当中。同级路径直接写图片名字即可，下一级路径则需要加上统计的文件夹名称，上一级路径则加上../后面写图片名称。针对图像还有很多的处理方法，都可以加在这个img后面。
<h4>图像标签的使用方法：</h4>
<img src="灵梦.jpg"/>
<h4>alt 替换文本 图像无法正常显示时显示的文本：</h4>
<img src="灵梦1.jpg" alt="图片加载失败"/>
<h4>title 提示文本 鼠标移到图像上提示的文字：</h4>
<img src="灵梦.jpg" alt="图片加载失败" title="博丽灵梦"/>
<h4>width 更改图像的宽度：</h4>
<img src="灵梦.jpg" width="500"/>
<h4>height 更改图像的高度：</h4>
<img src="灵梦.jpg" height="300"/>
<h4>border 设置图像边框</h4>
<img src="灵梦.jpg" title="博丽灵梦" width="500" border = "15"/>
6.超链接标签
<h4>1.外部链接：</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<h4>targrt表示链接的打开方式，_self是默认的 在当前窗口打开 _blank则是在新窗口打开</h4>
<h4>2.内部链接：</h4>
<a href="09-demo.html" target="_blank">练习demo</a>
<h4>3.空链接：#</h4>
<a href="#">空链接</a>
<h4>4.链接的如果是一个文件或者压缩包，则会下载这个文件</h4>
<a href="灵梦.rar">灵梦图片</a>
<h4>5.网页元素也可以作为链接</h4>
<a href="https://www.bilibili.com/" target="_blank">bilibili</a>
这里补充一下，我们在使用百度百科的时候可以发现，有时候网页的内容非常多，我们需要找很久才能找到自己想要的内容，幸好百度提供了一个网页内跳转的功能，点击对应的标签就能跳到对应的内容区域，这也可以使用超链接标签来完成
2.<a href="#oldman">圣诞老人的由来</a><br />
<h2 id="oldman">圣诞老人的由来</h2>
像上面的代码这样，它们中间其实有很多很多的内容，我们采用这样的方法就能实现点击上面代码对应的这个超链接，快速跳转到下面代码的区域。
