1. 基础

在这一章里，我们将对网页应用的开发和原理有一个大体上的了解。

本章可能是最无聊的章节，因为本章不包含实践内容，而且概念略微复杂比较劝退。了解的不是很透彻也不会影响网页制作，各位初学者了解一下就好！

网页的制作方法

很遗憾地告诉大家，得写代码。

网页的内容、形式和交互，完全是由HTML、CSS和JS三组代码指定和控制的。因此，完成一个网页应用的主要任务，就是用代码将这个应用的所有内容和逻辑表达出来。

有人就会问了，难道没有可视化的工具帮助我们像绘图一样绘制网页吗？当然有，但是效果不好。当下流行的网页制作软件还是Adobe公司的Dreamweaver，它确实可以快速有效地捏一个网页，但是我认为用可视化工具画图做出来的网页，有如下几点问题：

很难很好地兼容各种移动端平台
很难实现灵活的交互逻辑
很难使用各种组件库
不能深入地理解网页，阻止你进一步地设计出更好的网页

其实我也没好好研究过这些做网页的软件，当年我师傅也没怎么跟我提。总的来说，代码还是要写的。就好像传说中的LATEXL_AT^EXLATEX一样，网页不是一种所见即所得的东西，我们需要用抽象的代码去表述形象化的界面和交互模式。

简单的网页加载过程

本节是原理性的阐述，对初学者来说相对复杂，建议暂时先快速浏览一下并继续学习后面的实践章节。

假设你在电脑上的Google Chrome浏览器中访问了某个公司的网页，让我们了解一下，你输入网址按下回车的那一瞬间发生了什么。

DNS 寻址：浏览器根据你输入的URL中的域名部分查询DNS服务器，找到域名对应的主机IP地址。

是不是有超多不懂的？没关系，这里就是解释概念的地方！

IP地址：就像你家地址一样，IP地址就是某一台主机在互联网上的地址，通常是一系列数字。

域名：域名同样相当于互联网上的地址。如果IP地址类似经纬度，那么域名就类似于街道地址了。相对于IP地址来说，域名更加方便人类识读。

DNS：Domain Name System，专门负责提供域名和IP的对应查询。

URL：Uniform Resource Locator，统一资源定位符，说白了就是网址。简单来说，如果你想要找到互联网上的某个特定的资源（文件），光有目标主机的地址可不行，你还需要知道目标主机的访问协议、目标文件的位置（路由）和参数等等。URL的固定格式像这样：协议://域名或IP地址:端口号/路由?查询参数字符串。举个例子：https://baike.baidu.com/item/统一资源定位系统 这就是一个典型的URL，不过它省略了端口，并且没有查询字符串。

现在再看一眼第一步，是不是感觉更清晰一点？如果不懂的话也没有关系，本章内容不怎么影响后面的网页制作部分！

请求：浏览器向目标地址发起http或者https协议的网络请求（一个数据包），包含URL等信息，等待服务器回复。

http：HyperText Transfer Protocol，超文本传输协议。所谓协议，就是把数据打包成一种传输双方都能够看懂的形式。

https：Hyper Text Transfer Protocol over SecureSocket Layer，简单理解就是加了一层加密算法的http协议，在这里不做详细论述。

服务器：其实就是一台主机（电脑），只不过它是目标资源（比如某个网页）的存储位置。

服务器响应：服务器上运行的Web服务软件根据http协议返回URL中指定的资源（或者错误码），在正常访问网页的时候通常是一个HTML格式的内容。对于静态网页来说，就是一个.html文件的内容（没错，你在上一章里面新建的index.html就是一个.html文件）。

Web服务软件：一种服务端软件，在服务器上长期保持运行，负责响应和处理http或者https请求。

HTML：（这是下一章的内容）一种描述网页内容的代码语言。

静态网页：指页面的所有内容是由一个文件指定的，访问网页的时候等效于访问目标文件（通常是.html文件）。相对应的：

动态网页：指页面的内容是动态生成的。通常是服务端程序在处理访问请求的时候，根据请求中包含的信息（例如用户身份信息）生成的HTML代码。
P.S. 关于动态网页的更多细节，会在7. 网络章节讨论。

浏览器加载其它资源：服务器响应的HTML代码中可能有调用别的资源（例如JS代码，CSS代码或者各种图片等等），浏览器会根据HTML中的设定自动加载对应的资源，步骤与1-4步相同。
浏览器渲染：浏览器根据HTML代码指定的网页内容和CSS代码指定的网页样式，以及JS代码指定的网页交互逻辑进行页面渲染，把代码转化为UI界面，于是我们就看到了一个网页。

浏览器：浏览器是一个本地应用程序，它根据一定的标准引导页面加载和渲染页面，其中的技术和细节极其复杂。

CSS：Cascading Style Sheets，层叠样式表。用于设定HTML中各个元素的显示样式。我们会在第三章中详细学习。

JS：Javascript，属于Web的编程语言，在Web应用中用于实现用户和网页应用的交互逻辑。我们会在第四章中详细学习。

UI：User Interface，也就是我们看到的用户界面。

一个简单的网页加载过程到这里就结束了，更多的相关内容会在7. 网络和9. 发布章节中讨论。

引用路径

在网页中引用别的资源（例如图片或CSS文件等），都涉及到引用路径的问题。基本规则如下：

/表示从根目录开始
./表示当前路径下
../表示上一级目录下

例如，在protocol://domain/web/index.html中引用protocal://domain/logo.png这张图片，可以使用的引用方式有：

【九层之台】Web开发教程：1. 基础相关推荐

专访网易云：数字企业九层之台，起于“全栈云”
"未来只有一种企业,就是数字企业",网易云在今年云创大会上表示.但如何成为"数字企业"?网易云给出了一系列自己的主张和全新的云计算产品:单集群可支持5000物理 ...
专访网易云：数字企业九层之台，起于“全栈云” 1
"未来只有一种企业,就是数字企业",网易云在今年云创大会上表示.但如何成为"数字企业"?网易云给出了一系列自己的主张和全新的云计算产品:单集群可支持5000物理 ...
一个Web开发的客户端基础技术测试Demo
最近参加了一个Web开发的客户端基础技术测试,虽然对于做前台开发的程序员来说比较简单,但对于一直做后台代码编写的程序员想掌握前台开发的基础来说,应该是一个比较好的Demo.对于Web初学者来说,也是一 ...
iPhone开发教程 UI基础课程（58课时）
qianqianlianmeng iPhone开发教程 UI基础课程(58课时) 第一章 iPhone开发入门 UI基础课程第一章 iPhone开发入门 1.1 iOS概述和架构 ...
STM32Cube高效开发教程（基础篇）
第一本全面使用STM32CubeMX和STM32CubeIDE作为开发软件,系统性地介绍STM32的HAL库开发的书. STM32Cube高效开发教程(基础篇)详细目录 <STM32Cube高效 ...
QCC304x系列开发教程（基础篇）之2.4-QCC3040之如何修改MDE的主题
查看全部教程开发请点击:高通蓝牙耳机QCC304x开发详解汇总(持续更新中) 查看本文全部文章请点击:QCC304x系列开发教程(基础篇)之2.3-QCC3040之如何修改MDE的主题 ======= ...
名师讲坛——Java Web开发实战经典基础篇（JSP、Servlet、Struts、Ajax）
[书名]<名师讲坛--Java Web开发实战经典基础篇(JSP.Servlet.Struts.Ajax)> [作者]李兴华.王月清 [ISBN]9787302231585 }:YKf: ...
名师讲坛—Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax)
名师讲坛-Java Web开发实战经典基础篇(JSP.Servlet.Struts.Ajax) 基本信息作者: 李兴华王月清出版社:清华大学出版社 ISBN:9787302231585 ...
Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记01--基础入门 Bootstrap响应式Web开发笔记02--移动端页面布局 Bootstrap响应式Web开发笔记03--Bootstrap栅格系统 Boot ...
Android开发教程JAVA基础（汇总）
Android游戏开发视频教程(汇总) Android开发教程JAVA基础之Java 概述 Android开发教程JAVA基础之标示符.关键字1 Android开发教程JAVA基础之标示符.关键字2 ...

【九层之台】Web开发教程：1. 基础

目录

1. 基础

网页的制作方法

简单的网页加载过程

引用路径

【九层之台】Web开发教程：1. 基础相关推荐

最新文章

热门文章