轻装上阵，安卓工程师之路---day01(HTML&CSS)
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"/>
<style type="text/css">
@import url("a.css");
</style>
优先级问题？
后加载的会覆盖前者
行内样式 > 内部样式 > 外部样式 就近原则
在优先级别来说，行内样式最高，但很难进行相应的修改，在<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>