web前端入门与java入门

Posted 2020-10-28

关于web前端入门
一、软件结构划分
1、C/S结构：Client（客户）-Server（服务器）之间的交互。特点：客户端的软件必须升级才能使用服务器高版本的功能。例如：阿里巴巴等。
2、B/S结构：Browser（浏览器）-Server（服务器）之间的交互。特点：浏览器端的软件无需特定的升级就可访问服务器端的网站。例如：网易新闻等。
JavaWeb/EE均基于B/S结构。
二、网站基本认识
基于B/S结构的应用都叫网站。组成：由很多的html标签组成。
三、W3C组织
规范了html、css、js（javascript）的写法。其中：
html：结构化标准。
css：美化网页的样式。
javascript：行为化标准。
四、HTML（Hyper Text Markup Language，超文本标记语言）
1、HTML语言结构

2、html常用标签
（1）常用文本标签
标题标签：h1~h6（字体依次变小）
缩进标签：blockquote
段落标签：p
换行标签：<br/>
字体标签：font
上/下标标签：sup/sub
水平线标签：hr
原样输出标签：pre
（2）图像标签img

（3）表格标签table

（4）表单标签form（重点）
作用：采集用户输入的数据。
应用场景：a、登录。输入用户名基本信息（用户名、密码等）→点击登录→提交到系统后台→系统校验是否存在该用户→若存在则登录成功，否则失败。b、注册。采集用户输入信息→提交后台→服务器数据库查看是否有当前用户名，若有注册失败，若无则成功。
重要属性：
action：提交的地址（资源文件或URL（统一资源定位符））。
method：提交方式，常用get、post。get与post区别如下：
get提交方式：a、将用户信息战士到地址栏中（不安全）；b、提交的文件大小不能超过64kb。
post提交方式：a、不会将用户的信息展示到地址栏中（安全）；b、提交文件大小无限制。
onsubmit：表示当前表单是否提交成功。true：提交成功。false：提交失败。
name：表单标签中name属性必须指定，用来给后台提交。

举例：

（5）超链接标签a
作用：a、连接到某个资源文件或资源地址（URL)；b、作为锚链接使用。
在同一个html页面下时：
a、打锚点<a name="锚点名称">锚点名称</a>
b、创建跳转<a href="#锚点名称">跳转名称</a>
在不同html页面下时：
a、打锚点<a name="锚点名称">锚点名称</a>
b、创建跳转标记
c、跳转名称<a href="资源文件或资源地址#锚点名称">跳转名称</a>
常用属性：
href：连接到的资源文件或地址。
target：打开资源文件的方式。常用属性值：_self（在当前窗口直接打开）、_blank（新建窗口打开）。
常用协议：
file://本地文件协议。
http://自己执行流程。通过查看hosts文件中有没有该域名对应的ip。若有，调用程序访问，若无，联网操作访问。
thunder://迅雷协议。
mailto://邮件协议。
（6）转义字符（必须加分号）
空格：&nbsp； <：⁢ >：&gt 注册商标：&reg； 版权所有：&copy；
五、CSS（层叠样式表Cascading Style Sheet）
1、三种使用方式
（1）行内样式
标签style属性:指定样式
弊端:style属性和html标签混合使用,不利于后期维护
（2）内部样式（在head标签中,书写style标签）
<style type="text/css">
标签名{
书写样式;
}
</style>
（3）外部样式
a.创建一个独立的后缀名为.css结尾的css文件
选择器{
书写样式;
}
b.导入外部css文件
<link href="xxx.css" rel="stylesheet" type="text/css">
2、css选择器
（1）标签选择器
标签名称｛
css属性：css属性值；
}
（2）id选择器
#id属性值｛
css属性：css属性值；
}

                                    a、若一个标签同时被标签选择器和id选择器选中，id选择器优先级高于标签选择器。
                                    b、在同一个html页面中，不能给多个标签指定同名id属性。若同名，在js获取标签对象时，无法获取到。getElementById（”id属性值“）。
                （3）类选择器
                          .class属性值｛
                                                          css属性：css属性值；
                                                                         }  
                                 同一个html页面下，多个标签可制定同名class属性。
                （4）并集选择器（同时选中多个标签，标签之间为”，“）
                          选择器1，选择器2，......｛
                                                                             css属性：css属性值；
                                                                                            }
                （5）交集选择器（同时选中多个标签，标签之间为空格）
                          选择器1   选择器   ......｛
                                                                             css属性：css属性值；
                                                                                         }
                （6）伪类选择器（伪类表示一种状态）
                         ![](http://i2.51cto.com/images/blog/201803/29/e18abb87af4739bad21f9c9592c93136.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
   3、css常用属性
            （1）文本属性
                      颜色：color
                                行高：line-height
                                字符间距（字与字之间的距离）：letter-spacing
                                字间距（词与词之间的距离）：word-spacing
                                文本对齐方式：text-align
                                文本修饰：text-decoration   常用属性值：underline（下划线）、none（无下划线）、overline（上划线）、line-though（中划线）。
                （2）字体属性
                        ![](http://i2.51cto.com/images/blog/201803/29/a8e8738cfda5e0604b4d025926b05b1b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
                （3）背景属性
                        background-color：背景颜色。
                                background-image：背景图片。
                                background-repeat：设置背景图片重复方式以及是否重复，常用属性值：repeat（x、y轴均重复，默认值）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）、ni-repeat（不重复）
                                background-position：设置背景图片的起始位置。常用属性值：图片的显示位置（top、center、bottom）、图片在浏览器中的位置（left、center、right）。
                                背景图片简写属性：background：颜色  图片地址  重复方式  起始位置
                （4）列表属性
                         ![](http://i2.51cto.com/images/blog/201803/29/bbc2e896ce4d30673b5be07cd51081d4.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
                （5）表格属性
                         border-collapse：collapse。将表格的边框合并为单一的框。
                                 border-color：边框颜色简写属性。a、边框颜色默认顺序：上、右、下、左（顺时针）；b、边框颜色某一边若未设置，则取对边颜色值。
                                 border-width：边框宽度简写属性。a、边框颜色默认顺序：上、右、下、左（顺时针）；b、边框颜色某一边若未设置，则取对边颜色值。
                                 border-style：边框样式。一块标签若想显示边框效果，则必须制定边框样式。
                                 border简写属性：border：尺寸  样式  颜色
                                                              width：宽度
                                                                                            height：高度

六、盒子模型（div块标签+css网页布局）
常用属性：
容量：给div标签指定高度和宽度。
设置边框：div｛
border：尺寸 样式 颜色；
width：宽度；
height：高度；
｝
内边距：padding（盒子与内容之间的距离）。padding-left：盒子内边距向右移动。其他移动方向以此类推。
外边距：margin（盒子和盒子之间的距离），下外边距。其他方向以此类推。简写属性：margin：上 右 下 左； 给按钮设置外边距时情况特殊，应当作为一个块，整体设置外边距。
display属性：常用属性值：none（常用此元素不会被显示，被隐藏）、block（此元素显示为块级元素，前后带有换行符）、inline（此元素被显示为内联元素，前后无换行符）。
float浮动属性：常用属性值：left（左浮动）、right（右浮动）。
clear属性：设置一个元素侧面是否有允许其他的浮动元素。常用属性值：both（在当前两侧都不允许有浮动元素）。
关于java入门
一、jdk安装目录的结构
bin：全部是后缀名为.exe的可执行文件。
db：针对开发工具包的一些核心的jar包（数据库）。
include：以.h结尾的后缀文件，c文件。
lib：存放很多的核心类库。
jre：包含了jvm（java虚拟机）。（jdk包含了java运行环境，jre包含了jvm）。
src.zip：java源码。
二、基本格式
class 类名｛
public static void main（String[] args）｛
......
System.out.printIn("......");
}
程序举例："Holle Java“java程序。