前端开发学习笔记 1 （基础概念、HTML5基础、前端开发工具VSCode基本介绍）

文章目录

- 基础概念篇
- - 网页相关的基础概念
  - 浏览器和浏览器内核
  - Web标准
- HTML5基础
- - HTML的基本语法规范
  - HTML文件基本结构标签
  - 文档类型声明标签、文件语言和字符集类型
  - 标题标签、段落标签和换行标签
  - 文本格式化标签
  - 两种容器标签
  - 图像标签
  - 超链接相关
  - HTML中的注释和特殊字符
  - 表格标签
  - 列表标签
  - 表单标签
- 前端开发工具VSCode基本介绍
- - VSCode推荐插件
  - VSCode快捷键

基础概念篇

网页相关的基础概念

网页和网站：

网页的概念：按照一定的规则，使用HTML等语言编写的文件，需要通过浏览器解析渲染后才能进行阅读。网页中通常包含文本、图片、声音、视频和链接等元素，其文件的后缀名一般是.html或.htm，因此也被称为HTML文件。
网站的概念：一组内容相关的网页的集合。

HTML：超文本标记语言。该语言是一种较为简单的用于描述网页的语言。

超文本：超越了文本的限制，可以加入图片、声音、视频、链接等内容。
标记语言：并非编程语言，而是基于一组标记标签的简单语言。

创建一个HTML文件并查看文件效果的最简单的方式：

新建一个记事本文件；
在记事本中写入HTML代码；
保存文件，将文件的后缀名修改为.html；
通过浏览器打开该文件。

浏览器和浏览器内核

浏览器：

基本概念：网页显示和运行的平台。
国际上常用的浏览器：IE浏览器（微软）、火狐浏览器（Firefox，Mozzila基金会开发的开源浏览器）、谷歌浏览器（Google Chrome）、Edge浏览器（微软）、Safari浏览器（苹果）、Opera浏览器（挪威电信公司的研究项目发展而来）。
前端开发人员的浏览器选择：谷歌浏览器占据了浏览器市场一大半的份额，因此前端人员推荐首选谷歌浏览器进行前端开发。

浏览器内核：

基本概念：浏览器内核也被称为浏览器的渲染引擎，负责读取网页内容、整理消息，得出网页的显示方式并显示HTML文件。
常用的浏览器内核：
- Trident：IE浏览器的内核。除了IE浏览器之外，猎豹安全浏览器、百度浏览器、搜狗浏览器均采用该内核进行开发。
- Gecko：火狐浏览器的内核。该内核也被称为火狐内核，是一个开源的浏览器内核。
- Webkit：Safari浏览器的内核，该内核由苹果公司开发，一些追求高速的浏览器常会使用该内核。
- Blink：谷歌浏览器和Opera浏览器的共同内核，由这两家公司共同开发，实际上是Webkit内核的一个分支。360安全浏览器和QQ浏览器也采用的是该内核进行开发。
国产浏览器常用内核：国产浏览器大部分使用的是Webkit和Blink内核。

Web标准

基本概念：由万维网联盟（W3C，国际最著名的标准化组织之一）组织和其他标准化组织制定的一系列标准的集合。
为什么要制定标准：让不同的开发人员写出更加标准统一的网页，并且还有诸多优点，例如使得网站更容易维护、降低网站流量费用、提高页面浏览速度等。
标准组成：分为结构、表现和行为三大部分。Web标准中提出最佳的体验方案是将这三部分相分离，简单理解就是将结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
- 结构：对网页元素进行整理和分类，主要使用HTML。
- 表现：对网页元素的版式、颜色大小等样式进行调整，主要用CSS。
- 行为：网页模型的定义和交互的编写，主要用JavaScript。

HTML5基础

HTML的基本语法规范

标签的表示：所有的标签名都必须放在一对<>中。
单个标签和成对标签：大部分的HTML标签都是成对出现的，分别被称为开始标签和结束标签，表示方法为<标签名>...</标签名>，少部分标签是单个标签，表示方法为<标签名/>。
双标签之间的关系：双标签之间的关系可以分为包含（嵌套）关系和并列关系两种。

HTML文件基本结构标签

<html>标签：双标签。把所有其他标签都嵌套在该标签的内部，被称为根标签。
<head>标签：双标签。HTML页面的头部标签（对应网页的地址栏部分）。
<title>标签：双标签。标签的子标签，是所有标签中必须设置的标签，让网页有一个对应的标题。
<body>标签：包含文档的所有内容，页面内容基本上都是放在该标签下的。

文档类型声明标签、文件语言和字符集类型

文档类型声明标签<!DOCTYPE>：
- 标签作用：该标签告诉浏览器用来显示网页的的HTML版本是HTML5（而非HTML4和XML等其他版本）。
- 标签位置：该代码必须写在整个HTML文件的第一行。
- 注意事项：该标签不是HTML标签，而是一类特殊的标签。
HTML标签的lang属性：
- 属性作用：定义网页的显示语言；
- 属性值：如果是en则定义网页为英语，zh-CN则表示网页的语言是中文。简单来说，前者表示英文网页，后者表示中文网页。
- 注意事项：英文网页仍然可以显示中文，中文网页仍然可以显示中文。定义该属性值只是为浏览器提供参考，例如网页自带的翻译功能。
设置HTML文件的字符集：
- 设置方式：<meta charset="字符集类型">，该标签放在HTML文件的<head>标签中。
- 属性作用：定义HTML文件的字符集，即文件字符采用的编码方式。
- 常用的属性值：推荐使用"utf-8"，该编码也被称为万国码，基本上包含了世界上所有国家需要使用的字符。其他常用的值还有GB2312、BIG5、GBK等。

标题标签、段落标签和换行标签

标题标签<h>：
- 标签作用：成对标签，用于指定网页内容中的标题，标题字体会加粗增大着重显示，并且独占一行。
- 标签分级：HTML5中的<h>标签可以分为<h1>到<h6>六个层级，层级越低，标题越小，重要性越低。
段落标签<p>：
- 标签作用：成对标签，将网页中的文字分段显示。
- 标签特点：文本在一个段落中会根据浏览器窗口的大小进行自动换行，并且段落和段落之间有较大的空隙。
换行标签<br/>：
- 标签作用：单标签，在某处强制文本换行显示而非到浏览器的窗口右端自动换行。
- 标签特点：使用该标签进行换行时，两行之间的间距不会改变。

文本格式化标签

文本加粗标签：
- 推荐表示方法：<strong>...需要加粗的文本...</strong>。
- 另一种表示方法：<b>...需要加粗的文本...</b>。
文本倾斜标签：
- 推荐表示方法：<em>...需要倾斜的文本...</em>。
- 另一种表示方法：<i>...需要倾斜的文本...</i>。
文本删除线标签：
- 推荐表示方法：<del>...需要加删除线的文本...</del>。
- 另一种表示方法：<s>...需要加删除线的文本...</s>。
文本下划线标签：
- 推荐表示方法：<ins>...需要加下划线的文本...</ins>。
- 另一种表示方法：<u>...需要加下划线的文本...</u>。

两种容器标签

标签作用：将一部分的网页元素装起来，相当于一个容器。这两个标签本身是没有语义的。
标签分类：<div>标签和<span>标签，这两个标签都是双标签。
标签区别：<div>标签表示的容器会在网页中单独占一行，<span>标签表示的容器可以在一行中放多个。可以认为<div>表示一个大容器，<span>标签表示一个小盒子。

图像标签

标签格式：<img src="图像URL">，该标签是一个单标签。
scr属性：<img>标签的必须属性，表示图像的URL。
alt属性：如果图像不能正常显示，则进行显示的文字。
title属性：鼠标移动到图像上时进行提示的文字。
width属性：给图像设置宽度。一般宽度和高度设置一个即可，另一个属性会自动根据图片的高宽比进行调整。
height属性：给图像设置高度。一般宽度和高度设置一个即可，另一个属性会自动根据图片的高宽比进行调整。
border属性：给图像设置边框宽度。但是在一般情况下，都是通过CSS对图像的宽度进行设置而非使用HTML。

注意事项：
属性顺序：同一个标签的各个属性之间不分先后顺序；标签名和属性、属性和属性之间均采用空格进行分隔。
属性值格式：属性采用键值对的格式，即属性=”属性值"。

超链接相关

超链接分类：
- 外部链接：指向其他网站的超链接，必须以http://或https://开头。
- 内部链接：网站内部各个网页之间的超链接，不需要以http://或https://开头。
超链接标签<a>：
- 标签作用：从当前网页页面链接到另一个网页页面。
- 标签语法：<a href="跳转目标的URL" target="目标窗口的弹出方式>...表示超链接的文本或图像...</a>。
- href属性：指定链接目标的URL地址，是一个必须属性。
  - 空链接：如果目标网页还不确定或不存在，则将属性值设置为“#”即可，表示空链接。
  - 下载链接：如果将该属性的值设置为一个文件的路径，文件可以是压缩包，也可以是可执行文件等。这样的方式表示一个下载链接，点击该链接后可以自动下载该文件。
  - 网页元素链接：超链接中的内容可以是任何网页元素，例如，以图片作为超链接入口的语法为<a><img src="图片地址"></a>。
- target属性：表示超链接窗口的打开方式。默认值为”_self"，表示用当前窗口打开超链接；如果采用"_blank"，则表示以新窗口的方式打开超链接。
锚点链接：
- 链接作用：在点击链接后，可以快速定位到当前网页中的某个指定位置；
- 设置方法：
  - 首先找到需要跳转到的位置，为该处的标签设置id属性，属性值即可视为该标签的名称，假设名称为X。
  - 接着，在进行跳转的链接中，将href属性的值设置为#X即可。

HTML中的注释和特殊字符

注释：
- 注释的作用：让代码更易读和更容易维护。
- 注释的语法：。
特殊字符：常用的特殊字符只需要记住空格、大于号和小于号即可，其他的特殊字符可以在使用时进行查阅。
- 空格：&nbsp；
- 大于号：&gt；
- 小于号：&lt。

表格标签

标签作用：用于清晰整齐地展示数据。
标签语法：

<table>
  <tr>
    <td>单元格内的文字</td>
  </tr>
</table>

表格标签<table>：双标签，用于定义表格体本身；
表行标签<tr>：双标签，用于定义表格中的行，必须嵌套在<table>标签中；
单元格标签<td>：双标签，用于定义表格中的单元格，必须嵌套在<tr>标签中。
表头标签<th>：表头单元格，是一种特殊的单元格，其中的内容会加粗居中显示。
表格的头部标签<thead>和主体标签<tbody>：
- 标签作用：这两个标签并不定义网页的显示内容。但是当表格很长时，这两个标签可以很好地表达表格的语义。
- 标签使用：这两个标签都是双标签，其中<thead>标签表示的区域即为表格的头部区域，<tbody>表示的区域即为表格的主体区域。另外，<thead>内部必须有<tr>标签。
合并单元格：
- 方式分类：可以分为跨行合并和跨列合并两种方式，分别用rowspan和colspan进行表示；
- 目标单元格的概念：对于跨行合并，目标单元格即为最上方的单元格；对于跨列合并，目标单元格即为最左侧的单元格。合并单元格时，需要在目标单元格中写合并代码。
- 合并单元格的步骤：首先，确定是跨行合并还是跨列合并；接着，找到目标单元格，将合并方式作为该单元格的属性，需要合并的单元格数量作为属性值，写上合并代码。例如，；最后，删除合并后多出的单元格。

列表标签

标签作用：列表的作用是完成网页布局；
列表分类：列表可以分为无序列表、有序列表和自定义列表；
无序列表：
- 基本概念：无序列表是指各个列表项之间没有先后顺序的列表；
- 使用语法：需要注意的是<ul>标签中只能嵌套<li>标签，而不能嵌套其他类型的标签；<li>标签相当于是一个容器，里面可以存放各种网页元素；可以通过CSS设置无序列表的样式属性。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

有序列表：
- 基本概念：有序列表是指列表项具有先后顺序的列表。
- 使用语法：需要注意的是，和无序列表相似，<ol>标签中只能嵌套<li>标签，而不能嵌套其他类型的标签；<li>标签相当于是一个容器，里面可以存放各种网页元素；可以通过CSS设置有序列表的样式属性。

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

自定义列表：
- 使用场景：一个列表中有多个项目，每一个项目都有多个描述或解释。
- 使用语法：用<dl>标签来定义自定义列表，用<dt>来定义自定义列表中的每一个项目，用<dd>来定义每一个项目的描述和解释。需要注意的是，<dl>标签中同样只能嵌套<dt>标签和<dd>标签。

<dl>
  <dt>项目名1</dt>
    <dd>项目解释1</dd>
    <dd>项目解释2</dd>
</dl>

表单标签

标签作用：为了与用户进行交互，收集用户的资料信息
表单组成：表单可以分为表单域、表单控件（也被称为表单元素）和提示信息三部分。
表单域：
- 基本概念：包含表单元素的区域；
- 基本作用：当表单提交给服务器时，会将表单域中的所有信息提交；
- 使用语法：使用<form>标签定义表单域。具体语法为：<form action="url地址" method="提交方式" name="表单域名称">...各种表单元素控件...</form>。
  - action参数：用于指定接收并处理表单数据的服务器程序的URL地址；
  - method参数：用于设置表单数据的提交方式，取值为"get"或"post"；
  - name参数：用于指定表单的名称，用于区分同一个页面中的多个不同表单。
输入标签<input>：
- 基本使用：该标签为单标签，使用方式为：<input type="属性值”>，其中属性值取不同值表示使用不同的表单控件进行输入。
  - <input type="text">：表示输入方式为简单的文本框输入。
  - <input type="password">：表示以掩码文本框的形式进行输入。
  - <input type="radio">：表示以单选框的形式进行输入；同一组单选框中的选项需要设置name属性，即通过命名来标识这些单选框属于同一组中。语法为<input type="radio" name="指定的名称" >。
  - <input type="checkbox">：表示以复选框的形式进行输入；一组复选框也需要指定name属性，来表示这些复选框属于同一组中。
  - <input type="submit">：表示定义提交按钮，会自动将表单域中的所有数据发送给服务器。
  - <input type="reset">：表示定义重置按钮，会自动将表单域中的所有数据全部清空。
  - <input type="button">：定义一个普通按钮，来完成某项具体的工作。具体的工作内容往往由JavaScript进行设置。
  - <input type="file">：定义一个上传文件的按钮。
- 其他属性：
  - name属性：用户自定义属性值，用于描述通过<input>标签输入的元素的名称，在单选框和复选框中也可以用于标识同一组中的多个单选框和复选框。
  - value属性：用户自定义属性值，用于设置通过标签输入的元素的值。对于文本框输入，可以直接在其中看到定义的该属性信息，而对于两种选择框则无法看出。该属性主要被后台人员使用。
  - checked属性：对选择框一类的输入类型适用，属性值固定为"checked"，规定通过标签输入的元素首次加载时应该被选中。
  - maxlength属性：对于文本框一类的输入类型适用，属性值为一个整数，表示该输入控件中的最长字符个数。
标注标签<label>：
- 标签作用：双标签，该标签经常与表单一起使用。标签可以绑定一个表单元素，当点击<label>标签中的文本时，浏览器会自动将光标转到对应的表单元素上，从而方便用户使用。
- 绑定语法：首先，对于一个用于输入的<input>标签元素，设置其id属性的属性值为一个指定的名称；接着，创建一个<label>标签，然后将该标签的for属性的属性值为刚刚设置的名称即可。
下拉列表标签<select>：
- 使用场景：双标签。在页面中，如果有多个选项让用户进行选择，并且想要节约用户空间，则可以使用该标签。
- 使用语法：需要注意的是，该标签中至少包含一个选项。如果要定义某个选项为默认选中，则可以将该<option>的selected属性的值设置为"selected"。

<select>
  <option>选项1</option>
  <option>选项2</option>
  ...
</select>

文本域标签<textarea>：
- 使用场景：当用户输入的内容较多，单行的文本框就不够使用了，就需要使用该标签，因为该控件中可以输入多行文本。
- 使用语法：双标签。即<textarea>...具体的文本内容...</textarea>。

前端开发工具VSCode基本介绍

基本介绍：VSCode是前端开发人员常用的一款开发工具，它能够自动生成HTML文件的基本结构，并且提供类型丰富的插件帮助前端开发人员进行编程和代码调试维护，因此推荐使用该工具进行前端开发。

VSCode推荐插件

可以在VSCode左侧的搜索框中搜索自己想要的插件，有一些插件需要重启VSCode之后才能使用。推荐的插件如下：

Chinese插件：将VSCode界面中的内容从英文变为中文。
Auto Rename Tag插件：通过双击成对标签中的一个，对其进行修改时，成对标签中的另一个标签也会自动进行相应的修改。
Open in Browser插件：编写好的HTML文件代码可以通过在IDE页面中右键菜单的方式直接打开，方便查看代码效果。
Live Server插件：使用Open in Browser插件时，每次写完代码保存后，需要重新打开浏览器查看代码效果，比较麻烦。使用Live Server，只需代码保存完成后即可在浏览器中实时看到代码的运行效果。
vscode icons插件：让不同后缀名的文件具有不同的图标。
Easy Less插件：将不能直接引入HTML文件中的LESS自动生成CSS文件。

VSCode快捷键

新建文件：Ctrl + N；
保存文件：Ctrl + S；
放大/缩小页面：Ctrl + +/-；
快速复制一行：shift + Alt +↓；
选中多个相同的单词：ctrl + d；
添加多个光标：ctrl + Alt + ↑/↓；
查找替换：ctrl + h；
快速跳转到某一行：ctrl + g；
- 添加单行注释：ctrl + /；
添加多行注释：shift + Alt + a。