第0章_HTML基础_1(精品).ppt

《第0章_HTML基础_1(精品).ppt》由会员分享，可在线阅读，更多相关《第0章_HTML基础_1(精品).ppt（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第0章HTML基础0.1HTML概述0.2HTML标记0.3HTML表单的设计第1节HTML概述用用HTMLHTML编写的超文本文件称为编写的超文本文件称为HTMLHTML文件，扩文件，扩展名可以是展名可以是htmhtm、htmlhtml、shtmshtm或或shtmlshtml。一、一、HTML的特点的特点HTML语言独立于操作系统平台（如Unix，Linux，Windows等）。自1990年以来，HTML就一直被用作WordWideWeb，即万维网WWW的信息表示语言。HTML语言与其它编程语言（如C和Java）不同，具有以下特点：（1）超文本性；（2）标记性；（3）简单性；（4）可扩展性

2、；（5）平台无关性二、二、HTML基本结构基本结构1）HTML基本语法HTML文件表现力十分丰富，语法结构却比较简单。HTML文件是由标记和内容组成，形式如下：文本或超文本内容2)HTML文件基本结构HTMLHTML文档结构可以划分为两个基本部分：文文档结构可以划分为两个基本部分：文件头件头(head)(head)和文件体和文件体(body)(body)。一个典型的。一个典型的HTMLHTML文文档结构如图所示。档结构如图所示。图0-2HTML文档结构图HTML文档结构图一个说明HTML结构的网页n n HTMLHTML基本结构：基本结构：n n n nn n这是标题部分n nn nn n你好

3、，这是正文部分！你好，这是正文部分！n nn n实例实例1：HTML基本结构基本结构.html三、三、三、三、HTML文档的编写文档的编写HTMLHTML文档的编写是非常容易的，可以使用任何文档的编写是非常容易的，可以使用任何文本编辑工具来编写，保存时的文件扩展名可以是文本编辑工具来编写，保存时的文件扩展名可以是htmhtm、htmlhtml、shtmshtm或或shtmlshtml。标记标记(Tags)(Tags)，通常又叫着标签，它是，通常又叫着标签，它是HTMLHTML文文档的重要组成部分。可以说没有标记就没有形式多档的重要组成部分。可以说没有标记就没有形式多样化的样化的WebWeb页面

4、效果。页面效果。一、一、一、一、基本标记基本标记基本标记基本标记1 1）标记放在标记放在HTMLHTML文档的最前面，用来表示文档的最前面，用来表示HTMLHTML文档的开始，而文档的开始，而标记放在标记放在HTMLHTML文档文档的最后，用来表示的最后，用来表示HTMLHTML文档的结束，这两个标记文档的结束，这两个标记必须一起使用。必须一起使用。第第2节节 HTML标记标记2）和是HTML文档头部标记，在此标记对之间可以使用、等标记。n有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表所示。3)是HTML文档的主

5、体部分，在此标记对之间可包含、等众多的标记标记属性功能background=URL设置网页的背景图片bgcolor=colorvalue设置网页的背景颜色text=colorvalue设置文本的颜色link=colorvalue设置尚未被访问过的超文本链接的颜色，默认为蓝色vlink=colorvalue设置已被访问过的超文本链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击的瞬间的颜色，默认为红色bgproperties=fixed设置背景是否随滚动条滚动leftmargin=size设置网页左边的空白topmargin=size设置网页上方的空白margingwi

6、dth=size设置网页空白的宽度marginheight=size设置网页空白的高度表BODY标记属性值用法示例：属性属性用途用途示例示例body 设设置背景置背景颜颜色色body 红红色背景色背景bodytext=设设置文本置文本颜颜色色bodytext=蓝蓝色文本色文本bodylink=设设置置链链接接颜颜色色bodylink=链链接接为蓝为蓝色色body 设设置已置已经经使用的使用的链链接接的的颜颜色色body 4）是标题标记，这一对标记包含的内容将显示在浏览器的标题栏上。5）附加信息标记，这一标记包含的内容将不显示。主要包括name和content属性以及HTTP头信息。注意：注意：

7、标志对只能放在标志对只能放在标志对之间。标志对之间。下面是一个综合的例子，说明了HTML文档中最基本标志的使用。显示在浏览器最上边蓝色条中的文本红色背景、蓝色的文本实例2：title.html二、二、格式标记格式标记格式标记主要用于修饰如何显示文本之类的信息，格式标记主要用于修饰如何显示文本之类的信息，这些标记都被用于这些标记都被用于标记对之间。标记对之间。1 1）标记对是用来创建一个段落，在此标记对之间加标记对是用来创建一个段落，在此标记对之间加入的文本将按照段落的格式显示在浏览器上。入的文本将按照段落的格式显示在浏览器上。标记也可标记也可以没有结束标记，可单独使用。以没有结束标记，可单独使

8、用。标志还可以使用标志还可以使用alignalign属性，它用来说明对齐方式，语属性，它用来说明对齐方式，语法是法是。alignalign可以是可以是LeftLeft（左对齐）、（左对齐）、CenterCenter（居中）和（居中）和 RightRight（右对齐）三个值中间的一个。（右对齐）三个值中间的一个。如：如：表示标志对中的文本使用居表示标志对中的文本使用居中对齐方式。中对齐方式。2 2）文字居中对齐文字居中对齐3)3)是在显示内容中产生一个换行的标记，它没有是在显示内容中产生一个换行的标记，它没有结束标记。结束标记。4 4）标记对用来排版大块标记对用来排版大块HtmlHtml段落，是

9、分区段落，是分区显示标记显示标记,也用于格式化表。也用于格式化表。此标志对的用法与此标志对的用法与标志对非常相似，同样标志对非常相似，同样有有alignalign对齐方式属性对齐方式属性.格式标志一个格式标志的例子芒果网与深航国旅战略联盟，打造深圳旅游新亮点!SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。SPAN是一个内联元素，但SPAN就没有的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。SPAN和DIV的区别在于，DIV是一个块级元素，可

10、以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN5 5）*三、文本标记三、文本标记文本字体格式如斜体、黑体字、下划线等由文本文本字体格式如斜体、黑体字、下划线等由文本标记控制。标记控制。1 1）此标志是在浏览器中浏览时，按照文档中预先排好此标志是在浏览器中浏览时，按照文档中预先排好的形式显示内容。的形式显示内容。2 2）标题标记，标题标记，i i取值范围为取值范围为1616。是字号最大是字号最大的标题，而的标题，而则是字号最小的标题。则是字号最小的标题。实例实例实例

11、实例3 3 3 3：预定义格式标记：预定义格式标记：预定义格式标记：预定义格式标记 显示显示显示显示<p>lt;p>与与与与<pre>lt;pre>的区别的区别的区别的区别春晓春晓春晓春晓春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声，花落知多少。夜来风雨声，花落知多少。夜来风雨声，花落知多少。春晓春晓春晓春晓春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声，花落知多少。夜来风雨声，花落知多少。夜来

12、风雨声，花落知多少。实践训练：标题实例实践训练：标题实例实践训练：标题实例实践训练：标题实例 标题示例！标题示例！标题示例！标题示例！。3 3）、用来使文本以黑体字的形式输出；用来使文本以黑体字的形式输出；用用来使文本以斜体字的形式输出；来使文本以斜体字的形式输出；用来使文本用来使文本以下加一划线的形式输出；以下加一划线的形式输出；使用文使用文本字体加粗本字体加粗;用于文本加删除线。用于文本加删除线。4 4）是字体标记，它可以对输出文本的字体是字体标记，它可以对输出文本的字体大小、颜色等进行设置。大小、颜色等进行设置。fontfont标记主要有标记主要有sizesize、colorcolor和

13、和faceface三个属性。三个属性。标记属性功能size=size设置文字的大小face=fontstyle设置字体color=colorvalue设置文字的颜色属性值图字符格式设置标记的使用实践训练：实践训练：实践训练：实践训练：5 5）使网页的文字进行滚动，滚动方使网页的文字进行滚动，滚动方式可以横向，也可纵向。式可以横向，也可纵向。属性值标记属性功能align相对周围文字的垂直对齐方式，top、middle和bottombehavior滚动方式，scroll（连续滚动）、slide（滚一次）和aliternate（来回滚）direction文字的滚动方向，left、right、up和d

14、own文字的滚动次数loop滚动时移动的像素个数scrollamount两次连续滚动时的时间间隔scrolldelay实例：实例：实例：实例：标记属性功能align=alignstyle设置对齐方式。alignstyle的取值为：left，right，centersize=size设置线条宽度（即高度）width=size设置线条长度color=colorvalue设置线条颜色，默认为黑色noshade设置线条是否有阴影表属性值 四、水平线标记四、水平线标记标记是在标记是在HTMLHTML文档中加入一条水平线。文档中加入一条水平线。图像与水平线的标记示例五、五、建立列表建立列表1有序列表有序列

15、表格式：功能：建立有序列表。TypeType可取：可取：A A、a a、1 1、i i和和I I2无序列表无序列表格式：功能：建立无序列表。TypeType可可取取：disc(disc(实实心心圆圆点点)、circle(circle(空空心心圆圆点点)和和square(square(实心方块实心方块)u标志对用来创建一个表有数字的列表u标志对用来创建一个标有圆点的列表u标志对只能在或标志对之间使用，此标志对用来创建一个列表项，若放在之间则每个列表项加上一个数字，若放在之间则每个列表项加上一个圆点。实例：实例：有序与无序中国城市北京上海广州美国城市华盛顿芝加哥纽约实践训练：实践训练：实践训练：实

16、践训练：3 3自定义列表自定义列表自定义列表自定义列表除了上述两种列表以外，还可以根据需要自定义列表样式。格式为：除了上述两种列表以外，还可以根据需要自定义列表样式。格式为：.用来创建一个普通的列表用来创建列表中的项目名称用来创建列表中对项目的解释和都必须放在标志对之间。一个普通的列表中国城市北京上海广州美国城市华盛顿芝加哥dd纽约实例：实例：六、注释标记六、注释标记n n格式：功能：注释标记。实例：注释标记实例：注释标记 标记的使用标记的使用标记的使用标记的使用-三种标记的使用！三种标记的使用！三种标记的使用！三种标记的使用！我在中间！我在中间！我在中间！我在中间！中间中间中间中间我在左边！

17、我在左边！我在左边！我在左边！左边左边左边左边我在右边！我在右边！我在右边！我在右边！右边右边右边右边七、七、图像标记图像标记图像在网页制作中是非常重要的一个方面，图像在网页制作中是非常重要的一个方面，HTMLHTML语言也专门提供了语言也专门提供了 标记来处理图像的输标记来处理图像的输出。图像标记的基本格式是：出。图像标记的基本格式是：n n当使用当使用插入图像时，含有的属性如表所示插入图像时，含有的属性如表所示标记属性功能src=URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height=size设置图像高度alt=txt设置在图像未载入前图片位置显示的文字b

18、order=size设置图像边框，缺省为0align=alignstyle对齐方式。取值：top，middle，bottom，left，righthspace=size设置图片左右边沿和文字的空隔vspace=size设置图片上下边沿空隔八、表格标记八、表格标记 表格标记是表格标记是HTMLHTML中非常重要的标记之一。多数中非常重要的标记之一。多数网页都是使用表格或多重表格来设计，主要是因为网页都是使用表格或多重表格来设计，主要是因为表格可以固定文本或图像等网页元素的输出。表格可以固定文本或图像等网页元素的输出。1 1）标记对用来创建一个表格。标记对用来创建一个表格。标志对用来创建一个表格，

19、下表所示的是属性：属性属性用途用途table=设设置表格的背景色置表格的背景色设设置置边边框的框的宽宽度，若不度，若不设设置置宽宽度默度默认值为认值为0 0table=设设置置边边框的框的颜颜色色设设置表格的置表格的宽宽度，度，单单位用位用绝对绝对像素像素值值或或总总宽宽度的百分比度的百分比标记属性功能height=size设置表格的高度align=alignstyle设置对齐方式background=URL设置表格背景图片cols=size设置表格的列数cellpadding=size设置单元格的填充距表属性值cellspacing=size设置表格的单元格之间的空间大小2），标记对用来创建

20、表格中的行，只能放在标记对用来创建表格中的行，只能放在标记对之间使用。标记对之间使用。标记对用标记对用来创建表格中行中的每一个单元格来创建表格中行中的每一个单元格。3）标记对用来设置表格头，通常是黑体居中标记对用来设置表格头，通常是黑体居中文字。文字。、和和标志对标志对之间的关系之间的关系标标标标志志志志含含含含义义义义最外最外最外最外层层层层，创创创创建一个表格建一个表格建一个表格建一个表格 创创创创建一行建一行建一行建一行要要要要输输输输出的文本只能放在此出的文本只能放在此出的文本只能放在此出的文本只能放在此处处处处要要要要输输输输出的文本只能放在此出的文本只能放在此出的文本只能放在此出的

21、文本只能放在此处处处处要要要要输输输输出的文本只能放在此出的文本只能放在此出的文本只能放在此出的文本只能放在此处处处处创创创创建一个建一个建一个建一个单单单单元个（元个（元个（元个（这这这这里里里里总总总总共共共共创创创创建建建建了三个了三个了三个了三个单单单单元格）元格）元格）元格）/行末尾行末尾行末尾行末尾最外最外最外最外层层层层标记属性功能bgcolor=colorvalue设置行背景颜色align=alignstyle设置行对齐方式valign=valignstyle设置单元格垂直对齐方式行的属性align是水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（

22、右对齐）。valign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)、bottom(靠底部对齐)。/的主要属性主要属性标记属性功能bgcolor=colorvalue设置单元格背景颜色rowspan=num设置单元格所占的行数colspan=num设置单元格所占的列数align=alignstyle设置对齐方式valign=valignstyle设置单元格垂直对齐方式width=size设置单元格宽度height=size设置单元格高度width是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan设置一个表格单元格跨占的列数（缺省值为1）。rowspan设置一个表格单元格跨占的行数（缺省值为1）。实例：实例：表格标志的综合示例表格标志的综合示例意大利意大利英格兰英格兰西班牙西班牙AC米兰米兰拂罗伦莎拂罗伦莎曼联曼联纽卡斯尔纽卡斯尔巴塞罗那巴塞罗那皇家社会皇家社会尤文图斯尤文图斯桑普多利亚桑普多利亚利物普利物普阿申纳阿申纳皇家马德里皇家马德里.拉奇奥拉奇奥国际米兰国际米兰切尔西切尔西米德尔斯堡米德尔斯堡马德里竞技马德里竞技.图表格的嵌套DreamweaverDreamweaver实践训练：实践训练：实践训练：实践训练：