轻装上阵，安卓工程师之路---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

_blank
_parent
_self
_top

在何处打开目标 URL。

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

若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框架标签

画中画

画中画标签格式： 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表单标签及其元素

表格：输出数据

表单：输入数据，即服务器为了获取客户端信息而创建的容器

表单中的内容叫表单项

表单的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>

</head>

<body>

<caption><h1>个人资料注册</h1></caption>

</tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男"/>男

<input type="radio" name="sex" value="女"/>女

</td>

</tr>

<tr>

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

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<textarea name="textarea01" rows="10" cols="40">这个家伙真的很懒，什么东西都没有留下...</textarea>

</td>

</tr>

</tbody>

<tfoot>

<tr>

</td>

</tr>

</tfoot>

</table>

</form>

</body>

</html>

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

14 练习2

<html>

<head>

</head>

<body>

</div>

<thead>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<thead>

<tfoot>

<tr>

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

三）外部样式（推荐）

@import url("a.css");

</style>

优先级问题？

后加载的会覆盖前者

行内样式 > 内部样式 > 外部样式就近原则

在优先级别来说，行内样式最高，但很难进行相应的修改，在<head>区域同时放置内部样式，或外部样式，会显示谁？在<head>区域中，优先级是相同的，讲究的是二者的顺序，对同一个标签进行样式上的的修改，会执行后面的的样式，放在前面的样式会被覆盖。

当天练习认为重要代码：

音乐添加：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>03_entity.html</title>

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

</head>

<body>

<marquee

direction="left"

scrollamount="10"

height="100px">通知：今年国庆阅兵是9月3号</marquee>

<marquee

direction="right"

scrollamount="10"

height="600px">

</marquee>

</body>

</html>

超链接标签<a>中name属性的使用，成为命名锚，点击该超链接，即可到达指定楼层，类似于搭电梯，尤其是内容多的时候效果尤为明显。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>07_singer.html</title>

</head>

<body>

<!--锚标签和 Name 属性

Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

-->

<hr/>

第一章的内容<br/>

第二章的内容<br/>

第三章的内容<br/>

</body>

</html>

框架结构（freamset）与fream框架练习，注意一点，frameset框架是不能放在

主页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

</frameset>

<body>

</body>

</html>

content.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>content.html</title>

</head>

<body>

内容

</body>

</html>

head.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>

Menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<ul>

<li><a href="../content/jscontent.html" target="content">JavaScript</li>

//这段代码的target会指向主页面的content框架处，而内容则是href所指示的链接URL

</ul>

</iframe>

</body>

</html>

表单练习：注意记住还有两个非input的表单输入项，即select与textarea

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>10_register</title>

</head>

<body>

<!-- 表单

action通常表示表单数据提交由服务器的哪个地方处理，即URL/URI/ServletPath

method表示以什么方式提交表单数据，常用的有GET或POST

-->

<tr>

</tr>

<tr>

</tr>

<tr>

<!-- radio表示单选框，value表示将来传入到后台的值

name表示单选框的名字，二者必须相同

checked表示默认值

-->

<td>

<input type="radio" value="男" name="gender"/>男

<input type="radio" value="女" name="gender" checked/>女

</td>

</tr>

<tr>

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

</td>

</tr>

<tr>

<th>选择上传图片：</th>

<td>

</td>

</tr>

<tr>

<td>

这家伙真懒

</textarea>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

CSS三种方式的写入样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

h1{

color:green;

font-size:99px

}

</style>

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