《客户端应用程序开发》课件-项目一 HTML基础

HTML列表

我的账户帮助中心联系我们淘宝官方旗胶店家长荣原中心产品保修注册广～｀,

,, ?

1

、,.，r

J.

｀令＇,,./

＇。卜盆、声控小狗¥

0.0012

-

36

个月配对音乐茧¥

0.0012

-

36

个月小象布书¥0.003

-

24个月战神和空孟王龙¥

0.003

-

8

岁HTML

列表HTML

列表无序列表（ul）有序列表（ol）自定义列表（dl）列表（list）：把…制成表，以表显示HTML无序列表<

ul>unorder

listHTML无序列表<

ul>unorder

list无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用

<ul>

标签<ul><li>Coffee</li><li>Milk</li><li>Tea</li></ul>HTML无序列表<

ul>unorder

list浏览器显示如下：CoffeeMilkTeaorder

list列表项使用数字来标记。<ol><li>Coffee</li><li>Milk</li><li>Tea</li></ol>浏览器中显示如下：CoffeeMilkTeaHTML 有序列表<

ol>HTML 定义列表<

dl>定义列表是项目及其注释的组合。HTML 定义列表<

dl>定义列表是项目及其注释的组合。定义列表以

<dl>

标签开始，每个定义列表项以

<dt>

开始，每个定义列表项的定义以

<dd>

开始。<dl><dt>Coffee</dt><dd>-blackhotdrink</dd><dt>Milk</dt><dd>-whitecold

drink</dd></dl>定义列表实例<dl><dt>YUNVM.COM吉林联通百兆独享特价!$899

/月</dt><dd>数据中心：吉林延边联通

</dd><dd>4

核CPU

4

GB内存

</dd><dd>100

Mbps带宽

120

GB存储

</dd></dl><dl><dt>YUNVM.COM江苏电信特价百兆降价了!$1099

/月</dt><dd>数据中心：江苏镇江电信

</dd><dd>4

核CPU

4

GB内存

</dd><dd>100

Mbps带宽

120

GB存储

</dd></dl>HTML

列表标签标签描述<ol>定义有序列表<ul>定义无序列表<li>定义列表项<dl>定义列表<dt>自定义列表项目<dd>定义自定列表项的描述回结构1七页

面再容性屯式已＃存.;」五台电脑Hdppy劳E文件 开始 捂粘勹

心夕一月守 夕格式刷U

；设

计

布尼引用BTimesNewF•1小四vI丛·选x,

x'字体夕.A

.＿邮件 审

阅e视

图

MathTypeA^

AV

Aa• A夕

T囚

；

三

等

i三，

万户＠

兰

兰

兰

兰1

当 廷

｀段帮

助云

令P 告诉我你想要

怓什么扎 e皂式五，c标题J

标题1;1J标题

强调AaBbCAaBlAaBbC.4aBbCcD,AaBbCcD

AaBbCcD<要点 J

正文AaBbCcD<AaBbCcD,AaBbCcD,AaBbCcV.AaBbCcD,A迤

CcD'J

无词屈

不明显适调

明显强调 引用 明显引用

不明显参考明显参考样式人诅BCCI

AnBbC

cD,书每标毁

＝尺一己共享P查找

·戏

替换b

选择·编坠听

写、，透_JPhotoSquares+'Ab

stract+'Figuratil·e+'Scenic+'Still

Life+'More

catcgorieS+'Lo

gg

ed

in

as

lii忧沁岱汕旷Your

account+'Help

+'Sign

out+'Upgrade

to

a

Pro

a

c

c

o

un

t+'LPhoto岱Basicisfree,that'sr屯htfree;alwayshasbeen,alwayswillbe.ButifyoubecomeaPro,you'llbeabletodomorestuff;如fflikerollingyour01vnPhotoRolls.

Upgrading

for

only

亡10.0

0

per

year+'Need

help

with

your

photos

?+'IfyouhavetlvoormoreconflictingCSSrulesthatpointtothesameelements,therearesomebasicrulesthatabrowserfollowstodeterminewhichoneismostspecificandthereforewins

out.+'Pa

tric

Griffiths-'Fromyou「gallery

..I.Circular

windows-'Grid

squares.,Leaf.,Roof

detail.,Shell-'Leaf,¥灿邸Three

elements

of

a

web

page..HTML.,Making

the

standardlanguage

of

a

web

page,

controllingthe

structure

of

page'1css

..Cascading

stylesheetsthat

control

thestyle

of

a

web

page.,JavaScript-'A

scrip血

g

language

that

controls

the

behaviorof

a

web

page.,d豁要

1

页，共

1

页176

个字氓英语玉）叨 匾 睬_ 1,HTML

列表列表（list）：把…制成表，以表显示无序列表（ul）有序列表（ol）自定义列表（dl）嵌套列表嵌套列表<ul><li>男性</li><li><ol>女性<li>女孩子</li><li>姑娘</li><li>大妈</li></ol></li></ul><ul><li>男性</li><li>女性<ol><li>女孩子</li><li>姑娘</li><li>大妈</li></ol></li></ul>嵌套列表List-

style-

type取值描述disc默认值，实心圆⚫circle空心圆

square实心方块◼decimal阿拉伯数字 123lower-roman小写罗马数字

ⅰⅱⅲupper-roman大写罗马数字ⅠⅡⅢlower-alpha小写英文字母abcupper-alpha大写英文字母ABCnone不使用项目符号备注：如果可以的话，这页幻灯片的内容最好用其他方式展示

网页布局基础网页布局布局（layout）即对事物的全面规划和安排页面布局是对页面的文字、图像或表格进行格式化版式排列。网页布局网页布局方式流式布局即标准文档流布局，从上到下，从左到右，输出文档内容；由块级元素和行级元素组成浮动布局浮动的目的是让块级元素在同行显示定位布局通过设置position属性实现网站设计分工示意图常见网页布局小结新闻列表List-

style-

type值描述list-style-type设置列表项标记的类型。list-style-position设置在何处放置列表项标记。list-style-image使用图像来替换列表项的标记。initial将这个属性设置为默认值。inherit规定应该从父元素继承

list-style属性的值。List-

style-

type取值描述disc默认值，实心圆circle空心圆square实心方块decimal阿拉伯数字lower-roman小写罗马数字upper-roman大写罗马数字lower-alpha小写英文字母upper-alpha大写英文字母none不使用项目符号List-

style-

imageList-

style-

positionList-

styleli{list-style:url(example.gif)square

inside}创建横向导航CSS Float（浮动）

CSS

的

Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。CSS

中的浮动属性属性描述值float指定一个盒子（元素）是否可以浮动。leftrightnoneinheritclear指定不允许元素周围有浮动元素。leftrightbothnoneinheritFLOAT属性div实现横向多列布局FLOAT属性left—左浮动right—右浮动none—不浮动FLOAT属性<div

id=“box1”></div><div

id=“box2”></div>div{width:200px;height:200px;border:1pxsolid

red;float:left;}box1box2FLOAT属性<div

id=“box1”></div><div

id=“box2”></div>div{width:200px;height:200px;border:1pxsolid

red;float:left;}box1box2脱离了默认的文档流定位，变成水平排列。FLOAT属性FLOAT属性FLOAT属性特点不浮动框1向右浮动box1box2box3box1box2box3FLOAT属性特点不浮动框1向右浮动box1box2box3box1box2box3FLOAT属性特点所有三个盒子向左浮动box1box2box3FLOAT属性特点所有三个盒子向左浮动宽度不够box1box2box3box3下降FLOAT属性特点所有三个盒子向左浮动宽度不够box1box2box3所有三个盒子向左浮动box1box2box3所有三个盒子向左浮动宽度不够box1box2box3box3下降box3下降被box1“卡住了”CL

AER属性both，清除左右两边的浮动。left

和

right

只能清除一个方向的浮动。none

是默认值，只在需要移除已指定的清除值时用到。CL

AER属性clearrightCL

AER属性侧栏向右浮动，并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。CL

AER属性#footer{clear:both;

}CSS

中的浮动属性网页导航网页导航垂直水平网页导航．，．一，，

．．＂-｀'，,

2

•·

·c.，．，··』，龟＇．

．首页 祈i司动态

产品展示

信息反沸

关干我们s

;

8归

的立Q最新产品l'C-

1138中性笔发光笔迷你笔筒m

,J_

ew014绘图橡皮产品分类至面用品书写工具笔记本类学生用品其们用品首页

〉我们生活在

一个知识推动社会进步的时代，知识已成为促进社会妄展的不遠动力o河单文具孛尚知识

，因

为我们深知

，

拥有知识，

才能创造价值，只

有不断学习，

才能追随时代前进的步

伐，持续创洼价值

，

以价值奉献社会是我

ffl持之以恒的追求

o公司简介简单文具有限公司创始于2006

年，

专廿生产记丰本

(PU

、PVC

及真皮面料记革本）

｀书写工具类、卓酝用品、学生用品、效率手册（

工两El记效率手册）、名片册、通讯录、各种证书，文件夹、具件封套、等现代化办公文具系列o

筒单文具旗下的“简明“品脸已拥有一定的知名度，

疡得社会各界人士的极品葵岩与信赖o企业理念当今世界·企业管理的最

高层次是文化管理o

在信息社会和知识经济的今天，简单文具有限公司把文化建设协在相当重委的位赞。从物质文化，制疫文化，特神文化三个方面进行企壮桉心竞争力的打洼o

从话养员工的自我领导力昼，

届养品层领导成员的决策能力入手，

力图将企业臼指挥型变为学习型扣自主型企业o环保理念对干环保，简单人有著自已超前印I里叶 ＇｀控制污染，节能阵耗，

美化环墒

专全隍庙”已深入每一位简单人的心中o

关爱地抹，

呵护储庙，

帝动身边的每一个入加入环保行列o“绿色办公，

快乐云受“

o滴单文具产品从开衾、生产，i肖佳、使臣、废弃，回收等各阶段，都谥循吾环保的章程，

最大限度的回收再利用，

咸少姿原浪费，

坚持走绿色环保虳京展谥路o环境连生命，

珍爱方永恒。让蓝天

、碧水、绿地，阳光永远留在我们的身边

o品炒理念简单文具以“永元止境地追求世界第一品质“为奋斗目标，整合企业优势姿谏开拓奋进创洼企业的无限延伸与永续发畏o

使简单文具成为国际酷具竞争力的品牌而不憎杳斗，简单文具

一一个前进中的国际品牌，

必将会塑笸出更多让人赞叹的梧煌！服务范围批发抇幸笆各类办公文具、办公设备，

并诚接广告促诮品、相框、笔袋肖、lj笔机、等文具兼礼品的0邓加工。＼网页导航<a>标签语法：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a><a>

标签定义超链接，用于从一张页面链接到另一张页面。<a>

元素最重要的属性是

href

属性，它指示链接的目标。网页导航例如：<a href="http://www.baidu.com" title="点击进入百度">click

here!</a>在所有浏览器中，链接的默认外观是：未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的岭Q笸］巳0困网页导航<ahref="目标网址"target="_blank">click

here!</a>网页导航功能关键字举例邮箱地址mailto:<a

href=”mailto:aa@”>发送</a>抄送地址cc=<a

href=”mailto:aa@sohu.com?cc=bb@”>发送</a>密件抄送地址bcc=<a

href=”mailto:aa@?bcc=bb@”>发送</a>多个收件人;<a

href=”mailto:aa@;bb@”>发送</a>邮件主题subject=<a

href=”mailto:aa@?subject=放假通知”>发送</a>邮件内容body=<a

href=”mailto:aa@?body=元旦放假三天”>发送</a>网页导航<ahref=”mailto:yy@?cc=xiaoming@&b

cc=xiaoyu@

&subject=主题&body=邮件内容”>发送</a>发送网页导航创建下拉导航CSS Float（浮动）

<script>functionshowMenu(){var

lis=document.getElementById("menu").getElementsByTagName("li");for(vari=0;i<lis.length;i++){lis[i].onmouseover=function()

{this.className="showlist";}lis[i].onmouseout=function()

{this.className="";}}}window.onload=showMenu;</script>HTML事件J

AVAr

_

1厂－net

勹厂

PHP

—]HTML事件表格基本应用网页开发中表格的作用表格标签是HTML组件中最常用的组件之一。在Web开发的早期，表格常常被用于进行网页布局。目前CSS网页布局已经替代了表格网页布局。表格标签的作用——用于批量显示数据。表格的基本结构示例用css样式为表格加入边框设置表格边框使用CSS中的border属性语法：border:border-width||border-style||

border-color示例用caption标签为表格添加标题设置表格的标题使用caption标签实现语法：<caption>标题文本</caption>示例为表格添加摘要信息添加表格的摘要信息使用table标签的summary属性实现。语法：<tablesummary="表格简介文本">表格摘要的内容不会在浏览器中显示出来。其作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。复杂表格应