web前端入门与java入门

关于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语言结构
web前端入门与java入门
2、html常用标签
(1)常用文本标签
标题标签:h1~h6(字体依次变小)
缩进标签:blockquote
段落标签:p
换行标签:<br/>
字体标签:font
上/下标标签:sup/sub
水平线标签:hr
原样输出标签:pre
(2)图像标签img
web前端入门与java入门
(3)表格标签table
web前端入门与java入门
(4)表单标签form(重点)
作用:采集用户输入的数据。
应用场景:a、登录。输入用户名基本信息(用户名、密码等)→点击登录→提交到系统后台→系统校验是否存在该用户→若存在则登录成功,否则失败。b、注册。采集用户输入信息→提交后台→服务器数据库查看是否有当前用户名,若有注册失败,若无则成功。
重要属性:
action:提交的地址(资源文件或URL(统一资源定位符))。
method:提交方式,常用get、post。get与post区别如下:
get提交方式:a、将用户信息战士到地址栏中(不安全);b、提交的文件大小不能超过64kb。
post提交方式:a、不会将用户的信息展示到地址栏中(安全);b、提交文件大小无限制。
onsubmit:表示当前表单是否提交成功。true:提交成功。false:提交失败。
name:表单标签中name属性必须指定,用来给后台提交。
web前端入门与java入门
举例:
web前端入门与java入门
(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)伪类选择器(伪类表示一种状态)
                         ![](https://s4.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)字体属性
                        ![](https://s4.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)列表属性
                         ![](https://s4.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(在当前两侧都不允许有浮动元素)。

 border-style:前端学习培训、视频教程、学习路线,请添加威信:haomei0452,联系我!

关于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程序。
web前端入门与java入门


猜你喜欢

转载自blog.51cto.com/14895198/2544335