web应用程序:
web的客户端技术 --web基础--只需要浏览器
创建页面-内容展示--------html
美化页面-设置样式外观-----css
动态效果-单击等----------javascript
web的服务器端技术
与服务器交互-进行数据的交互---servlet+jsp
---------------------------------------------------------------------------
------------------------------------------------------------------------------
html
1.概述
2.基本语法
3.文本
4.图形,链接
5.列表
6.表格
7.表单
8.浮动框架
------------------------------------------------------------------------------
------------------------------------------------------------------------------
html超文本标记语言
hyper text markup language
由浏览器解释执行
扩展性很强,可以嵌套脚本
/********************/
1.概述:
html是一种标记语言,用于编写.html/.htm网页文件,由浏览器解释执行
作用:创建静态网页,结合css,js做出
/**********************************/
2.基本语法:
标记: < >括起来的单词, 成对的多,单个的少 (整体是标记)
元素 : < > 包围的部分,开始,结束,例如:h1元素,br元素
属性:开始标记里,用来修饰元素,设置额外的属性
{
封闭类型标记(成对出现的)
空格隔开
属性="值"
非封闭标记,也叫空标记( 中间不需要内容)(单个出现)
}
{
封闭类型元素
非封闭类型元素 例如: <br /> , <meta /> , <img />
}
/*************************/
注释<!-- ????????? -->
/**********************************************************/
<!------------------------------------------------------->
<!--html文档的标准结构-->
<!---版本信息-->
<html>
<head>
<title> </title>
<meta http-equiv="refresh" content="1" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> 中文 </body> </html>
/**********************************************/
<!-------------------------------------------------->
html文档的标准结构
1.
<html>
<head> 关于整个文档的定义,编码,标题</head>
<body> 显示页面的内容</body>
</html>
2.版本信息
指定html语言使用的版本
Strict DTD 严格型
Transitional DTD 过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.<head> </head>
元素
title
meta
属性:http-equiv content
<meta http-equiv="" content="" />
<meta http-equiv="refresh" content="1" />
<meta http-equiv="content-type" content="text/html:charset=utf-8" />
script
style
link等
4.body
5.body 文本.........
/**************************************************************/
3.文本
1.空格折叠问题
多个空格或换行 折叠成一个空格或换行
特殊字符:转义字符
空格:
<: < left
>: > right
.
.
.
1.标题元素 h1---h6
基本语法:<h#> </h#>
#:1.2.3.4.5.6
2.<br/>普通换行
3.<p> </p>段落标记,有段落间距
//<p align="center"> </p> 后期维护不方便
4.分区元素:可以使用分区元素包含一些元素,进行统一设置
<div> </div>//独占一行,上下分开
<span> </span>//同一行,不会影响原有的布局
例子:<span style="color:red;">W3C</span>
5.某些内容
块级(block)元素和行内(inline)元素
{
块级元素:页面上独占一行的元素,上下文的其它元素自动换行,例如:p/h1/div/table/ul/ol/li/...
行内元素:不会影响同一行的其它元素,例如:span/a/img...
}
/*****************************************************************/
4.图像,链接
图像:
路径:
相对路径:相对于当前html文档而言
<img src="xxx.jpg" width="" height=""/>
绝对路径:web中,指完整的url地址
<img src="http://www.google.com/xxx.jpg"/>
链接:
相对路径:
<a href="xxx.html"> 被点击的文本或则其他元素(例如图片) </a>
绝对路径:
<a href="http://www.google.com/xxx.html"> 被点击的文本或则其他元素 </a>
设置打开新页面,不覆盖原页面
使用 target 属性设置在哪里打开 (1.): _self 默认值,替换 ,(2.): _blank 新打开
<a href="xxx.html" target="_blank" > 被点击的文本或则其他元素(例如图片) </a>
锚点:
a页去b页
a页去a页
第一步:定义锚点(放在想要到的位置上方)
<a name="aaa"></a>
第二步:使用a加上链接去往锚点
<a href="#aaa">去往锚点</a>
回到最顶端,的简写方法:
<a href="#">回到最顶端</a>
/***************************************************/
5.列表
列表:将一些有关系的数据排列显示
有序列表ol
无序列表ul
列表项li
列表里面只能放列表项
列表项里嵌套列表
常见应用:实现分层的导航目录--列表的嵌套
有序列表ol(order list)
<ol>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
无序列表ul(unOrder list)
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
列表的嵌套
<ol>
<li>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</li>
<li>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</li>
</ol>
/****************************************************/
6.表格
用于数据的显示,也可以用于页面的布局
table
tr:table row
td:任何内容
自适应 //表格剧中
<table border="" width="" height="" align="center">
<tr>
<td height="" width="" >a </td>
<td>b </td>
<td>c </td>
</tr>
<tr>
<td> e</td>
<td> f</td>
<td> g</td>
</tr>
</table>
a.基础
b.常用属性
c.行分组
thead/tbody/tfoot (只是标记可以多次使用)
<table border="" width="" height="" align="center">
<thead>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
</tr>
</thead>
<tbody style="color:green;">
<tr>
<td height="" width="" >a </td>
<td>b </td>
<td>c </td>
</tr>
<tr>
<td valign="top/center/bottom"> e</td>
<td> f</td>
<td> g</td>
</tr>
<tbody>
</table>
valign="top/center/bottom"垂直设置位置
d.不规则表格 (跨行or跨列)
跨行:rowspan
<td rowspan="2">
跨列:colspan
<td colspan="3">
e.嵌套的表格
caption:只能位于表格里,在第一行
<table boirder="1" width="500" heigth="" align="">
<caption>表1-1</caption>
<thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3">
<table>
<tr>
<td width=""></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
/*******************************************************/
7.表单
------实现界面的交互
1.什么是表单
表单:承载交互的元素,实现和服务器的数据交互
<form action="xxx.jsp" method="post">
多个文本框等信息,当前form的按钮承载的数据范围
<form>
2.表单包含什么
表单上的交互元素:
<!--------------------------------------------------------------------->
----------input-------------------------------------------------
文本框:
<input type="text" value="" readonly="readonly" />
(value添加默认值,readonly设置只读)
密码框:
<input type="password" maxlength=""/>
(maxlength设置最大长度)
value/readonlymaxlength
--------------------------------------------------------------------
按钮:
<input type="button" />
---------------------------------------------------
单选框:
<input type="radio" name="" value="" />
(value需要标记哪条)
(要分组(实现多个单选框单选) name属性的值相同一组)
多选框(复选框/核选框):
<input type="checkbox" name="" checked="checked"/>
(checked设置默认初始被选中)
(要分组 name属性的值相同一组)
---------------------------------------------------
文件域:
<input type="file" />
(选择文件系统中的某个文件)
隐藏域:
<input type="hidden" value="">
---------------------------------------------------
提交按钮:
<input type="submit" value=""/>
重置按钮:
<input type="reset"value="" />
普通按钮:
<input type="button" value=""/>
<!--------------------------------------------------------------------->
-------------------
--------选择框---
<select > (下拉框/(列表框+size))
<option> a</option>
<option> b</option>
<option> c</option>
</select>
-------------------
----文本区------
<textarea rows="5">
</textarea>
-------------------------
----分组--------
<fieldset>
<legend>信息描述</legend>
</fieldset>
<!---------------------------------->
标签元素:
<label for=" 某个元素的id值"> 文本 </label>
点击文本实现这个元素的效果
---
所有的元素都可以设置id
<!------------------------------------------------------------------------>
8.浮动框架:
(在一个网页嵌入另外一个网页)(例如嵌入广告)
---------
<iframe src="xxx.html" width=""></iframe>
------------------------------------------------------------------------------------------