WebBasic(一)_综合

一、 JavaWeb

（1）概述：

Web项目的三要素：浏览器、服务器、HTTP协议。

浏览器：向服务器发起请求，下载服务器中的网页（HTML），然后执行HTML显示出内容。
服务器：接收浏览器的请求，发送相应的页面到浏览器。
HTTP协议：浏览器与服务器的通讯协议

?? Web相关技术：

客户端技术：运行于客户端，由浏览器来解释运行。
— HTML
— CSS
— JavaScript
— 浏览器兼容问题
服务器端技术：运行于服务器端，可以和数据库交互。
—ASP.NET (Active Server Page)
—PHP(Hypertext Preprocessor)
—JSP(Java Server Page)

（2）软件架构：
- C/S: Client/Server 客户端/服务器端
  * 在用户本地有一个客户端程序，在远程有一个服务器端程序
  * 如：QQ，迅雷…
  * 优点：
  1. 用户体验好
  * 缺点：
  1. 开发、安装，部署，维护麻烦
- B/S: Browser/Server 浏览器/服务器端
  * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
  * 优点：
  1. 开发、安装，部署，维护简单
  * 缺点：
  1. 如果应用过大，用户的体验可能会受到影响
  2. 对硬件要求过高
?? B/S架构详解:

?? 资源分类：
静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

动态资源：
* 使用动态网页及时发布的资源。
特点：
所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

?? 静态资源：
* HTML：用来勾勒出网页的结构和内容
* CSS：用于美化页面，布局页面
* JavaScript：让网页呈现出动态的数据和结果

?? 了解一下

jQuery是一个框架，用来提高JavaScript的开发效率。

(二) HTML

2.1 什么是HTML

HTML（HyperText Markup Language）：超文本标记语言，一种纯文本类型的语言
用来设计网页的标记语言
用该语言编写的文件，以.html或者.htm为后缀
由浏览器解释执行
HTML页面上，可以嵌套用脚本语言编写的程序段，如：VBScript、JavaScript

2.2 HTML基础语法

(1). 标记：

HTML用于描述功能的符号称为“标记”，比如 < p >、< h1 > 等。
1> 标记在使用时必须用尖括号括起来
2> 用封闭类型标记也有非封闭类型的标记
封闭类型标记必须成对出现：
eg: <标记>内容</标记>
非封闭类型标记，也叫作空标记，或者单标记
eg：

(2). 元素和属性：

元素：
—— 即标记
—— 每一对尖括号包围的部分，如< body > < /body >包围的部分就叫做body元素
属性：
—— 用来修饰元素
—— 每个属性都有值
—— 属性的声明必须位于开始标记里
—— 一个标记的属性可能不止一个，多个属性之间用空格隔开
—— 多个属性之间不区分先后顺序

(3). 注释：

添加注释的语法如下：

<!--注释部分-->

?? 注意：注释不可以嵌套在其他注释当中。

2.3 HTML的文档结构

文档类型声明
html页面：
—— 文件头：< head> < /head >
—— 文档主体部分： < body> < /body >

（1）文档类型声明的作用：

在文档的起始使用DOCTYPE声明指定版本和风格，目的是让浏览器清楚文档的版本、类型和风格。

（2）head元素

< head >元素用于为页面定义全局信息
—— 所有其他头元素的容器
—— 紧跟在起始标签< html >之后
可包含：
—— title、meta、script、style、link等。

（3）文档头部内容< title>

标题元素< title> < / title >用于为文档定义标题
—— 标题元素的内容出现在；浏览器的顶部
—— 没有属性
—— 必须出现在< head >元素中
—— 一个文档只能有一个标题元素

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body>啦啦啦啦，是不是太简陋了，嘻嘻嘻嘻</body>
</html>

WebBasic(一)

（4）文档头部内容< meta >

元数据元素< meta >用于定义网页的基本信息
为空标记
常用属性有：content、http-equiv

2.4 文本标记

2.4.1 文本标记的作用：

文本是网页上的重要组成部分
直接书写的文本会用浏览器默认的样式显示
包含在标记中的文本则会被显示为标记所拥有的样式
—— 特殊字符
—— 注释
—— 标题元素
—— 段落元素
—— 换行元素
—— 分区元素

（1）文本与特殊字符

空格折叠：多个空格或制表符压缩成单个空格，即只显示一个空格。
特殊字符（如空格），需要进行转义。

2.4.2 使用文本标记

（1）标题元素< hn >

标题元素让文字以醒目的方式显示，往往用于文章的标题
基本语法：< h# >… < /h# >
—— # = 1、2、3、4、5、6
—— 从< h1 >到 < h6 >，即标题1到标题6

（2）段落元素 < p >

< p >元素提供了结构化文本的一种方式
< p >元素中的文本会用单独的段落显示
—— 与前后的文本都换行分开
—— 添加一段额外的垂直空白距离，作为段落间距
—— 常用属性：align

（3）换行元素< br >

使用< br >元素在任何地方创建手工换行
—— 空标记

（4）分区元素< div >和< span >

分区元素用于元素分组，常用于页面布局
块分区元素：< div > < /div >
行内分区元素：< span > < /span >
——设置同一行文字中的不同格式。

（5）行内元素和块级元素

块级元素
—— 默认情况下，块级元素会独占一行，即元素前后都会自动换行
—— 如：< p >、< div > 、< hn >
行内元素
—— 不会换行，可以和其他行内元素位于同一行
—— 如：< span >、< a >

2.5 图像和链接

（1） URL

URL（Uniform Resource Locator）：统一资源定位器，用来标识网络中的任何资源。
—— 文本、图片、音视频文件，段落，或其他超文本
完整URL的组成：
—— 协议、机名、路径名、文件名
?? eg：

http://www.w3c.org/TR/CSS2/syndata.html
http：协议名（用：//分隔）
www.w3.org：主机名
/TR/CSS2/：路径
syndata.html：要链接的文件名

（2）相对路径和绝对路径

相对路径：
—— 指文件的位置是相对于当前文件的位置，它包括目录名，或指向一个可以从当前目录出发找到该文件的路径
eg：
…/default/a.html
Images/a.gif
- 绝对路径：
  —— 指的是文件从最高级目录下开始的完整的路径，无论当前路径是什么，使用绝对路径总是能找到要链接的文件
  eg:
  http://www.w3.org/TR/CSS2/syndata.html

（3）图像元素 < img >

使用< img >元素将图像添加到页面
—— 空标记
必须属性：src
常用属性：width、height
eg：
< img width=“100” src=“image/rose.jpg”/>

（4.1）链接元素< a >

使用< a >元素创建一个超级链接，语法如下：
< a href =" " target=" " > 文本< /a >
——href 属性：链接URL
——target属性：目标，可取值为_blank、_self等

（续4.1）链接（锚点）

锚点是文档中某行的一个记号
——用于链接到文档中的某个位置
定义锚点
——< a name="anchorname1 "> 锚点— < /a >
链接到锚点：在锚点名前加上#
——< a href="anchorname1 ">回到锚点—< /a >

（5）列表

（5.1）列表的作用

列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列
所有的列表都由列表类型和列表项组成
——列表类型：有序列表< ol > 和无序列表< ul >
——列表项：< li >，用于指示具体的列表内容

（5.2）有序列表< ol >

< ol >元素编写有序列表，用于列出页面上有特定次序的一些项目
< ol >元素中也只能包含列表项元素< li >

（5.3）无序列表< ul >

< ul >元素表示无序列表，用于列出页面上没有特定次序的一些项目
< ul >元素中只能包含具体的列表项元素< li >
——列表中包含的每一项都必须包含在起始标记< li >和结束标记< /li >之间

（5.4）列表嵌套

将列表元素嵌套使用，可以创建多层列表
——常用于创建文档大纲、导航菜单等

（6）表格

（6.1）表格的作用

表格通常用来组织结构化的信息
表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的
表格的数据保存在单元格里
——显示表格数据
——设置页面布局

（6.2）创建表格

定义表格：使用成对的< table > < /table >标记
创建表行：使用成对的< tr > < /tr >标记
创建单元格：使用成对的< td >< /td >标记

（6.3）表格的常用属性

< table >元素
——border
——width/height
——align
——cellpadding：单元格边框与内容之间的间距
——cellspacing：单元格之间的间距
< tr >元素
——align/valign
< td >元素
——align/valign/width/height/colspan/rowspan

（6.4）表格标题< caption >

使用< caption >元素为表格定义标题
——默认情况下，标题将在表格上方居中显示
< caption >标签必须紧随< table >标签之后，且只能对每个表格定义一个标题

（6.5）表格的复杂应用

（6.5.1）行分组

表格可以划分为3个部分：表头、表主体和表尾
表头行分组：< thead > < /thead>
表主体分组：< tbody >< /tbody >
表尾行分组：< tfoot >< /tfoot>
——包含一个或者多个元素

（6.5.2）不规则表格

设置单元格< td >的跨行或者跨列属性
跨列：colspan
——水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
跨行：rowspan
——垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数

（6.5.3）表格的嵌套

嵌套表格
——在单元格中放置另外一个表
——即< td >元素中再包含< table>元素
使用嵌套的表格以设计复杂表格或者复杂布局

（7）表单

（7.1）表单的作用

表单用于显示、收集信息，并提交信息到服务器
表单有两个基本部分：
——实现数据交互的可见的界面元素，比如文本框或者按钮
——提交后的表单处理
界面元素
——使用< form >元素创建表单
——在< form >元素中添加其他表单可以包含的控件元素

（7.2）表单元素< form >

定义表单：使用成对的< form >< /form >标记
主要属性：
——action:定义表单被提交时发生的动作，通常包含服务方脚本的URL（比如JSP、PHP）
——method：指出表单数据提交的方式，取值为get或者post
——enctype：表单数据进行编码的方式
——name：表单名称

（7.3）表单控件

表单可以包含很多不同类型的表单控件
表单控件元素是包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息
表单控件元素有：
——input元素：文本输入控件、按钮、单选和复选按钮、选项框、文件选择框和隐藏控件等
——textarea元素
——select和option元素
——其他元素

（7.3.1）< input >元素

< input >元素用于收集用户信息
该元素是一个单标记，语法为：< input/>
主要属性：
——type：根据不同的type属性值，可以创建各种类型的输入字段，比如文本框、复选框等
——value：控件的数据
——name：控件的名称

（7.3.2）文本框与密码框

文本框：< input type = “text” />
密码框：< input type = “password” />
主要属性：
——value属性：由访问者自由的输入的任何文本
——maxlength属性：限制输入的字符数
——readonly属性：设置文本控件只读

（7.3.3）单选框和复选框

单选框：< input type = “radio” />
复选框：< input type = “checkbox” />
主要属性：
——value：文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器
——name：用于实现分组，一组单选框或者复选框的名称必须相同
——checked：设置选中

（7.3.4）按钮

提交按钮：< input type = "submit " />
——传送表单数据给服务器端或其他程序处理
重置按钮：< input type = “reset” />
——清空表单的内容并把所有表单控件设置为最初的默认值
普通按钮：< input type = “button” />
——用于执行客户端脚本
主要属性：
——value：按钮的标题文本

（7.3.5）隐藏域和文件选择框

隐藏域：< input type = “hidden” />
——在表单中包含不希望用户看见的信息
文件选择框：< input type = “file” />
——选择要上传的文件