《上HTML标记》PPT课件.ppt
《《上HTML标记》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《上HTML标记》PPT课件.ppt(70页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第三章第三章 HTML标记功能详述标记功能详述 本章要点本章要点p文本格式标记文本格式标记p文本修饰标记(字体标记)文本修饰标记(字体标记)p列表标记列表标记 p超链接标记超链接标记p图像和多媒体标记图像和多媒体标记HTML标记基础标记基础p2.什么是标记什么是标记?标记是网页文档中的一些有特定意义的符号。标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。这些符号指明如何显示文档中的内容。标记可以具有相应属性即各种参数,如标记可以具有相应属性即各种参数,如size、color、text、width和和noshade等等。例如:例如:文本格式标记文本格式标记网页中添加文本
2、的方法网页中添加文本的方法网页中添加文本的方法网页中添加文本的方法 文本格式标记是网页中定义文本格式的标记文本格式标记是网页中定义文本格式的标记1)直接写文本;)直接写文本;2)用段落标记)用段落标记格式化文本,各段落格式化文本,各段落文本将分行显示;文本将分行显示;3)用标题标记)用标题标记格式化文本,作用:格式化文本,作用:定义第定义第n号标题字体,号标题字体,n=16,n值越大,字越小;值越大,字越小;文本将变为粗体显示,可看成特殊的段落标记;文本将变为粗体显示,可看成特殊的段落标记;4)用预格式化标记用预格式化标记格式化文本,格式化文本,标记内的文本将按原来的格式显示,保留文本标记内的
3、文本将按原来的格式显示,保留文本中的所有空格、换行和定位符;中的所有空格、换行和定位符;直接写文本直接写文本 电子商务专业学习电子商务专业学习 网页网页设计课程概述设计课程概述电子商务专业学习网页设计的意义电子商务专业学习网页设计的意义电子商务顾名思义就是在电子商务顾名思义就是在internet上做生意,上做生意,商品展示,广告宣传、发布商品展示,广告宣传、发布用段落标记用段落标记格式化文本格式化文本 电子商务顾名思义就是电子商务顾名思义就是在在internet上做生意,商品展示,广告宣上做生意,商品展示,广告宣传、发布供求信息等活动实现的途径就是传、发布供求信息等活动实
4、现的途径就是网页。网页。因此学习网页设计技术是从事电子商务因此学习网页设计技术是从事电子商务活动的基石。活动的基石。用标题标记用标题标记格式化文本格式化文本第第1号标题字体号标题字体 第第3号标题字体号标题字体 第第4号标题字体号标题字体 第第5号标题字体(居号标题字体(居中)中)用预格式化标记用预格式化标记格式文本格式文本 网页设计师这一职业在今后来说网页设计师这一职业在今后来说还是有需求的。还是有需求的。因为随着网络越来越普及,因为随着网络越来越普及,像我国的房地产市场像我国的房地产市场文本的强制换行文本的强制换行电子商务顾名思义就是在电子商务顾名思义就是在internet上做生意,上做生
5、意,商品展示,广告宣传、发布商品展示,广告宣传、发布供求信息等活动实现的途径就是网页。供求信息等活动实现的途径就是网页。p强制不换行标记强制不换行标记,常,常用于一串数字用于一串数字 文本中的空格文本中的空格p标记标记(除外除外)内内字符前的空格字符前的空格浏览器浏览器将全部忽略,将全部忽略,字符与字符间的空格字符与字符间的空格浏览器浏览器将只保留一个空格显示,将只保留一个空格显示,回车回车视为一个空视为一个空格,块级元素之间忽略所有空格。如果要格,块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格输入多个空格或需要在字符之前输入空格需在源代码中插入需在源代码中插入 
6、nbsp;(表示一个半角(表示一个半角空格)。空格)。p行内元素可看成一个字符行内元素可看成一个字符 文本中的转义字符文本中的转义字符p在在HTML源代码中,有些字符有特别的含义,源代码中,有些字符有特别的含义,比如小于号比如小于号“”就表示就表示HTML 标记的开始,标记的开始,html源代码中的源代码中的“”是不会在浏览器中显示的,是不会在浏览器中显示的,如果要浏览器显示这些字符,就需要输出他们如果要浏览器显示这些字符,就需要输出他们对应的转义字符。对应的转义字符。p例如:例如:<表示表示,"表示表示“,&表示表示&, 表示空格等;表示空格等;通常,一个字符
7、实体是由三部分组成的:通常,一个字符实体是由三部分组成的:(1)一个)一个“&”符号符号(2)字符专用名称或者字符代号)字符专用名称或者字符代号(3)一个)一个“;”符号符号在在DW的设计视图中输入这些特殊字符,的设计视图中输入这些特殊字符,DW会自动在代会自动在代码视图添加它们对应的转义字符码视图添加它们对应的转义字符DW中插入中插入HTML文本元素的快捷键文本元素的快捷键 1.Enter 插入插入 (硬回车)(硬回车)2.shiftenter 插入插入 (软回车)(软回车)3.Ctrlshiftspace 插入一个插入一个 综合实例综合实例 分段换行与预格式分段换行与预
8、格式 以下是直接写文本的情况:以下是直接写文本的情况:星期一、星期二、星期三、星期四、星期一、星期二、星期三、星期四、星期五、星期六、星期日。星期五、星期六、星期日。以下是使用了三个换行标记的情况:以下是使用了三个换行标记的情况:星期一、星期二、星期一、星期二、/星期三、星期四、星期三、星期四、/星期五、星期六、星期日。星期五、星期六、星期日。/以下使用分段标记(分为两段):以下使用分段标记(分为两段):星期一、星期二、星期三、星期一、星期二、星期三、星期四、星期四、星期五、星期六、星期日。星期五、星期六、星期日。以下使用预格式:以下使用预格式:星期一、星期二、星期三、星期四、星期一、星期二、
9、星期三、星期四、星期五、星期六、星期日。星期五、星期六、星期日。跑马灯跑马灯标记标记p一个特殊的文本标记,能使其中的文本在一个特殊的文本标记,能使其中的文本在浏览器屏幕上不断滚动。浏览器屏幕上不断滚动。示例示例p其中其中behavior=“alternate”设置滚动方式为设置滚动方式为来回滚动,设置为来回滚动,设置为scroll表示循环滚动,表示循环滚动,设置为设置为slide表示滚动到目的地就停止。表示滚动到目的地就停止。direction属性用于控制滚动的方向,可以属性用于控制滚动的方向,可以上下滚动或左右滚动。上下滚动或左右滚动。loop设置滚动的次设置滚动的次数,数,loop为为0表
10、示不断滚动。表示不断滚动。scrollamount属性设置滚动的速度,属性设置滚动的速度,scrolldelay属性设属性设置两次滚动间的间隔时间。置两次滚动间的间隔时间。示例示例 测试测试:网页设计与网页设计与制作学习:可以将制作学习:可以将swf文件下载下来用文件下载下来用flash播放播放器全屏播放以达到最好效果,也可以在器全屏播放以达到最好效果,也可以在IE浏览浏览器中按器中按F11键达到全屏效果键达到全屏效果.水平线标记水平线标记 p标记是在标记是在HTML文档中加入一条水文档中加入一条水平线,它可以直接使用,具有平线,它可以直接使用,具有size、color、
11、width和和noshade属性。属性。size是设置水平线是设置水平线的厚度,而的厚度,而width是设定水平线的宽度,是设定水平线的宽度,默认单位是像素。默认单位是像素。noshade属性用来加入属性用来加入一条没有阴影的水平线。一条没有阴影的水平线。p文本修饰标记(字体标记)文本修饰标记(字体标记)文本修饰标记文本修饰标记p文本修饰标记是对文本的外观进行修饰的标记,文本修饰标记是对文本的外观进行修饰的标记,如让文字变色,加大,变粗体,添加下划线等。如让文字变色,加大,变粗体,添加下划线等。p1)font标记:标记:定义文字的各种属性。定义文字的各种属性。例:例:pp注意:文本修饰标记没有
12、注意:文本修饰标记没有align属性属性(说明说明)加粗、倾斜与下划线标记加粗、倾斜与下划线标记p2)加粗、倾斜与下划线的定义标记()加粗、倾斜与下划线的定义标记(b、i、u)使用加粗、倾斜与下划线标记(使用加粗、倾斜与下划线标记(b、i、u)的)的组合组合,可对文本文字进一步修饰。可对文本文字进一步修饰。如:如:此处以红色此处以红色五号字粗体显示五号字粗体显示上标(上标(sup)和下标()和下标(sub)标记)标记 p用于书写数学公式或分子式。用于书写数学公式或分子式。p如:如:H2O X2p由于字体标记属于对文本由于字体标记属于对文本外观外观进行修饰的进行修饰的标记,是由于当时标记,是由于
13、当时CSS语言尚未出现时语言尚未出现时html定义的表现的范畴,随着定义的表现的范畴,随着CSS的出现,的出现,这些表现功能均可以由这些表现功能均可以由CSS完成,所以不完成,所以不含有语义的字体标记慢慢过时了。含有语义的字体标记慢慢过时了。列表标记列表标记 列表标记列表标记p为了合理地组织文本,网页中常常要用到为了合理地组织文本,网页中常常要用到列表。在列表。在HTML中可以使用的列表标记有中可以使用的列表标记有无序列表、有序列表和定义列表三种。无序列表、有序列表和定义列表三种。p无序列表无序列表(Unordered List),p有序列表有序列表(Ordered List),p定义列表定义
14、列表(Defined List),嵌套的无序列表示例嵌套的无序列表示例 文章文章 CSS教程教程 DOM教程教程 XML教程教程 参考参考 XHTML XMLCSS 有序列表有序列表(Ordered List)文章文章 CSS教程教程 DOM教程教程 XML教程教程 Flash教程教程 定义列表定义列表(Defined List)湖南城市湖南城市长沙长沙衡阳衡阳常德常德 湖北城市湖北城市武汉武汉襄樊襄樊宜昌宜昌超链接标记超链接标记 超链接标记超链接标记 p超链接是网页的基本元素,网页正是通过超链接是网页的基本元素,网页正是通过超链接而相互链接组织成一个网站,并将超链接而相互链接组织成一个网站,
15、并将internet上的各个网站联系在一起。浏览上的各个网站联系在一起。浏览者通过超链接选择阅读路径。者通过超链接选择阅读路径。p超链接是通过超链接是通过URL(统一资源定位器)来(统一资源定位器)来定位目标信息的。定位目标信息的。URL包括包括4部分:网络部分:网络协议、域名或协议、域名或IP地址、路径和文件名。地址、路径和文件名。pURL分为绝对分为绝对URL和相对和相对URL 绝对绝对URL p 绝对绝对URL是采用完整的是采用完整的URL来规定文件来规定文件在在internet上的精确地点,包括完整的协上的精确地点,包括完整的协议类型、计算机域名或议类型、计算机域名或IP地址、包含路径
16、地址、包含路径信息的文档名。书写格式为:协议:信息的文档名。书写格式为:协议:/计计算机域名或算机域名或IP地址地址/文档路径文档路径/文档名文档名p例如:例如:http:/ p相对相对URL是相对于包含超链接页的地点来规定文是相对于包含超链接页的地点来规定文件的地点。件的地点。p如链接到同一路径下的文档,直接输入文件名即如链接到同一路径下的文档,直接输入文件名即可,如可,如news.htmp如链接到同一路径下子文件夹的文档,则先输入如链接到同一路径下子文件夹的文档,则先输入子文件夹名和斜杠(子文件夹名和斜杠(/),再输入文件名,如),再输入文件名,如yule/news.htmp如链接到上一级
17、路径中,要在文件名前输入如链接到上一级路径中,要在文件名前输入“./”,如,如“./news.htm”,其中,其中“.”表示表示上级目录,上级目录,“.”表示本级目录。表示本级目录。相对相对URL示例示例wgzxyuleindex.htmoa.htmpop.htmnews.htm1.href=yule/news.htm212.href=./oa.htm3.href=“pop.htm”3相对相对URL的优势的优势p可以看出相对可以看出相对URL方式比较简便,不需输方式比较简便,不需输入一长串完整的入一长串完整的URL;另外相对路径还有;另外相对路径还有一个非常重要的特点是:可以毫无顾忌地一个非常
18、重要的特点是:可以毫无顾忌地修改修改Web网站的域名或网站在服务器硬盘网站的域名或网站在服务器硬盘中的存放目录。中的存放目录。超链接的种类根据源对象划分超链接的种类根据源对象划分 1)用文本做超链接用文本做超链接:首页首页2)用图像做超链接:用图像做超链接:3)文本图像混合做链接:文本图像混合做链接:格力空调格力空调1型型该方法在商品展示的网站上较常用。该方法在商品展示的网站上较常用。使用图像做超链使用图像做超链接后,图像会自接后,图像会自动增加边框,可动增加边框,可设置边框为设置边框为0去掉去掉超链接的种类根据源对象划分超链接的种类根据源对象划分24)热区链接热区链接:使用:使用map在图像
19、上定义一幅地图,地在图像上定义一幅地图,地图上可包含多个热区,每个热区用图上可包含多个热区,每个热区用area单标记定单标记定义,义,area的的shape属性定义了热区的形状,属性定义了热区的形状,coords定义了热区的坐标点,定义了热区的坐标点,href定义了热区链接的文定义了热区链接的文件。同时件。同时img标记用标记用usemap指明用了哪幅地图指明用了哪幅地图 超链接的种类根据超链接的种类根据href的取值的取值1)链接到其他网页或文件链接到其他网页或文件(jpg,rar等)等)内部链接内部链接返回首页返回首页外部链接外部链接 网易网网易网站站 下载链接下载链接点击下点击下载载2)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 上HTML标记 HTML 标记 PPT 课件
限制150内