[学习交流] 【石家庄校区】web开发

本帖最后由小石姐姐于 2018-10-26 09:33 编辑

web开发架构(了解)

html概述JavaWeb:

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

软件架构:

1.C/S: Cilent/Server 客户端/服务器端

在用户本地有一个客户端程序,在远程有一个服务器端程序

如：QQ，迅雷... 优点： 1. 用户体验好缺点： 1. 开发、安装，部署，维护麻烦

2.B/S: Browser/Server 浏览器/服务器端只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序优点： 1. 开发、安装，部署，维护简单缺点： 1. 如果应用过大，用户的体验可能会受到影响 2. 对硬件要求过高

B/S架构详解:资源分类:

1.静态资源

使用静态网页开发技术发布的资源

特点:

所有用户访问,得到的结果是一样的.

如:文本,图片,音频,视频,HTML,CSS,JavaScript

如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器中内置了静态资源的解析引擎，可以展示静态资源

静态资源:

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

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

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

2.动态资源

使用动态网页技术发布的资源

特点:

所有用户访问,得到的结果可能不一样

如:Jsp/servlet,php,asp....

如果用户请求的是动态资源,那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

html常用标签:概述:是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. 标记语言: 由标签构成的语言。<标签名称> 如 html，xml 标记语言不是编程语言

网页显示什么内容:

文本,图片,音频视频,超链接

快速入门语法规范:1.html文档后缀名 .html 或者 .htm

2.标签分为
围堵标签:有开始标签和结束标签.如:<html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>

3.标签可以嵌套
标签可以嵌套：
      需要正确嵌套
      错误：<a><b></a></b>
      正确：<a><b></b></a>
4.在开始标签中可以定义属性(可以改变内容的显示效果),属性是由键值对构成,值需要用引号(单双都可以)引起来
5.html的标签不区分大小写,建议小写

html的结构(文件标签)
只有一个根标签:<html>  作用:标记整个html的网页范围
只有一个头表标签:<head> 作用:设置网页的信息,比如网页的标题,网页的编码格式
只有一个体标签:<body>  作用:显示在网页的内容
如:

[Java] 纯文本查看 复制代码

   <html>
            <head>
                <title>网页的标题</title>
                <meta charset="utf-8">
            </head>
            <body>
                <font size="6" color="red"> hello html!!!</font>
            </body>
        </html>

标签学习       :
1.文件标签:构成html最基本的标签
html:html文档的根标签
head:头标签,用于指定html文档的一些属性,引入外部的资源
title:标题标签,
body:体标签
<!DOCTYPE html>:html5中定义该文档是html文档
2.文本标签:
注释：
<h1> to <h6>:标题标签
      h1~h6:字体大小逐渐递减
<p>:段落标签
<br/>:换行标签
<hr/>:展示一行水平线
      属性:
         color:颜色
         width:宽度
         size:高度
         align:对齐方式
            center:居中
            left:左对齐
            right:右对齐
<b>:字体加粗
<i>:字体斜体
<font>:字体标签
<center>:文本居中
      属性:
         color:颜色
         size:大小
         face:字体
属性定义:
      color:
         1.英文单词:red,green,blue
         2.rgb(值1,值2,值3):值的范围:0~255 如(255,0,0)表示红色
         3.#值1值2值3:值的范围:00~FF之间,如:#FF0000表示红色
      width:
         1.数值:width='20',数值的单位,默认是px(像素)
         2.数值%：占比相对于父元素的比例
3.图片标签:
img:展示图片 <img/>
      <img src="图片路径">
      属性: src:指定图片的位置
         相对路径:以.开头的路径
            ./：代表当前目录<=>不写则为默认当前目录
            ../:代表上一级目录
相对路径写法分类:
      1.同一级目录:直接写图片名称
      2.图片在网页的下一级目录:目录名/图片名
      3.图片在网页的上一级目录:../图片名

4.列表标签:
第一种:有序列表(order list)
      <ol><li>
第二种:无序列表(unorder list)
      <ul><li>
5.连接标签:
a:定义一个超连接<a>
      属性:
         href:指定访问资源的URL(统一资源定位符)
         <a href="">被点击的资源<a>
            1.作为被点击的资源:可以是文字,图片等
            2.跳转的资源是字节的网站内部的资源,也可以跳转到其他网站的资源
            第一种情况:跳转到其他网站的资源带http://
            第二种:跳转到字节网站内部的资源:不需要带http
                  路径写法:同一级目录,上一级目录,下一级目录
         target：指定打开资源的方式
               _self:默认值，在当前页面打开
               _blank：在空白页面打开
      eg:<a href="http://www.baidu.com">点我<a>
6.div和span:
div:每一个div占满一整行(会自动换行)。块级标签
span:文本信息在一行展示,行内标签,内联标签

(了解即可)语义化标签：html5中为了提高程序的可读性，提供了一些标签。
      1. <header>：页眉
      2. <footer>：页脚
7.表格标签:
table:定义表格
      属性:
         border:边框
         width:宽度
         cellpadding：定义内容和单元格的距离(一般指定为0)
         cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
         bgcolor:背景色
         align：对齐方式
tr:定义行
      bgcolor:背景色
      align：对齐方式
td:定义单元格
      colspan：合并列
      rowspan：合并行
         eg:rowspan="2"表示占两行
th:定义表头单元格
<caption>:表格标题
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分

表格标签:表格的范围:table定义行:tr定义单元格(列):td细节:合并单元格合并行:rowspan: 1.确定是哪一行和哪一行合并的,并且要知道 2.确定合并了几行（几个单元格）

合并列 colspan：

1.确定是哪一行里面的单元格的合并，并且要知道合并完后新的单元格是属于那个单元格

2.确定合并了几个单元格

HTML表单标题表单标签(必须掌握)表单:

概念:用于采集用户输入的数据的,用于和服务器进行交互

标签:

form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

*属性:

1.action:指定提交数据的URL(服务器端地址)

2.method:指定提交方式

分类:一共7中,2种常用

                  get:1.请求参数会在地址栏中显示.(会封装到请求行里)

                     2.请求参数大小是由限制的

                     3.不太安全

                  post:1.请求参数不会在地址栏中显示,会封装在请求体中

                     2.请求参数的大小没有限制。

                     3.较为安全

*表单中的数据要想被提交:必须指定其name属性

注意:表单提交数据的两点

1.

2.

表单项标签

1.input:可以通过type属性值,改变元素输入的样式

*type属性:

**text:文本输入框默认值

placeholder:指定输入框的提示信息,当输入框的内容发生变化时会自动清空提示内容

**password:密码输入框

**radio:单选框(例如选择性别)

注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3.checked属性，可以指定默认值

**checkbox：复选框(例如选择爱好)

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

**label：指定输入项的文字描述信息

注意:label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

** file：文件选择框

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

**按钮:

submit:提交按钮,提交表单

button:普通按钮

image：图片提交按钮

src属性指定图片的路径

reset:重置按钮

2.select:下拉列表(应用于:省市区数据)

子元素：option，指定列表项

3.textarea:文本域(应用于:自我描述,工作经历)

cols：指定列数，每一行有多少个字符 rows：默认多少行。

css(通过帮助文档独自查询常用的属性)1.概念:Cacading Style Sheets 层叠样式表

(一个css的样式文件,后缀名css)

美化和布局网页

层叠:多个样式可以作用在同一个html的元素(标签)上,同时生效

2.好处:

1.功能强大

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

2.1降低耦合度. (解耦)

2.2让分工协作更容易

2.3提高开发效率

3.css的使用:css与html集合方式

3.1内联样式

◆在标签内使用style属性指定css代码(通常不使用)

3.2内部样式

◆在head标签内,定义style标签,style标签的标签体内容就是css代码

      eg:<style>

            div{

                  color:blue;

            }

      </style>
      <div>hello css</div>

3.3外部样式

◆定义css资源文件

◆在head标签内,定义link标签,引入外部的资源文件

a.css文件：

[Java] 纯文本查看 复制代码

   div{
                    color:green;
                }
            <link rel="stylesheet" href="css/a.css">
            <div>hello css</div>

注意:1. 2. 3种方式 css作用范围越来越大

1方式不常用，后期常用2,3

3种格式可以写为： <style> @import "css/a.css"; </style>

语法规则:

选择器{

属性名称属性值;

属性名称属性值

}

选择器:

选择器就是用力啊标识(定位)美化或者布局的标签

(筛选具有相似特征的元素)

通俗来说就是定位或者标识html网页的标签

注意:每一对属性需要使用;隔开,最后一对属性可以不加

分类:

一.基础选择器

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

语法:#id属性值{}

2.元素选择器:选择具有相同标签名称的元素

语法:标签名称{}

注意:id选择器优先级高于元素选择器

3.类选择器:选择具有相同的class属性值的元素

语法: .class属性值{}

注意:类选择器选择器优先级高于元素选择器

二.扩展选择器

1.选择所有元素:

语法: *{}

2.并集选择器:

选择器1,选择器2

3.子选择器:筛选,选择器1元素下的选择器2元素

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

4.父选择器:筛选选择器2的父元素选择器1

语法:选择器1>选择器2

5.属性选择器:选择元素名称,属性名=属性值的元素

语法:元素名称[属性名="属性值"]{}

6.伪类选择器:选择一些元素所具有的状态

语法:元素:状态{}

如： <a> 状态： link：初始化的状态 visited：被访问过的状态 active：正在访问状态 hover：鼠标悬浮状态

属性:

1.字体,文本

font-size:字体大小

color:文本颜色

text-align:对齐方式

line-height:行高

2.背景

background：

3.边框

border:设置边框,复合属性

属性:solid 实线

4.尺寸

width:宽度

height:高度

5.盒子模型:控制布局

margin:外边距

margin:auto 水平居中

auto:距离上边框0px,距离左右边框自适应

padding：内边距默认情况下内边距会影响整个盒子的大小 box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

float：浮动 left 左浮动 right 右浮动

JvaScript1.javascript 历史由来1.1概念:一门客户端脚本语言

运行在客户端浏览器中的,每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

1.2功能:

可以来增强用户和html页面的交互过程,可以控制html元素,让页面有一些动态效果,增强用户体验效果

1.3JavaScript发展史：
      1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验.命名为:c--  后来更名为：ScriptEase

      1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript.青睐SUN公司的专家,修改Livescript,命名为JavaScript

      1996年,微软抄袭JavaScript开发出JScript语言

      1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScipt 基本语法

BOM(浏览器对象) DOM(html文档对象)

2.javascript 语法(和java类似)ECMAScript：客户端脚本语言的标准2.1基本语法:
1.与html结合方式

内部JS：
      定义<script>，标签体内容就是js代码
      推荐js代码放在<body>结束语句后
外部JS：(部署交付代码是推荐用这种方法)
      定义<script>，通过src属性引入外部的js文件
   注意：
      1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
      2. <script>可以定义多个。

2.注释
单行注释：//注释内容
多行注释：/*注释内容

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【石家庄校区】web开发

0 个回复

浏览过的版块