字符集：
字符集是多个字符的集合，以便于计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用那种字符编码。
<meta charset="UTF-8">
charset常用的值有：GB2312[简体中文]，BIG5[繁体中文]，GBK[简体中文和繁体中文]和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面的语法是必须要写的代码，否则可能会引起乱码的情况，一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”，不要写成“utf8”或“UTF8”。
HTML常用标签：
标签语义：
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
标题标签：
HTML提供了6个等级的网页标题。
<h1>我是一级标题</h1>
单词head的缩写，意为头部，标题。
标签语义：作为标题使用，并且依据重要递减。
特点：
1：加了标题的文字会变得加粗，字号也会依次变大。
2：一个标题独占一行。
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我利用vscode创建的第一个页面</title> </head> <body> <h1>键盘敲烂，工资过万。</h1> </body> </html>
显示效果：
而VScode对应了六个级别不同的标题：
如下所示：
而对于不同级别的标题，他们的特点是：
<1>标题一共六级选
<2>文字加粗一行显
<3>由大到小依次减
<4>从重到轻随之变
<5>语法规范书写后
<6>具体效果刷新见
段落标签和换行标签：
段落标签：
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在HTML标签中，<p>标签用于定义段落，它可以将整个网页分成若干个段落。
<p>我是一个段落标签<p>
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我利用vscode创建的第一个页面</title> </head> <body> 西安，简称“镐”，古称长安、镐京，陕西省辖地级市，是陕西省省会、副省级市、特大城市 [137] 、西安都市圈核心区 [172] 、关中平原城市群核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的科研、教育和工业基地 [1-3] 。 截至2021年底，全市下辖11个区、2个县，总面积10752平方千米（含西咸新区） [156] ，建成区面积700.69平方千米 [4] ，常住人口（含西咸共管区）1316.30万人 [15] [130] [166] 。2021年，全市实现生产总值10688.28亿元。 </body> </html>
对于上述实例中的文字，我们通过手动将其分为2段，但是该段文字在浏览器上的显示并没有分段。
那么就说明，使用手段分段并不能实现真正意义上的分段，要想实现真正意义上的分段必须使用段落标签，
//<p>和</p>表示一个段落 <p>西安，简称“镐”，古称长安、镐京，陕西省辖地级市，是陕西省省会、副省级市、特大城市 [137] 、西安都市圈核心区 [172] 、关中平原城市群核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的科研、教育和工业基地 [1-3]。</p> <p>截至2021年底，全市下辖11个区、2个县，总面积10752平方千米（含西咸新区） [156] ，建成区面积700.69平方千米 [4] ，常住人口（含西咸共管区）1316.30万人 [15] [130] [166] 。2021年，全市实现生产总值10688.28亿元。</p>
显示如下：
换行标签：
在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口右端，然后才执行换行，如果希望某段文本强制换行，就需要换行标签<br/>
<p>西安，简称“镐”，古称长安、镐京，陕西省辖地级市，是陕西省省会、副省级市、特大城市 [137] 、西安都市圈核心区 [172] 、关中平原城市群核心城市.<br />国务院批复确定的中国西部地区重要的中心城市，国家重要的科研、教育和工业基地 [1-3]。</p> <p>截至2021年底，全市下辖11个区、2个县，总面积10752平方千米（含西咸新区） [156] ，建成区面积700.69平方千米 [4] .<br />常住人口（含西咸共管区）1316.30万人 [15] [130] [166] 。2021年，全市实现生产总值10688.28亿元。</p>
显示如下：
标签语义：强制换行。
特点：
<1><br />是单个标签
<2><br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
小案例：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我利用vscode创建的第一个页面</title> </head> <body> <h1>西安</h1> <p>西安，简称“镐”，古称长安、镐京，陕西省辖地级市，是陕西省省会、副省级市、特大城市 [137] 、西安都市圈核心区 [172] 、关中平原城市群核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的科研、教育和工业基地 [1-3] 。截至2021年底，全市下辖11个区、2个县，总面积10752平方千米（含西咸新区） [156] ，建成区面积700.69平方千米 [4] ，常住人口（含西咸共管区）1316.30万人 [15] [130] [166] 。2021年，全市实现生产总值10688.28亿元。 [153] <p>西安地处关中平原中部、北濒渭河、南依秦岭，自古有着“八水绕长安”之美誉 [158] ，是联合国教科文组织于1981年确定的“世界历史名城” [8] ，是中华文明和中华民族重要发祥地之一，丝绸之路的起点 [5-7] ，历史上先后有13个王朝在此建都 [8-9].</p> <p>西安是中国最佳旅游目的地、中国国际形象最佳城市之一 [10-11] ，有两项六处遗产被列入《世界遗产名录》，分别是：秦始皇陵及兵马俑、大雁塔、小雁塔、唐长安城大明宫遗址、汉长安城未央宫遗址、兴教寺塔 [12] 。另有西安城墙、钟鼓楼、华清池、终南山、大唐芙蓉园、陕西历史博物馆、碑林等景点。西安拥有西安交通大学、西北工业大学、西安电子科技大学等7所“双一流”建设高校 [13] 。</p> 2018年2月，国家发展和改革委员会、住房和城乡建设部发布《关中平原城市群发展规划》，其中支持西安建设国家中心城市，加快西安都市圈立体交通体系建设，建成具有历史文化特色的国际化大都市 [150] 。</p> <h2>地理环境</h2> <h3>位置境域</h3> <p>西安市位于渭河流域中部关中盆地，东经107.40度～109.49度和北纬33.42度～34.45度之间，北临渭河和黄土高原，南邻秦岭。东以零河和灞源山地为界，与渭南市华州区 [123] 、商洛市商州区、洛南县相接；西以太白山地及青化黄土台塬为界，与眉县、太白县接壤；南至北秦岭主脊，与佛坪县、宁陕县、柞水县分界；北至渭河，东北跨渭河，与咸阳市区、杨凌区和三原、泾阳、兴平、武功、扶风、富平等县（市）相邻。辖境东西长约204千米，南北宽约116千米， [35] 总面积10108平方千米。 [131] 地形地貌</p> 西安市的地质构造兼跨秦岭地槽褶皱带和华北地台两大单元。距今约1.3亿年前燕山运动时期产生横跨境内的秦岭北麓大断裂，自距今约300万年前第三纪晚期以来，大断裂以南秦岭地槽褶皱带新构造运动极为活跃，山体北仰南俯剧烈降升，造就秦岭山脉。与此同时，大断裂以北属于华北地台的渭河断陷继续沉降，在风积黄土覆盖和渭河冲积的共同作用下形成渭河平原。 [36]<br /> 西安市境内海拔高度差异悬殊位居全国各城市之冠。巍峨峻峭、群峰竞秀的秦岭山地与坦荡舒展、平畴沃野的渭河平原界线分明，构成西安市的地貌主体。秦岭山脉主脊海拔2000米～2800米，其中西南端太白山峰巅海拔3867米，是大陆中部最高山峰。渭河平原海拔400米～700米，其中东北端渭河河床最低处海拔345米。西安城区便建立在渭河平原的二级阶地上。 [36] </body> </html>
显示如下：
文本格式化标签：
在网页中，有时候需要为文字设置粗体，斜体或者下划线等效果，这时就需要用到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> 我是<strong>加粗</strong>的文字 我是<b>加粗</b>的文字 我是<em>倾斜</em>的文字 我是<del>删除线</del> 我是<ins>下划线</ins> </body> </html>
显示：
<div>和<span>标签：
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
<div>这是头部</div> <span>今日价格</span>
举例：
不同区域可以放置不同的内容，就相当于不同的盒子
<div>标签：
<div>我是一个div标签，我一个人单独占据一行</div> <div>我是一个div标签，我一个人单独占据一行</div>
显示：
<div>标签的特点：用来布局，但是现在一行只能放一个<div>,大盒子
<div>我是一个div标签，我一个人单独占据一行</div>Hello,world <div>我是一个div标签，我一个人单独占据一行</div>Hello,html
<div>标签用来布局，但是现在一行只能放一个<div>"盒子”。
<span>标签：
<div>我是一个div标签，我一个人单独占据一行</div> <div>我是一个div标签，我一个人单独占据一行</div> <span>京东</span> <span>淘宝</span> <span>唯品会</span>
显示如下：
和<div>不同的是，现在一行可以放多个<span>盒子
图像标签和路径：
图像标签：
在html标签中，<img>标签用于定义HTML页面中的图像。
src属性：指定图像文件的路径和文件名
<img src="图像URL" />
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
<h2>图片标签的使用:</h2><br/>//图像标题 <img src="liu.jpg"/>//属性src一定不要忘记写
显示如下：
小tips:如果图片无法正常显示，需要将该图片和该html文件存放在一起。
alt属性：使用文本替换显示不出来的图片
<h2>图片标签的使用:</h2><br/> <img src="liu.jpg"/> //当前文件夹存在liu.jpg这个文件---图片正常显示 <h2>alt 替换文本 图像显示不出来的时候用文件替换:</h2><br/> <img src="liu_cuncun.jpg"alt="画面太美以至于显示不出来"/> //当前文件夹不存在liu_cuncun.jpg这个文件---图片无法正常显示，用alt后面的文字替换
//当图片无法显示时，将替换的文字直接显示出来 <h2>alt 替换文本 图像显示不出来的时候用文件替换:</h2><br/> <img src="liu_cuncun.jpg"alt="画面太美以至于显示不出来"/> //只要鼠标经过该图片，该文字就会被显示 <h2>title 提示文本 鼠标放到图像上，提示文字：</h2> <img src="liu.jpg" alt="画面太美以至于显示不出来" title="嗨！我是存存"/>
width和height属性：为图像设置高度和宽度
<h2>width 给图像设置宽度</h2> <img src="liu.jpg" alt="画面太美以至于显示不出来" width="500"/> <h2>height 给图像设置高度</h2> <img src="liu.jpg" alt="画面太美以至于显示不出来" /> <h2>同时设置宽度和高度</h2> <img src="liu.jpg" alt="画面太美以至于显示不出来" height="100"height="500"/>
显示如下：
通常情况下，我们不太建议将高度和宽度都进行设置，避免出现图像太宽或者太长的情况，而是选择将其中的一个进行设置，将图像进行等比例放缩
border属性：为图像设置边框
<h2>border 给图像设置边框</h2> <img src="liu.jpg" alt="画面太美以至于显示不出来" width="500" border="66"/>
显示如下：
图像标签属性需要注意的点：
<1>图像标签可以拥有多个属性，必须写在标签名的后面
<2>属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。
<3>属性采取键值对的格式，即key="value"的格式，属性=“属性值”
路径：
目录文件夹和根目录：
目录文件夹：就是普通的文件夹，里面存放了相关素材，比如html文件，图片等。
假设我们在桌面创建了一个关于web的文件夹：
该文件夹就是目录文件夹：
根目录：打开目录文件夹的第一层就是根目录
双击打开web文件夹：
此时这个页面即为根目录：
注意：如果我们此时再打开图片文件夹，显示出来的图片文件夹中的目录并不是根目录，因为它不是目录文件夹的第一层。
VScode中打开文件夹：
方法一：
点击左上角的文件，打开文件夹：
方法2：
将VScode搞成小窗口，直接将需要打开的文件夹拖拽到VScode中
当我们在编写一个项目的时候，该项目中包含的文件可能会非常多，若还是将将这些成百上千的图片和html文件放在同一个文件夹中，会非常不方便，对于这种情况，我们通常会新建一个文件夹来存放这些图像，而此时再查找图像，就需要采用“路径”的方式指定图像文件的位置。
相对路径：
以引用文件所在位置为参考基础，而建立出的目录路径，也就是图片相对于html页面的位置。
当html文件和要插入的图片在同一个路径下，语法：
<img src="cuncun.jpg" />
下一级路径：
当前要插入的图片处于和该html文件同级的picture文件夹中，因此属于html文件的下级：
图片插入语法：
<img src="picture/xiao.jpg" />
上一级路径：
当前要插入的图片处于和该html文件夹同级，因此属于html文件的上级：
图片插入语法：
<img src="../xiao.jpg" />
绝对路径：
是指目录下的绝对路径，直接到达目标位置，通常是从盘符算起的，它是唯一的。
例如：
C:\Users\Lenovo\Desktop\web\html或者网址
直接引用图片的网址：
http://www.baidu.com/img/flexible/logo/pc/result.png
举例：
<img src=" C:\Users\Lenovo\Desktop\web\xiao.jpg"/> <img src="http://www.baidu.com/img/flexible/logo/pc/result.png"/>
超链接标签：
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式：
外部链接：
例如：
<a href="http://www.baidu.com">百度<a/>
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像<a/>
两个属性和作用如下：
链接分类：
//_blank代表在新的窗口打开，并不会覆盖原来的窗口，页面会进行跳转 <a href="http://www.qq.com" target="_blank">腾讯</a> //_self代表在当前窗口打开，当前窗口会被覆盖 <a href="http://www.qq.com" target="_self">腾讯</a>
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html>首页<a/>
<h4>2.内部链接</h4> <a href="index_t.html" target="_blank">公司简介</a>
空链接：
如果当时没有确定链接目标时，<a href="#">首页<a/>
<h4>3.空链接</h4> <a href="#">公司地址</a>
下载链接：
如果href里面是一个文件或者压缩包，会下载这个文件
首先对要操作的图片进行压缩处理：
右击图片：
<h5>4.下载链接：地址链接的是文件 .exe或者是 zip 等压缩包形式</h5> //保证.zip文件和当前的html文件在同一路径 <a href="xiao.zip">下载图片</a>//只需要写文件名
显示如下：
网页元素链接：
在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
<h4>5.网页元素的链接</h4> <a href="http://www.baidu.com"><img src="xiao.jpg"></a>
直接点击图片，进入目标网站的页面
锚点链接：
点链接，可以快速定位到页面的某个位置
1:在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
举例:
<a href="#组合">TFBOYS组合</a>
2:找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>
举例：
<h3 id="组合">TFBOYS组合</h3>
点击TFBOYS组合，跳到本页面的TFBOYS组合的相关内容。
