关于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 空标签体:<img/> 主要属性如下: src:链接到的资源图片。 width:图片宽度。两种使用方式:a、指定像素;b、百分比(常用)。 height:图片高度。 title:悬停状态时显示的文字。 alt:图片失效时,用来解释说明该图片的文字。 (3)表格标签table tr:行标签 td:单元格(列标签) th:表头标签(特点:自动居中、自动加粗) 主要属性如下: border:边框(1px)(必有属性)。 align:当前表格在浏览器中的对齐方式。属性值:center、left、right。 bgcolor:背景颜色。 rowspan:行合并。 colspan:列合并。 width:表格宽度。 height:表格高度。 caption:标题标签。必须放在<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 rel="nofollow" href="#锚点名称">跳转名称</a> 在不同html页面下时: a、打锚点<a name="锚点名称">锚点名称</a> b、创建跳转标记 c、跳转名称<a rel="nofollow" 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/7171fe7d00dfdaea45adc18d23a5d4bd.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
   3、css常用属性
		    (1)文本属性
			          ![](http://i2.51cto.com/images/blog/201803/29/49920d48a5c837c40cde329f4aa12033.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
				(2)字体属性
				        ![](http://i2.51cto.com/images/blog/201803/29/1296d2becb8266b6511c29fa6f7be75b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
				(3)背景属性
				        ![](http://i2.51cto.com/images/blog/201803/29/c981cf4cb4d5d3393469163c5dbfae35.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
				(4)列表属性
				         ![](http://i2.51cto.com/images/blog/201803/29/dfc283640d493893e1d1184190100a21.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
				(5)表格属性
				         ![](http://i2.51cto.com/images/blog/201803/29/5a2cb28dbe65526f6fe04ca102f08309.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

六、盒子模型(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源码。 二、基本格式