在学习html之前 你首先得要下载一个Visual Studio Code软件，这个软件在Microsoft edge或者是其他的浏览器都可以下载到。Visual Studio Code – Code Editing. Redefined
https://code.visualstudio.com/
在软件下载好之后，在初始页面的左下角有个齿轮，我们点击进行一些必要的插件，点击“扩展”，下载如下的插件：
01.简单的网页机构
<html>
<body>
我的第一个页面
</body>
</html>
在编辑页面里，按鼠标右键，出现的小窗口，点击Open with Live Server ，即会出现如下情况：
02.文档声明
文档声明 写在html最上面，告诉浏览器我是按照html的规范来编写代码的，浏览器你也要按照规范给我编译，以免代码编译陷入怪异模式，出现乱码
03.title标签
<!DOCTYPE html>
<html>
<head>
<title>
小米商城
</title>
</head>
<body>
wangqiankun
</body>
</html>title标签是网页的标题，显示在标题栏中，我们一般不关注它显示在哪里，如代码里面显示的，当运行代码时，”小米商城“就是网页的标题，”wangqiankun“则是网页的内容
04.meta标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="手机大全">
<meta name="gsecription" content="手机报价">
<title>网页的标题</title>
</head>
<body>
wangqiankun
</body>
</html>meta标签是一个自结束标签，也可以存一些元信息，帮助浏览器编译代码，自结束标签有两种写法 <meta>、<meta />
在开始标签里，我们可以加属性和属性值
charset 字符集属性 设置密码本
utf-8 万国码属性值 某一个密码本
GB（国标） 中国的密码本
GBK 中国扩展版
charset的设置就是为了防止出现乱码
编码: 文字、图片、音视频==》二进制
解码：二进制===》文字、图片、音视频
乱码：编码和解码用的不是一个密码本
keywords/ dsecription 都可以帮助浏览器检索内容
05.完整的网页结构
<!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>06.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>1、html标签有成双成对的，也有自结束标签
2、html中是不区分大小写的，但一般小写居多
3、标签可以嵌套，但不可以交叉嵌套
4、养成良好的注释的习惯，简洁明了，注释也不可以嵌套
5、html，css，js都是一种宽泛的语言，它的容错率比较高，它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响，而且它改的不一定是你想要的
07.实体
<!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>
今天见到同学们 很高兴
2<5>4
©
</body>
</html>实体：
什么是实体？
在编写网页的时候，有些字符我们是没有办法打出来的，列如空格、大于号、小于号等
这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来代替
这些额外的字符就叫实体
实体的语法
&实体的名字;
常用的实体
空格
大于号 >
小于号 <
版权符号 ©
08.常用的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
感觉要下雨了
<h1>感觉要下雨了</h1>
<h2>感觉要下雨了</h2>
<h3>感觉要下雨了</h3>
wangqiankun
<p>
wangqiankun
</p>
<h1>古诗一首</h1>
<h3>杜甫</h3>
<hgroup>
<h1>古诗一首</h1>
<h3>杜甫</h3>
</hgroup>
<p>
同学们,看着<strong>真帅</strong>
</p>
<p>
同学们,你们可<em>真帅</em>
</p>
<p>
同学们,你们可<em>真</em><strong>帅</strong>
</p>
wangqiankun,<br>
wangqiankun,<br/>
<hr>
wangqiankun
<hr>
原价:<del>199999元</del><br>
现价:1.99999元
<center>
<h1>wangqinakun</h1>
</center>
<div>
wangqiankun
</div>
子曰:<q>学而时习之</q>
</body>
</html>1、标题标签 h1、h2、h3、h4、h5、h6
h1 一级标题
h2 二级标题
……
默认样式：h1-h6，字体的大小是渐步减小，字体会加粗，会变黑
从语义上看：h1-h6，语义是逐步降低的，也是可以帮助浏览器检索内容，提高网络排名
注意：
常用标题标签：h1-h3
h1的语义是最重的，所以一个页面一般只有一个
标题标签会独占一行，是块元素
2、段落标签 p
默认样式：段落与段落之间有较大的空隙，段落标签也会独占一行，也是块元素
3、标题分组 让标题之间有关系，没有默认样式
4、strong 强调标签
如下若强调“真帅”则可以用<strong></strong>
默认样式：字体加粗加黑了
5、em 强调标签
默认样式：字体斜体了
（面试题：在html中，有两个强调标签，它们有什么区别？
默认样式上有区别
语义上也有区别:strong强调的是内容，em强调的是语音语调
一般情况，在实际的使用中，em，strong不做区别）
6、强制换行，是一个自结束标签
7、分割线，<hr>是一个自结束标签
8、del 删除线
9、center 有居中效果
10、div 是一个没有任何语义的标签 ,是块元素
11、span 是一个没有任何语义的标签，一般用来包裹文字
12、引用标签
默认样式：加双引号
09.img标签
<!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>
<img src="" alt="">
</body>
</html>开始标签里 可以添加多个属性，用空格隔开即可
img标签 引入外部图片 ，是一个自结束标签
4个属性
src 引入图片的路径，暂时将html文件和图片放在同一个文件夹下
alt 是对图片的描述，正常情况下，alt的内容是不显示的当图片的路径出了问题，
图片引入不成功，alt就会显示，它可以帮助浏览器检索图片，养成写alt的习惯
width 设置图片的宽度
height 设置图片的高度
一般情况下，不会同时设置width和height
只要单独设置width或者height，另外一个就会自适应