java基础教程 word - 编程好6文档

JavaWebjava基础教程 word概述

JavaWeb是使用Java语言开发基于互联网的项目，使用的是B/S架构

软件架构

C/S架构

Client/Server 客户端/服务器端，android开发使用
在用户本地有一个客户端程序，在远程有一个服务器端程序

优点：因为客户端事先准备的有一些数据，这些数据不需要临时许多传输数据，所以用户体验好

缺点：客户端和服务器端都需要去开发，安装，部署，维护都比较麻烦

B/S架构

Browser/Server 浏览器/服务器端

通过浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序

优点：1. 相对于C/S，只需要在服务器端开发、不需要安装，只需要部署在一台服务器上，维护也只需要修改服务器端，所以都较C/S架构简单

缺点：1.如果应用过大，用户的体验可能会受到影响；2.对硬件要求较高

B/S架构如何访问资源

如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器，因为浏览器只能解析静态资源
静态资源：

ul data-indent="1">

HTML：用于搭建基础网页，展示页面的内容

CSS：用于美化页面，布局页面

JavaScript：控制页面的元素，让页面有一些动态的效果

概念：Hyper Text Markup Language 超文本标记语言，最基础的网页开发语言

超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本(即一个联系另一个)。

标记语言：由标签构成的语言，但是不是编程语言。如xml、html

编程语言：有逻辑性，例如java

html5设计处理，大部分用于移动Web开发

属性：

ul data-indent="1">

color：三种表现形式

ul data-indent="2">

1.英文单词：black、red、green…

2.rgb(值1,值2,值3)：值范围为：0~255，如rgb(125,65,96)，现在不太经常使用了

3.#值1值2值3：值的范围：00~FF(16进制)，如：#FF00FF

ul data-indent="1">

width:两种方式

ul data-indent="2">

数值：数值的单位默认是px(像素)

数值%：占比相对于父元素的比例

都需要：<> </>

但是不严格

在文件创建时会自动创建这些标签，构成html的基本标签

html
html的根标签
head
头标签，指定html文档的一些属性，引入外部的资源
title
标题标签
body
体标签
html5中定义该文档是html文档：

和文本相关的标签：

注释：
h1 —> h6：标题标签，自动加粗和换行，字体大小依次减小
p：段落标签，br换行也可以，但是并不是非常好看，使用段落标签有另外的格式，会有间距
br：换行，因为在html里面的换行，他会自动转换为一个空字符
hr：显示一条水平线，里面有一些属性，H5不支持，但是可以使用，因为浏览器需要兼容
b：字体加粗
i：字体斜体
font：H5不在支持(被淘汰的标签)，字体标签
center：被淘汰的标签，文本居中

相对路径：以 . 开头的路径

ul data-indent="1">

https://blog.51cto.com/u_/ 代表当前目录如https://blog.51cto.com/u_/image/2.jpg

…/ 代表代表上一级目录

有序列表：会用1234这样的标识，可以通过属性去修改显示字符，但是不建议通过属性去修改

ul data-indent="1">

ol ：

li :

无序列表：有实心圆点标识，可以通过属性去修改显示图形，但是不建议通过属性去修改

ul data-indent="1">

ul ：

li ：

a ：定义一个超链接

锚链接

从A页面的甲位置跳转到本页中的乙位置(同一页面)
从A页面的甲位置跳转到B页面中的乙位置(两个页面)
创建步骤

ul data-indent="1">

创建跳转标记

ul data-indent="1">

创建跳转链接

与css一起集合使用的标签

span：起包裹的效果，文本信息默认是在一行展示，行内标签，内联标签

div：结合css运用，每一个div沾满一行，块级标签

使用html5中，为了提高查询的可读性，提供了一些标签

head：

footer：

java用模板word中样式写新的word文档_选择器

表单：用于收集或采集用户输入的数据的。比如用户名密码等，用于和服务器进行交互

form：用于定义表单，定义一个范围，这个范围代表采集用户数据的范围
属性：

ul data-indent="1">

action：指定提交数据的URL

method：指定提交方式

ul data-indent="2">

一共有7种，其中有两种比较常用

ul data-indent="3">

post：

ul data-indent="4">

1.请求参数不会在地址栏中显示，但是会将内容封装到请求实体中

2.URL（请求参数）的长度是没有限制的

3.较为安全

ul data-indent="3">

get：

ul data-indent="4">

1.请求参数会在地址栏中显示

2.URL（请求参数）的长度是有限制的

3.不太安全

表单项中的数据要想被提交，则必须指定其name属性，这个必须是在表单的范围里面

ul data-indent="1">

表单项标签

ul data-indent="2">

input：可以通过其type属性值，改变元素展示的样式，默认是text

ul data-indent="3">

type属性：

ul data-indent="4">

text：文本标签，默认值
placeholder=“内容”，属性实现提示信息，当选中时其内容消失

password：密码输入框

radio：单选框
1.要想多个单选框实现单选功能，则多个单选框的name属性值必须一样1
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.默认选中checked，指定默认值

checkbox：复选框
1…一般会给每一个复选框提供value属性，指定其被选中后提交的值
2.默认选中checked，指定默认值

file：文件选中框

hidden：隐藏域，用于提交一些信息

reset：重置表单数据

按钮：

ul data-indent="5">

submit：提交按钮，可以添加表单

button：普通按钮

img：图片提交按钮，可以通过src属性指定图片的路径

ul data-indent="4">

color：取色器

date：年月日

datelocal：可以选小时和分钟

email：邮箱，会做一个正则校验

number：数字，只能输入数字，可以使用箭头加减

ul data-indent="2">

label：指定输入项的文字描述信息
label属性的for属性一般会合input的id属性对应，如果对应了，则点击label区域，会让input输入框获取焦点

select：下拉列表

textarea：文本域

readonly: 只读属性，希望某个框内的内容只允许用户看，不能修改

disabled：禁用属性，因没达到使用的条件，限制用户使用

hidden：隐藏

标签

图片格式

iframe标签

概念：Cascading style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

好处：

1.功能强大

2.将内容展示和样式控制分离

降低耦合度

让分工协作更容易

提高开发效率

CSS使用：CSS与html的结合方式

内联样式：

在标签里面使用style属性，进行修饰，不推荐使用

内部样式：

在当前页面有用，在head标签内，定义style标签，style标签的标签体内容就是css代码

外部样式

定义css资源文件，在head标签内容，定义css文件路径，通过link标签去引入css文件

也可以通过style标签里面的@import "地址"来引入

作用范围，越来越大，内联样式不推荐使用

格式：

分类：

基本选择器：

1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一

语法：#id属性值{ }

语法：标签名称{ }

id选择器优先级高于元素选择器

语法：.class属性值{ }

类选择器优先级高于元素选择器，id选择器优先级最高

扩展选择器：

1.* ：选择所有元素

语法：*{ }

语法：选择器1,选择器2

语法：选择器1 选择器2{ }

语法：选择器1 > 选择器2 { }

语法：元素名称[属性名=“属性值”] { }

元素:状态{ }

如：

状态：

link：初始化的状态

visited：被访问过的状态

active：正在访问状态

hover：鼠标悬浮状态

字体、文本

1.font-size：字体大小

2.color：文本颜色

3.text-align：对其方式

4.line-height：行高

背景

background：复合属性

边框

1.border：复合属性

尺寸

1.width：宽度

2.height：高度

盒子模型：控制布局

1.margin：外边距

2.padding：内边距

这两个是相对概念，默认情况下修改内边距会影响盒子大小，

设置width和height就是最终盒子的大小，使用box-sizing:border-box；

右浮动：float : right;

左浮动：float : left

可以定义宽度和高度

，块元素：div,p,ul,li

不能定义宽和高

度，常用内联元素：span(存放文字的)、a、lable

内联元素会单独分行，内联元素会在一行里面显示

img src='https://s2.51cto.com/images/blog//0_f41d.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='java用模板word中样式写新的word文档_css_02' title="image-" style="width: 953px; visibility: visible;">

img src='https://s2.51cto.com/images/blog//0_cf.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='java用模板word中样式写新的word文档_选择器_03' title="image-" style="width: 914px; visibility: visible;">

img src='https://s2.51cto.com/images/blog//0_bbaf38207.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='java用模板word中样式写新的word文档_选择器_04' title="image-" style="width: 1110px; visibility: visible;">

img src='https://s2.51cto.com/images/blog//0_cb0.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='java用模板word中样式写新的word文档_css_05' title="image-" style="width: 1124px; visibility: visible;">

br> 2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的

img src='https://s2.51cto.com/images/blog//0_f2fe38044.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='java用模板word中样式写新的word文档_选择器_06' title="image-" style="width: 945px; visibility: visible;">

html

img src='https://s2.51cto.com/images/blog//0_af9e35077.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='java用模板word中样式写新的word文档_选择器_07' title="image-001960" style="width: 793px; visibility: visible;">

col>

外边距可用于网页居中显示

块元素才能完全适用于盒子模型

使用display属性来相互转化
none（元素隐藏，不可见）
block（转为块元素，独占一行）
inline（转为内联元素，不换行）

float属性

取值

left 左浮动
right 右浮动
none 不浮动

使用浮动后要及时清除，以免影响其后的网页元素

清除浮动必要性：1.浮动后，脱离了文档流不占网页空间；2.浮动后的网页元素会影响同级元素

clear属性

取值

left
right
both
none

表明容器框的哪边不挨着浮动框

overflow属性

作用：

定义溢出元素内容区的内容会如何处理

取值

visible （默认）
auto
hidden
scroll

position属性

relative（相对定位）

相对它原来的位置，通过指定偏移，到达新的位置。
仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响

absolute（绝对定位）

相对已设定非static定位属性的父元素计算偏移量

fixed（相对浏览器固定定位，IE6不支持）

static（默认）

偏移量设置

X轴(left、right 属性)与Y轴（top、bottom属性）
可取值：像素或百分比

上一篇： java基础系列教程

下一篇： java基础教程165

版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.bianchenghao6.com/h6javajc/15761.html

JavaWebjava基础教程 word概述

软件架构

C/S架构

B/S架构

锚链接

float属性

clear属性

overflow属性

position属性

相关文章：