序言
本节内容我们开始学习HTML的基础知识，了解HTML的基本结构，以及一些标签及其属性。那么就让我们开始今天的学习吧！
一、了解HTML结构
-
<!DOCTYPE HTML>这一部分是文档声明，指定了我们是使用HTML5进行编译的。DOC是document的缩写 TYPE就是TYPE类型的意思 html意思代表的就是html5 ，必须写在html文档的第一行其他文档声明：www.w3.org/QA/2002/04/…
-
<html></html>此为网页部分,指的就是我们运行代码打开的网页语言设置（写在html标签上）：lang="en"
html lang属性用于指定网页的语言，如zh-CN代表简体中文，对搜索引擎优化有积极影响。它区分不同区域的语言变体，如zh-TW代表繁体中文。W3School和W3C提供了语言和国家/地区代码的参考手册。
1）第一种写法（语言-国家/地区），例如： zh-CN ：中文-中国大陆（简体中文） zh-TW ：中文-中国台湾（繁体中文） zh ： 中文
en:英文
en-US ：英语-美国 en-GB ：英语-英国
2）第二种写法（语言-具体种类）已不推荐使用，例如： zh-Hans ：中文-简体
-
<head></head>头部，是网页书签以上部分 -
<meta charset="utf-8">意为我们是使用的UTF-8的字符标准（注意：此标签写在头部标签中）编码发展历史： ASCII：大写字母、小写字母、数字、一些符号，共计128个 ISO8859-1：在ASCII基础上扩充了一些希腊字符等，共计256个 GB2312：继续扩充，收录了6763个常用汉字，682个字符 GBK：收录了汉字和符号达到了20000+支持繁体中文 UTF-8（万国码）：包含了世界上所有的语言，所有文字和符号，常用！ 原则：存储时，务必采用合适的字符编码，否则无法存储数据会丢失（IE浏览器如果不指定编码会被解析成乱码）
绝大多数浏览器默认的解码方式是utf-8，但是为了保证全部的浏览器不出问题能够全部使用统一的编码方式，因此我们需要指定
-
<title><title>标签是网页的标题 -
<body></body>标签，是HTML的主体标签以上呢就是我们HTML的一个基本结构，那么如何去快速生成这样一个结构呢？下面我们以VS Code为例给大家进行演示： 在英文状态下，打一个! 再按下回车就可以快速生成一段HTML结构代码，如下图所示。这个时候有的同学就要问了，下面红色框起来的这一行代码是什么意思呢？在这里给大家解释一下，这段代码呢主要用于我们的移动端的，meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的，但是这里我们不做过多的解释，目前我们不要用到移动端的代码，当然这段代码添加上也不会影响我们程序的运行。
二、HTML标签简介
-
标签的构成：
单标签：<标签名 />
双标签：<标签名> 内容 <标签名 />
-
标签之间的关系
并列关系：
<head><head> <body><body>包含关系:
<head> <title><title> <head> -
开始你的第一个程序：
<!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> 你好，程序猿！！！ </body> </html> -
什么是标签什么是元素？
标签就是由< >进行包围而成的，就是标签，可以包含属性来进一步定义元素的性行，每个元素一般由一个开标签以及一个闭标签以及当中的内容进行组合。
三、HTML标签的学习
-
标题标签h1-h6：
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> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>特点：独占一行，字体加粗，一级最大，六级最小。
属性：
双标签： <标签名 属性1="属性值1" 属性2="属性值2">内容</标签名> 单标签: <标签名 属性1="属性值1" 属性2="属性值2"/>那么标题标签中有什么属性呢？
- align(位置):center（中）/left（左，默认值）/right（右）
练习：
<!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 align="center">及时行乐</h1> <h2 align="left">人生不是轨道，而是旷野</h2> <h3 align="right">嘀嘀嘀，开始你的创作吧</h3> <h4>总有一天你会发光发热</h4> <h5>星星之火可以燎原</h5> <h6>爱吃棒棒糖</h6> </body> </html> -
段落标签P
双标签
顾名思义就是一段一段的文字，那么接下来我们来看一下他的一个使用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>p标签</title> </head> <body> <p> 李白的诗歌在唐朝已被选进殷璠编选的《河岳英灵集》、于敦煌石室发现的《唐写本唐人选唐诗》、韦庄编选的《又玄集》和韦縠编选的《才调集》。 唐文宗御封李白的诗歌、裴旻的剑舞、张旭的草书称为“三绝”[2]。 其作品想像奇特丰富，风格雄奇浪漫，意境独特，清新俊逸；善于利用夸饰与譬喻等手法、自然优美的词句，表现出奔放的情感。诗句行云流水，浑然天成。 李白诗篇传诵千年，众多诗句已成经典，清赵翼称：“李杜诗篇万口传”。李白在诗歌的艺术成就被认为是中国浪漫主义诗歌的巅峰。诗作在全唐诗收录于卷161至卷185。 有《李太白集》传世。杜甫曾经这样评价过李白的文章：“笔落惊风雨，诗成泣鬼神”、“白也诗无敌，飘然思不群”。 </p> </body> </html>属性：align:center(中)/left(左，默认)/right(右)
-
水平线标签hr：
单标签
使用方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>p标签</title> </head> <body> <h1>李白简介</h1> <hr /> <p> 李白的诗歌在唐朝已被选进殷璠编选的《河岳英灵集》、于敦煌石室发现的《唐写本唐人选唐诗》、韦庄编选的《又玄集》和韦縠编选的《才调集》。 唐文宗御封李白的诗歌、裴旻的剑舞、张旭的草书称为“三绝”[2]。 其作品想像奇特丰富，风格雄奇浪漫，意境独特，清新俊逸；善于利用夸饰与譬喻等手法、自然优美的词句，表现出奔放的情感。诗句行云流水，浑然天成。 李白诗篇传诵千年，众多诗句已成经典，清赵翼称：“李杜诗篇万口传”。李白在诗歌的艺术成就被认为是中国浪漫主义诗歌的巅峰。诗作在全唐诗收录于卷161至卷185。 有《李太白集》传世。杜甫曾经这样评价过李白的文章：“笔落惊风雨，诗成泣鬼神”、“白也诗无敌，飘然思不群”。 </p> </body> </html>属性：
1）宽度属性: width 属性值: 数字+像素
例:<hr width="200px"/> 水平线宽200像素2 粗细属性: size 属性值: 数字+像素
例:<hr size="10px"/> 水平线粗10像素3）颜色属性: color 属性值: 颜色的英文单词/16进制/rgba
例:<hr color="red"/> 水平线颜色为红色<hr color="#FF0000"/> 水平线的颜色为红色 <hr color="rgba(255,0,0)"/> 也代表红色，但是rgba形式在HTML标签内书写不会生效，在后面将要学习的css中会用到- 水平对齐方式属性: align:left(左 ，默认)/center（中）/right（右）
例：<hr align="left"/> 水平线水平向左对齐 <hr align="center"/> 水平线水平居中对齐 <hr align="right"/> 水平线水平向右对齐(5)noshade：分割线不包含阴影
<hr noshade />四、Emmet语法
后代：div>ul>li
<div> <ul> <li></li> </ul> </div>兄弟：div+ul
<div></div> <ul></ul>多个：li*5
<li></li> <li></li> <li></li> <li></li> <li></li>id创建div盒子：#head
<div id="head"></div>class创建div盒子：.head
<div class="head"></div>Emment语法官网：docs.emmet.io/cheat-sheet…
五、文件以及文件夹的命名
-
文件
html文件夹（存放html文件） css文件夹（存放css文件） images文件夹（存放图片文件） js文件夹（存放JavaScript文件）
-
文件命名规范
index.html/home.html (首页)
-
其他文件或文件夹的命名规则：
- 只能是字母，数字，下划线、中划线
- 不能是中文
- 不能以数字开头
- 见名知义(以最少的字母达到最容易理解的意义)
六、文本效果
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
- 粗体：
<strong>加粗</strong> 推荐使用strong,语义更强烈，SEO更为良好 <b>加粗</b>- 斜体
<i>斜体</i> <em>斜体</em> 推荐使用em,表达要素要对SEO更加友好，视觉要素没有意义- 删除线
<del>删除线<del> 推荐使用del,语义更加强烈 <s>删除线</s>- 下划线
<ins>下划线</ins> 推荐使用ins语义更加强烈 <u>下划线</u>- 上角标
<sup>上角标<sup>- 下角标
<sub>下角标</sub>补充：什么是SEO？ SEO代表“搜索引擎优化”。这是通过非付费（也称为“自然”）搜索引擎结果来提高网站流量的质量和数量以及品牌曝光率的做法。
尽管有首字母缩略词，但 SEO 既关乎搜索引擎本身，也关乎人。这是关于了解人们在网上搜索什么、他们正在寻找的答案、他们使用的词语以及他们希望消费的内容类型。了解这些问题的答案将使您能够与在线搜索您提供的解决方案的人建立联系。
- 换行
<br />我们平常的文本都是在一行展示的，那么如何进行换行呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>p标签</title> </head> <body> <h1 align="center">月下独酌·其一</h1> <h2 align="center">(唐)李白</h2> <p align="center"> 花间一壶酒，独酌无相亲。<br /> 举杯邀明月，对影成三人。<br /> 月既不解饮，影徒随我身。<br /> 暂伴月将影，行乐须及春。<br /> 我歌月徘徊，我舞影零乱。<br /> 醒时同交欢，醉后各分散。<br /> 永结无情游，相期邈云汉。</p> </body> </html>
运行结果：
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p标签</title>
</head>
<body>
正常的文本：你好，程序员！<br />
加粗的文本strong标签：<strong>你好，程序员</strong> <br />
加粗的文本b标签：<b>你好，程序员！</b><br />
倾斜的文本em标签：<em>你好，程序员！</em><br />
倾斜的文本i标签：<i>你好，程序员！</i><br />
删除线的文本del标签：<del>你好，程序员！</del><br />
删除线的文本s标签：<s>你好，程序员！</s><br />
下划线的文本ins标签：<ins>你好，程序员！</ins><br />
下划线的文本u标签：<u>你好，程序员！</u><br />
上角标标签sup标签：O<sup>2</sup><br />
下角标标签sub标签：H<sub>2</sub>O
</body>
</html>
运行结果：
- div 与span
在HTML当中充当盒子，那么有什么区别呢？简单理解，div是HTML当中最大的盒子，span是HTML当中最小的盒子。
1）用法：
<div>内容</div>
<span>内容</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p标签</title>
</head>
<body>
默认文本
<b>加粗</b>
<ins>下划线</ins>
<span>跟我一起学前端</span>
<div>你好呀！不要忘记关注哦~</div>
</body>
</html>
运行结果：
特点：
span:不可以设置宽高，与其他行内元素共享一行，没有语义（可以高频使用）
div:可以设置宽高，独占一行，没有语义（可以高频使用）
2）div属性：
align : left(左，默认) / center(中 ) / right(右)
- font标签
<font></font> 可以指定文字的大小与颜色
属性：
color:规定了文字的颜色
size:规定了文字的大小
face:规定了文字的字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p标签</title>
</head>
<body>
<font size="7">你好</font>
<font color="red">你好</font>
<font face="楷体">你好</font>
</body>
</html>
效果：
七、特殊符号
HTML中的转义符（Escape Sequences）主要用于表示那些在HTML中有特殊含义或不能直接在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>
<p>最编程，创未来！版权© ©</p>
<!--
版权符号几种方式：
1. ©
2. 搜狗输入法
3. 可以找个有版权符号的网站复制一个，示例：https://blog.csdn.net/weixin_65450681?spm=1000.2115.3001.5343
-->
</body>
</html>
网站参考：teshuzifu.cn/html
八、注释
注释用于解释说明代码的用途 注释里面的内容，浏览器不执行、不解析、不显示 HTML中的注释以""结束
需要注意的是注释标签不能嵌套
网站示例：www.jd.com/
快捷键：ctrl+/
补充调试小技巧:
快捷键：F12
鼠标右键点击检查，如果要检查指定的元素，只需要将鼠标放在要检查的元素上，进行右键检查即可。
九、图片标签及其属性
- 用法
<img src="" alt="">
src（图片的路径地址，通过src属性就可以把网上、本地的图片加载到网页当中）: '图片路径'
src属性是img标签必须要有的，意思就是说如果你使用了img标签那么src属性就一定要有东西不能为空。
alt：图片不能正常显示时展示的文字
<!--
素材：https://gd-hbimg.huaban.com/small/fc4175ae9ee9f2b4bd7a7c881497ff0748dd77ead2288-cgGKnO_fw240webp
-->
<!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>
<img src="https://gd-hbimg.huaban.com/small/fc4175ae9ee9f2b4bd7a7c881497ff0748dd77ead2288-cgGKnO_fw240webp" alt="糟糕图片丢失了" />
</body>
</html>
- 属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 相对路径或绝对路径 |
| width | 数值 | 设置宽度 |
| height | 数值 | 设置图片高度 |
| alt | 当图片无法正常显示的时候会把alt属性里面的内容显示在网页上 | 好处：对SEO（搜索引擎）友好，可以让搜索引擎的蜘蛛知道这张没有显示的图片大概是什么内容对用户友好（可以知道这张没有显示的图片大致是什么内容） |
| title | 当图片可以正常显示的时候，鼠标悬浮于图片之上就可以把title的内容显示出来了 | |
| border | 数值 | 图片边框 |
- 相对路径和绝对路径
什么是路径？
举个例子,当我们在磁盘上查找文件，经过一个个文件夹最终找到这个文件，查找这个文件过程当中，一定会经过一些文件夹，那么这个路线就是我们所说的路径。
1）相对路径
相对路径是指目标相对于当前文件的路径
| 代码 | 行为 |
|---|---|
| ./ | 当前位置同级 |
| / | 下一级 |
| ../ | 返回当前位置的上级目录 |
相对路径中./可以忽略不写，在NodeJS中./必须写 相对路径依赖的是当前位置，如果修改了文件的位置那么文件中的路径可能也需要修改
2）绝对路径
以盘符开始的路径地址。
a. 本地绝对路径：以根位置（盘符）为起点 D:/img/myPhoto.png（很少使用） b. 网络绝对路径：网址 gd-hbimg.huaban.com/small/fc417…
绝对路径的弊端：
本地绝对路径迁移性比较差，比如只要更换了电脑或设备那么被引用的资源就找不到了 网络绝对路径，有的站点做了资源防盗链，你是引用不过来的。
- 常见图片格式
1）JPG（或JPEG）格式
JPEG是一种有损压缩格式，支持多种压缩级别，其压缩比可达1:100，一般在1:10左右，右侧的值越大，文件越小，但清晰度也越低。
特点：
- 不支持动图
- 不支持透明
优缺点：
- 优点-更小文件的体积，通用浏览器和操作系统广泛支持
- 缺点-有损图像压缩可能导致较差的文本可读性
2）BMP格式
位图，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱来的缺点——占用磁盘空间过大。
特点：
- 占用空间大不利于存储和处理
- 不支持透明背景
- 不支持动图
优缺点：
- 优点质量高
- 缺点体积太大了
3）GIF格式
图形交换格式，美国一家著名的在线信息服务机构CompuServe针对当时网络传输带宽的限制，开发出了这种GIF图像格式，是一种动态图片。
特点：
-
支持简单的透明背景，无法呈现复杂的透明背景，复杂的透明背景还得使用png呈现
-
支持动图
优缺点：
-
优点-更小的文件体积和动画支持
-
缺点-8-bit限制代表图像质量受限
二进制数系统中，每个0或1就是一个位(bit)，位是数据存储的最小单位。其中8bit就称为一个字节(Byte)
4）PNG格式质量高
扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片
特点：
- 质量高
- 占用空间大
- 支持透明背景
- 不支持动图
优缺点：
- 优点-高质量（无损）图像和清晰可见的文本
- 缺点-如果文件过多（特别是高分辨率图像），可能会严重影响网站加载速度
十、结语
本节内容至此就结束了，希望对大家有所帮助。如果你也喜欢学习前端知识，那么可以加入博主的社区，社区会不定时发布一些基础知识(戳我进社区)，以及一些前端面试题，快来加入我们吧~
