写在前面：写文章的原因是像系统性的学习前端知识，也想增添一分学习的乐趣。之前总是因为各种原因，学的东西浅尝辄止半途而废，再加上从大一到现在在csdn上获得了无数的帮助，因此也想记录些什么东西，留下点自己的痕迹；本栏目主要用于自用，但更恳请各位友好地指正交流；内容会集中于html、css、javascript三大基础知识，主要会沿着b站视频展开。
学习参考资料：
1、主要内容：b站pink老师网络课程（二倍速+选择性观看）
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili2、辅助内容：
Ⅰ、百度前端训练营
代码仓库 - 百度前端实战训练营-何沐 (gitee.com)
Ⅱ、w3c廖雪峰博客等相关网站
廖学峰blog JavaScript教程 - 廖雪峰的官方网站 (liaoxuefeng.com)
目录：
一、什么是HTML？
HTML，即HyperText Markup Language（超文本标记语言）； “超文本”就是指页面内可以包含图片、链接，甚至音乐，程序等非文字元素。网页本质上是一个html文件，由超链接串联不同的文件，实现网络的构成。
1、Web标准
web标准是由W3C组制定的一系列标准的集合。
Web标准由三部分组成：结构(structure)，表现(presentation)，行为(behavior)
2、HTML语法规范
1、双标签成对出现，比如<head>文本内容</head>
2、HTML 标签是由尖括号包围的关键词，比如 <html>
二、HTML标签
1、HTML基本结构标签
<html> //根标签
<head> //头部标签，其中必须要设置title
<title>网页标题</title> //即网页标题
</head>
<body> //主体
元素包含文档的所有内容，页面内容基本都是放在body里
</body>
</html>ps：都什么年代，还在用传统记事本敲代码，快来用vscode：(60条消息) 教你快速使用VSCode编写HTML文件_半生瓜のblog的博客-CSDN博客_vscode写html
pink老师推荐插件：其中第三项不推荐使用，其他依照个人要求而定
2、HTML文件基本属性
对文档形式内容不会产生任何影响，但每个html文件必须拥有
3、HTML常用标签
（1）标题标签<h1>-<h6>
缩写单词为head，对文本内容进行放大加粗操作
<h1>我是标题标签</h1>
（2）段落标签<p> </p>
缩写单词为paragraph，在html文件中，空格和换行操作会自动缩进为一个空格，因此用文本实现换行是错误的，这时应运用段落标签实现换行。
<p>我是段落标签1</p>//1、段落大小会随着浏览器大小自动变化
<p>我是段落标签2</p>//2、段落间有一行空隙
（3）换行标签<br/>
缩写单词为break，为单标签，不需要结束标签，段落之间没有间隔
<body>许多年之后面对行刑队，奥雷连诺布恩迪亚上校依旧会想起，
<br/>父亲带他见识冰块的那个遥远的下午。</body>
（4）文本格式化标签
突出文本重要性，使文本内容更加重要。
其中对应的单词缩写为：
加粗——strong
bold
倾斜——emphasize
incline
删除线——deletestrikethrough
下划线——insert
underline
<p>
<strong>我是加粗标签</strong>
<b>我是加粗标签</b>>
</p>
<p>
<em>我是倾斜标签</em>
<i>我是倾斜标签</i>
</p>
<p>
<del>我是删除标签</del>
<s>我是删除标签</s>
</p>
<p>
<ins>我是插入标签</ins>
<u>我是插入标签</u>
</p>
（5）<div>标签和<span>标签
<span>和<div>没有语义，他们相当于一个盒子，用来装内容
单词缩写为span和division
两者区别：
1、<div>是一个大的盒子，一行只能放一个<div>标签
2、<span>是一个小盒子，一行可以放多个<span>标签
<span>我是span标签</span>
<span>我是span标签</span>
<div>我是div标签</div>123
<div>我是div标签</div>123
（6）图像标签<img>
<img>用于定义图像，为单标签，其中必须加入的属性为“src”，即链接；
单词缩写： img——image src——source
图像标签的其他属性：
<img src="img2.jpeg">
<img src="img2.jpg" alt="uniguri">
<img src="img2.jpeg" alt="uniguri" title="uniguri">
<img src="img2.jpeg" width=300 height=300 ><!--1、其中数字加不加引号皆可，数字单位是像素-->
<!--2、若width和height只指定了其中一个，图像则会按指定的数值等比例缩放-->
<img src="img2.jpeg" border="2">
（7）路径
（1）目录文件夹和根目录
目录文件夹：即普通文件夹
根目录：打开目录文件夹的第一层就是根目录
（2）路径
在html中，标签通过路径属性来获得文件实体；其中，路径可分为两种：
1、相对路径
以引用文件的相对位置为参考，即文件相对于基准（你正在敲代码的文件）的相对位置，其中img1文件位于文件夹A，html位于文件夹B，img2位于文件夹C，则对应相对路径为：
. 代表目前所在的目录 ..代表上一层目录 /代表根目录
2、绝对路径
以硬盘为出发位置来精准形容文件位置，与html文件所在位置无关
其中路径分为反斜杠\ 和 斜杠/，在大多数场景中通用：
(1)浏览器地址栏网址使用 斜杆/ ;
(2)windows文件浏览器上使用 反斜杠\ ;
(3)出现在html url() 属性中的路径，指定的路径是网络路径，所以必须用 斜杆/ ;
(4)出现在普通字符串中的路径，如果代表的是windows文件路径，则使用 斜杆/ 和 反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用 斜杆/ ;
（8）超链接标签<a>
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另外一个页面；
单词缩写为anchor（锚；锚点）,其中href属性为必加属性
<a href="www.bilibili.com" target="">哔哩哔哩</a>
<a href="www.bilibili.com" target="__blank">哔哩哔哩</a>
（2）链接的分类
1、外部链接：例如 <a href="www.bilibili.com" target="">哔哩哔哩</a>
2、外部链接：网站内部之间的相互链接，直接链接名称即可，如<a href="index.html">首页</a>
3、空链接：不链接到任何页面，如<a href="#">空连接</a>
4、下载链接：点击后下载文件，如<a href="img.zip">下载图片</a>
5、网页元素的链：在网页中的各种网页元素，如视频、图片、表格、文本、音频等添加超链接，如<a href="www.bilibli.com" target=" "><img src="img1.img"></a>
6、锚点链接：点击锚点链接，可以迅速定位到页面中的某个位置，作用相当于目录，使用方法如下：
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two"> 第2集</a>
- 找到目标位置标签，里面添加一个id属性，如<h3 id="two">第2集介绍</h3>
（9）注释和特殊字符
1、注释的格式为：<!-- 内容 --> 快捷键：ctrl+ /
2、在html页面中，一些特殊字符很难直接使用，此时我们可以用下面的字符替代
扫一扫
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
