网页页面的组成
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;
}