《Web程序设计基础》_第四讲

–下拉菜单默认情况下是单选的，如果设置了mu ltiple=“multiple”属性，那么下拉菜单也可以 多选。
22
7、form及表单元素各标签
• textarea标签
–textarea标签表示为文本区域，即文本框的扩 展，可以在行上实现多行输入。
–cols=“50”表示文本区域的宽度为50列。 –rows=“5”表示文本区域的高度为5行。
6
2、hn、p标签
ቤተ መጻሕፍቲ ባይዱ
7
3、img标签
• img标签
–img标签主要用于网页插入图片，跟背景图片 不一样。如下图效果：
–img标签属性：src、height、width、alt。 –图片格式：jpg、gif、png。 –图片路径：相对路径。
8
3、img标签
9
4、ul、ol、li标签
• ul标签
–ul标签表示无序列表，即无序列表中列表项在 顺序上没有先后之分，可以任意交换位置。一 般默认情况下，无序列表以黑色圆表示项目符 号。
23
8、实训要求
• 按照当当网上书店的布局结构，学生自己 采用div标签在body中编码实现。 • 按照table、form等标签，实现本PPT中华 军软件园注册号码的注册页面效果。 • 根据的第二次实训，在VS2010中， 实现注册页面的表单布局效果。 • 课后作业每组按照各自的项目效果，实现 项目首页的div布局结构编码。
12
4、ul、ol、li标签
13
5、a标签
• a标签（超链接）
–a标签表示超链接，超链接功能就是通过它能 将网页转向到一个指定的目标网页。a标签默认 情况下是一个行内元素。文字、图片、动画等 都可以实现超链接。根据链接的目标URL可以分 为站内、锚点、下载、http、E-mail等链接。 –a标签的属性：href、target、alt等。 –a标签的四个伪类：正常（a:link）、悬浮（a: hover）、点击（a:active）、访问后（a:visi ted）。
10
4、ul、ol、li标签
• li标签
–li标签为ul、ol等列表标签的列表项标签，表 示列表项的个数。
11
4、ul、ol、li标签
• ol标签
–ol标签表示有序列表，即有序列表中列表项在 顺序上先后之分，序号从上往下依次增大。一 般默认情况下，有序列表以“1.2.3.……”表示 项目编号。在网页制作中，有序、无序列表一 般都用作网站菜单的制作，一般情况下两者可 以交替使用。
17
6、table、tr、td标签
18
7、form及表单元素各标签
• form标签
–form标签表示为表单，表单是人机交互的通道， 用户通过相关表单元素和按钮实现浏览器数据 与服务器数据的交换。所有表单元素必须放在f orm标签内，在一个网页中，可以有多个form， 但是必须通过id或name属性来区分。在 中，一个网页中有且只能有一个form。 –form标签的属性：id、name、method、action、 enctype
3
1、div、span标签
4
2、hn、p标签
• hn标签
–hn标签主要用于文本的标题行，n代表1-6的数 字，随着数字的增大标题行字体越小，效果如 下：
5
2、hn、p标签
• p标签
–p标签主要用于文本段落（正文），对于文字 的修饰，一般情况下不允许出现html样式，可 以采用id和class两种接口，实现CSS样式效果， 比如文字的大小、颜色、字体、修饰等等。 –<p class=“textstyle”>文本文字</p>
14
5、a标签
15
6、table、tr、td标签
16
6、table、tr、td标签
• • • • • table标签表示为表格（绿色边框）。 tr标签表示表格中的行（红色部分）。 td标签表示表格中的列（蓝色部分）。 行和列的交接处表示为表格的单元格。 表格在默认情况下有2px的填充和边距，即 cellpadding=“2px”、cellspacing=“2px”。 • 表格通过id、class属性实现CSS接口，实 现代码与结构分离。 • 在比较复杂的局部布局中一般采用table布 局。
19
7、form及表单元素各标签
20
7、form及表单元素各标签
• input标签
–从上往下依次为：按钮、复选框、文件域、隐 藏域、图片按钮、密码、单选框、重置、提交 按钮、文本框
21
7、form及表单元素各标签
• select标签
–select标签为表单中下拉菜单，在中 称为“DropDownList”。
第四讲 XHTML标签语法
《Web程序设计基础》课程组
2010-09
目录
• • • • • • • div、span标签 hn、p标签 img标签 ul、ol、li标签 a标签 table、tr、td标签 form及表单元素各标签
2
1、div、span标签
• div和span标签
–div标签和span标签都可用于布局， div是一 个块级元素，它包围的元素会自动换行。而spa n仅仅是一个行内元素，在它的前后不会换行。 此外， span标签可以包含于div标签中，成为 它的子元素，而反过来则不成立。div标签默认 情况下是父盒子宽度的100%。 –div和span标签都有id、class、style等属性。 其中id、class是为CSS样式表留接口，实现结 构层和表现层代码分离。
24