《网页制作》_第3讲.ppt

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