您的位置：首页 > 运维架构 > 网站架构

HTML&CSS设计与构建网站(一)

2017-03-05 14:43 567 查看

一 概述

本篇文章告诉您

一个Web应用是如何运转的?

程序员怎么样去通过HTML+CSS构建一个网站的

二 互联网应用是如何运转的

首先需要简单了解三个角色 :

Web服务器:主要是全天候监听并接收客户端连接请求，根据请求的数据做对应的业务逻辑处理后返回数据给客户端(浏览器)，主要的Web服务器有Apache HTTP Server,Nginx等。

Web客户端 :主要是用于对服务器发起基于HTTP协议(get和post方式)的请求，接收服务器响应的数据并渲染和显示数据在客户端,典型的客户端有浏览器，移动端的App。

HTTP协议:用于从WWW服务器传输超文本到本地浏览器的传输协议。该协议主要由请求报文，响应报文和URL三部分组成。

URL=协议+主机+端口+资源(例如:https://192.168.1.102:8080/app/index.html)

当用户在浏览器(Chrome,FireFox)的地址栏中输入www.jd.com时，浏览器会请求DNS把这个域名解析成IP地址，然后根据IP地址在互联网上找到对应的服务器，向这个服务器发起HTTP get请求，由这个服务器决定返回默认的数据资源给访问的用户。

在服务端实际上还有很复杂的业务逻辑，服务器可能会有多台，到底由哪一台服务器来处理请求，这需要一个负载均衡设备(Nginx)来平均分配所有用户的请求，还有请求的数据存储在分布式缓存(Redis)还是一个静态文件(HTML)中，或者是在数据库(MySQL)里。

当数据返回给浏览器时，浏览器解析数据发现还有一些静态资源(如CSS,JS,图片)时又会发起另外的HTTP请求，而这些请求可能会在CDN上，那么CDN服务器又会处理这个用户的请求，大体上一个用户的请求会涉及到这么多操作。每一个细节都会影响这个请求最终是否会成功。

三 局域网BS架构搭建

很显然这里的BS指的是Broswer(浏览器)-Server(服务器)

3.1 基于Windows10的Apache HTTP Server的安装和基本使用

3.1.1下载地址

百度云盘链接：http://pan.baidu.com/s/1gfxFEkN 密码：jjjy

3.1.2 Apache HTTP Server的安装和配置

1 启动安装



2 同意协议



3 查看介绍



4 设置主机和服务地址



5 选择安装类型



6 设置安装路径



7 确认安装



8 完成安装



9 启动监控台

可以启动和关闭Apache HTTP Server



安装目录说明:

当在Windows系统中安装完成后可以通过http://127.0.0.1:80来访问首页，即位于安装目录C:\Program Files\Apache Software Foundation\Apache2.4\htdocs的index.html了。



而且该目录也是作为项目的部署目录，开发人员将开发完成的项目部署到htdocs目录下即可进行HTTP访问。

Apache还提供了基于cmd命令行以管理员方式启动和关闭Apache HTTP Server



服务器端口信息可以使用netstat -anb命令查看:



3.2 基于MacOS12 的Apache HTTP Server的基本使用

幸运的是,MacOS系统本身自带了Apache Http Server(本机系统为MacOS 10.12),因此安装的过程就免除了。

可以通过iterm程序(命令行工具)输入apachectl -v来查看当前HTTP Server版本信息



Apache服务器默认配置的提供服务的路径是/Lirbrary/WebServer/Documents,这里我们为了发布应用方便，自定义提供服务的路径。需要会使用vim编辑器

1 切换用户

Last login: Sun Mar  5 13:12:39 on ttys001
localhost:~ tony$ whoami
tony
localhost:~ tony$ su -
Password:
localhost:~ root#


2 修改httpd.cnf文件

localhost:~ root# vim /etc/apache2/httpd.conf




3 编写测试页面helloworld.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this is my first web page</title>
</head>
<body>
Hello World
</body>
</html>


重启服务 命令如下

localhost:~ root# apachectl restart


访问页面

http://127.0.0.1/HTML/Chapter1/html/helloworld.html

该页面位于服务器发布目录的HTML下面



3.3 Chrome开发人员工具的使用

目前主流的浏览器包含Chrome,Safari,FireFox,Opera,Microsoft Edge等等，它们都提供了类似Chrome的开发人员工具来调试前台代码，审查页面元素，查看请求响应信息功能,性能检测等等。

chrome 开发人员工具一览

mac可以使用快捷键cmd+alt+i调出该界面

windows平台直接按快捷键F12调出该界面



下面以访问百度的首页(www.baidu.com)为例使用Chrome开发人员工具查看网页信息:

Elements元素展示了页面内容的HTML代码



Console用于程序运行时调试的日志和错误信息输出



Sources会罗列请求响应的资源



NetWork会列出每个资源的响应耗时以及请求和响应信息(响应头,响应体)



四 你该了解的HTML

平常使用浏览器浏览的淘宝网,京东商城,腾讯网,当当网等等都是使用HTML+CSS+JavaScript+jQuery+BootStrap+AngularJS+ReactJS+VueJS+NodeJS等前端技术实现的。

而HTML在页面主要是通过一系列标签展现网页的元素,常见的网页元素包含文本,列表,超链接,图片,表格,表单,视频等等。

腾讯网的页面:



淘宝网的页面:



学习HTML的本质就是使用HTML标签来展示数据,然后通过CSS来布局页面，通过JavaScript实现页面的动态效果(例如图片轮播)以及和服务器端的交互(通常都是通过ajax请求)。

五 开发环境

工欲善其事必先利其器，下面就来介绍前端开发中使用到的工具

开发工具:

轻量级:

Atom: https://atom.io/

插件:

atom-html-preview:支持html实时预览

file-icons:给文件前面加上图标

git-plus: git插件

minimap:类似sublime的缩略图

atom-clock:时钟

project-manager:项目管理

autocomplete-paths:

Markdown-Writer:markdown编辑器

Markdown Preview Enhanced: MarkDown预览

插件的安装方法



查看已经安装的插件列表



重量级:

WebStorm: http://www.jetbrains.com/webstorm/

先露个脸,暂时不会去使用。



浏览器推荐使用Chrome和FireFox测试,后续考虑各大主流浏览器的兼容性。

六 Github同步

Github作为免费的代码托管仓库，有很多优秀的开源项目都已经托管至此,为了学习的方便,这里主要演示使用Git Tower(Git在MacOS下一个非常好用的客户端)创建仓库,然后使用Atom编辑器通过插件的方式将编写好的代码同步到GitHub的详细过程。

在使用它之前你必须得去注册一个GitHub账号，至于怎么去注册GitHub，这里就不说明了。

个人的GitHub主页



1 使用Git Tower登录GitHub



2 使用Git客户端生成ssh key

不然无法实现代码同步

localhost:~ tony$ ssh-keygen -t rsa -C "tonytimemachine@gmail.com"




localhost:~ tony$ vim /Users/tony/.ssh/id_rsa.pub #使用vim复制生成的key


3 设置public key



4 使用Git Tower创建仓库



5 克隆到本地





6 使用atom初始化项目



7 创建文件夹存放代码和资源文件



8 将项目提交到本地

通过git-control插件实现



9 将项目提交到Github

通过git-plus插件实现



10 查看提交后的页面



拿起您的手机，扫描下方的二维码并关注”艺无止境”，我们一起携手成长为优秀的工程师！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航