第03部分-HTML超文本标记语言.ppt

《第03部分-HTML超文本标记语言.ppt》由会员分享，可在线阅读，更多相关《第03部分-HTML超文本标记语言.ppt（130页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、信息工程学院第3部分 HTML语言 本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记*10.其它标记网页中添加文本的方法 1）直接写文本文本2）用段落标记格式化文本，各段落文本将分行显示3）用标题标记格式化文本4)用预格式化标记格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符用标题标记格式化文本 第1号标题字体 第3号标题字体 第4号标题字体 第5号标题字体（居中）标题标记和段落标记 1号标题第一段3号标题第二段5号标题第三段 用预格式化标记格式文本 网页设计师这一职业在今后来

2、说还是有需求的。因为随着网络越来越普及，像我国的房地产市场文本的强制换行电子商务顾名思义就是在internet上做生意，商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。强制不换行标记，常用英文人名Bill Gates 文本中的空格标记(除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格，块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格需在源代码中插入 （表示一个半角空格）。行内元素可看成一个字符 文本中的转义字符在HTML源代码中，有些字符有特别的含义，比如小于号“”就表示HTML 标记的开始，html源

3、代码中的“”是不会在浏览器中显示的，如果要浏览器显示这些字符，就需要输出他们对应的转义字符。例如：<表示,"表示“,&表示&, 表示空格等；通常，一个字符实体是由三部分组成的：（1）一个“&”符号（2）字符专用名称或者字符代号（3）一个“;”符号DW中插入HTML文本元素的快捷键 1.Enter 插入 （硬回车）2.shiftenter 插入 （软回车）3.Ctrlshiftspace 插入一个 跑马灯标记一个特殊的文本标记，能使其中的文本在浏览器屏幕上不断滚动。其中behavior=“alternate”设置滚动方式为来回滚动，设置为scr

4、oll表示循环滚动，设置为slide表示滚动到目的地就停止。direction属性用于控制滚动的方向，可以上下滚动或左右滚动。loop设置滚动的次数，loop为0表示不断滚动。scrollamount属性设置滚动的速度，scrolldelay属性设置两次滚动间的间隔时间。示例  测试:网页设计与制作学习：可以将swf文件下载下来用flash播放器全屏播放以达到最好效果，也可以在IE浏览器中按F11键达到全屏效果.水平线标记 标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width

5、是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。上标（sup）和下标（sub）标记 用于书写数学公式或分子式。如：H2O X2由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记*10.其它标记列表标记为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和

6、定义列表三种。无序列表(Unordered List),有序列表(Ordered List),定义列表(Defined List),嵌套的无序列表示例 文章 CSS教程 DOM教程 XML教程 参考 XHTML XMLCSS 有序列表(Ordered List)文章 CSS教程 DOM教程 XML教程 Flash教程 定义列表(Defined List)湖南城市长沙衡阳常德 湖北城市武汉襄樊宜昌本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记*10.其它标记超链接标记 超链接是网页的基本元素，网页正是通过超

7、链接而相互链接组织成一个网站，并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。超链接是通过URL（统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名或IP地址、路径和文件名。URL分为绝对URL和相对URL 绝对URL 绝对URL是采用完整的URL来规定文件在internet上的精确地点，包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。书写格式为：协议：/计算机域名或IP地址/文档路径/文档名例如：http:/ 相对URL是相对于包含超链接页的地址来确定文件的地址。如链接到同一路径下的文档，直接输入文件名即可，如news.htm如链接到

8、同一路径下子文件夹的文档，则先输入子文件夹名和斜杠（/），再输入文件名，如yule/news.htm如链接到上一级路径中，要在文件名前输入“./”，如“./news.htm”，其中“.”表示上级目录，“.”表示本级目录。相对URL示例wgzxyuleindex.htmoa.htmpop.htmnews.htm1.href=yule/news.htm212.href=./oa.htm3.href=“pop.htm”3相对URL的优势可以看出相对URL方式比较简便，不需输入一长串完整的URL；另外相对路径还有一个非常重要的特点是：可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。超

9、链接的种类根据源对象划分 1)用文本做超链接：首页2)用图像做超链接：3)文本图像混合做链接：格力空调1型该方法在商品展示的网站上较常用。使用图像做超链使用图像做超链接后，图像会自接后，图像会自动增加边框，可动增加边框，可设置边框为设置边框为0去掉去掉超链接的种类根据源对象划分24)热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图 超链接的种类根据href的取值1)链接到其他网页或文件（jpg,rar等

10、）内部链接返回首页外部链接 网易网站 下载链接点击下载2)电子邮件链接给我留言如果如果IE不能打开该文不能打开该文件，则会弹出件，则会弹出文件文件下载下载的对话框的对话框比普通链接多了个比普通链接多了个”mailto:”超链接的种类根据href的取值23)锚链接（链接到页面中某一指定的位置）当网页内容很长，需要进行页内跳转链接时，就需要定义锚点和锚点链接，锚点可使用name属性或id属性定义。也可以链接到其他网页某个锚点处 超链接的种类根据href的取值24)空链接和脚本链接:超链接的打开方式（target属性的取值）在本窗口打开：_self（target的默认值）在新窗口打开：_blank在

11、父窗口打开：_parent 将链接的文件载入到父框架在整个窗口打开：_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架_parent、_top仅仅在网页被嵌入到其他网页中有效，如框架中的网页，所以这两种取值用得很少。超链接的title属性title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字如格力太阳能喜获…超链接制作的原则 1)可以使用相对链接尽量不要使用绝对链接，如./index.htm而不是http:/2)链接目标尽可能简单如http:/，而不是http:/ 网页中可以插入的图像文件的类型有jpg格式，gif格式和png格式。jpg格式适合

12、用于网页中较大尺寸的真彩色图片，是一种有损压缩的格式；gif格式一般用于较小尺寸的图片，是一种无损压缩的格式，可以实现gif动画和gif透明图像，只支持256色。png格式可以用于alpha透明效果，但IE6不能够支持。标记的常见属性是一个行内元素，插入元素不会导致任何换行。下面是标记的常见属性：img的属性的属性含义含义src图片文件的图片文件的url地址地址alt当图片无法显示时显示的替换文字当图片无法显示时显示的替换文字title鼠标停留在图片上时显示的说明文字鼠标停留在图片上时显示的说明文字align图片的对齐方式，默认为基线对齐，即图片的图片的对齐方式，默认为基线对齐，即图片的下边缘

13、和文字的下边缘对齐下边缘和文字的下边缘对齐width、height图片在网页中的宽和高图片在网页中的宽和高在单元格中插入图像的方法 对于表格布局的网页，所有的元素都是放置在单元格中的，图像也不例外，要在单元格中插入图像，且单元格的边框和图像之间没有间隙。那么必须将该单元格的宽和高设置为图片的宽和高，且表格中其它单元格的大小也必须固定，然后确保与之间只有标记，没有空格和换行符，否则单元格会被空格撑开。如：插入图像的对齐方式 标记的对齐方式仍然通过align属性实现，但其取值多达9种，其中要实现图片和文本混排可使用“左对齐”或“右对齐”，要实现文本和图片顶部对齐可使用“文本上方”。，但通常是将图片

14、放在表格里，通过表格定位来实现文本和图像的混排。本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记*10.其它标记媒体元素插入标记 和 插入flash的两种方法 方法一：执行菜单命令：“插入媒体flash”，在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现。方法二：执行菜单命令：“插入媒体插件”，此方法在代码视图中仅插入了embed元素。由于IE6和Firefox都能正常显示效果，而代码更简洁，所以推荐用这种方式（但不能用来插入透明flash，否则IE浏览器中没有obje

15、ct标记的parm属性不会透明）在图像上添加透明flash 首先可以将一张需要放置透明flash的图片作为单元格的背景导入，然后在此单元格内插入一个透明flash文件，可以调整此flash元素的大小与单元格相一致，选中该flash文件，点击属性面板里的“参数”按钮，新建一个参数“wmode”值设置为“transparent”。这句使这句使flash在在IE浏览器中透明浏览器中透明这句使这句使flash在非在非IE浏览器中透明浏览器中透明插入视频或音频文件 插入视频可分别使用ActiveX按钮或插件按钮实现 ActiveX 方式 插件方式本部分内容1.文本格式标记2.列表标记3.超链接标记4.图

16、像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记*10.其它标记div和spandiv和span是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。div和span的唯一区别是div是块级元素，span是行内元素。div和span 块状区域1 块状区域2 行间区域1 行间区域2 标记是一个块状的容器，其默认的状态就是占据整个一行。标记是一个行内的容器，其默认状态是行内的一部分，占据行的长短由内容的多少来决定需要注意的是div

17、并不是层，以前说的层是指通过CSS设置成了绝对定位属性的div元素，因此层并不对应于任何html标记，所以Dreamweaver CS3去掉了层这一概念，将这些设置成了绝对定位元素的标记统称为AP（Absolute Position）元素 本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记10.其它标记表格标记表格的主要作用：网页布局因为表格可以固定文本或图像的显示位置，还可以使用多重表格，并可以设置前景色和背景色网页中的表格是由标记定义的，一个表格被分成许多行，每行又被分成许多个单元格，因此、是表格中三个最

18、基本的标记，必须一起出现。表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。表格标记下面这段代码在浏览器中如何显示 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2 表格标记的常见属性table的属性的属性 含义含义border 表格边框的宽度表格边框的宽度bordercolor 边框的颜色，若不设置，将显示立体边框效果边框的颜色，若不设置，将显示立体边框效果bordercolordarkbordercolorlight 设置边框暗部分和明亮部分效果，设置边框暗部分和明亮部分效果，IE才支持这两个属性才支持这两个属性bgco

19、lor 表格的背景色表格的背景色background 表格的背景图像表格的背景图像cellspacing 表格的间距表格的间距cellpadding 表格的填充表格的填充width，height 表格的宽和高，可以使用象素或百分比做单位表格的宽和高，可以使用象素或百分比做单位align 水平对齐属性水平对齐属性设置表格边框为20象素的效果 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2设置表格边框为0 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2可见：设置表格边框为可见：设置表格边框为0 0时

20、，会使单元格边框也变为时，会使单元格边框也变为0 0象素，象素，而设置表格边框为其他数值时，不会影响单元格边框的宽而设置表格边框为其他数值时，不会影响单元格边框的宽再设置边框颜色为青色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2Firefox效果效果IE效果效果再设置背景颜色为玫瑰色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2设置间距为10，取消背景色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2总结:间距cellspacing的作用再

21、设置填充为10 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2总结：填充cellpadding的作用表格的rules属性rules属性：可实现只显示表格的行边框或列边框，取值为rows时只显示行边框，取值为cols时只显示列边框，如：单元格标记的常见属性td的属性的属性含义含义bordercolor单元格边框的颜色，该属性仅单元格边框的颜色，该属性仅IE支持支持bgcolor单元格的背景色单元格的背景色background单元格的背景图像单元格的背景图像align/valign单元格里的内容的水平或垂直对齐方式单元格里的内容的水平或垂直对齐方式

22、colspan/rowspan合并同一列相邻的几个单元格合并同一列相邻的几个单元格/合并同一行的几合并同一行的几个单元格个单元格width，height单元格的宽和高，可以使用象素或百分比做单位单元格的宽和高，可以使用象素或百分比做单位注意：单元格注意：单元格td无无border属性，因此无法设置单属性，因此无法设置单元格边框的宽度，单元格边框宽度元格边框的宽度，单元格边框宽度只能是只能是1或或0设置第一个单元格边框为红色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2IE的显示的显示Firefox的显示的显示设置第一行单元格背景色为蓝色 ro

23、w 1,cell 1row 1,cell 2等价于：row 1,cell 1row 1,cell 2 设置所有单元格背景色为蓝色 row 1,cell 1row 1,cell 2 row 1,cell 1row 1,cell 2 等价于再设置表格的背景色为红色再设置表格的边框border为0实现1象素边框表格此时将表格的间距cellspacing设为1，即实现1象素边框表格，其原理是通过把表格的背景色和（所有单元格的背景色）调整成不同的颜色，使间距看起来象一个边框一样 所有单元格的背景色设为同一颜色后，我们也称为表格的前景色用CSS属性border-collapse做1象素边框的表格在默认情况

24、下表格边框和单元格边框是不叠加的，此时表格的边框和单元格的边框紧挨在一起，所以边框的宽度为112象素，这是border-collapse属性的默认值为separate，即不重叠时的情况。当我们把border-collapse属性值设为collapse（重叠）时，表格边框和单元格边框将发生重叠，则边框的宽度为1象素。双细线边框表格的原理将表格的边框颜色bordercolor属性设置为某种颜色，则表格的暗边框和亮边框会变为同一种颜色，表格的边框立体效果消失，（在IE中单元格边框的颜色也会跟着改变，而Firefox中单元格边框颜色不会改变）此时表格的边框和单元格的边框都为1象素，只要间距cellsp

25、acing不设为0，则两组边框不会重合，显示为双细线边框表格。双细线边框表格的实现 row 1,cell 1row 1,cell 2 row 1,cell 1row 1,cell 2 IE的显示的显示例2 下面的表格是如何实现的例2 下面的表格是如何实现的用间距做的边框，但并没有把表格的边框border设为0，而是设为1，白色。因此在红色“边框”的外面还有1象素白色的表格边框，单元格外也有1象素的白色单元格边框表格间距为1，表格背景色为红色，单元格背景色为淡红色单元格内容的对齐属性align/valignalign属性可以让单元格中的内容是水平居中或左右对齐，默认是左对齐valign属性是垂直

26、对齐属性，可以让内容在垂直方向对齐，默认是垂直居中对齐单元格的合并属性（colspan、rowspan）单元格的合并属性是td标记特有的两个属性，分别是跨多列属性colspan和跨多行属性rowspan，它们用于合并列或合并单元格。单元格内容 表示该单元格是由3列（3个并排的单元格）合并而成，它将使该行标记中减少两个标记。单元格内容表示该单元格由3行（3个上下排列的单元格）合并而成，它将使该行下的两行，两个标记中分别减少一个标记。注意：colspan和rowspan属性也可以在一个单元格标记中同时出现，如： 标题单元格标记标题单元格标记相当于一个单元格内字体以粗体居中显示的标记 表格

27、标题标记标题标记的常用属性有align、valign（valign表示标题在表格的上部或下部，值为bottom|top）标记 浏览器默认是将整个表格的代码下载完再显示整个表格，如果想让浏览器分行下载，即下载一行显示一行，可以在所有行标记外加上标记，这个对表格中内容很多时比较实用。有时如果要把所有单元格的背景色设置成同一种颜色，可以设置tbody的背景色，这样就不必为每个单元格都添加一条bgcolor属性，可节省很多代码 在Dreamweaver中选中表格的方法选择整个表格：单击表格左上角或右边框或底边框或状态条中的标签。选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上

28、，当选定箭头出现时单击，或状态条中的标签（推荐）。选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。选择单元格中的网页元素：点击单元格中的网页元素。DW在表格中插入行或列的方法当光标位于表格内时，按右键在弹出菜单中选择“表格插入行（或插入列）”可在表格的当前行的上方插入一行，或当前行的左边插入一列，若要在表格的最右边插入一列或最下方插入一行，可选择“表格插入行或列”，在所选列之后或所选行之下插入列或行。插入行也可以在代码视图中复制一行的代码“”再粘贴几次就插入几行，插入列则在代码视图中不好进行。制作固

29、定宽度的表格 如果我们不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形，要制作固定宽度的表格，通常有两种方法：定义所有列的宽度，但不定义整个表格的宽度，整个表格的实际宽度为：所有列的宽度和+边框宽度和+间距和+填充和，这时候，只要单元格内的内容不超过的单元格的宽度时，表格不会变形。定义整个表格的宽，如500像素、98%等，再留一列的宽度不定义，未定义的这一列的宽度为整个表格的宽度-已定义列的宽度和-边框宽度和-间距和-填充和，同样在插入内容时也不会变形。用单元格制作水平线或占位表格 关键：去掉单元格中的“ ”空格 制作占位表格：演示 用表格制作圆角栏目框 网页

30、中经常可以看到漂亮的圆角栏目框，在这里我们来制作一个固定宽度的圆角栏目框。圆角栏目框制作步骤1.插入一个三行一列的表格，把表格的填充、间距和边框设为0，宽设置成190象素（圆角图片的宽），高不设置。2.分别设置表格内三个单元格的高。第一个单元格高设置为38象素（上圆角图片的高）；第二个单元格高为148象素；第三个单元格高为17象素（下圆角图片的高）。在第1、3个单元格内分别插入上圆角和下圆角的图片。3.把第二个单元格的水平对齐方式设置为居中（align=center），单元格的背景颜色设置为圆角图片边框的颜色（bgcolor=#E78BB2）。4.这时在第二个单元格内再插入一个一行一列的表格，

31、把该表格的间距和边框设为0，填充设为8象素（让栏目框中的内容和边框之间有一些间隔），宽设为186象素，背景颜色设置为比边框浅的颜色（bgcolor=#FAE4E6）。说明：第四步也可以不插入表格，而是把第二个单元格拆分成3列，把三列对应的三个单元格的宽分别设置为2象素、186象素和2象素，并在代码视图把这三个单元格中的“ ”去掉，然后把1、3列的背景色设置为圆角边框的颜色，第2列的背景色设为圆角背景的颜色，并用CSS属性设置它的填充为8象素（style=padding:8px）本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.

32、表单及其内部元素9.框架标记*10.其它标记网页中表单的作用表单是实现动态网页的一种主要的外在形式。它的主要功能是提供给用户输入信息的窗口并收集浏览者填写的信息。是实现互动功能的重要组成部分。例如在网上要申请一个电子信箱，就必须按要求填写完成网站提供的表单页面，其主要内容是姓名、年龄、联系方式等个人信息。又例如要在某论坛上发言，发言之前要申请资格，也是要填写完成一个表单网页。无论网站使用的是那种形式的语言来实现网站的互动功能，例如ASP、PHP、JSP，表单已经成为它们统一的外在形式。用换行符布局的表单请输入您的姓名:请问你的性别:男 女你喜欢做些什么:看书上网睡觉我要留言:为什么要用表格布局

33、表单表单和表单元素并不具有排版的能力，表单和表单元素的排版最终还是要由表格组织起来，因此在html代码中，表单标记和表格标记通常是如影随形的。用表格布局的表单代码 用户名：密 码：  表单代码的组成一个表单的代码至少应包括三个组成部分：(1)表单标记：这里包含了处理表单数据所用动态网页的URL以及数据提交到服务器的方法。(2)表单元素：包含了文本框、菜单、复选框和单选框等。(3)提交按钮：将数据传送到服务器上的动态网页。表单的功能表单可以用于调查、订购、搜索等功能。一般的表单由两部分组成，一是描述表单元素的html源代码，二是服务器端用来处理用户所填信息的程序（如php等）

34、，或者客户端的脚本。在html里，可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。表单信息处理的过程为：当单击表单中的提交按纽时，输入在表单中的信息就会上传到服务器中，然后由服务器中的有关应用程序进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器中。表单标记 标记用来创建一个表单域，即定义表单的开始和结束位置，这一标记有几方面的作用。第一，限定表单的范围。所有表单对象，都要插入到表单域之中。单击提交按纽时，提交的也是表单范围之内的内容。第二方面，携带表单的相关信息，例如处理表单的脚本程序的位置（action）、提交表单的方法（

35、method）等。这些信息对于浏览者是不可见的，但对于处理表单确起着决定性的作用 多个标记不能嵌套form标记的属性面板nametargetmethodactionenctype form标记常见属性methodmethod：get或postget方式提交的表单信息是非安全方式，附加在URL地址后面（例如百度）url?表单元素1的name=表单元素1的value&表单元素2的name=表单元素2的valueform标记常见属性actionaction：接一个动态网页名设置action属性后会产生两个作用：1点击该表单的提交按钮将会链接到该网页2 同时还会将表单中输入的数据发送给该网页进行处理f

36、orm标记常见属性enctype：一般不需要设置，如果表单中有文件上传对象，则设置该属性值为multipart/form-dataname和id：在表单的接收页面只接收有name属性的表单元素，赋ID的元素通过表单是接收不到值的target：接收页是否在新窗口打开，和a标记的该属性类似DW中表单对象与标记的对应关系表单域form标记中包含的表单标记主要有input，select(option)，textarea等在DW中表单对象面板中的对象与这些标记的对应关系是：input-表单元素的通用标记 input标记是收集用户输入信息的标记，是一个单标记，其含义由type属性决定。input标记的ty

37、pe属性总共有10种取值，含义右表所示。type属性值属性值描述描述text 文本域文本域password 密码域密码域file 文件域文件域checkbox 复选框复选框radio 单选框单选框button 普通按钮普通按钮submit 提交按钮提交按钮reset 重置按钮重置按钮hidden 隐藏域隐藏域image 图像域图像域(图像按钮图像按钮)文本域文本域举例：查询：input标记中的size属性是定义文本域的宽度文本域属值文本域属值描述描述name 或或id文本域的名称或文本域的名称或idmaxlength 文本域的最大输入字符数文本域的最大输入字符数size 文本域的宽度文本域的宽

38、度value文本域的默认值文本域的默认值单选框单选框举例：女性 男性checked属性设定初始时单选按钮哪项处于选定状态，同一组单选按钮name属性的值必须相同，这样这一组单选框中只有一个能被选中。复选框复选框，可以选中多项看书 上网 听音乐文件域供上传文件用，需要服务器端的上传组件配合文件域对表单标记form有特殊要求，method必须设为post，MIME类型必须为multipart/form-data按钮提交按钮(type=submit)将表单中所有具有name属性的元素内容发送到服务器端指定的应用程序重置按钮(type=reset)用户在填写表单时，若希望重新填写，单击该按钮将使全部表

39、单元素的值还原为初始值普通按钮(type=button)该按钮没有内在行为，但可用javascript为其指定动作。图像域即图像按钮，用一张图片做按钮，功能和提交按钮相同 和标记 标记是下拉菜单框或列表框标记。标记的含义由其size属性决定，如果该标记没有设置size属性，那么表示为下拉菜单框，如果设置了size属性，则变成了列表框，设置了multiple属性，则表示列表框允许多选。下列列表框中的每一项由标记定义。去掉去掉size属性后属性后多行文本域标记 是多行文本域标记，用于让浏览者输入多行文本，如发表评论或留言，跟帖。这是一个有4行，每行可容纳40个字符，换行方式为虚拟的多行文本域。表单

40、的辅助标记、标记fieldset是字段集标记，它必须包含一个legend标记，表示是字段集的标题。如果表单中的控件较多，可以将逻辑上是一组的控件放在一个字段集内，显得有条理些。个 人 资 料标记的用途为控件定义一个标签，通过for属性绑定控件。在dw中插入表单控件时选择“使用for属性附加标签标记”如：男 女这样当单击标签时就相当于单击表单控件表单控件还可添加快捷键，tab顺序键等 本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记*10.其它标记框架标记如果想把一个浏览器窗口分成几个区域，每个区域都显示一个

41、网页，则需要使用框架集和框架标记，这两个标记也是成组出现的。框架标记以前也用于网页的排版，现在用得比较少了，但网站的管理后台程序常用左右分割的框架版式。DW中框架标记位于布局分类中 标记 窗口框架的分割有两种方式，一种是水平分割，另一种是垂直分割，在标记中通过cols属性和rows属性来控制窗口的分割方式 用cols属性将窗口分为左右部分 那么“*”就代表30%的宽度 用rows属性将窗口分为上下部分 框架的嵌套 通过框架的嵌套可实现对子窗口的分割，例如有时需要先将窗口水平分割，再将某个子窗口进行垂直分割，如图3-50所示。可用下面的代码实现。用框架分割窗体 标记 用src属性指定要显示的网页

42、用name属性指定框架的名称 可以用name属性为框架指定名称，这样做的用途是，当其他框架中的链接要在指定的框架中打开时，可以设置其他框架中超链接的target属性值等于这个框架的name值。例如定义右边窗口name属性为main：左边窗口中的链接目标是main：添加新闻这样add.htm会在框架名为main的窗口（右边窗口）中打开。Iframe内嵌框架框架集标记只能对网页进行左右或上下分割，如果要让网页的中间某个矩形区域显示其他网页，则需要用到浮动框架标记，下面是浮动框架的属性举例：src：URL地址，既可是HTML文件，也可以是文本、ASP等；width、height：内部框架区域的宽与高

43、；scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。name:框架的名字，用来进行识别这是iframe框架的例子下面的天气预报是插入的其他网页通过iframe挂木马活动框架常用于将其他网页的内容导入到自己网页的某个区域，如把天气预报网站的天气导入到自己做的网页的某个区域显示，但某些木马或病毒程序利用iframe的这一特点，通过修改用户的网页源代码，在网页尾部添加iframe代码，导入其他带病

44、毒的恶意网站的网页，并将iframe框架的宽和高都设置为0，这样用户打开自己网页的同时，就不知不觉打开了恶意网站的网页，从而感染病毒，这就是所谓的iframe挂木马的原理。不过可查看地址栏看打开网页时是否提示正在打开某个恶意网站的网址而发现这种被挂木马的网页。本部分内容1.文本格式标记2.列表标记3.超链接标记4.图像标记5.媒体元素标记6.容器标记7.表格标记8.表单及其内部元素9.框架标记*10.其它标记meta元信息标记 meta是元信息标记，是描述网页文档信息的标记。可以描述文档的编码方式，文档的摘要，文档的关键字，文档的刷新。都不会显示在网页上，其中网页的摘要，关键字是为了让搜索引擎

45、能对网页内容的主题进行识别和分类。文档刷新可设置网页经过一段时间后自动刷新或转到其他Url。在DW中，可通过菜单命令“插入HTML文件头标签”进行这些设置。Meta的name属性Keywords(关键字)keywords用来告诉搜索引擎你网页的关键字是什么。如：meta name=keywords content=science,relationships,entertaiment,humandescription(网站内容描述)description用来告诉搜索引擎你的网站主要内容。如：meta name=description content=This page is about the

46、meaning of science,education,culture.meta的http-equiv属性 自动刷新meta http-equiv=“Refresh”content=“2；URL=http:/”实现网页转换时的动画效果meta http-equiv=Page-Enter content=revealTrans(duration=.,transition=)link链接其他文件的标记 主要用来链接外部CSS文件，也可链接一个图标文件.ico用来改变浏览器地址栏的图标。如：标记是专用于在网页头部嵌入CSS代码的标记。标记是用于嵌入脚本（如javascript）或链接外部脚本文件(src属性)的标记，它既可位于网页头部，也可位于网页body部分。是网页标题标记，该标记中的内容将显示在浏览器窗口的标题栏上 base(基链接)base(基链接)说明：插入网页基链接属性用法：注意：你网页上的所有相对路径在链接时都将在前面加上“http:/