前端的入门第一课|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
一、什么是前端
1、前端的定义
定义：前端即网站前台部分，是与用户直接交互的部分，包括你在浏览网页时接触的所有视觉内容——从字体到颜色，图片到音频，特效到布局，以及下拉菜单和侧边栏等所有直接呈现给用户的部分称为前端。
2、前端的核心技术
HTML，CSS，JavaScript这三个是前端开发中最基本也是最必须的三个技能，在开发中，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。
换而言之，HTML是网页的内容组成，CSS对内容的外形进行包装，而JavaScript则是内容的所要做的动作。
进而形成一个功能完善，美观，安全，体验良好，性能强，无障碍，兼容的用户界面。
3、前端开发工具
目前最为流行的前端编辑器为VSCode，Vim，WebStorm等。
二、HTML基础
1、HTML是什么？
HTML是超文本标记语言（HyperText Markup Language）的缩写，不是一种编程语言，而是一种标记语言，标记语言都会提供一套标记标签，用标记标签来设计网页。
2、HTML的常用标签
标题
标题标签是一对双标签。
| 代码 | 名称 |
|---|---|
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
段落
文本修饰
| 代码 | 解释 |
|---|---|
| strong | 文本加粗 |
| em | 文本斜体 |
| br | 换行标签（单标签） |
| hr | 水平分割线（单标签） |
链接
图片链接
| 代码 | 解释 |
|---|---|
| width、height | 图片的宽、高 |
| src | 在.html文件中引入图片的地址 |
| alt | 当图片加载出现问题或无法加载时，起提示作用 |
| title | 提示图片的信息 |
<img width="30%" height="30%" src="./img/scene_1.jpg" alt="风景图片1" title="风景图片1">
地址链接
<a href="https://www.bilibili.com/" target="_blank">哔哩哔哩官网</a>
列表
(1) 无序列表：<ul></ul>
列表项：<li></li>
(2) 有序列表：<ol></ol>
列表项：<li></li>
(3) 定义列表：<dl></dl>、<dt></dt>、<dd></dd>。
