标签:
01 C/S与B/S结构的区别
C/S【Client客户器/Server服务器】
图解:<<C&S结构.JPG>>
核心特点:
1——服务器运行数据负荷较轻,是由于客户端做了一些辅助的计算工作
2——数据的储存管理功能较为透明,由于部分数据存储在本机上完成,所以数据存储功能较为明显的显示出来
3——C/S架构的劣势是高昂的维护成本且投资大
例子:QQ,魔兽,红蜘蛛软件,...
B/S【Browser浏览器/Server服务器】
这里说的浏览器,不光是指PC浏览器,也包含移动设备
图解:<<B&S结构.JPG>>
核心特点:
1——维护和升级方式简单
2——成本降低,选择更多
3——B/S架构的劣势是服务器运行数据负荷较重
例子:sina,baidu,淘宝,...
我们希望将来:C/S和B/S结构能够互补。
1)网速要快
2)网络安全
3)云端,即远程强大服务器集群端
4)客户端无需下载与安装任何软件,都在云端,这样黑客就算获取客户端数据,也没有什么有价值的数据
----------------------------------------------------
02 HTML简介
HTML是做网页最基本的技术
1_由标签组件
2_在任何操作系统平台,只要有浏览器,都有执行HTML
3_浏览器中有HTML解析器
4_编辑HTML可以使用任何文本编辑工具,如记事本,不是建议开发人员用一些比较适合的工发工具
----------------------------------------------------
03 HTML基本结构
分为二个部份,HTML对大小写不敏感
一)<head>做为网页的辅助信息,不会显示在浏览器的文档区域
二)<body>才能显示在浏览器的文档区域
meta
keyword :供搜索引擎需要的关键字
description:被搜索到的页面的描述信息
content-type:浏览器用什么编码方式用来解析该web页面,即通知浏览器需要接受html格式的页面,页面的文字用户UTF-8编码集进行显示
----------------------------------------------------
04 HTML语法
HTML标签的不区分大小写,有开始标签,没有结束标签都行,
但建议初学者一定要有开始和结束标签,且大小写配对
在书写HTML代码时,注意适合缩格,养成良好的代码风格
大部份HTML标签都有标签体,即有开始,有结束,成对出现
但小部份HTML标签只有一个,即无标签体,例如:<br/>或<hr/>
属性必须出于在HTML开始标签中,属性值有单引或双引或无引号都可,
但建议初学者用双引号
HTML中的注释用<!-- -->,浏览器中的解析器会忽略注释符
----------------------------------------------------
05 HTML文本标签
加粗<b></b>
斜体<i></i>
标题(h1~h6),当大于6时,举例为h7是会由于没有该标签变为默认字体大小。
水平线(hr/)
段落(p/)
上下标(sup和sub) 例子:X2=4 , H2O
换行(br/)
原样输出(pre)
有序列表(ol li)
无序列表(ul li)
图片标签<img src/>
行内标签(span)
块标签(div)
span标签不具有换行功能,div标签具有换行功能
注意:浏览器读到不同的标签,会做出不同的显示效果
----------------------------------------------------
06 HTML字符实体
在默认情况下,浏览器会将<小于号当做标签的一个组成部份对待,
但我们希望不是标签的组成部份,而是正真的小于号,这时我们
得用一个技术去替代这些特殊的字符,该技术在HTML中叫实体,
类似于Java中的转义符
----------------------------------------------------
07 HTML多媒体标签
音/视视频
音视频标签格式: <embed></embed>
属性:src (源文件地址)、loop (循环)、 hidden=“true”(是否隐藏)
元素的飘动
marquee标签
属性:direction (飘移方向), scrollamount (移动速度)
----------------------------------------------------
08 HTML链接和图像标签
超链接:<a href = "资源路径" target="_blank">
<a href="mailto:有效的email地址"> :该地址注意了不会检验邮件地址合法性,仅仅会打开邮件服务器
<a href="#定位点">和<a name="定位点"> 可以到达定位点的标志地方,这样可以让同一页面的指定跳转更加方便。
target |
|
在何处打开目标 URL。
|
若a标签的target指向不是上述值,就会指向指定name的框架(Frame)。
----------------------------------------------------
09 HTML中tabel表格标签
<table>
<thead>
<tbody>
<tfoot>
<tr>
<td>
标题标签:<caption>,给表格提供标题。
表头标签:<th>,一般对表格的第一行或者第一列进行格式化,就是粗体显示。并不常用。
行标签:<tr>
单元格标签:<td>,加载行标签的里面。可以简单理解为,先有行,在行中在加入单元格。
cellpadding 内边距
cellspacing 外边距
注意:在编辑html表格时,对于表格体的内容超多的情况下,
建议用<tbody>标签,这样做,会给客户端较好的体验效果,因为有了tbody会使浏览器加载多少tr就显示多少,而没有加tbody的会全部加载完表单的数据在一次显示,会给用户带来不好的体验效果。
----------------------------------------------------
10 HTML框架标签
<frameset rows cols/>
<frame src name frameborder nosize/>
画中画
画中画标签格式: iframe (放在body区域中,作为一个标签显示)
name 属性规定 iframe 的名称。
iframe 元素的 name 属性用于在 JavaScript 中引用元素,或者作为链接的目标。
框架标签
frameset和frame标签 (不能放在body区域与head区域中,只能放在body与head的区间之中)
frameset属性: rows (行占比)、 cols (列占比) 、 frameborder (框架的边界大小)
frame属性 :noresize (不能在页面设置框架的大小)
HTML中的单位
绝对单位 1px 像素
相对单位 20% 相对浏览器而言
框架结构标签(<frameset>)
框架结构标签(<frameset>)定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
注意:frame的name属性,可以让指定的的超链接页面显示到指定frame中,只要整个页面的一个或多个frame存在这个name的属性就行,只要指定超链接标签<a>的target属性设定为name的值,就能把超链接内容在name所指框架处显示,框架视频的末端有说。
----------------------------------------------------
11 HTML表单标签及其元素
<form action method>
<input type="text/...">
<textarea>
<select>
表格:输出数据
表单:输入数据,即服务器为了获取客户端信息而创建的容器
表单中的内容叫表单项
表单的name属性的作用:
①form表单:name可作为转递给服务器表单列表的变量名;如上面的传到服务器的名称为:username=‘text的值‘;
②input type=‘radio‘单选标签:把几个单选标签的 name设为一个相同值时,将会进行单选操作。
表单
表单,在网页中主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址、调查表、留言簿等等。
组成
表单标签: <form action=“” method=“” enctype=“”></form>
表: <input type=“” name=“” />
表单单域按钮: <input type="submit" name="..." value="...“/>
常见的表单域
文本字段 <input type=“text” name=“” value=“”/>
密码字段、 隐藏字段 type = "password"
单选按钮 type=“radio” 单选按钮必需要分组,分组的方法就是给标签 name属性,name属性的值必须一样。
多选按钮 type =checkbox,多选按钮的name属性必须一致。
文件选择框 type=“file”
下拉列表 <select ><option>
文本输入域 <textarea> 根据cols定义它的列,rows定义文本框的行数
按钮 type=“button”
----------------------------------------------------
12 表单Get提交和Post提交的区别
GET:
1_请求数据会出现在地址上
2_请求数据会受地址容量限制,例如2000字符
3_敏感数据暴露在外
POST:
1_请求数据在请求体中,通常其它软件方可看到
2_请求数据不受地址栏的限制
3_敏感数据不暴露在外
赵君个人推荐POST,但不表示GET没有用,例如超链接就用GET
----------------------------------------------------
13 练习1
<html>
<head>
<title>练习一.html</title>
<meta http-equiv="keywords" content="表单,表单提交">
<meta http-equiv="description" content="这是练习一">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="../01.html" method="get">
<table border="1" cellpadding="5" cellspacing="5" width="600" height="500" align="center">
<caption><h1>个人资料注册</h1></caption>
</tbody>
<tr>
<th>用户名</th>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<th>爱好</th>
<td>
<input type="checkbox" name="hobbys" checked />排球;
<input type="checkbox" name="hobbys"/>篮球;
<input type="checkbox" name="hobbys" checked />足球;
<input type="checkbox" name="hobbys"/>乒乓球;
<input type="checkbox" name="hobbys"/>羽毛球;
<input type="checkbox" name="hobbys" checked />板球;
</td>
</tr>
<tr>
<th>来自哪个城市</th>
<td>
<select>
<option>北京</option>
<option selected=“true>上海</option>
<option>广州</option>
<option>长沙</option>
<option>武汉</option>
</select>
</td>
</tr>
<tr>
<th>大头照</th>
<td>
<input type="file" name="photo"/>
</td>
</tr>
<tr>
<th>自我介绍</th>
<td>
<textarea name="textarea01" rows="10" cols="40">这个家伙真的很懒,什么东西都没有留下...</textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交数据" />
<input type="reset" value="重置数据">
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
----------------------------------------------------
14 练习2
<html>
<head>
<title>练习2.html</title>
<meta http-equiv="keywords" content="表格,表格提交">
<meta http-equiv="description" content="这是练习2">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<div id="head" align="center">
<label>员工姓名:</label>
<input type="text" name="serarch"/>
<input type="button" value="搜索">
</div>
<table border="1" cellpadding="5" cellspacing="5" align="center" width="800">
<thead>
<tr align="center">
<th>编 号</th>
<th>姓 名</th>
<th>性 别</th>
<th>薪 水</th>
<th>职 位</th>
<th>入 职 时 间</th>
<th>工 作 地 点</th>
</tr>
<tr>
<td>hm01</td>
<td>哈哈</td>
<td>男</td>
<td>7000</td>
<td>IT</td>
<td>2015-5-8</td>
<td>广州</td>
</tr>
<tr>
<td>hm02</td>
<td>呵呵</td>
<td>男</td>
<td>13000</td>
<td>IT</td>
<td>2015-6-8</td>
<td>北京</td>
</tr>
<tr>
<td>hm03</td>
<td>嘻嘻</td>
<td>女</td>
<td>12000</td>
<td>IT</td>
<td>2015-7-8</td>
<td>上海</td>
</tr>
<tr>
<td>hm04</td>
<td>笨笨</td>
<td>男</td>
<td>6000</td>
<td>IT</td>
<td>2015-7-8</td>
<td>武汉</td>
</tr>
<tr>
<td>hm05</td>
<td>明明</td>
<td>男</td>
<td>11000</td>
<td>IT</td>
<td>2015-8-8</td>
<td>深圳</td>
</tr>
<thead>
<tfoot>
<tr>
<td colspan="7" align="center">
<a href="" target="_blank">首页</a>
<a href="" target="_blank">下一页</a>
<a href="" target="_blank">上一页</a>
<a href="" target="_blank">尾页</a>
<label>当前第1页/共3页<label>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
----------------------------------------------------
15 CSS简介
CSS是层叠样式表,是给HTML网页添加美化的成份,例如:背景色,
字体大小,等等
----------------------------------------------------
16 CSS的三种引入方式
一)行内样式:
<h1 style="color:red;font-size:111px">CSS必须嵌入到HTML中,方可显示其效果</h1>
二)内部样式
<head>
h1{
color:green;
font-size:99px
}
</head>
三)外部样式(推荐)
<link href="itcast.css" style="text/css" rel="stylesheet"/>
在优先级别来说,行内样式最高,但很难进行相应的修改,在<head>区域同时放置内部样式,或外部样式,会显示谁?在<head>区域中,优先级是相同的,讲究的是二者的顺序,对同一个标签进行样式上的的修改,会执行后面的的样式,放在前面的样式会被覆盖。
----------------------------------------------------------------------------------------------------------------------------------------
当天练习认为重要代码:
音乐添加:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_entity.html</title>
<meta http-equiv="keywords" content="广州传智andorid">
<meta http-equiv="description" content="这是广州传智首期4个的Android学习班">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- 以下代码加载并播放本地音乐 -->
<embed
src="E:\东京食尸鬼第二集插曲.mp3"
width="200"
height="250"
hidden="false"
loop="false"
/>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
图标飘动:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>05_marquee.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<marquee
direction="left"
scrollamount="10"
height="100px">通知:今年国庆阅兵是9月3号</marquee>
<marquee
direction="right"
scrollamount="10"
height="600px">
<img src="images/contact.jpg" width="200px" height="300px"/>
</marquee>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
超链接标签<a>中name属性的使用,成为命名锚,点击该超链接,即可到达指定楼层,类似于搭电梯,尤其是内容多的时候效果尤为明显。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07_singer.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<!--锚标签和 Name 属性
Name 属性用于创建被命名的锚(named anchors)。当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。
-->
<!-- #当前页 -->
<a href="#part1">第一章</a>
<a href="#part2">第二章</a>
<a href="#part3">第三章</a>
<hr/>
<a name="part1"></a>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
第一章的内容<br/>
<a name="part2"></a>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
第二章的内容<br/>
<a name="part3"></a>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
第三章的内容<br/>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
框架结构(freamset)与fream框架练习,注意一点,frameset框架是不能放在
主页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>08_emp.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<frameset rows="20%,*">
<frame src="ui/head.html" noresize frameborder="1"/>
<frameset cols="15%,*">
<frame src="ui/menu.html" noresize frameborder="1"/>
<frame name="content" src="ui/content.html" noresize frameborder="1"/>
</frameset>
</frameset>
<body>
</body>
</html>
content.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>content.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
内容
</body>
</html>
head.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>head.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<img src="../images/contact.jpg" height="80px"/>
</body>
</html>
Menu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>head.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<ul>
<li><a href="../content/htmlcontent.html" target="content">HTML</a></li>
<li><a href="../content/csscontent.html" target="content">CSS</li>
<li><a href="../content/jscontent.html" target="content">JavaScript</li>
//这段代码的target会指向主页面的content框架处,而内容则是href所指示的链接URL
</ul>
<iframe src="../08_emp.html" width="100px" height="300px">
</iframe>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
表单练习:注意记住还有两个非input的表单输入项,即select与textarea
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>10_register</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- 表单
action通常表示表单数据提交由服务器的哪个地方处理,即URL/URI/ServletPath
method表示以什么方式提交表单数据,常用的有GET或POST
-->
<form action="09_main.html" method="POST">
<!-- 表单中可以嵌入表格,目的是显示的更美观 -->
<table border="1" align="center">
<tr>
<th>用户名:</th>
<!-- text表示文本框,maxlength表示可输入的最大字符数 -->
<td><input type="text" maxlength="8" name="username"/></td>
</tr>
<tr>
<th>密码:</th>
<!-- password表示密码框,maxlength表示可输入的最大字符数 -->
<td><input type="password" maxlength="8" name="password"/></td>
</tr>
<tr>
<th>性别:</th>
<!-- radio表示单选框,value表示将来传入到后台的值
name表示单选框的名字,二者必须相同
checked表示默认值
-->
<td>
<input type="radio" value="男" name="gender"/>男
<input type="radio" value="女" name="gender" checked/>女
</td>
</tr>
<tr>
<th>爱好:</th>
<td>
<input type="checkbox" value="唱歌" name="likes"/>唱歌
<input type="checkbox" value="跳舞" name="likes" checked/>跳舞
<input type="checkbox" value="打球" name="likes"/>打球
<input type="checkbox" value="睡觉" name="likes" checked/>睡觉
</td>
</tr>
<tr>
<th>你希望去哪个城市:</th>
<td>
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected="selected">广州</option>
<option value="深圳">深圳</option>
<option value="武汉">武汉</option>
<option value="长沙">长沙</option>
</select>
</td>
</tr>
<tr>
<th>选择上传图片:</th>
<td>
<!-- file表示选择输入框 -->
<input type="file" name="photo"/>
</td>
</tr>
<tr>
<th>自我介绍:</th>
<td>
<textarea rows="5" cols="30">
这家伙真懒
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
<input type="reset" value="重填"/>
<input type="button" value="普通按钮"/>
</td>
</tr>
</table>
</form>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
CSS三种方式的写入样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>11_css.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 内部样式(绿) -->
<style type="text/css">
h1{
color:green;
font-size:99px
}
</style>
<!-- 外部样式(蓝)-->
<link href="itcast.css" style="text/css" rel="stylesheet"/>
</head>
<body>
<!--
行内方式(红)
style属性位于h1标签中,表示h1标签支持css
style属性值表示css内容,其中color表示字体颜色,red表示红色
style属性值要符合:key:value;key:value这种形式
style="color:red;font-size:111px"
-->
<h1>CSS必须嵌入到HTML中,方可显示其效果</h1>
</body>
</html>
标签:
原文地址:http://www.cnblogs.com/canceler/p/4657470.html