Javaweb学习笔记
Web开发流程
HTML
CSS
标签
表格
表单
特殊符号表示法
颜色表示法
CSS常用属性
Web开发流程
Web开发主要流程有两种主流的开发结构：C/S架构和B/S架构。（客户端/服务器模式和浏览器/服务器模式）。
Web开发遵循流程：需求分许阶段、设计阶段、开发阶段、测试阶段、运行于运维阶段。
HTML
HTML;超文本标签语言，属于一种标签语言。
XML:可扩展标记语言。
XHML:可扩展超文本标记语言。
CSS
CSS:层叠样式表，用于控制网页样式允许将信息与网页内容分离的一种标记性语言。CSS能够对网页对象的位置排版进行像素记得精确控制，扩充了HTML标签的属性设定，使得页面效果表现更加灵活，更具有动态性。
标签
各种标签使用不能出现交叉现象。
<html></html>标签对标识HTML文档的开始和结束。 <head></head>描述HTML文档相关信息，如编码方式，网页标题。 <body></body>定义HTML文档中需要显示的实际内容，如文字、图片、标签。 <!-- -->里面可以添加注释浏览器运行后内容不会出现在页面。 <hn></hn>其中n的范围是1~6，数字越小字体越大，其中还可设置align属性设置对齐方式（左对齐，剧中，右对齐）。 <hr/>可设置一条线是个单标签，可设置属性width（水平线宽度），size（水平高度），align，noshade（去掉阴影）。 <b></b>与<strong></strong>标签使字体加粗。HTML5推荐使用<strong></strong>。 <i></i>与<em></em>标签使字体变为斜体。 <u></u>标签文本添加下划线（可能会混淆成超链接，尽量避免使用）。 <sup></sup>定义上标文本。 <sub></sub>定义下标文本。 <small></small>呈现小号字体效果。 <big></big>呈现大号字体效果。 <pre></pre>已经编排好的内容可保留其格式，按照原来编排方式进行呈现。 <a herf="url"></a>定一个超链接。target属性可以指明在何处打开超链接。 target属性: _self浏览器默认设置，在当前窗口或同一框架载入连接文档。 _blank在一个新的未命名的窗口载入文档。 _parent如果是嵌套框架则在父类框架或窗口打开连接文档，如果不是则与_top相同。 _top在整个浏览器窗口中载入连接文档。 <img src="图片绝对地址">可在页面插入图片。 img属性： src指定图片路径。 atl设置图片的替代文字（在图片没有加载出来的时候显示文字，或者加载成功鼠标指针在图片上显示描述文字）。 width，heigth设置图片的宽度和高度。 border设置图片边框，默认为四边无边框。 vspace，hspace设置图片垂直间距和水平间距。 align 设置图片与文字之间的排序。（值为left，right，top，botton，middle）。
<ul></ul>无序列表，每一个列表项使用标签<li></li>来定义。 <ul type=value> <li>....</li> .... </ul> value值为disc（实心小圆点），circle（空心小圆点），square（实心小方砖）。 <ol><ol/>有序列表语法结构如下： <ol type= value start=value> <li>.......</li> ..... <ol> value可取1，2，3...|a,b,c...|A,,B,C...以及大小写罗马数字。
表格
<table></table>用来定义表格整个表格包含在<table></table>之间。 <tr></tr>用来定义表格中的一行，每行可以包含多个单元格。 <th></th><td></td>都放在行标签内，<th></th>定义表头，<td></td>定义普通单元格。 表格中常用属性： width 表格宽度，单位为像素或者百分比。 height 表格高度，单位为像素或者百分比。 border 表格边框线宽度。 cellspacing 单元表间距。 cellpadding 单元表格内，文字与单元表格的间距。 aligen 水平位置。 valign 垂直位置。 background 背景图。 bgcolor背景颜色。 bordercolor 边框颜色。 rowspan 行合并。 colspan 列合并。 <table> <tr> <th>...</th> ... </tr> <tr> <th>...</th> </tr> <tr>....</tr> </table>
表单
表单区域用<form></form>标签来定义。 <form>标签的属性： name: 表单的名称 method：定义表单数据从浏览器传送到服务器的方法，有post和get两种。 get提交方式将把数据发送到网页的URL地址中，属于运费隐藏式提交，而且允许传送的信息量一般小于1KB，但是床送效率高。 post提交方式是将材料本身当作主体来传送，属于隐式提交，此方式由于传送信息量较大的表单，缺点是传输效率慢。 一般，注册时用post，查询时用get。 action：定义表单处理程序的位置，如jsp文件、Servlet文件等。 <input type="text" name="field_name" maxlength="value" size="value" value="string"> 文本框属性： name：文本框名称。 maxlength：文本框最大输入字符数。 size：文本框宽度。 value：文本框默认值。 密码框： <input type="password" name="field_name" maxlength="value" size="value"> 单按钮与复选框： <input type="radio" name="ll" checked="checked" value="string"> <input type="checkbox" name ="22" checkbox="checkbox" value="string"> 如下图：
列表是一种最节省空间方式，正常只能看到一种选项点击后会呈现所有选项。 <seclect name="select_name" size="number" multiple="multiple"> <option value="select_name" selected="selected"></option> <option value="select_name" >选项名称</option>//可以设置多个选项 </select> 列表属性： name:列表名。 size:显示的选项数目，1为下拉菜单，大于1则是列表框。 multipl:允许选项多选，删去则为下拉列表形式只能选一个选项。 value:选项值。 select:默认值。 文件框:浏览客户端文件上传到Web服务器。 <input type="file" name ="file_name"> 隐藏域：在页面中对用户不可见，用来传送数据给web服务器。浏览者提交表单时，隐藏域的信息也会一起被发送到服务器。 <input type="hidden" name="field_name" value="string"> value为需要传的值。 按钮: <input type="button" name ="filed_name" value ="普通按钮" > <input type="submit" name ="filed_name" value ="提交按钮" > <input type="reset" name ="filed_name" value ="重置按钮" > 图片按钮： <inout type="image" name="field_name" src="image_url"> src为图片路径 多行文本域: <textarea name="memo_name" row="value" cols="value" value="string"> 多行文本域属性: name:文本域名称; rows:文本域的行数; cols:文本域的列数; value:文本域的默认值;
特殊符号表示法
< 表示 < 符号 > 表示 > 符号 & 表示 & 符号 "表示 “ 符号 ® 表示 ® 符号 ©表示 © 符号 表示 符号 ·表示 · 符号
CSS
1、内联样式：
直接写在标签元素的style属性中。
<p style ="color:#ff0000; font-size:12px;text-decoration:underline;" > 红色12像素带下划线字体 <p style ="color:#ff0000; font-size:12px;text-decoration:none;" > 红色12像素不带下划线字体
2、嵌入样式表：
将样式写在HTML文件中区域里的标签内。
<style> h2{font-family:黑体; color:bold;font-size;12px;} p{color;#0000ff;font-weight:bold;font-size:12px;} <body> <h2>样式表</h2> <p>在网页中应用CSS样式表有三种方式：内联式、嵌入式样式表和外部样式表。 </p> </body> </style>
3、外部样式表：
文件以.css为扩展名，在中使用标签或@import关键字将外部样式表文件链接或导入到HTML文件中。单独写在一个独立的文件中有网页调用同一个外部样式表文件，因此能够实现代码的最大化重用及网站文件的最优化配置，还能保证网站风格一致性。
web.css h2{ font-family:黑体;color:#ff0000;} p{color:#0000ff;font-weight:bold;font-size:12px;} HTML代码： <head> <link href="style/web.css" rel="stylesheet" type="text/css"> </head> <body> <h2> 样式表 </h2> <p>在网页中应用CSS样式有三种：内联样式、嵌入样式表、外部样式表。</p> </body>
href属性用于指定样式表文件所在的URL
rel=“stylesheet”表示链接的是外部样式表。
type="text/css"表示被链接文档的MIME类型是样式表；
使用@import指令：可以在标签里使用@import指令
<style> @import"web.css" @import url("web.css"); </style> 两者效果一样
颜色表示法
以十六进制表示RGB颜色
RGB：R（red红色）、G（green绿色）、B（blue蓝色）；
表示法规定为：rgb（red,green,blue）参数定义颜色强度介于0~255之间也可以是百分比。
rgb(255,0,0)=rgb(100%,0,0)=#f00;
RGBA颜色表示法：
表示法规定：rgba(red,green,blue,alpha)
alpha参数介于0.0（完全透明）~1.0（完全不透明）的数字。
CSS常用属性
font:在一个声明中设置字体的所有属性。 font:italic bold 12px/30px arial,sans-serif; 倾斜 加粗 字号 行间距 字体 font-family:设置文本字体 。 font-size:设置文本的字体大小。 color:设置文本的颜色。 font-style:设置文本样式。 font-weight:设置文本粗细。 text-decoration:用于设置文字下划线。 text-align:设置段落的水平对齐方式，属性值分别为left、center、right。 vertical-align:设置段落的垂直方式属性值分别为top、midlle、botton。 line-height:设置段落的行间距，em为相对行距。 text-indent:设置段落首行缩进;1em为一个字。
CSS的图片属性：
width:设置元素宽度。 height:设置元素高度。 background:在一个声明中设置所有的背景图。 background-color:设置背景颜色。 background-image:设置背景图片。 background-repeat:设置背景图片的平铺方式，属性值分别为：repeat(默认)、repeat-x、repeat-y、no-repeat。 background-attachment:设置背景图的滚动方式固定或者随着页面内容滚动。
CSS列表属性：
list-style:将所有列表属性写在一个声明中;list-style:square inside url("arrow.gif")。 list-style-image:将图像设置为列表项标志。 list-style-position设置列表中列表项标志的位置（属性值为：inside、outside、inherit）。 list-style-type:设置列表项标志类型。
