《html标记》PPT课件

第一章HTML基础,本章要点,文本格式标记文本修饰标记（字体标记）列表标记超链接标记图像和多媒体标记,HTML标记基础,2.什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记可以具有相应属性即各种参数，如size、color、text、width和noshade等。例如：,文本格式标记,网页中添加文本的方法,网页中添加文本的方法,文本格式标记是网页中定义文本格式的标记1）直接写文本文本、文本、文本、文本；2）用段落标记格式化文本，各段落文本将分行显示；3）用标题标记格式化文本，作用：定义第n号标题字体，n=16，n值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记；4)用预格式化标记格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符；,用标题标记格式化文本,第1号标题字体第3号标题字体第4号标题字体第5号标题字体（居中）,标题标记和段落标记,1号标题第一段3号标题第二段5号标题第三段,用预格式化标记格式文本,网页设计师这一职业在今后来说还是有需求的。因为随着网络越来越普及，像我国的房地产市场,文本的强制换行,电子商务顾名思义就是在internet上做生意，商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。强制不换行标记，常用英文人名BillGates,文本中的空格,标记(除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格，块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格需在源代码中插入（表示一个半角空格）。行内元素可看成一个字符,文本中的转义字符,在HTML源代码中，有些字符有特别的含义，比如小于号“,”符号在DW的设计视图中输入这些特殊字符，DW会自动在代码视图添加它们对应的转义字符,DW中插入HTML文本元素的快捷键,Enter插入,综合实例,分段换行与预格式以下是直接写文本的情况：星期一、星期二、星期三、星期四、星期五、星期六、星期日。以下是使用了三个换行标记的情况：星期一、星期二、星期三、星期四、星期五、星期六、星期日。以下使用分段标记（分为两段）：星期一、星期二、星期三、星期四、星期五、星期六、星期日。以下使用预格式：星期一、星期二、星期三、星期四、星期五、星期六、星期日。,跑马灯标记,一个特殊的文本标记，能使其中的文本在浏览器屏幕上不断滚动。示例其中behavior=“alternate”设置滚动方式为来回滚动，设置为scroll表示循环滚动，设置为slide表示滚动到目的地就停止。direction属性用于控制滚动的方向，可以上下滚动或左右滚动。loop设置滚动的次数，loop为0表示不断滚动。scrollamount属性设置滚动的速度，scrolldelay属性设置两次滚动间的间隔时间。,示例,测试:网页设计与制作学习：可以将swf文件下载下来用flash播放器全屏播放以达到最好效果，也可以在IE浏览器中按F11键达到全屏效果.,水平线标记,标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。,文本修饰标记（字体标记）,文本修饰标记,文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。1）font标记：定义文字的各种属性。例：注意：文本修饰标记由于是行内标记，没有align属性(说明）,加粗、倾斜与下划线标记,2）加粗、倾斜与下划线的定义标记（b、i、u）使用加粗、倾斜与下划线标记（b、i、u）的组合，可对文本文字进一步修饰。如：此处以红色五号字粗体显示,上标（sup）和下标（sub）标记,用于书写数学公式或分子式。如：H2OX2由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。,列表标记,列表标记,为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。无序列表(UnorderedList),有序列表(OrderedList),定义列表(DefinedList),嵌套的无序列表示例,文章CSS教程DOM教程XML教程参考XHTMLXMLCSS,有序列表(OrderedList),文章CSS教程DOM教程XML教程Flash教程,定义列表(DefinedList),湖南城市长沙衡阳常德湖北城市武汉襄樊宜昌,超链接标记,超链接标记,超链接是网页的基本元素，网页正是通过超链接而相互链接组织成一个网站，并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。超链接是通过URL（统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名或IP地址、路径和文件名。URL分为绝对URL和相对URL,绝对URL,绝对URL是采用完整的URL来规定文件在internet上的精确地点，包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。书写格式为：协议：/计算机域名或IP地址/文档路径/文档名例如：,相对URL,相对URL是相对于包含超链接页的地点来规定文件的地点。如链接到同一路径下的文档，直接输入文件名即可，如news.htm如链接到同一路径下子文件夹的文档，则先输入子文件夹名和斜杠（/），再输入文件名，如yule/news.htm如链接到上一级路径中，要在文件名前输入“./”，如“./news.htm”，其中“.”表示上级目录，“.”表示本级目录。,相对URL示例,wgzx,yule,index.htm,oa.htm,pop.htm,news.htm,1.href=yule/news.htm,2,1,2.href=./oa.htm,3.href=“pop.htm”,3,相对URL的优势,可以看出相对URL方式比较简便，不需输入一长串完整的URL；另外相对路径还有一个非常重要的特点是：可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。,超链接的种类根据源对象划分,1)用文本做超链接：首页2)用图像做超链接：3)文本图像混合做链接：格力空调1型该方法在商品展示的网站上较常用。,使用图像做超链接后，图像会自动增加边框，可设置边框为0去掉,超链接的种类根据源对象划分2,4)热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图,超链接的种类根据href的取值,1)链接到其他网页或文件（jpg,rar等）内部链接返回首页外部链接网易网站下载链接点击下载2)电子邮件链接给我留言,如果IE不能打开该文件，则会弹出文件下载的对话框,比普通链接多了个”mailto:”,超链接的种类根据href的取值2,3)锚链接（链接到页面中某一指定的位置）当网页内容很长，需要进行页内跳转链接时，就需要定义锚点和锚点链接，锚点可使用name属性或id属性定义。也可以链接到其他网页某个锚点处4)空链接和脚本链接:,超链接的打开方式（target属性的取值）,在本窗口打开：_self（target的默认值）在新窗口打开：_blank在父窗口打开：_parent将链接的文件载入到父框架在整个窗口打开：_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架_parent、_top仅仅在网页被嵌入到其他网页中有效，如框架中的网页，所以这两种取值用得很少。,超链接的title属性,title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字如格力太阳能喜获,超链接制作的原则,1)可以使用相对链接尽量不要使用绝对链接，如./index.htm而不是2)链接目标尽可能简单如，而不是,课后思考,url（统一资源定位器）url一般作为哪些属性的取值？href=“index.asp”src=“logo.gif”url的种类相对url绝对urlurl格式的类型协议名:/主机ip或域名/文件目录/文件名,url协议的类型,常见的url协议的类型httpftpfile://web/wy.gif当在DW中建立网站目录后，那么网站目录内的文件之间建立链接就会自动采用相对链接的方式，相对链接以网站目录为基准。若没建立网站目录，DW则采用file协议方式，以磁盘根目录为基准，建立链接，而这是我们应该避免的,图像标记,图像标记：将图形文件嵌入到网页文档中的当前位置说明：网页中插入图像有两种方法，一是插入一个元素，二是将图像作为背景嵌入到网页中由于CSS的背景属性的功能很强大，现在更推荐将所有的图像都作为背景嵌入。如果图像是通过元素插入，则可以在浏览器上通过按住鼠标左键拖动选中图片，或者将它拖动到地址栏里，如果作为背景嵌入，则无法选中图片,图像标记,网页中支持的图像文件格式,网页中可以插入的图像文件的类型有jpg格式，gif格式和png格式。这些文件都是压缩格式的图像格式，其中jpg格式适合用于网页中较大尺寸的真彩色图片，是一种有损压缩的格式；gif格式一般用于较小尺寸的图片，是一种无损压缩的格式，只支持256色，GIF在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色，gif格式的特点是可以实现gif动画，和gif全透明的图像；png格式可以用于alpha透明效果，但IE6不能够支持。,标记的常见属性,是一个行内元素，插入元素不会导致任何换行。下面是标记的常见属性：,在单元格中插入图像的方法,对于表格布局的网页，所有的元素都是放置在单元格中的，图像也不例外，要在单元格中插入图像，且单元格的边框和图像之间没有间隙。那么必须将该单元格的宽和高设置为图片的宽和高，且表格中其它单元格的大小也必须固定，然后确保与之间只有标记，没有空格和换行符，否则单元格会被空格撑开。如：不能换行-,插入图像的对齐方式,标记的对齐方式仍然通过align属性实现，但其取值多达9种，其中要实现图片和文本混排可使用“左对齐”或“右对齐”，要实现文本和图片顶部对齐可使用“文本上方”。，但通常是将图片放在表格里，通过表格定位来实现文本和图像的混排。,复习题,a标记的常用属性有哪些hreftargetnametitleimg标记的常用属性有哪些srcwidthheightalttitle,作业（第一次）,用DW制作一个个人求职的网页，要求用表格布局，网页中必须包含图像、文本、列表、链接及表格等基本元素，制作完成后，把该网页的源代码抄写两遍交上来或者直接用编写代码的方式制作该网页，再在作业本上抄写两遍下次上课前必须交，否则扣10分(10/30),媒体元素插入标记,插入flash的两种方法,方法一：执行菜单命令：“插入媒体flash”，在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现的，以确保在IE5和Firefox中都获得应有的效果方法二：执行菜单命令：“插入媒体插件”，此方法在代码视图中仅插入了embed元素。由于IE6和Firefox都能正常显示效果，而代码更简洁，所以推荐用这种方式（但不能用来插入透明flash，否则IE浏览器中没有object标记的parm属性不会透明）,在图像上添加透明flash,首先可以将一张需要放置透明flash的图片作为单元格的背景导入，然后在此单元格内插入一个透明flash文件，可以调整此flash元素的大小与单元格相一致，选中该flash文件，点击属性面板里的“参数”按钮，新建一个参数“wmode”值设置为“transparent”。,这句使flash在IE浏览器中透明,这句使flash在非IE浏览器中透明,插入视频或音频文件,插入视频可分别使用ActiveX按钮或插件按钮实现ActiveX方式插件方式,流媒体简介,流媒体实际指的是一种新的媒体传送方式，而非一种新的媒体,流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个压缩包，由视频服务器向用户计算机连续、实时传送。在采用流式传输方式的系统中，用户不必像采用下载方式那样等到整个文件全部下载完毕常见的流媒体文件格式real公司：rmrmvbraapple公司：quicktimemovmicrosoft公司：asfwmvwma,插入流媒体元素的方法,网页中插入流媒体也能向插入一般媒体一样使用embed标记，只是要在classId框中设置流媒体的类型插入RealPlayer流格式的视频文件属性面板中设置:ClassID为RealPlayer。选中Embed复选框。Src为zhaodan.rm。单击“参数”按钮，设置属性。,parm参数示例,参数：console属性：可以将各种不同的RealPlayer控制聚集在网页上，这样它们可以交互使用或是保持独立，而且互相不影响演示1:8000/ec/youhua/kclx-1.htm,容器标记,div和span,div和span是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。div和span的唯一区别是div是块级元素，span是行内元素。,div和span,块状区域1块状区域2行间区域1行间区域2,标记是一个块状的容器，其默认的状态就是占据整个一行。标记是一个行内的容器，其默认状态是行内的一部分，占据行的长短由内容的多少来决定需要注意的是div并不是层，以前说的层是指通过CSS设置成了绝对定位属性的div元素，但实际上也可以对其他任何标记的元素设置成绝对定位，此时其他标记也成了层，因此层并不对应于任何html标记，所以DreamweaverCS3去掉了层这一概念，将这些设置成了绝对定位元素的标记统称为AP（AbsolutePosition）元素,表格标记、,、,表格标记,表格的主要作用：网页布局因为表格可以固定文本或图像的显示位置，还可以使用多重表格，并可以设置前景色和背景色网页中的表格是由标记定义的，一个表格被分成许多行，每行又被分成许多个单元格，因此、是表格中三个最基本的标记，必须一起出现。表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。,Theelementsthatmakeupthebasicstructureofatable,下面这段代码在浏览器中如何显示,row1,cell1row1,cell2row2,cell1row2,cell2,表格标记的常见属性,设置表格边框为20象素的效果,row1,cell1row1,cell2row2,cell1row2,cell2,设置表格边框为0,row1,cell1row1,cell2row2,cell1row2,cell2,可见：设置表格边框为0时，会使单元格边框也变为0象素，而设置表格边框为其他数值时，不会影响单元格边框的宽,再设置边框颜色为青色,row1,cell1row1,cell2row2,cell1row2,cell2,Firefox效果,IE效果,再设置背景颜色为玫瑰色,row1,cell1row1,cell2row2,cell1row2,cell2,设置间距为10，取消背景色,row1,cell1row1,cell2row2,cell1row2,cell2,总结:间距cellspacing的作用,再设置填充为10,row1,cell1row1,cell2row2,cell1row2,cell2,总结：填充cellpadding的作用,表格的rules属性,rules属性：可实现只显示表格的行边框或列边框，取值为rows时只显示行边框，取值为cols时只显示列边框，如：,单元格标记的常见属性,注意：单元格td无border属性，因此无法设置单元格边框的宽度，单元格边框宽度只能是1或0,设置第一个单元格边框为红色,row1,cell1row1,cell2row2,cell1row2,cell2,IE的显示,Firefox的显示,设置第一行单元格背景色为蓝色,row1,cell1row1,cell2等价于：row1,cell1row1,cell2,设置所有单元格背景色为蓝色,row1,cell1row1,cell2row1,cell1row1,cell2等价于,再设置表格的背景色为红色,再设置表格的边框border为0,实现1象素边框表格,此时将表格的间距cellspacing设为1，即实现1象素边框表格，其原理是通过把表格的背景色和（所有单元格的背景色）调整成不同的颜色，使间距看起来象一个边框一样所有单元格的背景色设为同一颜色后，我们也称为表格的前景色,用CSS属性border-collapse做1象素边框的表格,在默认情况下表格边框和单元格边框是不叠加的，此时表格的边框和单元格的边框紧挨在一起，所以边框的宽度为112象素，这是border-collapse属性的默认值为separate，即不重叠时的情况。当我们把border-collapse属性值设为collapse（重叠）时，表格边框和单元格边框将发生重叠，则边框的宽度为1象素。border-collapse:collapse;,双细线边框表格的原理,将表格的边框颜色bordercolor属性设置为某种颜色，则表格的暗边框和亮边框会变为同一种颜色，表格的边框立体效果消失，（在IE中单元格边框的颜色也会跟着改变，而Firefox中单元格边框颜色不会改变）此时表格的边框和单元格的边框都为1象素，只要间距cellspacing不设为0，则两组边框不会重合，显示为双细线边框表格。,双细线边框表格的实现,row1,cell1row1,cell2row1,cell1row1,cell2,IE的显示,例2下面的表格是如何实现的,用间距做的边框，但并没有把表格的边框border设为0，而是设为1，白色。因此在红色“边框”的外面还有1象素白色的表格边框，单元格外也有1象素的白色单元格边框表格间距为1，表格背景色为红色，单元格背景色为淡红色,单元格内容的对齐属性align/valign,align属性可以让单元格中的内容是水平居中或左右对齐，默认是左对齐valign属性是垂直对齐属性，可以让内容在垂直方向对齐，默认是垂直居中对齐,单元格的合并属性（colspan、rowspan）,单元格的合并属性是td标记特有的两个属性，分别是跨多列属性colspan和跨多行属性rowspan，它们用于合并列或合并单元格。如：单元格内容表示该单元格是由3列（3个并排的单元格）合并而成，它将使该行标记中减少两个标记。单元格内容表示该单元格由3行（3个上下排列的单元格）合并而成，它将使该行下的两行，两个标记中分别减少一个标记。,注意：colspan和rowspan属性也可以在一个单元格标记中同时出现，如：,标题单元格标记,标题单元格标记相当于一个单元格内字体以粗体居中显示的标记,表格标题标记,标题标记的常用属性有align、valign（valign表示标题在表格的上部或下部，值为bottom|top）,标记,浏览器默认是将整个表格的代码下载完再显示整个表格，如果想让浏览器分行下载，即下载一行显示一行，可以在所有行标记外加上标记，这个对表格中内容很多时比较实用。有时如果要把所有单元格的背景色设置成同一种颜色，可以设置tbody的背景色，这样就不必为每个单元格都添加一条bgcolor属性，可节省很多代码,普通表格与布局表格的区别,在布局模式下绘制的布局表格是特殊设置了的普通表格，布局表格将border、cellpadding、cellspacing三个属性都设置为了0，因此我们看不到它的边框，布局单元格将valign属性设置为top，因此往布局单元格中插入内容默认都是往单元格最顶端排列的。实验：用普通标格和布局表格分别进行1-3-1版式布局,在Dreamweaver中选中表格的方法,选择整个表格：单击表格左上角或右边框或底边框或状态条中的标签。选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击，或状态条中的标签（推荐）。选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。选择单元格中的网页元素：点击单元格中的网页元素。,DW在表格中插入行或列的方法,当光标位于表格内时，按右键在弹出菜单中选择“表格插入行（或插入列）”可在表格的当前