01 前端简介

最新推荐文章于 2024-09-25 09:01:21 发布

Edshine

最新推荐文章于 2024-09-25 09:01:21 发布

阅读量59

点赞数

分类专栏： HTML&&CSS 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/Edshine/article/details/120235535

版权

HTML&&CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

01.前端简介

文章目录

01.前端简介

1.软件分类

系统软件：
- Window
- Linux
- macOS
应用类型软件：
- QQ等常见应用
游戏软件

2.客户端与服务器

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

客户端：用户通过客户端来使用软件。
服务器：服务器负责在远程处理业务逻辑。

2.1 客户端

客户端的形式

文字客户端：占老的方式，通过命令行来使用软件
图形化界面：通过点击拖动等来使用软件。Windows中、macOS中、Android、iOS中的大部分应用。（C/S架构）
网页：通过访问网页来使用软件。所有的网站都属于这个范畴。（B/S架构）

2.2 服务器

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

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

网页中使用的语言：

HTML、CSS、JavaScript

3.历史

万维网发明人——蒂姆·伯纳斯·李爵士

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

4.浏览器和网页

原本由HTML,CSS,JS语言所写的页面是不直观的，经过浏览器（相当于翻译机）的修饰，将其展示为我们所熟悉的美观的页面。
网页的优点：无需安装，更新，跨平台

4.1 初期

互联网初期，不同浏览器对于前端语言所书写的内容有着各自的翻译，会导致不同浏览器得到的浏览结果不同。

###4.2 W3C的建立

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

4.3 网页结构思想

结构	表现	行为
HTML	CSS	JavaScript

5.网页的基本结构

5.1 迭代

网页的版本

HTML4
XHTML2.0
HTML5

5.2 文档声明

现阶段大多默认为html，声明标识不区分大小写

<!--html5的文档声明-->
<!doctype html>
or
<!Doctype HTML>

5.3 字符编码

数据在计算机中以二进制形式存储，任何东西储存到内存中都需转化为二进制编码，当需要时，再将编码进行转化。

编码

将字符转化为二进制码的过程

解码

将二进制码转化为字符的过程

字符集（charset）

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

乱码

如果编码和解码所采用的字符集不同就会出现乱码问题，可以通过meta标签来设置网页的字符集，避免乱码问题。

<meta charset="utf-8">

5.4 常见的字符集

ASCII-----8位字符，单字节字符编码
ISO-8859-1----------单字节编码
GB2312—(汉字)
GBK--------双字节编码，汉字编码字符集，国标
BIG5-----繁体
UTF-8：UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对Unicode的一种可变长度字符编码，也叫万国码、统一码。它可以用来表示Unicode标准中的任何字符，而且其编码中的第一个字节仍与ASCII相容，使得原来处理ASCII字符的软件无须或只进行少部分修改后，便可继续使用。
UTF-16：无法兼容ASCII，好处在于字符以固定的字节存储（2字节）
Unicode

6. 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>