第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象素边框的表格在默认情况
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 03 部分 HTML 超文本 标记 语言
限制150内