01 网站开发

Posted 2021-02-15 gavin520

web前端

一、网站开发

1、WEB工作的原理

1.C/S与B/S

1. C/S（Client/Server）结构： 将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。
- 优点： 
  由于客户端实现与服务端直接相连，没有中间环节，因此相应速度慢
- 缺点：
  - 需要专门的客户端安装程序，不能实现快速部署安装和配置。
  - 兼容性差，对于不同的开发工具，具有较大的局限性。
  - 软件是升级时，需要在客户端升级，不便于维护。 
2. B/S（Browser/Server）结构： 浏览器和服务器结构。它是对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，通用浏览器就实现了原来需要复杂专用软件才能实现的强大功能，客户机上只要安装一个浏览器（Browser），服务器安装Oracle、Sybase、Informix或 SQL Server等数据库。浏览器通过Ｗeb Server 同数据库进行数据交互。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。

2、web应用程序的组成部分

1. HTTP协议

1. Web服务器和Web浏览器都讲同一种语言，叫做超文本传输协议HTTP（HyperText Transfer Protocol）。
2. HTTP协议是一套规则和过程，它使计算机能够通过Web交换信息。有了HTTP协议，那么不管这些计算机在哪个地方，使用的是什么操作系统，运行的是什么Web服务器软件，使用的是什么浏览器产品，它们都可以通过HTTP相互通讯。

2. Web浏览器

1. Web浏览器是一个连接到Web服务器，向Web服务器请求信息，然后解析返回来的html标记，并将其显示在浏览器窗口内的程序。
2. 对Web标准的支持不同，造成跨浏览器网页编程的困难

3. W3C标准

• 由国际万维网联盟制定的一系列标准
• 倡导结构、样式、行为分离
• 包括：
  • 结构化标准语言（HTML & XML)
    • 内容
    • 文字，图片等
  • 表现标准语言(CSS)
    • 样式 (CSS)
    • 颜色，字体大小
  • 行为标准语言
    • 行为 (javascript)
    • 轮播图

3、HTML的结构

1. HTML语法基础

• 扩展名：.htm或.html
• 元素
  • 开始标记
  • 结束标记
  • 元素内容
• 空标记
• 属性
• 元素和属性的名字必须小写

2. 基本HTML标签

• h1~h6
• p
• ol
• ul
• dl
• div
• span
• img
• a
• table
•  ...

3. 表单

• 表单的作用：在网页上提供一个图形用户界面，以采集和提交用户输入的数据。
• HTML表单元素和属性可以分为两种类型：
  • 定义表单整体结构，使浏览器知道如何处理表单数据的元素
  • 创建输入控件的元素
• 基本表单结构
  • 用form标记创建表单
  • form标记对内包括表单元素和其它HTML元素
• 表单输入控件
  1. input：
     • type
       1. text
          • size
          • maxlength
          • value
       2. password
          • size
          • maxlength
          • value
       3. radio
          • name
          • checked
          • value
       4. checkbox
          • name
          • checked
          • value
       5. hidden
          • name
          • checked
          • value
       6. file
          • form表单属性
          • enctype =“enctype ”
          • method=“post”
       7. submit/reset
          • value
       8. button
          • value
  2. select和option：创建一个下拉列表
     • multiple="multiple“
     • size
  3. textarea：多行输入的文本框
     • selected=“selected”
     • value
  4. 辅助的元素和属性
     • label元素
     • for属性：规定 label 与哪个表单元素绑定
     • fieldset元素：可将表单内的相关元素分组
     • legend元素：为 fieldset 元素定义标题
     • readonly属性：可以防止修改文本框中的数据
     • disabled属性：可以使输入控件不可用