前端开发学习笔记（1）

文章目录

- 基础概念
- VSCode常用插件和快捷键
- - VSCode常用插件
  - VSCode常用快捷键
- 常用标签和属性

基础概念

网页和网站：

网页：网站中的一页，通常是HTML格式的文件。网页是由网页元素组成的，这些元素用HTML标签描述，然后通过浏览器进行解析。网页文件的后缀是.htm或.html。
网站：在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

超文本标记语言HTML：用来描述网页的一种语言。该语言不是一种编程语言，而是一种标记语言，具有一套标记标签。超文本是指可以放入除了文本之外的其他内容（例如图像、视频、音频等），还可以用于存放超链接。

国际常用浏览器：IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器、Edge浏览器和Opera浏览器。

目前，谷歌浏览器占据了世界大约一半的使用份额，因此学习前端开发最好使用谷歌浏览器。

浏览器内核：也被称为渲染引擎，用于读取网页内容，整理讯息，计算网页的显示方式。常用的浏览器内核如下：

Trident内核：IE浏览器、猎豹浏览器、360极速浏览器、百度浏览器等均使用该内核。
Gecko内核：火狐浏览器的专属内核。
Webkit内核：苹果浏览器专属内核。
Blink内核：谷歌浏览器、Opera浏览器的内核。该内核实际上是Webkit内核的分支。

目前国内的浏览器，大多采用Webkit或Blink内核进行开发，例如360安全浏览器、QQ浏览器和搜狗浏览器等。

Web标准：由W3C组织（万维网联盟）和其他标准化组织制定的一系列标准的集合。这些标准包括结构、表现和行为三部分：

结构：用于对网页元素进行分类和整理，主要基于HTML。
表现：设置网页元素的版式、颜色、大小等样式，主要指CSS。
行为：网页模型的定义和交互的编写，主要是JavScript（JS）。

HTML中的标签：

标签分类：标签可以分为单标签和多标签，大部分的标签都是单标签。
标签包含：标签可以互相包含。

VSCode常用插件和快捷键

VSCode常用插件

在VSCode左边侧栏中即可下载各种插件。

Chinese 插件：将VSCode中的所有内容修改为中文；
Auto Rename Tag 插件：每次修改其中一个双标签中的一个时，另一个标签的名称会自动跟随修改。
Open in browser 插件：编写完成的代码可以在浏览器中进行预览。
Live Server 插件：使用Open in browser时，会需要每次写完都要重新打开一次浏览器，比较不方便；但是Live Server只要代码保存后都可以直接在浏览器中看到而无需刷新。
Easy Less 插件：自动将LESS文件自动变为CSSS文件。
VSCode icons 插件：对于不同类型的文件，会显示不一样的图标方便区别；

VSCode常用快捷键

Shift+Alt + ↓：复制当前的一行；
Ctrl + D：选择所有指定的单词；
Ctrl + H：进行查找替换的快捷键；
Ctrl + G：快速跳转到某一行；
Ctrl + /：进行单行注释。

常用标签和属性

HTML标签：所有HTML文件都必须要带有的标签，被称为根标签。表达为<HTML>...</HTML>
HEAD标签：HTML文档头部标签，所有HTML文件都必须对title标签进行设置。表达为<head>...</head>。
TITLE标签：文档标题标签，也就是网页的标题，该标题显示在文件的标题栏中。表达为<title>...</title>。
BODY标签：文档的主体部分，也就是网页的主要内容。表达为<body>...</body>。
<!DOCTYPE>标签：文档类型声明标签，告诉浏览器使用的HTML版本是HTML5。该标签必须写在HTML文件的第一行，并不属于HTML标签的一部分。
lang：作为HTML标签的属性。定义当前文档显示的语言。如果是en则表示英语，如果是zh-CN则表示是中文。简单来说，en表示英文网页，zh-CN表示中文网页。其实，中文文档仍然可以显示英文，英文文档仍然可以显示中文，该属性的作用是指给浏览器提供参考（例如浏览器会询问是否需要进行翻译）。
charset：设置方式为<meta charset="编码类型">。常用的编码类型有GB2312、GBK和UTF-8等，其中UTF-8是最常用的编码类型，也被称为万国码。一般情况下，能够使用UTF-8编码就使用该编码。如果不定义使用的编码类型，则打开的HTML文件代码可能出现乱码。
标题标签<h>：分为<h1>到<h6>，数字越小，标题级别越高，字体越大。每一个标题都是独占一行的。
段落标签<p>：用<p></p>表示。在HTML页面中只有通过该标签才能进行分段。文本在一个段落中会根据浏览器窗口的大小自动换行，段落和段落之间会保持一定空隙。
换行标签<br/>：单标签。行与行之间的间距没有像采用段落标签那样那么大。
加粗标签<strong></strong>：用于对指定区域的文本进行加粗。另外，<b></b>标签也可以实现这个效果。
倾斜标签<em></em>：用于设置指定区域内文本的斜体。另外，<i></i>标签也可以实现这个效果。
删除标签<del></del>：用于对指定文本设置删除线。另外，<s></s>标签也可以实现这个效果。
下划线标签<ins></ins>：用于设置文本的下划线，也可以使用<u></u>实现这个效果。
<div>标签：分区标签。盒子标签的一个，但是一行只能放一个<div>，可以被视为一个大盒子。
<span>标签：分区标签。盒子标签的一个，一行可以有多个<span>标签。可以理解为一个小盒子。
图像标签<img>：单标签。其必需属性scr表示图像的路径和文件名。其他属性如下，各个属性之间不分先后顺序。
- alt：图像显示不了时进行替换的文本；
- title：当鼠标移动到图像上的提示文本；
- width：设置图像的宽度；
- height：设置图像的高度；
- border：设置图像的边框的宽度。