前端简介

一.前端简介

1.1 软件的分类

1.1.1 系统软件

如Windows、Linux、MacOs等

1.1.2 应用软件

如Office、QQ等

1.1.3 游戏软件

绝地求生、CS:GO等

1.2 客户端与服务器

通常情况下现在的软件一般由两个部分组成：

  • 客户端：用户通过客户端来使用软件
  • 服务器：服务器负责在远程处理业务逻辑
C/S架构

1.2.1 客户端

常见客户端的形式：

  • 文字客户端：通过Shell命令行来使用软件。
  • 图形客户端：通过点击拖动等操作来使用软件。Windows、macOs等桌面端以及Android、iOS等移动端系统中的大部分应用。
  • 网页（B/S架构）：通过网页访问来使用软件。所有网站都属于这个范畴。

1.2.2 服务器

服务器常用的开发语言：

  • Java
  • PHP
  • C#
  • Python
  • Node.js

1.3 网页的特点

1.3.1 网页的优点

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

  • 无需安装
  • 无需更新
  • 跨平台能力强

1.3.2 网页开发的常见语言

  • HTML（超文本标记语言）
  • CSS（层叠样式表）
  • JavaScript（脚本语言）

二.网页简史

2.1 历史

2.2 浏览器和网页

  • 浏览器负责将网页渲染成我们想要的样子
  • 前端工程师负责编写网页的源代码

2.3 浏览器的问题

  • 市面上存在很多不同的浏览器
  • 在万维网的初期，网页编写并没有标准

2.4 W3C的建立

  • 伯纳斯李1994年建立万维网联盟（W3C）
  • W3C的出现为了制订网页开发的标准，以使桶一个网页在不同的浏览器中有相同的效果
  • 因此，我们需要制订我们编写的网页都需要遵循W3C的规范

三.网页的结构

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

  • 结构：HTML用于描述页面的结构
  • 表现：CSS用于控制页面中元素的样式
  • 行为：JavaScript用于响应用户操作
在这里插入图片描述

3.1 HTML

HTML（英文全称：Hypertext Markup Language），全称为超文本标记语言，是一种标记语言。它负责网页的三个元素中的结构部分。HTML使用标签的形式来标识网页中的不同组成部分。所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。[HTML超文本标记语言]

3.2 CSS

层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。[CSS层叠样式表]

3.3 JavaScript

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。[JavaScript脚本语言]

四.网页基本内容

4.1 网页规范演进

  • HTML4
  • XHTML2.0
  • HTML5

4.2 文档声明

文档声明本身不属于网页，只是用来告诉浏览器当前网页版本（写在html标签之前）

1
2
3
4
<!-- html5的文档声明 -->
<!doctype html>
<!-- 或者 -->
<!Doctype HTML>

4.3 注释

用于开发过程工作衔接或者自己编码时注释内容使用。

1
2
3
4
5
6
7
8
9
10
11
<html>

<head>
    <title>注释</title>
</head>

<body>
    <!--这是一个注释-->
</body>

</html>

4.4 属性

可以在开始标签或者自结束标签可以设置属性。

  • 属性是一个键值对结构（key:value）。有些属性有属性值，有些没有（如果有引号应当用引号引起来）
  • 属性用来设置标签中的内容如何显示
  • 属性和标签名或者其他属性应该用空格分隔开
  • 属性不能瞎写，应当根据文档规范来编写
1
2
3
4
5
6
7
8
9
10
11
<html>

<head>
    <title>标签的属性</title>
</head>

<body>
    <h1>这是<font color="yellow" size="3">一个</font>网页</h1>
</body>

</html>

4.5 进制转换

  1. 二进制（计算机底层数据类型）
  • 特点：逢二进一
  • 单位数字：0 1
  • 计数举例：1 10 111
  1. 十进制（日常使用）
  • 特点：逢十进一
  • 单位数字：（10个）0 1 2 3 4 5 6 7 8 9
  • 计数举例：9 19
  1. 八进制（不常用）
  • 特点：逢八进一
  • 单位数字：（8个）0 1 2 3 4 5 6 7
  • 计数举例：17 20
  1. 十六进制（本质是二进制）
  • 特点：逢十六进一
  • 单位数字：（16个）0 1 2 3 4 5 6 7 8 9 A B C D E
  • 计数举例：9 19 A3

4.6 字符编码

字符的编码和解码是一个双向映射过程。

  • 编码（Encoding）：将字符转换成二进制码的过程称为编码
  • 解码（Decoding）：将二进制码转换成字符的过程称为解码

字符集（CharSet）

编码和解码所采用的规则称之为字符集。若编码和解码采用的字符集不匹配，那将出现乱码问题。
常见的编码规则：

  • ASCII（美国）
  • ISO88591（欧洲）
  • GB2312（中国国标）
  • GBK（中国国标扩展）
  • UTF-8（万国码）

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

1
<meta charset="utf-8">

4.7 网页的基本结构

网页的基本结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>
<!-- html的根标签(元素)，网页中的所有内容都要写在根元素里面-->
<html>
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要是用来帮助浏览器或者搜索引擎解析网页 -->

<head>
    <!-- meta标签用来设置网页的元数据，这里的meta用来设置网页的字符集避免乱码问题 -->
    <meta charset="utf-8">

    <!-- title中的内容会显示在浏览器的标题栏，搜索引擎根据title中的内容来判断网页的主要内容 -->
    <title>网页的标题</title>
</head>

<!-- body是html的子元素，是网页的主体，网页中所有的可见内容都应该写在body里面 -->

<body>
    <!-- h1是网页的一级标题 -->
    <h1>一级标题</h1>
</body>

</html>
#前端
前端简介
http://example.com/2021/12/25/前端简介/
作者
DustWind
发布于
2021年12月25日
许可协议