万维网

@Web

前端是什么？

前端 101：给不了解前端的同学讲前端

案例欣赏 Cases

jd tb mi

万维网 WWW

World Wide Web，由多个网站组成，也称为Web或WEB

网站 Site：以文档的形式存储；每个网站由多个文档组成

网页 Page：每个文档称为 Web页，也叫网页 Page；网页文件的后缀名是 .html；早期多使用.htm；除了网页外，还有很多与之关联的资源文件，如图像、多媒体、数据库以及脚本，这些共同组成网站 Site

主页 Index：引导浏览者访问网站的网页文件，是一个网站的门户 Portal；默认文件名是index.html；使用默认文件名可以带来很多便利

网址 URL：Uniform Resource Locator，统一资源定位；通过不同的网络协议来标识网络资源类型和地址

how://who/where/what

https://glpla.github.io/web/index.html

常见协议类型
类型	说明
http	Hypertext Transfer Protocol 超文本传输协议早期应用
https	Hypertext Transfer Protocol Secure 具有安全通道的超文本传输协议主流应用
ftp	File Transfer Protocol 文件传输协议现在多以云盘的形式存在

网络服务模式

Browser/Server( B/S)

浏览器端/服务器端

用户使用浏览器或少量的辅助插件|软件 - 廋客户机

Client/Server(C/S)

客户端/服务器端

用户需要下载并定期更新客户端 - 胖客户机

B端、C端、S端

工作过程

用户在浏览器地址栏输入URL地址，发起一个请求

DNS服务器解析域名，根据对应的IP地址，找到网站的服务器地址

服务器处理收到的请求

如果是请求网页，则把对应的htm或html发送给浏览器

浏览器解析网页并渲染

解析HTML文档：构建DOM树

构建CSSOM（CSS对象模型）：解析页面中的CSS样式表或内联样式

计算样式：包括继承、层叠和优先级计算

布局（Layout）

绘制（Painting）

重排与重绘

用户看到最终生成的网页

CSR - Client Side Rendering

SSR - Server Side Rendering

浏览器 Browser

浏览网页的工具

渲染和呈现Web页面的平台

无论是桌面端还是移动端，谷歌浏览器Chrome都遥遥领先

至于 IE|Trident，已停服

浏览器市场占有率内核

Chrome

Blink

Safari

Webkit

Edge

Chromium

Firefox

Gecko

Opera

Presto

浏览器内核 Rendering Engine

地址栏 vs 搜索栏

网页结构 Architect

Web页面由文档类型声明 DOCTYPE 和 <html> 标签组成

<html>

HTML - HyperText Mark Language；超文本标记语言；标记就是标签 Tag

Web页面的根

组成：由各种各样的标签 Tag 组成

作用：说明使用语言类型 lang：方便搜索引擎查找翻译；默认是en；如果不想触发浏览器的自动翻译提醒，可以不设置该属性

查看：右键单击选择"检查"或按 F12 打开浏览器的开发者视图便于调试；再次按 F12，关闭

<head>

文档信息区 - 设置关键字和页面描述

<title>：网站名

. 字符编码 charset：默认使用万国码 UTF-8

. 网站说明 name 为 description；content：基本描述

. 关键字 name 为 keywords，content：体现网站特色的若干关键字

. 网站图标 favicon.ico：网站标识；制作icon的工具很多，如：比特虫；除了传统的.ico格式，HTML5还支持多种图标格式；现在多使用svg

. CSS样式表文件

[] OA文档的信息区在哪里？

<body>

文档内容区

展示给用户的内容，由各种标签 Tag 组成，负责Web的结构描述

部分JavaScript代码也放在此处；为了解析正确，通常位于该区域的底部

[] Web页面的内容需要一个字符一个字符完成编辑吗？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script src=''></script>
</head>

<body>
    <div>hello, world.</div>
    // ... ...
    <script src=''></script>
    <script>
      // ... ...
    </script>
</body>

</html>

开发原则 Rules

专业的事交给专业的人去做

结构 HTML5|H5、样式 CSS3|C3和逻辑 JavaScript|JS 三分离

结构部分：各种标签组成，负责盖房子

样式部分：使用选择器选择某个或某些标签/元素进行修饰，负责装修房子

逻辑部分：使用逻辑分配业务功能，和用户动态交互，负责让房子动起来

一句话总结 Summary: 把服务器的资源拉过来，经浏览器渲染后展示给用户