网页页面的组成
1.内容：是我们可以在页面上看到的数据，一般用html技术实现。
2.表现：是内容在页面上以何种样式出现，一般采用css代码来写样式。
3.行为：指页面中的元素与输入设备交互，一般采用javascript技术实现。
HTML页面
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
简单看一个HTML的例子，对HTML有一个简单的了解
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
我是主体部分
</body>
</html>
HTML标签
1.标签的格式：
<标签名>标签内容</标签名>
2.标签名不区分大小写，但在编码的时候要保持良好的习惯，统一大小写。
3.标签有自己的属性
基本属性：可以修改标签本身的属性，如color:red
事件属性：可以设置事件响应后的代码，如onclick="alert("弹出警告框")
4.标签分为单标签和双标签
单标签格式：<单标签/> 如<br/>表示换行 <hr/>表示长直线
双标签格式：<双标签></双标签> 如<body></body>
5.注意事项
标签不能嵌套使用。
标签必须正确闭合。
标签的中写出来的所有属性必须有值，值为空也要写比如：bgcolor=""
注释不能嵌套，找到第一个结束之后不再认为后面的内容是注释如<!-- 的<!-- 的-->-->是错的。
常用标签
1.font标签
<font color="red" face="宋体" size="1">我是主体部分</font>
color设置颜色，face设置字体，size设置字号，范围在1~7之间。
2.特殊字符
< <
> >
& &
" "
space空格  表示一个空格，因为默认认为连续10个空格只保留一个
3.标题标签
<h1></h1>到<h6></h6>是标题标签字号逐渐减小，<h7>不是标题标签
标题标签有align属性，表示对齐方式，值有left，right，center
eg：<h1 align="center"></h1>
4.超链接标签
页面中点击可以跳转的标签
超链接使用a标签
<a href="http:\\www.baidu.com" target="self">百度</a>
href表示设置连接的地址
target表示设置那个目标进行跳转
_selt表示自己进行跳转（默认值）
_blank表示新窗口跳转
5.列表标签
分为有序无序以及定义列表，一般使用无序列表，这里介绍无序列表标签。
<ul>表示无序列表 <ol>表示有序列表
<li></li>表示列表中的每一项,type= "none"去掉无序列表前的黑点，可以不写。
<ul type= "none">
<li>刘德华</li>
<li>张学友</li>
<li>黎明</li>
<li>郭富城</li>
</ul>
6.img标签
src表示图片所在的路径
在javaSE中
绝对路径表示盘符:/文件目录
相对路径表示从工程名开始算
在javaWeb中
绝对路径表示http://ip:port/工程名/资源
相对路径
.表示当前文件的路径
..表示当前文件的上级目录
文件名相当于./文件名
<img src="../images/1.jpg" width="200" height="300" border="1" alt="图片找不到">
width设置图片的宽度
height设置图片的高度
border表示图片的边框
alt设置当指定路径找不到资源时用来代替显示的文本内容。
7.表格标签
<table>是表格标签
align设置表格相对于页面的对齐方式
cellspace="0"表示两个单元格的间距为0，但每个单元格边框1px，最终2px，与合并不同
<tr>表示行标签
<td>表示单元格标签
align设置单元格相对于表格的对齐方式
<b>是加粗标签
<td align="center"><b>11</b></td>与<th>12</th>效果一样，表示内容加粗居中
<table border="1" width="200" height="200" cellspacing="0">
<tr>
<td align="center"><b>11</b></td>
<th>12</th>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
表格的跨行跨列
跨列使用 colspan="2"，表示这个单元格占两列
跨行使用 rowspan="3"，表示这个单元格占三行
注意使用的时候要根据表格大小去掉被合并的单元格，不然就会多出一部分单元格。
8.iframe标签
iframe标签可以在页面上开辟一块空间用来显示内容
src表示这块区域显示内容是哪个页面
可以设置该区域的大小
name属性对于想要让这块区域进行页面跳转的显示十分关键,<a>标签设置的target就是谁来进行跳转。
<iframe src="h3.html" width="400" height="400" name="h3"> </iframe>
<ul>
<li><a href="h1.html" target="h3">页面1</a></li>
<li><a href="h2.html" target="h3">页面2</a></li>
</ul>
9.其他标签
<div></div> 块标签，默认占一行
<span></span> 局部布局标签，文字多长，span多长
<p></p> 段落标签，默认会在段落的上方和下方空出一行（已有不再空）
表单（重点，也是标签）
表单是html页面中收集用户输入信息的所有元素集合，然后把表单发送给服务器。
<form></form>标签就是表单，标签放在<body></body>中。
下面就是一个比较全面的form表单
一般为了美观表单放在表格中。
<form>
用户名：<input type="text" value="默认值"/><br/>
密 码：<input type="password" value="默认abc"/><br/>
性 别：<input type="radio" checked="checked" name="sex">男
<input type="radio" name="sex">女<br/>
兴趣爱好： <input type="checkbox" checked="checked" name="hoby"/>Java
<input type="checkbox" name="hoby">JavaScript
<input type="checkbox" name="hoby"/>C++<br/>
国 籍：<select >
<option>请选择国籍</option>
<option selected="selected">CN</option>
<option>EN</option>
<option>USA</option>
<option>JP</option>
</select><br/>
自我评价:<textarea rows="10" cols="20"></textarea><br/>
<input type="reset" value="重置"><br/>
<input type="submit" value="提交"><br/>
<input type="button" value="按钮"><br/>
<input type="file"/>
<input type="hidden"/>
</form>
input type="text" 表示文本信息，value="默认值"表示提交时的默认值，如不设置默认值，可以使用
placeholder="用户名"来提示用户输入什么
input type="password" 表示密码框，在密码框输入不可见。可以设置默认值，同样不可见
input type="radio" 表示单选框，可以在多个选项中选择一个提交。可以使用checked="checked"设置
默认选中，一定要设置相同的name属性表示这些选项是同一组内容
input type="checkbox" 表示复选框，可以选择多个选项提交，同样设置相同的name属性
select 表示下拉选择框，可以设置默认选择的内容，下拉框中的每一项用option包围
textarea 表示多行输入文本框，cols控制多少列，rows控制多少行，多出的行提供滚动条
input type="reset" 表示重置表单所有的内容为默认值。
input type="submit" 表示提交按钮，可以将信息发送给服务器
input type="file" 表示加入文件
input type="hidden" 表示隐藏域，不需要用户进行操作，但后台需要处理的信息数据放在这里
表单提交的细节
form表单有两个主要属性
action：设置提交的服务器地址，也就是发给谁
method:设置发送信息的方法，post或者get
get会在地址栏显示提交的数据，显示格式：action+[？请求参数]，不安全，有数据长度的限制
post不会显示数据，只显示action的属性值，且理论上没有数据长度的限制，相对于get安全
表单提交时，数据没有提交给服务器的三种情况
1.需要提交的内容没有name属性，需要加上name属性，最终传输的是输入的内容
2.对于单选，复选，下拉选中的option需要设置value值，最终传输的是value值
3.表单项不在form表单中。
改进后的form表单
<form action="http://localhost:8080" method="">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" value="默认值" name="username"/><br/></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" value="默认abc" name="password"/><br/></td>
</tr>
<tr>
<td>性 别：</td>
<td><input type="radio" checked="checked" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br/></td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td> <input type="checkbox" checked="checked" name="hoby" value="Java"/>Java
<input type="checkbox" name="hoby" value="JavaScript">JavaScript
<input type="checkbox" name="hoby" value="C++"/>C++<br/></td>
</tr>
<tr>
<td>国 籍：</td>
<td> <select name="country">
<option>请选择国籍</option>
<option selected="selected" value="CN">CN</option>
<option value="EN">EN</option>
<option value="USA">USA</option>
<option value="JP">JP</option>
</select><br/></td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea rows="10" cols="20" name="desc"></textarea><br/></td>
</tr>
<tr>
<td> <input type="reset" value="重置"><br/></td>
<td> <input type="submit" value="提交"><br/></td>
</tr>
<tr>
<td><input type="button" value="按钮"><br/></td>
<td><input type="file"/></td>
</tr>
<tr><input type="hidden" name="action" value="login"/></tr>
</table>
</form>
CSS技术
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）
或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种
脚本语言动态地对网页各元素进行格式化。
css语法规则 选择器{
属性：值；
}
如 div{
color:red;
}
一般一行写一个属性，css注释格式/*.......*/注意与html不同。
css与html组合使用
1.在标签中添加style属性，并给相应的值,缺点太多，代码没有复用性，
如;<div style="border:1px solid red">div1</div>
2.在head标签中，使用style标签定义要使用的css样式，但是该方法只适合页面比较少的情况，每个页面都需要写css代码
<style type="text/css"></style>
如：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
color:red;
}
span{
color:blue;
}
</style>
</head>
<body>
<div>div1</div>
<span>span1</span>
</body>
</html>
3.把css样式写出一个css文件，在html页面中通过在head中加
<link rel="stylesheet" type="text/css" href="1.css"/>就可以使用样式。
CSS选择器
1.标签名选择器：可以决定哪个标签被动的使用这个样式，格式
标签名{
属性:值
}
如： span{
color:red;
border:1px solid blue
}
使用：在同一个页面的所有被定义了样式的标签全部使用该样式。
2.id选择器：可以通过id属性选择性的使用样式
#id属性值{
属性:值
}
如： #id01{
color:red;
border:1px solid blue
}
使用时：<div id="id01">选择使用样式</div>，可以有选择的使用样式
3.class类型选择器，class类型选择器可以通过类型属性有效的选择性的使用这个样式
.class属性值{
属性:值
}
如：.class01{
color:red;
border:1px solid blue
}
使用时：<div class="class01"></div>
<span class="class01"><span>
4.组合选择器，组合选择器可以让多个选择器共用一个样式代码
选择器1,选择器2...选择器n{
属性:值
}
如：.class01,#id01{
color:red;
border:1px solid blue
}
使用时：<div class="class01"></div>
<span id="id01"><span>
CSS常用样式
字体颜色 color:red;
宽度 width:30px;
高度 height:20px;
背景颜色 background-color:red;
字体大小 font-size:10px;
边框 border:1px solid red;
div居中 margin-left:auto;
margiin-right:auto;
文字居中 text-align:center;
超链接去下划线 text-decoration:none; //a标签中使用
表格细线 table{
border:1px solid black;
border-collapse:collapse;
}
td,th{
border:1px solid black;
}
列表去修饰 ul{
list-style:none;
}
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
