前言
互联网技术的学习是一条看不到头的路，需要用一生去热爱，持之以恒的学习。
而目前互联网公司的两大招聘岗位则有前端工程师和后端工程师，前端便是在浏览器中人们所能看到的网页，网页的内容就是使用前端技术构建的，而网页背后的数据与网页的逻辑运行则是依靠后端技术的支撑。这就是对前端与后端最基本的认知。无论是前端还是后端的学习都是不容易的，甚至可以说是特别困难，因为两门技术栈涉及的知识面广，技术体系大，技术内容繁多，导致他们的学习都是很困难的。当然了，不管有多么困难，只要有一颗勇敢的心，热爱技术的心，再加上持之以恒的心就一定会慢慢攻克。接下来，我将会持续给大家呈现上自己的技术笔记和大家一起交流学习！
一、前端三大核心技术简介
HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
CSS
层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
JavaScript
简称JS
JavaScript（通常缩写为JS）是一门基于原型和头等函数的多范式高级解释型编程语言，它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。目前，它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、Firefox、Safari和Opera）所支持。
JavaScript与Java在名字和语法上都很相似，但这两门编程语言从设计之初就有很大不同。JavaScript在语言设计上主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响，在语法结构上它和C语言很相似（如if条件语句、switch语句、while循环和do-while循环等）。
对于客户端来说，JavaScript通常被实现为一门解释语言，但如今它已经可以被即时编译（JIT）。随着HTML5和CSS3语言标准的推行，它还可以用于游戏、桌面和移动应用程序的开发，以及在服务器端网络环境运行（如Node.js）。
一个完美的网页效果需要这三个技术相互配合，相辅相成
二、HTML是什么？
Hyper Text Markup Language 超文本标记语言
HTML是用来描述网页的语言，它是网页的结构，一个网页必须要有HTML作为结构支撑，这样浏览器才可以呈现出具有结构的标准的网页结构
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用一套标准化的标记标签来描述网页
- HTML很容易学习
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML标签通常也称为HTML元素
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 <b>
- 也有单独的标签,比如<br>，这个标签的作用是换行
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML属性
属性是HTML元素提供的附加信息
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性放在开始标签中
- 属性总是以名称/值对的形式出现，比如：name=“value”。
例如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <!-- HTML超链接使用<a>标签定义，而链接的地址在href属性中规定 --> <a href="https://blog.csdn.net/huawuque404">我的博客</a> </body> </html>
浏览器显示效果：
HTML版本
从1991年第一版HTML发布后HTML不断在更新，现在主流的HTML的版本是HTML5，HTML5不仅新增了很多特性，同时也兼容历史版本
| 版本 | 发行时间 |
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
HTML编辑器
1.记事本
大神用的，普通人看看就好😂
2.VS code
官网：https://code.visualstudio.com/
是一个由微软开发的，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器可以安装拓展程序，提高了开发和工作的效率，结合拓展程序几乎支持所有主流的编程语言，
它免费且体积小，深受开发者的喜爱
3.Sublime Text
官网：http://www.sublimetext.com/
Sublime Text 是一个文本编辑器（收费软件，可以无限期试用），同时也是一个先进的代码编辑器。
4.Adobe Dreamweaver
官网：https://www.adobe.com/cn/products/dreamweaver.html
Adobe Dreamweaver，简称“DW”。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。
5.JetBrains WebStorm
官网：https://www.jetbrains.com/zh-cn/webstorm/
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
使用VS code构建HTML页面
vscode安装及配置教程：安装配置教程
按照上面的教程根据自己的需要对vscode进行配置即可使用vscode尽情的写前端了
三、HTML实例
实例1
下面是一段HTML代码
<!DOCTYPE html> <!-- 声明为HTML5文档 --> <html> <!-- 头部元素 --> <head> <meta charset="utf-8"> <!-- 网页编码格式为utf-8 --> <title>花无缺</title> <!-- 网页标题 --> </head> <!-- 可见的网页内容 --> <body> <h1>我的第一个标题</h1> <h2>我的第二个标题</h2> <p>我的第一个段落。</p> </body> </html>
在浏览器的显示效果：
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键进入开发者模式，就可以看到组成标签。
HTML、CSS以及JavaScript的代码要在web浏览器中运行，才可以看到效果
常用的web浏览器：谷歌浏览器Google Chrome、微软浏览器Microsoft Edge（原IE浏览器）、火狐浏览器Firefox、欧朋浏览器Opera、苹果safari浏览器
作者用的是谷歌和Edge，这里我推荐谷歌浏览器，响应速度很快，但是谷歌浏览器也有个小毛病就是国内用户不可以登录谷歌账户，就无法随时同步浏览器的浏览记录和书签等个人信息，换设备使用会有一定麻烦
实例2
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>实例2</title> </head> <body> <h4>下面是html实例演示</h4> <p> 这是一个段落。<br> 学习 HTML 最好的方式就是边学边做实验。<br> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <a href="https://blog.csdn.net/huawuque404" target="_blank">这是一个超链接,点击就可以跳转到目标网页</a> <!--这是一张图片--> <img src="https://ucc.alicdn.com/images/user-upload-01/920771cb50e842dd89d0f181f30c0e9a.png"> </p> </body> </html>
浏览器显示效果：
四、HTML具体知识
SEO
SEO(Search Engine Optimization):搜索引擎优化
作用:让网站在搜索引擎上的排名靠前
提示SEO的常见方法:
- 竞价排名
- 将网页制作成html后缀
- 标签语义化(在合适的地方使用合适的标签)
- …
SEO三大标签
title：网页标题标签
例如：
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
description：网页描述标签
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
keywords：网页关键词标签
例如：
<meta name="Keywords" content="网上购物，网上商城，家电，手机，电脑，服装，居家，母婴，美妆，个护，食品，生鲜，京东">
ico网页图标设置
ico图标即浏览器标签栏上显示的图像
例如：
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
HTML注释
注释的格式：<!--注释内容-->
例如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <p>这是一个帅哥</p> <!-- 这是一段注释，将帅哥和美女隔开了，但是浏览器会忽视注释内的任何信息，不会影响HTML代码 --> <p>这是一个美女</p> </body> </html>
浏览器显示效果：
注释的作用：
为代码添加的具有理解性、描述性的信息，主要用来帮助前端开发人员理解代码
浏览器执行代码时会忽略所有的注释
标签组成和关系
组成
HTML标签的结构图
结构说明：
- 标签由< > / 英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见的标签由两部分组成，即双标签，前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容，如<strong></strong>
- 少数标签只由一个部分组成，即单标签，自成一体，无法包裹内容，如<br>
标签关系
- 父子关系(嵌套关系)
<head> <title></title> </head>
- 兄弟关系(并列关系)
<head></head> <body></body>
标题和段落
标题标签
<h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6>
例如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </body> </html>
浏览器显示效果：
特点：
- 文字都有加粗
- 文字都有变大，并且从h1到h6文字逐渐减小
- 独占一行，自动换行
注意：
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
段落
HTML段落可以把HTML文档分割成若干段落
<p>段落内容</p>
例如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <p>这是第一段，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</p> <p>这是第二段，前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 </p> <p>这是第三段，前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p> </body> </html>
浏览器显示效果：
特点：
- 不同段落之间存在间隙
- 浏览器会自动地在段落的前后添加空行
- 段落最后一行独占一行
换行和水平线
换行标签
如果希望在不产生一个新段落的情况下进行换行（新行），可以使用 <br>标签，换行标签是单标签
<br>
让文字强制换行
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>huawuque404</title> </head> <body> <p> 这是一句话 这是一句话 <!-- 下一句会换行 --> 这句话之后会换行<br> 这是一句话 这是一句话 这是一句话 </p> </body> </html>
浏览器显示效果
注：为使页面更加简洁，下面内容的代码举例我会只保留<body>里面的内容,省略<html>等标签
水平线标签
水平线标签是单标签
<hr>
在网页上显示一条水平线
例如：
<body> <p>这是第一个段落</p> <hr> <p>这是第二个段落</p> <hr> </body>
浏览器显示效果：
文本格式化标签
HTML可定义很多供格式化输出的元素，比如粗体和斜体，文本格式化标签可以使标签内的文本产生不同的文字效果
| 标签 | 作用 |
<b></b> |
加粗 |
<u></u> |
下划线 |
<i></i> |
倾斜 |
<s></s> |
删除线 |
<strong></strong> |
加粗 |
<ins></ins> |
下划线 |
<em></em> |
倾斜 |
<del></del> |
删除 |
推荐使用后四个文本格式化标签，因为它们更具有语义性
术语解释：
“语义”
语言所蕴含的意义就是语义(semantic)。简单的说，符号是语言的载体。符号本身没有任何意义，只有被赋予含义的符号才能够被使用，这时候语言就转化为了信息，而语言的含义就是语义。语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。
例如：
<body> <p> <!-- <br>表示换行 --> <b>定义粗体文本</b><br> <em>定义斜体文字</em><br> <i>定义斜体字</i><br> <small>定义小号字</small><br> <big>定义大号字</big><br> <strong>定义加重语气</strong><br><br> 花无缺<sub>定义下标字</sub><br><br> 花无缺<sup>定义上标字</sup><br><br> <ins>定义下划线</ins><br> <del>定义删除字</del><br> <s>与del同效果</s><br> <strike>与del同效果</strike><br> <u>下划线</u> </p> </body>
浏览器显示效果：
此外HTML中还提供了计算机输出标签 和 引用标签
计算机输出标签：
| 标签 | 作用 |
<code></code> |
定义计算机代码 |
<samp></samp> |
定义键盘码 |
<tt></tt> |
定义打字机代码 |
<var></var> |
定义变量 |
<pre></pre> |
定义预格式文本 |
例如：
<body> <p> <code> Hello World! </code><br> <samp>shift</samp><br> <tt>打字机代码</tt><br> <var>定义变量</var><br> <pre> pre标签内的格式不会改变 花无缺 花无缺 花无缺 </pre> </p> </body>
浏览器显示效果：
引用标签：
<abbr></abbr> |
定义缩写 |
<acronym></acronym> |
定义首字母缩写 |
<address></address> |
定义地址 |
<bdo></bdo> |
定义文字方向 |
<blockqute></blockqute> |
定义长的引用 |
<q></q> |
定义短的引用 |
<cite></cite> |
定义引用、印证 |
<dfn></dfn> |
定义一个定义项目 |
例如：
<body> The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.<br> <address> Written by <a href="huawuque404@163.com">huawuque404</a>.<br> Visit us at:<br> Example.com<br> fand 564, jack<br> CHINA </address> <p> 如果你的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)； </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> <br> <blockquote>长的引用</blockquote> <q>短引用</q><br> <cite>引用,印证</cite><br> <dfn>定义一个定义项目</dfn> </body>
浏览器显示效果：
图像
图像的基本使用
<img src = "图片路径" alt = "无法加载图片时显示的文字信息">
代码中src和alt为标签属性，src和alt为属性名，“”中的内容为属性值
img标签如果要展示图片效果，则利用标签属性进行设置
例如：
<body> <img src="https://wx1.sinaimg.cn/mw2000/006xNq9cgy1h66kfz733aj30j609i3yz.jpg" alt="这是帅气的作者本人"> </body>
浏览器显示效果：
如果图片由于网络不稳定等原因无法加载出图片，则就会在对应位置显示alt属性中的文字
例如以上例子，当无法加载图片时浏览器的显示效果为：
注意：
- 标签的属性在开始标签的内部
- 标签上可以同时存在多个标签
- 属性之间用空格隔开
- 属性没有顺序要求
图像地图
HTML图像地图<map>标签和<area>
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<map>中的 usemap 属性可引用 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
<area> 元素始终嵌套在 <map> 标签内部。
注释： <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。
例如：
<body> <p>点击太阳或其他行星，注意变化：</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body>
图片属性
src属性
属性值：图片的文件路径
alt属性
属性值：图片的替换文本
作用：当图片无法正常加载显示时，替代图片显示出文字
title属性
属性值：提示文本
作用：当鼠标悬停在图片上时，显示出文字
注意：title属性不仅仅用于图片标签，还可以用于其他标签
width和height属性
属性值：图片的宽度和高度（数字）
注意：
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，则图片可能会根据设置产生变形
路径
路径就是文件的位置
比如某个本地计算机的D盘的哪个文件的路径
C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg
或者在某个网络服务器的某个文件的路径
https://ucc.alicdn.com/images/user-upload-01/803b27ae38ed495d8d28859c68b4c3e5.png
而路径又分为绝对路径和相对路径
绝对路径
目录下的绝对位置，可直接到达目标位置，通常从根目录开始的路径
例如：
1.根目录开头：C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg
2.完整的网络地址：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
相对路径
从当前文件出发的文件路径，可分为同级、下级，上级目录来理解和区分
我们以一个图片文件为例
同级目录
当前文件和目标文件在同一目录(文件夹)中
使用路径的代码：
<img src = "目标图片.jpg">
或
<img src = "./目标图片.jpg">
./ 表示当前目录(文件)
下级目录
目标文件在当前目录的下一级目录(子文件)中，则要进入到下一级目录中
使用路径的代码：
<img src = "目标图片所在的文件夹/目标图片.jpg">
上级目录
目标文件在当前目录的上一级目录(父文件)中，则要返回到上一级目录
使用路径的代码：
<img src = "../目标图片所在的文件夹/目标图片.jpg">
返回一次上层目录使用一次 …/
例入目标文件在当前文件的上三层目录，则要在使用路径前加三个…/
../../../目标文件所在的文件夹/目标文件
音频标签
<audio src = "音频文件路径" controls></audio>
属性：
| 属性 | 功能 |
| src | 音频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(部分浏览器不支持) |
| loop | 循环播放 |
注意：目前HTML只支持三种音频格式：mp3、wav、ogg
例如：
<body> <audio src="http://m701.music.126.net/20220915004706/ddd5d1e6f42f43cbb095d307e3ea971b/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14096503516/68d0/e4dd/0407/77ef28fb12e677f5b79754c73f73cbd7.mp3" controls> </audio> </body>
浏览器显示效果：
