一、架构简介
1、软件主要分为两种架构C/S和B/S
C/S——Customer(客户端）/Server(服务器）
B/S——Browser（浏览器）/Server
Browser:html、css、javaScript、jquery、ajax
Server:java、jsp、servlet、filter、list、ener、spring、spring mvc、mybatis
2、W3C标准
网页主要由3部分组成：结构—HTML用于描述页面的结构、表现—CSS控制页面中元素的样式、行为—JavaScript负责页面的行为
二、HTML（Hypertext Markup Language)超文本标记语言
元素：也称标签
父元素：（父标签）和子元素直接上下级关系
祖先元素：包含父元素
兄弟元素：例如header和body
子元素：和父标签有直接上下级关系
后代元素：后代元素包含子元素
三、常用标签
1、标题标签
?<!-- html中的标题标签:h1~h6 --> ???<!-- h标签强调的是重要性 --> ???<h1>这是一级标题</h1> ???<h2>这是二级标题</h2> ???<h3>这是三级标题</h3> ???????<h4>这是四级标题</h4> ???<h5>这是五级标题</h5> ???<h6>这是六级标题</h6>
2、段落标签
?<p> ?????锄 禾日当午，<br/> ?????汗滴禾下土。<br/> ?????谁知盘中餐，<br/> ?????粒粒皆辛苦。<br/> ???</p>
3、换行标签
?????锄禾日当午，<br/> ?????汗滴禾下土。<br/> ?????谁知盘中餐，<br/> ?????粒粒皆辛苦。<br/>
4、特殊符号
空格：
<：<
5、分割线
???<hr/> ?????我是分割线 ???<hr/>
6、无序列表
ul:unordered list 无序列表
li:list item 具体表单项
??<ul> ??????<li>张三</li> ??????<li>极速</li> ??????<li>23</li> ??????<li>极其</li> ???</ul>
7、有序列表
ol:ordered list 有序列表
li:list item 具体表单项
?<ol> ??????<li>张三</li> ??????<li>极速</li> ??????<li>23</li> ??????<li>极其</li> ???</ol>
8、img标签
img标签用于加载图片
alt:表示图片未正常加载的时候需要显示的信息
src:图片的路径
相对路径:表示的是相对于当前文件所在目录的路径
1）和当前文件在同一个目录下
2）图片据在的目录和当前文件在同一个文件夹
3）图片所在的目录是当前文件的上一级或上级 e.g ../img/im.gif或../../img/im.gif
绝对路径:
互联网资源:http://
本地资源:file:///
9、iframe框架
<body> ????这是iframe页面 ???<iframe src="img.html" width="300" heigth="500"></iframe></body>
8、a标签
a标签中的属性：
href="":代表要跳转的地址
target="",规定在何处打开目标页面
四、表格
<table border="1" align="center" cellspacing="0" width="400" heigth="233"> ?????<tr> ??????????<td>姓名</td> ??????????<td>年龄</td> ??????????<td>性别</td> ??????????<td>籍贯</td> ?????</tr> ?????<tr> ??????????<td>张三</td> ??????????<td>32</td> ??????????<td>男</td> ??????????<td>河北</td> ?????</tr> ?????<tr> ??????????<td>李三</td> ??????????<!-- 跨行 --> ??????????<td rowspan="2" style="color:red;font- ???size:30">25</td> ??????????<td>女</td> ??????????<td >重庆</td> ?????</tr> ??????<tr> ??????????<td>张三1</td> ??????????<!-- colspan 跨列 --> ??????????<td colspan="3">22</td> ?????</tr> ???</table>
五、 表单
<body> ???<!-- ????action:表示要跳转到目标地址 ???method:指定表单的请求方式 ???????post:浏览器不会以地址栏的方式传递参数 ???????get:表单的默认请求方式，如果以get请求提交，表单的参数会在地址栏中传递 ????--> ???????<form action="2.html" method="get"> ?????????????????????????用户名：<input type="text" name="username" value="张三"/> ?????????????<br/>密 码：<input type="password" name="pwd"/> ????????????<br> 性别：<input type="radio" name="gender" value="1"/>男 ?????????????????<!-- 单选按钮通过name来区分组 --> ????????????????<input type="radio" name="gender" value="2"/>女 ????????????<br/>爱好：<input type="checkbox" name="hobby" value="1"/>羽毛球 ????????????<input type="checkbox" name="hobby" value="2"/>篮球 ????????????<!-- 对于select 下拉列表而言，name和value是分开的 --> ????????????<br/>籍贯： ????????????<select name="address"> ????????????????<option value="1">河北 </option> ????????????????<option value="2">湖南 </option> ????????????????<option value="3">山西 </option> ????????????</select> ????????????<br/><input type="submit" ?value="Submit"/> ???????</form> </body>
六、CSS
1、样式表
1）行内样式表
id：identifier属性在整个html页面中必须是唯一
<p id="sss" class="ab">什么颜色？</p>
2）内部样式表
<style type="text/css"></style>
3）外部样式表
<link rel="stylesheet" type="text/css"href="style.css" /> ??
2、选择器
<style type="text/css"> ?????#sss{ ????<!-- id选择器 --> ????????color:red ????????backgroud-color:yellow; ??????} ??????P{ ?????????<!-- 标签选择器 --> ?????????color:red ??????} ??????.ab{ ????<!-- 类选择器 --> ????????font-size:30px; ??????} </style><head>
<style type="">/*一个并集选择器*/
???h1,h2,h3,p{ ???font-size:12px; ???color:green; ???} ???/*并集选择器内依次有交集选择器(h2.special)、类选择器(special)、ID选择器(#one)*/ ???h2.special,.special,#one{ ???text-decoration: underline; ???color: red; ???}/*交集选择器*/ ???h2.special{ ???color:blue; ???font-size: 30px ???}
</style>
</head>
<body> ???<h2>示例文字000</h2><!--应用于上方的并集选择器，绿字--> ???<h2 class="special">这是一段文字</h2><!--应用于下方交集选择器，交集选择器和并集选择器重复定义的内容，以交集选择器为准，下划线，蓝色大字，而不是红色--> ???<p class="special">这是一段文字</p><!--体现并集选择器中的类选择器，下划线，并集选择器优先级低于类选择器，所以不是绿字，是红字--> ???<h4 id="one">这是一段文字</h4><!--体现并集选择器中的ID选择器，下划线，红字--> ???<h4>这是一段文字</h4><
/body>
HTML
原文地址：http://www.cnblogs.com/bkyy/p/7794751.html