第3章1 html标记.ppt
《第3章1 html标记.ppt》由会员分享,可在线阅读,更多相关《第3章1 html标记.ppt(101页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、基于Web标准的网页设计唐四薪 编著 清华大学出版社 2009年11月 http:/第三章 HTML标记功能详述 本章要点本章要点v文本格式标记文本格式标记v文本修饰标记(字体标记)文本修饰标记(字体标记)v列表标记列表标记 v超链接标记超链接标记v图像和多媒体标记图像和多媒体标记HTMLHTML标记基础标记基础v2.什么是标记什么是标记?标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记可以具有相应属性即各种参数,如size、color、text、width和noshade等。例如:文本格式标记网页中添加文本的方法网页中添加文本的方法网页中添加文本的方法 文本格式
2、标记是网页中定义文本格式的标记文本格式标记是网页中定义文本格式的标记1)直接写文本)直接写文本文本文本、文本文本、文本文本、文本文本;2)用段落标记)用段落标记格式化文本,各段落文本将分行格式化文本,各段落文本将分行显示;显示;3)用标题标记)用标题标记格式化文本,作用:定义第格式化文本,作用:定义第n号标题字体,号标题字体,n=16,n值越大,字越小;文本将变为粗体值越大,字越小;文本将变为粗体显示,可看成特殊的段落标记;显示,可看成特殊的段落标记;4)用预格式化标记用预格式化标记格式化文本,标记内的格式化文本,标记内的文本将按原来的格式显示,保留文本中的所有空格、换行文本将按原来的格式显示
3、,保留文本中的所有空格、换行和定位符;和定位符;用标题标记用标题标记 格式化文本格式化文本第第1号标题字体号标题字体 第第3号标题字体号标题字体 第第4号标题字体号标题字体 第第5号标题字体(居中)号标题字体(居中)标题标记和段落标记标题标记和段落标记 1号标题号标题第一段第一段3号标题号标题第二段第二段5号标题号标题第三段第三段 用预格式化标记用预格式化标记格式文本格式文本 网页设计师这一职业在今后来说还是有需网页设计师这一职业在今后来说还是有需求的。求的。因为随着网络越来越普及,因为随着网络越来越普及,像我国的房地产市场像我国的房地产市场文本的强制换行文本的强制换行 /电子商务顾名思义就是
4、在电子商务顾名思义就是在internet上做生意,上做生意,商品展示,广告宣传、发布商品展示,广告宣传、发布供求信息等活动实现的途径就是网页。供求信息等活动实现的途径就是网页。v强制不换行标记强制不换行标记,常用英文人,常用英文人名名vBill Gates 文本中的空格文本中的空格v标记标记(除外除外)内内字符前的空格字符前的空格浏览器将全部忽浏览器将全部忽略,略,字符与字符间的空格字符与字符间的空格浏览器将只保留一个空浏览器将只保留一个空格显示,格显示,回车回车视为一个空格,视为一个空格,v块级元素之间忽略所有空格。块级元素之间忽略所有空格。v如果要输入多个空格或需要在字符之前输入空格如果要
5、输入多个空格或需要在字符之前输入空格需在源代码中插入需在源代码中插入 nbsp;(表示一个半角空格)。(表示一个半角空格)。v行内元素可看成一个字符行内元素可看成一个字符 文本中的转义字符文本中的转义字符v在在HTML源代码中,有些字符有特别的含义,比如小于源代码中,有些字符有特别的含义,比如小于号号“”就表示就表示HTML 标记的开始,标记的开始,html源代码中的源代码中的“”是不会在浏览器中显示的,如果要浏览器显示这是不会在浏览器中显示的,如果要浏览器显示这些字符,就需要输出他们对应的转义字符。些字符,就需要输出他们对应的转义字符。v例如:例如:<表示表示,"表示表
6、示“,&表表示示&, 表示空格等;表示空格等;通常,一个字符实体是由三部分组成的:通常,一个字符实体是由三部分组成的:(1)一个)一个“&”符号符号(2)字符专用名称或者字符代号)字符专用名称或者字符代号(3)一个)一个“;”符号符号在在DW的设计视图中输入这些特殊字符,的设计视图中输入这些特殊字符,DW会自动在代会自动在代码视图添加它们对应的转义字符码视图添加它们对应的转义字符DWDW中插入中插入HTMLHTML文本元素的快捷键文本元素的快捷键 1.Enter 插入插入 (硬回车)(硬回车)2.shiftenter 插入插入 (软回车)(软回车)3.Ctrlshi
7、ftspace 插入一个插入一个 综合实例综合实例 分段换行与预格式分段换行与预格式 以下是直接写文本的情况:以下是直接写文本的情况:星期一、星期二、星期三、星期四、星期一、星期二、星期三、星期四、星期五、星期六、星期日。星期五、星期六、星期日。以下是使用了三个换行标记的情况:以下是使用了三个换行标记的情况:星期一、星期二、星期一、星期二、/星期三、星期四、星期三、星期四、/星期五、星期六、星期日。星期五、星期六、星期日。/以下使用分段标记(分为两段):以下使用分段标记(分为两段):星期一、星期二、星期三、星期一、星期二、星期三、星期四、星期四、星期五、星期六、星期日。星期五、星期六
8、、星期日。以下使用预格式:以下使用预格式:星期一、星期二、星期三、星期四、星期一、星期二、星期三、星期四、星期五、星期六、星期日。星期五、星期六、星期日。跑马灯跑马灯标记标记v一个特殊的文本标记,能使其中的文本在浏览器一个特殊的文本标记,能使其中的文本在浏览器屏幕上不断滚动。屏幕上不断滚动。示例示例v其中其中behavior=“alternate”设置滚动方式为来回滚设置滚动方式为来回滚动,设置为动,设置为scroll表示循环滚动,设置为表示循环滚动,设置为slide表示表示滚动到目的地就停止。滚动到目的地就停止。direction属性用于控制滚属性用于控制滚动的方向,可以上下滚动或左右滚动。
9、动的方向,可以上下滚动或左右滚动。loop设置设置滚动的次数,滚动的次数,loop为为0表示不断滚动。表示不断滚动。scrollamount属性设置滚动的速度,属性设置滚动的速度,scrolldelay属属性设置两次滚动间的间隔时间。性设置两次滚动间的间隔时间。示例示例 测试测试:网页设计与制作学习:可以将网页设计与制作学习:可以将swf文件下载下来用文件下载下来用flash播播放器全屏播放以达到最好效果,也可以在放器全屏播放以达到最好效果,也可以在IE浏览器中按浏览器中按F11键达到全屏效果键达到全屏效果.水平线标记水平线标记 v标记是在标记是在HTML文档中加入一条水
10、平线,它文档中加入一条水平线,它可以直接使用,具有可以直接使用,具有size、color、width和和noshade属性。属性。size是设置水平线的厚度,而是设置水平线的厚度,而width是设定水平线的宽度,默认单位是像素。是设定水平线的宽度,默认单位是像素。noshade属性用来加入一条没有阴影的水平线。属性用来加入一条没有阴影的水平线。v文本修饰标记(字体标记)文本修饰标记文本修饰标记v文本修饰标记是对文本的外观进行修饰的标记,文本修饰标记是对文本的外观进行修饰的标记,如让文字变色,加大,变粗体,添加下划线等。如让文字变色,加大,变粗体,添加下划线等。v1)font标记:标记:定义文字
11、的各种属性。定义文字的各种属性。例:例:vv注意:文本修饰标记由于是行内标记,没有注意:文本修饰标记由于是行内标记,没有align属性属性(说明说明)加粗、倾斜与下划线标记加粗、倾斜与下划线标记v2)加粗、倾斜与下划线的定义标记()加粗、倾斜与下划线的定义标记(b、i、u)使用加粗、倾斜与下划线标记(使用加粗、倾斜与下划线标记(b、i、u)的)的组合组合,可对文本,可对文本文字进一步修饰。文字进一步修饰。如:如:此处以红色五号字粗此处以红色五号字粗体显示体显示上标(上标(supsup)和下标()和下标(subsub)标记)标记 v用于书写数学公式或分子式。用于书写数学公式或分子式。v如:如:H
12、2O X2v由于字体标记属于对文本由于字体标记属于对文本外观外观进行修饰的标记,进行修饰的标记,是由于当时是由于当时CSS语言尚未出现时语言尚未出现时html定义的表现定义的表现的范畴,随着的范畴,随着CSS的出现,这些表现功能均可以的出现,这些表现功能均可以由由CSS完成,所以不含有语义的字体标记慢慢过完成,所以不含有语义的字体标记慢慢过时了。时了。列表标记 列表标记列表标记v为了合理地组织文本,网页中常常要用到列表。为了合理地组织文本,网页中常常要用到列表。在在HTML中可以使用的列表标记有无序列表、有中可以使用的列表标记有无序列表、有序列表和定义列表三种。序列表和定义列表三种。v无序列表
13、无序列表(Unordered List),v有序列表有序列表(Ordered List),v定义列表定义列表(Defined List),嵌套的无序列表示例嵌套的无序列表示例 文章文章 CSS教程教程 DOM教程教程 XML教程教程 参考参考 XHTML XMLCSS 有序列表有序列表(Ordered List)(Ordered List)文章文章 CSS教程教程 DOM教程教程 XML教程教程 Flash教程教程 定义列表定义列表(Defined List)(Defined List)湖南城市湖南城市长沙长沙衡阳衡阳常德常德 湖北城市湖北城市武汉武汉襄樊襄樊宜昌宜昌超链接标记 超链接标记超链
14、接标记 v超链接是网页的基本元素,网页正是通过超链接超链接是网页的基本元素,网页正是通过超链接而相互链接组织成一个网站,并将而相互链接组织成一个网站,并将internet上的各上的各个网站联系在一起。浏览者通过超链接选择阅读个网站联系在一起。浏览者通过超链接选择阅读路径。路径。v超链接是通过超链接是通过URL(统一资源定位器)来定位目(统一资源定位器)来定位目标信息的。标信息的。URL包括包括4部分:网络协议、域名或部分:网络协议、域名或IP地址、路径和文件名。地址、路径和文件名。vURL分为绝对分为绝对URL和相对和相对URL 绝对绝对URL URL v 绝对绝对URL是采用完整的是采用完整
15、的URL来规定文件在来规定文件在internet上的精确地点,包括完整的协议类型、计上的精确地点,包括完整的协议类型、计算机域名或算机域名或IP地址、包含路径信息的文档名。书地址、包含路径信息的文档名。书写格式为:协议:写格式为:协议:/计算机域名或计算机域名或IP地址地址/文档文档路径路径/文档名文档名v例如:例如:http:/ URL v相对相对URL是相对于包含超链接页的地点来规定文件的地点。是相对于包含超链接页的地点来规定文件的地点。v如链接到同一路径下的文档,直接输入文件名即可,如如链接到同一路径下的文档,直接输入文件名即可,如news.htmv如链接到同一路径下子文件夹的文档,则先
16、输入子文件夹如链接到同一路径下子文件夹的文档,则先输入子文件夹名和斜杠(名和斜杠(/),再输入文件名,如),再输入文件名,如yule/news.htmv如链接到上一级路径中,要在文件名前输入如链接到上一级路径中,要在文件名前输入“./”,如,如“./news.htm”,其中,其中“.”表示上级目录,表示上级目录,“.”表示表示本级目录。本级目录。相对相对URLURL示例示例wgzxyuleindex.htmoa.htmpop.htmnews.htm1.href=yule/news.htm212.href=./oa.htm3.href=“pop.htm”3相对相对URLURL的优势的优势v可以看
17、出相对可以看出相对URL方式比较简便,不需输入一长方式比较简便,不需输入一长串完整的串完整的URL;另外相对路径还有一个非常重要;另外相对路径还有一个非常重要的特点是:可以毫无顾忌地修改的特点是:可以毫无顾忌地修改Web网站的域名网站的域名或网站在服务器硬盘中的存放目录。或网站在服务器硬盘中的存放目录。超链接的种类根据源对象划分超链接的种类根据源对象划分 1)用文本做超链接用文本做超链接:首页首页2)用图像做超链接:用图像做超链接:3)文本图像混合做链接:文本图像混合做链接:格力格力空调空调1型型该方法在商品展示的网站上较常用。该方法在商品展示的网站上较常用。使用图像做超链使用图像做超链接后,
18、图像会自接后,图像会自动增加边框,可动增加边框,可设置边框为设置边框为0去掉去掉超链接的种类根据源对象划分超链接的种类根据源对象划分2 24)热区链接热区链接:使用:使用map在图像上定义一幅地图,地图上可包在图像上定义一幅地图,地图上可包含多个热区,每个热区用含多个热区,每个热区用area单标记定义,单标记定义,area的的shape属属性定义了热区的形状,性定义了热区的形状,coords定义了热区的坐标点,定义了热区的坐标点,href定义了热区链接的文件。同时定义了热区链接的文件。同时img标记用标记用usemap指明用了指明用了哪幅地图哪幅地图 超链接的种类根据超链接的种类根据hrefh
19、ref的取值的取值1)链接到其他网页或文件链接到其他网页或文件(jpg,rar等)等)内部链接内部链接返回首页返回首页外部链接外部链接 网易网站网易网站 下载链接下载链接点击下载点击下载2)电子邮件链接电子邮件链接给我留言给我留言如果如果IE不能打开该文不能打开该文件,则会弹出件,则会弹出文件文件下载下载的对话框的对话框比普通链接多了个比普通链接多了个”mailto:”超链接的种类根据超链接的种类根据hrefhref的取值的取值2 23)锚链接(链接到页面中某一指定的位置)锚链接(链接到页面中某一指定的位置)当当网网页页内内容容很很长长,需需要要进进行行页页内内跳跳转转链链接接时时,就就需需要
20、要定定义义锚锚点和锚点链接,锚点可使用点和锚点链接,锚点可使用name属性或属性或id属性定义。属性定义。也可以链接到其他网页某个锚点处也可以链接到其他网页某个锚点处 4)空链接和脚本链接空链接和脚本链接:超链接的打开方式(超链接的打开方式(targettarget属性的取值)属性的取值)v在本窗口打开:在本窗口打开:_self(target的默认值)的默认值)v在新窗口打开:在新窗口打开:_blankv在父窗口打开:在父窗口打开:_parent 将链接的文件载入到父将链接的文件载入到父框架框架v在整个窗口打开:在整个窗口打开:_top:将链接的文件载入到整:将链接的文件载入到整个浏览器窗口中
21、,并删除所有框架个浏览器窗口中,并删除所有框架v_parent、_top仅仅在网页被嵌入到其他网页中有仅仅在网页被嵌入到其他网页中有效,如框架中的网页,所以这两种取值用得很少。效,如框架中的网页,所以这两种取值用得很少。超链接的超链接的titletitle属性属性vtitle属性在很多标记里都有,其作用是在属性在很多标记里都有,其作用是在鼠鼠标标停留停留在在该该元素上元素上时显时显示示设设置的置的说说明文字明文字v如如格力太阳能喜获格力太阳能喜获…超链接制作的原则超链接制作的原则 1)可以使用相对链接尽量不要使用绝对链接,如可以使用相对链接尽量不要使用绝对链接,如./index.h
22、tm而不是而不是http:/2)链接目标尽可能简单链接目标尽可能简单如如http:/,而不是,而不是http:/ v图像标记图像标记:将图形将图形文件嵌入到网页文档中的当前位置文件嵌入到网页文档中的当前位置v说明:网页中插入图像有两种方法,一是插入说明:网页中插入图像有两种方法,一是插入一个一个元素,二是将图像作为背景嵌入到网元素,二是将图像作为背景嵌入到网页中页中v由于由于CSS的背景属性的功能很强大,现在更推荐的背景属性的功能很强大,现在更推荐将所有的图像都作为背景嵌入。如果图像是通将所有的图像都作为背景嵌入。如果图像是通过过元素插入,则可以在浏览器上通过按住元素插入,则可以在浏览器上通过
23、按住鼠标左键拖动选中图片,或者将它拖动到地址鼠标左键拖动选中图片,或者将它拖动到地址栏里,如果作为背景嵌入,则无法选中图片栏里,如果作为背景嵌入,则无法选中图片图像标记图像标记 网页中支持的图像文件格式网页中支持的图像文件格式 v网页中可以插入的图像文件的类型有网页中可以插入的图像文件的类型有jpg格式,格式,gif格式和格式和png格式。这些文件都是压缩格式的图像格格式。这些文件都是压缩格式的图像格式,其中式,其中jpg格式适合用于网页中较大尺寸的格式适合用于网页中较大尺寸的真彩真彩色图片色图片,是一种有损压缩的格式;,是一种有损压缩的格式;gif格式一般用格式一般用于较小尺寸的图片,是一种
24、无损压缩的格式,只于较小尺寸的图片,是一种无损压缩的格式,只支持支持256色,色,GIF在存储非连续色调的图像或具有在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色,大面积单一色彩的图像方面比较出色,gif格式的格式的特点是可以实现特点是可以实现gif动画动画,和,和gif全透明的图像全透明的图像;png格式可以用于格式可以用于alpha透明效果透明效果,但,但IE6不能够支不能够支持。持。标记的常见属性标记的常见属性v是一个行内元素,插入是一个行内元素,插入元素不会导致任何换元素不会导致任何换行。下面是行。下面是标记的常见属性:标记的常见属性:img的属性的属性含含义义src图图
25、片文件的片文件的url地址地址alt当当图图片无法片无法显显示示时显时显示的替示的替换换文字文字title鼠鼠标标停留在停留在图图片上片上时显时显示的示的说说明文字明文字align图图片的片的对齐对齐方式,默方式,默认为认为基基线对齐线对齐,即,即图图片的片的下下边缘边缘和文字的下和文字的下边缘对齐边缘对齐width、height图图片在网片在网页页中的中的宽宽和高和高在单元格中插入图像的方法在单元格中插入图像的方法 v对于表格布局的网页,所有的元素都是放置在单对于表格布局的网页,所有的元素都是放置在单元格中的,图像也不例外,要在单元格中插入图元格中的,图像也不例外,要在单元格中插入图像,且单
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第3章1 html标记 html 标记
限制150内