WEB应用程序

WEB应用程序

采用B/S计算模式开发的应用程序，简称Web应用程序

Web应用程序由四部分组成：网页、WEB服务器、WEB浏览器、http协议

Web服务器：提供网页浏览服务的计算机。接收客户端请求，然后根据请求向客户端返回结果。

Web浏览器：连接到Web服务器，向Web服务器请求信息，然后解析返回来的HTML标记，并将其显示在浏览器窗口内的程序。

HTTP协议：客户端和服务器之间通信所用的协议，它使计算机能够通过Web交换信息。网页：告诉浏览器怎样向用户显示内容。

网页

HTML称为超文本标记语言，是以标记和子标记描述网页信息的语言。超文本意味着，在HTML中描述的不仅仅是文本数据，而且可以通过一系列标记链接各式各样的资源（图片、音频、视频、js、css等）。客户端在显示HTML内容使，不仅仅要下载文本数据，而且还要发出一系列请求，将HTML中链接的资源一一下载。

所有的XHTML文档都有三个文档级的元素：html、head和body。

html为根元素，网页中所有的内容都必须在根元素html中定义。

head为网页头，主要描述网页配置信息，比如：网页编码集，导入css、js等。不做网页内容的描述。

body为正文，描述网页中需要显示的信息。

html注释：

常见标记

设置网页编码集

正文标题以较大的粗体显示，分别以h1-h6标签显示。数字越大，字体越小。

<h1>正文标题</h1>
<h3>正文标题</h3>
<h6>正文标题</h6>

段落标记p：段落元素p用于将文本界定为整个段落。对上一个元素和下一个元素做换行处理，并且都会有空行。

<p>
    段落内容
</p>

换行标记br：对后面的元素做换行处理。

水平线标记hr：在网页中显示一条水平线。

---

列表标记：ul—li 无序列表（选项以圆点表示） ol—li有序列表（选项以数字表示）

<!--无序列表-->
<ul>
    <li></li>
    ...
</ul>

<!--有序列表-->
<ol>
    <li></li>
    ...
</ol>

分区块：

分区块，是html中的小容器，可以包含和被包含其他网页元素。div通常和CSS一起用于页面布局

<div>
    
</div>

跨越多个字符：跨字符元素span，用于将内嵌样式

图片：用于在网页中显示图片。

常用属性：src表示要显示图片路径，width宽度，height高度

src中链接图片路径分为物理路径和相对路径。

物理路径针对于计算机磁盘或网页URL路径而言

<img src="c:/1.jpg width="100px" height="100px">

<img src="https://gimg3.baidu.com/rel/src" width="100px" height="100px"> 

相对路径：图片相对于本网页的路径

1、网页和图片在同一个目录，可以直接写文件名

<img scr="4.jpg" width="100px" height="100px">

2、图片在网页同级目录下，先写目录名，再写文件名

<img scr="img/6.jpg" width="100px" height="100px">

3、图片在网页父目录下，以…/表示

<img scr="../img/6.jpg" width="100px" height="100px">

超链接:HTML使用超链接与网络上的另一个文档相连。点击链接可以从一张页面跳转到另一张页面。

<a href="url路径" >文本提示</a>

href属性描述跳转页面的路径，也分物理路径和相对路径。规则和图片相同。

iframe框架网页：通过使用框架，可以在实现在网页中包含另一个网页的效果。

<iframe frameborder="0" src="1.html" name="contentFrame" width="1000"
        height="590"></iframe>
franmeborder 表示框架网页边框宽度，src表示默认链接网页。
<a herf="base.html" target="contentFrame"></a>
点击超链接时，更新iframe框架网页内容。

table表格：表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由定义表格中的数据

	标签定义）。在HTML5中，

HTML元素分为块级元素和内嵌元素两种类型，二者的不同之处在于：块级元素的文本是换行的，而内嵌元素定义的文本是不换行的。

常见的块级元素包括：div、列表元素（ol、ul）、fieldset、form、h1-h6、p、table等

内嵌元素包括：span、a、img、label、所有的表单输入元素、iframe等。

表单：在网页上提供一个图形用户界面，以采集和提交用户输入的数据。

<form action="add" method="get">

</form>
action表示表单提交后，处理表单数据的服务器URL路径。method表示该表单的提交方式，通常是GET/POST
其中GET请求，表单数据会附加在URL后面，在浏览器地址栏会显示表单数据。而POST请求，表单数据会放在消息体中，浏览器地址栏不会显示表单数据。

表单元素name和id的区别

id属性是网页元素在网页中的唯一标识，不能重复。任何网页元素都会有id属性。表单提交时，表单元素的id属性不会随表单提交服务器。

name属性通常用于表单元素，可以重复。表单提价时，表单元素的name属性会随表单提交服务器。

常见表单元素

文本框：

<input type="text" name="userName" id="name" placeholder="请输入姓名"><br>

如果同一个表单中，多个文本框的name属性一致，表单提交时，会将每个文本框内容都提交服务器，是多个同名键值对

数字文本框：

<input type="number" min="20" max="30" name="age">

日历文本框：

<input type="date" name="birthday">

邮箱文本框：

<input type="email" name="email">

电话文本框：

<input type="text" name="phone" required>

required表示该表单必须填写，否则无法提交

提交按钮：

<input type="submit" value="提交">

将表单数据提交给服务器处理

密码框：

<input type="password" name="pwd"><br>

密码框内的文本不是明文显示，全部是圆点

单选框：

<input type="radio" name="sex" checked value="man">男
<input type="radio" name="sex" value="woman">女<br>

两个单选框name属性一致，可以完成互斥。

checked属性表示当前复选框默认被选中。

表单提交时，会将选中单选框的value属性提交服务器

复选框：

    <input type="checkbox" name="like" value="sport">运动
    <input type="checkbox" name="like" value="music">音乐
    <input type="checkbox" name="like" value="draw"> 画画<br>

checked属性表示当前复选框默认被选中

表单提交时，会将选中复选框value值提交给服务器。如果选中多项，则提交多个同名的键值对

隐藏表单：

<input type="hidden" name="id" value="2">

该表单元素在网页中不作显示，但表单提交时，会将隐藏表单的值提交服务器

文件表单：

<input type="file" name="face">

选择本地文件，将本地文件上传服务器

下拉框：

<select name="edu">
    <option value="1">高中</option>
    <option value="2" selected>大专</option>
    <option value="3">本科</option>
</select><br>

option为下拉框的选项。表单提交时，会将选中option选项的value值提交服务器。如果选中option没有value值，那么option标记中间的内容为value值。selected表示当前选项默认被选中。

多行文本框：

<textarea name="info" cols="50" rows="5"></textarea><br>

cols和rows表示该多行文本框最多有几行几列，可以控制大小。

重置按钮：

<input type="reset">

将表单数据恢复到初始状态。

命令按钮：

<input type="button" value="添加">

用于响应js事件

readonly和disabled

1、readonly只能修饰文本框，表示只读，该文本框内容不能编辑，表单提交时，可以将表单数据提交服务器。

2、disabled表示不可用。可以用于任何元素。修饰文本框时，该文本框不但不可以编辑，而且数据不能提交服务器。

CSS

CSS是层叠样式表（Cascading Style Sheets)控制布局控制元素的渲染用于定义HTML文档和样式（外观

CSS嵌入网页的方式

1、内联式：在元素中，添加style属性，加上样式。

<p style="cclor:red">
    自然段
</p>

内联式书定的样式，只对一个网页元素有效，没有通用性，无法重用

2、嵌入式：书写

<style>
    p{
        background-color:yellow;
    }
</style>

可以作用于多个元素，通用性较好。但是，只对本网页有效，不能跨网页使用。

3、外联式：将样式规则独立成一个文件（*.css）,通过网页导入的方式，应用该样式表文件中描述的样式。

导入方式有两种：

1、

<style>
@import url("css1.css");
</style>

2、

<link rel="stylesheet" href="css1.css">

样式表导入方式的优先级：

采用“就近原则”，哪个离元素最近，优先采用哪个样式。内联式优先级最高，嵌入式和外联式，看哪个离元素最近，优先采用哪个。

样式表选择器

1、元素选择器 ：以HTML元素名称作为选择器规则，表示所有该标签均采用此规则。

p{····} 表示所有的

段落标签均采用该样式

h1,h2{·····} 表示所有的h1和h2标签均采用该样式

2.类选择器 采用class=“类选择器名称”做属性的元素均采用该样式。 定义：

 .font{
     font-weight:bold;  font-size:30px;  
}  

使用： span

段落

同一个元素可以应用多个类选择器，中间以空格隔开。

段落二

3、id选择器 指定id的元素应用采用该样式。由于id属性的值不重复，所以id选择器只能应用于一个元素。

#testDiv{
    border:1px solid #000000;
}
<div id="restDiv">div 标签</div>

4、包含选择器 元素的指定子元素采用该样式

#imgDiv img{
    
}

5.通配选择器 可以匹配文档中任何元素

 #contentDiv *{
     color:blue;     
}     

表示id是contentDiv的元素中，所有的子元素均采用该样式。

6、属性选择器

input[type=password] {
background-color: yellow; 
}

input标签中，type属性为password 的元素（密码框）采用该样式

7、伪类选择器

给元素添加一些效果

#data tr:hover{
background-color : #BBBBBB; 
}

id属性为data的元素中，tr子元素在鼠标悬停时，采用该样式。

!important可以改变CSS选择器的优先级。加上一个“!important”就优先于正常的CSS规则。

选择器优先级

!important> id>class>element>伪类>*

div居中

        #contentDiv {
            width: 1000px;
            height: 600px;
            margin: auto;
        }

内容溢出

            overflow-y: scroll;/*超出部分滚动条显示*/
                             /* hiddle超出部分隐藏*/

字体样式

            font-family: 楷体;/*字体类型*/
            font-size: 20px;/*字体大小*/
            font-weight: bold;/*字重*/

文本样式

text-align: center;/*文本对齐方式*/
text-decoration: line-through;/*穿过线*/
text-decoration: underline;/*下划线*/
text-decoration: none;/*去除超链接下划线*/

隐藏样式

visibility: hidden 元素隐藏，同时该元素占用原来的位置
display: none  元素隐藏，同时该元素不占用原来的位置

盒模型包含四个内容：内容、外边距margin、内边距padding、边框border。

外边距：当前父元素相对父元素或兄弟元素的间距。对外

内边距：元素内容到元素边框的距离。对内

注意：内边距和边框都会增加容器的宽度。容器宽度=边框宽度+内边距+容器本身的宽度

盒模型均可以用“上右下左”方式设置。如果仅给出两个或三个值，那么缺失的属性取与对边相同的值

margin: 10px 5px 5px 10px 上：10px 右：5px 下：5px 左：10px

margin:10px 5px 上：10px 右：5px 下：10px 左：5px

margin:10px 5px 3px 上：10x 右：5px 下：3px 左：5px

定位样式：position属性用来规定元素的定位。

static：静态定位。表示按照HTML格式规则正常定位：

relative：相对定位。相对于元素原始位置偏移

absolute：绝对定位。元素脱离文档流，如果父元素定位，元素相对于父元素定位，如果父元素没有定位，元素相对于浏览器定位。

fixed：固定定位，和absolute类似，只是滚动条滚动时，元素相对于浏览器或父元素位置不变。

top和left属性指定元素的位置。定位后的元素可能会造成位置重叠。可以使用z-index属性，定义显示顺序，数值越大，在越上层。

透明度样式

#faceImg{
  border-radius:100px;
  opacity:0.5;
}

opacity为透明度样式，1完全不透明，0完全透明

背景色

background-color:设置元素的背景色

background-color:red； 使用英文表示颜色

background-color:#00FF00 使用十六进制表示颜色，两个数字代表一个颜色。最小为0，最大为FF。

background-color: rgb(255,0,0)使用十进制表示颜色，最小为0，最大为255.

background-color:rgba(255,0,0,0.5);设置背景色，同时设置透明度

背景图片

background-image

flex布局

display:flex; 设置flex布局

flex-direction：row； 设置子元素排列方向，默认为row，表示横向排列元素

justify-content：center； X方向元素居中对齐

​ space-btween X方向两端对齐

​ flex-end X方向居右对齐

align-items：center； Y方向居中对齐

​ flex-start Y方向居上对齐

​ flex-end Y方向居下对齐

flex-direction: column; 设置子元素排列方向

justify-content: center; y方向元素居中对齐

​ space-between： y方向两端对齐

​ flex-end： 方向居右对齐

align-items: center; 根据x轴进行对齐

​ flext-start： x方向居上对齐

​ flext-end： y方向居下对齐