码迷,mamicode.com
首页 > 移动开发 > 详细

轻装上阵,安卓工程师之路---day01

时间:2015-07-18 21:17:19      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

01 C/SB/S结构的区别

C/SClient客户器/Server服务器】

图解:<<C&S结构.JPG>>

核心特点:

1——服务器运行数据负荷较轻,是由于客户端做了一些辅助的计算工作

2——数据的储存管理功能较为透明,由于部分数据存储在本机上完成,所以数据存储功能较为明显的显示出来 

3——C/S架构的劣势是高昂的维护成本且投资大 

例子:QQ,魔兽,红蜘蛛软件,...

 

B/SBrowser浏览器/Server服务器】

这里说的浏览器,不光是指PC浏览器,也包含移动设备

图解:<<B&S结构.JPG>>

核心特点:

1——维护和升级方式简单 

2——成本降低,选择更多 

3——B/S架构的劣势是服务器运行数据负荷较重

例子:sinabaidu,淘宝,...

 

我们希望将来:C/SB/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/)

上下标(supsub) 例子: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

  • _blank 
  • _parent 
  • _self 
  • _top 

在何处打开目标 URL

  • _blank - 在一个新的未命名的窗口载入文档 
  • _self - 在相同的框架或窗口中载入目标文档 
  • _parent - 把文档载入父窗口或包含了超链接引用的框架的框架集 
  • _top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 

a标签的target指向不是上述值,就会指向指定name的框架(Frame)。

----------------------------------------------------

09 HTMLtabel表格标签

<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 中引用元素,或者作为链接的目标。

 

框架标签

framesetframe标签 (不能放在body区域与head区域中,只能放在bodyhead的区间之中)

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设为一个相同值时,将会进行单选操作。

 

 

表单

表单,在网页中主要负责数据采集的功能,比如你可以采集访问者的名字和email地址、调查表、留言簿等等。

组成

表单标签: <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">通知:今年国庆阅兵是93</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的表单输入项,即selecttextarea

<!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表示以什么方式提交表单数据,常用的有GETPOST

-->

<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>

 

轻装上阵,安卓工程师之路---day01

标签:

原文地址:http://www.cnblogs.com/canceler/p/4657470.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!