Web概述和HTML

Web概念概述

JavaWeb：

　　使用Java语言开发基于互联网的项目。

软件的架构：

　　C/S架构：客户端、服务器端

　　　　1.在用户本地有一个客户端程序，在远程有一个服务器端程序。

　　　　2.QQ、WeChat、3D游戏

　　优点：

　　　　用户体验感非常好

　　缺点：

　　　　开发成本高、安装复杂、部署麻烦、维护麻烦

　　B/S架构：基于浏览器开发的互联网的项目。浏览器(域名/网址)、服务器端

　　　　　　只需要一个浏览器即可，用户通过不同的域名(网址),客户可以访问到不同的服务器端程序

　　优点：

　　　　开发成本低，安装简单，部署轻松，维护简单。

　　缺点：

　　　　1.如果应用过大，加载延迟性过高，用户体验感比较差

　　　　2.对服务器硬件要求较高。

B/S架构

　　资源分类：

　　　　1.静态资源

　　　　　　使用静态网页开发技术发布的资源。不发生改变的资源

　　　　　　如：本文信息、图片信息、音频信息、视频信息，HTML、CSS、JavaScript

　　　　　　如果用户请求的资源是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中收到服务器端发送的静态资源，浏览器直接加载，因为在浏览器内部内置了一个静态资源的解析引擎，可以直接展示静态资源给用户。

　　　　2.动态资源

　　　　　　使用动态网页开发技术发布的资源。资源需要在浏览器上发生变化的。

　　　　　　特点：

　　　　　　　　1.所有的用户访问服务器端程序，服务器端返回给用户可能呈现的是不同的画面。

　　　　　　　　比如：淘宝、京东、等第三方平台

　　　　　　　　2.用到的动态网页技术：jsp/Servlet、php、asp、.....

　　　　　　　　如果用户请求服务端的资源是动态资源，那么服务器端程序会首先把动态的资源转换成静态资源，然后再把转换后的静态资源发给浏览器客户端。

　　静态资源：

- HTML：展示页面的内容，可以搭建一些基础页面。
- CSS：用于构建页面的风格或者样式，进行页面美化。
- JavaScript：脚本。与用户交互的一些动作，如点击动作，让页面有一些动态的效果。

HTML

概念

　　Hyper Text Markup Language 超文本标记语言

　　语法格式：<>

　　超文本：

　　　　　　超文本是用超链接的方法，将各种不同空间的文本信息或者其他格式数据组织在一起的网状文本。

　　标记语言;

1. 由标签构成的语言---->格式：<标签名称> 如：<a> 、<img>、<ol>、<ul>、<table>
2. 标记语言不把它归为编程语言。

　　快速入门：

　　　　语法：

html文件的扩展名是.html或者.htm
标签分类; <a></a> <img> <img>
- 单标签：<img> <hr> <input> <meta> <link>
- 双标签: <a></a> <div></div> <span></span> <form></form>

标签可以嵌套

需要正确的嵌套。

如：
错误：<a><span></a></span> 你中有我，我中有你
正确：<a> <span></span> </a>
开始标签 如 <a>
结束标签 如 </a>

在开始标签中可以定义属性，属性是有键值对组成的，值需要双引号(单引号)引起来
```
<a href = "http://www.baidu.com">百度一下，你就知道</a>
```

html标签不区分大小写，一般建议使用小写。

如div标签
<DIV> </DIV>
<div> </div>   
<div> </DIV>
这三种效果是一样的。
一般使用<div> </div>

构建一个html页面

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>Hello World</title>
 6 </head>
 7 <body>
 8     Hello World!
 9 </body>
10 </html>

基础标签

html
head
title
meta
body
footer
DOCTYPE

文本系列标签

注释
h1~h6
br
p
hr
b
i
font

图片标签

超链接标签

表格标签

table
tr
td
th
caption
thead
tbody
tfoot

内联框架标签

iframe

iframe标签元素会创建包含另外一个文档的内联框架(行内框架)
name属性：指定ifram标签的名称，如果a标签中的target属性值是其name属性值，当你点击a标签的时候，对应的超链接内容就会出现在iframe中
src属性:指的是iframe中要显示的内容的链接
frameborder属性：一般情况下取值为0，不显示边框，取值为1显示边框    
scrolling属性：取值为yes--滚动，取值为no--不滚动，auto-->自动
width属性：表示框架的宽度
height属性：表示框架的高度

表单标签

　　form表单

一般用于向服务器提交的时候将form表单中的数据进行提交。
action属性：表示请求的路径,通常我们指定为请求服务器的路径，表单提交服务器具体的URL
method属性：表示请求的方式，delete、put、get、post、trace....通常情况下我们一般使用get或者post方式
默认的请求方式是get请求方式，一般会将请求的数据追加在请求路径上
如：.../search?q=QQ&qs=n&form=QBRE&sp=-1&pq=qq&sc=8-2&sk=&cvid=FF6D29DEBCBB4C3190308AE563D5978D
数据以这种格式进行提交。多个数据之间&符号进行连接，请求的资源路径长度是有所限制的，所以大多数情况下我们能够使用post请求就使用它
post请求：一般请求的参数数据不会展示在请求路径上，而且请求中携带数据长度没有限制。

input标签

用来获取用户输入的信息
- type属性：属性规定要显示的 <input> 元素的类型。不同的属性显示不同的样式
  - text：文本框，输入文本信息
  - password：密码框
  - radio：互斥单选按钮
  - checkbox：复选按钮，可以重复选
  - submit：提交按钮，将表单中的数据提交给服务器
  - file：上传文件按钮
  - image：图片提交按钮，通过src设置图片
  - reset：重置按钮
  - hidden：隐藏按钮，hidden中的数据也会发送给服务器，浏览器页面中不会显示hidden中的信息，一般用于发送用户的id信息
  - button：普通的按钮，一般需要结合js一块使用
- name属性：表单发送数据提交给服务器的时候，通过name属性来实现的，
- value属性：设置input框中的默认值
- checked属性：一般用于单选按钮或者复选按钮被选中
- readonly属性：是否只读
- disabled属性：是否可用
- size属性：大小，设置文本框的大小
- placeholder属性：占位符属性，通常用于文本框的占位符，提示用户输入信息类别。