前端简介以及开发环境搭建

最新推荐文章于 2023-09-29 14:22:15 发布

Young丶

最新推荐文章于 2023-09-29 14:22:15 发布

阅读量9.7k

点赞数 2

分类专栏：零基础入门前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/agonie201218/article/details/125212729

版权

零基础入门前端专栏收录该内容

35 篇文章 7 订阅

订阅专栏

前端简介

1. 网页的特点

相较于传统的图形化界面，网页具有如下一些优点：

不需要安装
无需更新
跨平台

网页中使用的语言：

HTML、CSS、JavaScript

2. 网页简史

蒂姆·伯纳斯·李爵士，万维网的发明人。

1991 年 8 月 6 日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。

第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html

3. 浏览器和网页

有了浏览器我们只需要一个网址便可以访问任何的网站。

而浏览器中所显示的内容正是我们所说的网页。

网页原本的样子：

...
<!--无障碍占位-->
<div id="J_accessibility"></div>
<!--顶通占位 -->
<div id="J_promotional-top"></div>
<div id="shortcut">
  <div class="w">
    <ul class="fl" clstag="h|keycount|head|topbar_01">
      <li class="dropdown" id="ttbar-mycity"></li>
    </ul>

    <ul class="fr">
      <li
        class="fore1 dropdown"
        id="ttbar-login"
        clstag="h|keycount|head|topbar_02"
      >
        <a
          href="//passport.jd.com/uc/login?ReturnUrl=https%3A%2F%2Fwww.jd.com%2F"
          class="link-login"
          >你好，请登录</a
        >&nbsp;&nbsp;<a
          href="//reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/"
          class="link-regist style-red"
          >免费注册</a
        >
      </li>
      <li class="spacer"></li>
      <li class="fore2" clstag="h|keycount|head|topbar_03">
        <div class="dt">
          <a target="_blank" href="//order.jd.com/center/list.action"
            >我的订单</a
          >
        </div>
      </li>
      <li class="spacer"></li>
      <li
        class="fore3 dropdown"
        id="ttbar-myjd"
        clstag="h|keycount|head|topbar_04"
      >
        <div class="dt cw-icon">
          <a target="_blank" href="//home.jd.com/">我的京东</a
          ><i class="iconfont">&#xe610;</i><i class="ci-right"><s>◇</s></i>
        </div>
        <div class="dd dropdown-layer"></div>
      </li>
      <li class="spacer"></li>
      <li class="fore4" clstag="h|keycount|head|topbar_05">
        <div class="dt">
          <a target="_blank" href="//vip.jd.com/">京东会员</a>
        </div>
      </li>
      <li class="spacer"></li>
      <li class="fore5" clstag="h|keycount|head|topbar_06">
        <div class="dt"><a target="_blank" href="//b.jd.com/">企业采购</a></div>
      </li>
      <li class="spacer"></li>
      <li
        class="fore8 dropdown"
        id="ttbar-serv"
        clstag="h|keycount|head|topbar_07"
      >
        <div class="dt cw-icon">
          客户服务<i class="iconfont">&#xe610;</i
          ><i class="ci-right"><s>◇</s></i>
        </div>
        <div class="dd dropdown-layer"></div>
      </li>
      <li class="spacer"></li>
      <li
        class="fore9 dropdown"
        id="ttbar-navs"
        clstag="h|keycount|head|topbar_08"
      >
        <div class="dt cw-icon">
          网站导航<i class="iconfont">&#xe610;</i
          ><i class="ci-right"><s>◇</s></i>
        </div>
        <div class="dd dropdown-layer"></div>
      </li>
      <li class="spacer"></li>
      <li
        class="fore10 mobile"
        id="J_mobile"
        clstag="h|keycount|head|topbar_09"
      >
        <div class="dt mobile_txt">手机京东</div>
        <div class="mobile_static">
          <div class="mobile_static_qrcode"></div>
        </div>
        <div id="J_mobile_pop" class="mod_loading mobile_pop"></div>
      </li>
    </ul>
  </div>
</div>
...

浏览器渲染后的样子：

前端工程师负责编写网页的源代码。

浏览器负责将网页渲染成我们想要的样子。

3.1. 浏览器的问题

市面上存在有很多不同的浏览器。

在万维网的初期，网页编写并没有标准。

于是就出现了这种情况：

3.2. W3C 的建立

伯纳斯李 1994 年建立万维网联盟（W3C）

W3C 的出现为了制订网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果。

所以，我们需要制订我们编写的网页都需要遵循 W3C 的规范！

3.3. 网页的结构思想

根据 W3C 标准，一个网页主要由三部分组成：结构、表现还有行为。

结构、表现、行为

结构（骨架）：HTML 用于描述页面的结构
表现（皮肤）：CSS 用于控制页面中元素的样式
行为（交互）：JavaScript 用于响应用户操作

nsyjg-dwl0d

4. 网页的基本结构

4.1. 迭代

网页的版本

HTML4
XHTML2.0
HTML5

4.2. 文档声明（doctype）

文档声明用来告诉浏览器当前网页的版本

<!-- html5的文档声明 -->
<!DOCTYPE html>
<!-- 或者 -->
<!DOCTYPE html>

4.3. 字符编码

所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。

所以一段文字在存储到内存中时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

编码

将字符转换为二进制码的过程称为编码

解码

将二进制码转换为字符的过程称为解码

字符集（charset）

编码和解码所采用的规则称为字符集（相当于密码本）

乱码

如果编码和解码所采用的字符集不同就会出现乱码问题。

可以通过 meta 标签来设置网页的字符集，避免乱码问题

<meta charset="utf-8" />

4.4. 常见的字符集

ASCII

ASCII(American Standard Code for Information Interchange)：美国信息交换标准代码

在所有字符集中，最知名的可能要数被称为 ASCII 的8 位字符了。美国信息交换标准代码是由美国国家标准学会(American National Standard Institute , ANSI )制定的，是一种标准的单字节字符编码方案，用于基于文本的数据。它最初是美国国家标准，供不同计算机在相互通信时用作共同遵守的西文字符编码标准，后来它被国际标准化组织（International Organization for Standardization, ISO）定为国际标准，称为 ISO 646 标准。适用于所有拉丁文字字母

ASCII 码使用指定的 7 位或 8 位二进制数组合来表示 128 或 256 种可能的字符。标准 ASCII 码也叫基础 ASCII 码，使用 7 位二进制数（剩下的 1 位二进制为 0）来表示所有的大写和小写字母，数字 0 到 9、标点符号，以及在美式英语中使用的特殊控制字符

ASCII 码表：Ascii Table - ASCII character codes and html, octal, hex and decimal chart conversion

ISO-8859-1

ISO-8859-1 编码是单字节编码，向下兼容 ASCII，其编码范围是 0x00-0xFF，0x00-0x7F 之间完全和 ASCII 一致，0x80-0x9F 之间是控制字符，0xA0-0xFF 之间是文字符号。

ISO 码表：HTML ISO-8859-1 参考手册

GB2312

GB2312（信息交换用汉字编码字符集）是由中国国家标准总局 1980 年发布。基本集共收入汉字 6763 个和非汉字图形字符 682 个。GB 2312 的出现，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖中国大陆 99.75%的使用频率。

GBK

GBK（即“国标”、“扩展”汉语拼音的第一个字母），汉字编码字符集。2000 年已被 GB18030-2000 国家强制标准替代。 2005 年 GB18030-2005 发布，替代了 GB18030-2000。

GBK 使用了双字节编码方案，其编码范围从 8140 至 FEFE（剔除 xx7F），共 23940 个码位，共收录了 21003 个汉字，完全兼容 GB2312-80 标准，支持国际标准 ISO/IEC10646-1 和国家标准 GB13000-1 中的全部中日韩汉字，并包含了 BIG5 编码中的所有汉字。

Big5

Big5，又称为大五码或五大码，是使用繁体中文（正体中文）社区中最常用的电脑汉字字符集标准，共收录 13,060 个汉字。

Big5 虽普及于台湾、香港与澳门等繁体中文通行区，但长期以来并非当地的国家/地区标准或官方标准，而只是业界标准。倚天中文系统、Windows 繁体中文版等主要系统的字符集都是以 Big5 为基准，但厂商又各自增加不同的造字与造字区，派生成多种不同版本。

UTF-8

UTF-8（8 位元，Universal Character Set/Unicode Transformation Format）是针对 Unicode 的一种可变长度字符编码，也叫万国码、统一码。它可以用来表示 Unicode 标准中的任何字符，而且其编码中的第一个字节仍与 ASCII 相容，使得原来处理 ASCII 字符的软件无须或只进行少部分修改后，便可继续使用。

UTF-16

UTF-16 是 Unicode 的其中一个使用方式。UTF-16 比起 UTF-8，好处在于大部分字符都以固定长度的字节（2 字节）储存，但 UTF-16 却无法兼容于 ASCII 编码。

Unicode

Unicode 只是一组字符设定或者说是从数字和字符之间的逻辑映射的概念编码，但是它并没有指定代码点如何在计算机上存储。UCS4、UTF-8、UTF-16（UTF 后的数字代表编码的最小单位，如 UTF-8 表示最小单位 1 字节，所以它可以使用 1、2、3 字节等进行编码，UTF-16 表示最小单位 2 字节，所以它可以使用 2、4 字节进行编码）都是 Unicode 的编码方案。UTF-8 因可以兼容 ASCII 而被广泛使用。

如果把各种文字编码形容为各地的方言，那么 Unicode 就是世界各国合作开发的一种语言。

4.5. HTML5 的基本结构

<!-- 文档声明，声明当前网页的版本 -->
<!DOCTYPE html>
<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>
  <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
  <head>
    <!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
    <meta charset="utf-8" />
    <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
    <title>网页的标题</title>
  </head>
  <!-- body是htm1的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
  <body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
  </body>
</html>

前端开发准备

5. 离线文档的下载

离线文档：Zeal - Offline Documentation Browser

如果安装报错，需安装：Visual C++ Redistributable

下载安装完成之后，会在“开始”屏幕或者桌面生成快捷键，双击打开

在第一次使用时，并不是直接就有 HTML 文档的，还需要 Download。

这里点击工具栏的 Tools-Assets 或者下方的“Install and update docsets”都是 OK 的

按照步骤安装即可

由于服务器在国外，网络较慢，耐心等待 download 完毕

在 Installed 中出现 HTML，同时左侧导航栏有了 HTML，至此安装完毕

离线使用，在左侧导航栏可以查询 HTML 标签和属性，右侧显示元素的详细信息

6. 文本编辑器的选择

Notepad++

Notepad++是 Windows 操作系统下的一套文本编辑器，功能比 Windows 中的 Notepad 强大，除了可以用来制作一般的纯文字说明文件，也十分适合编写计算机程序代码。

有语法高亮度显示、语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。

完全免费，支持众多计算机程序语言：C，C++，Java，C#，XML，SQL，HTML，PHP，ASP 等

官方地址：notepad-plus-plus.org

Softonic 地址：Notepad++ - Download (softonic.com)

不过因为国外服务器原因，而且貌似被墙了，所以建议从 Softonic 下载

优点：免费开源，轻量流畅，支持插件
缺点：界面丑，虽然可以下载皮肤插件（PS：个人感觉皮肤插件也不好用）

Sublime

Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。

主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。

跨平台，同时支持 Windows、Linux、Mac OS X 等操作系统。

强大的命令面板功能，可以模糊匹配命令。

官方地址：Sublime Text - A sophisticated text editor for code, markup and prose

优点：轻量流畅，支持插件，界面简洁，运行速度特别快
缺点：不开源，商用收费

VS Code √

Microsoft 出品，轻量但强大，针对于编写现代 Web 和云应用的跨平台源代码编辑器。可以在 Mac OS X、Windows 和 Linux 等操作平台使用。

具有对 JavaScript、TypeScript 和 Node.js 的内置支持，并具有丰富的其他语言（例如 C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET 和 Unity）扩展的生态系统。

官方地址：Visual Studio Code - Code Editing. Redefined

优点：免费开源，轻量流畅，功能丰富，支持插件，界面简洁，智能代码补全，运行速度很快
缺点：几乎没有什么太大的缺点（PS：撤销恢复之前的编辑时出现过问题，希望官方能够尽快修复）

Atom

Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。完全免费开源的代码编辑器，具有简洁和直观的图形用户界面。

支持 CSS，HTML，JavaScript 等网页编程语言。支持宏，自动完成分屏功能，集成了文件管理器。

官方地址：Atom

Github 地址：atom/atom: The hackable text editor (github.com)

中文地址：Atom 中文网 (baisheng999.com)

优点：功能丰富，免费开源，支持插件，界面简洁
缺点：相对重量级；打开大文件卡死（PS：产品上经常用它写 amWiki，使用时经常卡死；而且安装过程没有任何选项和提示，默认装到 C 盘）

WebStorm

JetBrains 出品的智能 JavaScript IDE。誉为“Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE”等。与 IntelliJ IDEA 同源，继承了 IntelliJ IDEA 强大的 JS 部分的功能。

IntelliJ IDEA 是 java 编程语言开发的集成环境。IntelliJ 在业界被公认为最好的 java 开发工具，尤其在智能代码助手、代码自动提示、重构、JavaEE 支持、各类版本工具(git、svn 等)、JUnit、CVS 整合、代码分析、创新的 GUI 设计等方面的功能可以说是超常的。它的旗舰版本还支持 HTML，CSS，PHP，MySQL，Python 等。免费版只支持 Java,Kotlin 等少数语言。

官方地址：Download WebStorm: The Smartest JavaScript IDE by JetBrains

优点：功能强大，支持插件，界面美观，智能代码补全，快速搜索
缺点：重量级，占内存；收费

除以之外，市面上还有很多功能强大的前端编辑器。

HBuilder：DCloud（数字天堂）推出一款支持 HTML5 的 Web 开发 IDE。在语法提示、转到定义、重构、调试等方面都非常高效。缺点是不太稳定，有时会出现卡顿。

Dreamweaver：简称“DW，老牌的 IDE ，国人开发，号称为编码极客而生的 IDE。曾经 PS+DW+FW（号称网页三剑客）称霸网页领域。然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。

这两款及其他编辑器在这里就不再赘述了（PS：本人没怎么用过，没有太多发言权）

这里我选择以 VSCode 作为接下来学习的开发编辑器了。当然每个人有每个人的偏好，你也可以选择自己心仪的编辑器进行开发。

7. 开发前准备

为 VSCode 安装以下插件，便于我们进行更好的开发工作

Chinese (Simplified) Language Pack for Visual Studio Code：中文（简体）语言包（PS1：不完全显示中文，但是大多数都会译为英文；PS2：喜欢原生态或者英文 OK 的话，可忽略）
Ayu：简单的主题与明亮的颜色
vscode-icons：好看的图标
Live Server：A Quick Development Live Server with live browser reload，即提供一个 live 服务器，并且支持代码与浏览器之间的实时同步刷新（PS：这样我们在写前端代码时就能实时看到效果了）

8. 使用 Live-Server

在当前 HTML 中右键单击，选择Open With Live Server

踩坑 1

Open a folder or workspace...(File -> Open Folder)

解决方式：需要打开 HTML 所在的文件夹，通过导航栏 文件-打开文件夹，选择我们编写的 HTML，再去Open With Live Server即可

踩坑 2

Server is started at 5500 but failed to open in Browser Preview.

解决方式：在 liveserver 设置中，找到Live Server>Settings:Use Browser Preview，取消对 Open in Browser Preview inside VS Code,instead of default browser的勾选即可

踩坑 3

Error: connect ECONNREFUSED 127.0.0.1:80
	at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)

解决方式：取消使用代理，修改 enable 为 false（这里我一直以为是 live-server 服务器本身的代理端口）。live-server 默认使用 5500 端口

实际上，配置端口要在Live Server › Settings: Port选项进行设置

自定义端口号

按照上述说明，点击在settings.json中编辑会打开settings.json文件

这里如果将liveServer.settings.port配置为 0，会随机选择端口号

Young丶

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端简介以及开发环境搭建

相较于传统的图形化界面，网页具有如下一些优点：网页中使用的语言：蒂姆·伯纳斯·李爵士，万维网的发明人。1991 年 8 月 6 日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html有了浏览器我们只需要一个网址便可以访问任何的网站。而浏览器中所显示的内容正是我们所说的网页。网页原本的样子：浏览器渲染后的样子：前端工程师负责编写网页的源代码。浏览器负责将网页渲染成我们想要的样子。市面上存在有很多
复制链接

扫一扫

专栏目录