《PHP开发从入门到精通-电子教案-袁鑫 第3章》由会员分享，可在线阅读，更多相关《PHP开发从入门到精通-电子教案-袁鑫 第3章（16页珍藏版）》请在金锄头文库上搜索。
1、第3章 HTML基础,HTML即Hypertext Marked Language（超文本标记语言），是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX、Windows等）。自1990年以来HTML就一直被用作WWW的信息表示语言，用于描述Homepage的格式设计和它与WWW上其他Homepage的连接信息。使用HTML语言描述的文件需要通过浏览器显示出效果。 所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界各地主机的文件的连接。HTML只不过是组合成一个文本文件的一系列标
2、签。,【例3-1】HTML列表标记实例,换行标记 是一个很简单的标记，它没有结束标记，用来创建一个回车换行。在的使用上还有一定的技巧：如果把加在标记对的外边，将创建一个大的回车换行，即前边和后边的文本的行与行之间的距离比较大；若放在的里边，则前边和后边的文本的行与行之间的距离将比较小。 缩进标记 在标记对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。 列表 在HTML中列表分为三种：无序列表、有序列表和定义列表。无序列表用来定义，格式为： 无序列表1 无序列表2 无序列表3 ,【例3-1】HTML列表标记实例, 标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、col
3、or、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。color属性不再多讲。noshade属性不用赋值，而是直接加入标记即可使用，它是用来加入一条没有阴影的水平线（不加入此属性，水平线将有阴影）。 ,【例3-2】HTML文本标记实例,HTML中有许多用于文本字体的形状、大小、颜色等描述的标记。 标记对用来对文本进行格式化处理。被包围在pre元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体。 HTML语言提供了一系列对文本中的标题进行操作的标记对：，即共有6对标题的标记对。是最大的标题，而则是最小的标题，也即标记中h后面的数
4、字越大标题文本越小。如果HTML文档中需要输出标题文本，就可以使用这6对标题标记对中的任何一对。,【例3-2】HTML文本标记实例, 经常使用Word的人对这3对标记对一定很快就能掌握。用来使文本以黑体字的形式输出；用来使文本以斜体字的形式输出；用来使文本加下划线的形式输出。 这些标记对的用法和上面的一样，差别只在于输出的文本字体不太一样。用来输出打字机风格字体的文本；用来输出引用方式的字体，通常是斜体；用来输出需要强调的文本（通常是斜体加粗体）；用来输出加重文本（通常也是斜体加粗体）。,【例3-2】HTML文本标记实例, 是一对很有用的标记对，它可以对输出文本的字体大小、颜色进行随意地改变，
5、这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小，可以取值：1、1和+1；color属性则用来改变文本的颜色，颜色取值十六进制RGB颜色码或HTML语言给定的颜色常量名。如： 表示即将显示的字符为黄色五号字。 表示即将显示的字符为灰色三号字。 标记通常用于说明文档的作者、与作者联系的方法（如电子邮件地址）和修订日期，它一般是一个文件的最后部分。,【例3-3】HTML图像标记实例,本例主要涉及两个标记：图像标记和链接标记，标记会在【例3-5】中详细说明，在此不做解释，重点讲解图像标记。 在Web页面中，图像是必不可少的一个元素。图像的标记为，语法
6、格式如下： 其中各属性的含义如下： src：图像的URL地址。 alt：在浏览器未完全读入图像或者浏览器显示不出图像时，在图像位置显示的文字，同时也是当鼠标移动到图像上时显示的文本。 width：图像的宽度，默认单位也是像素。 height：图像的高度，默认单位也是像素。 align：图像和文字的对齐方式，有left、middle、right、top和bottom 5种方式。 border：图像边框厚度，默认单位是像素。 name：图像的名称。,【例3-4】HTML表格标记实例,标记对用来创建一个表格，它的属性如表3-2所示。 表3-2 标记的属性,【例3-5】HTML链接标记实例,超级链接是
7、HTML的基本结构，它是指把并不连续的两段文字或者两个文件联系起来。网页中超级链接的分类有很多方式，有的分为超文本与超链接，有的分为外部链接、内部链接、邮件链接和锚记链接以及空链接。 链接的语法格式 链接显示的文本 href属性：本标记对的属性href是无论如何不可缺少的，标记对之间加入需要链接的文本或图像（链接图像即加入标记）。href的值可以是URL形式，即网址或相对路径，也可以是mailto:形式，即发送E-mail形式。 target属性：此属性是指定链接的地址打开窗口的形式，共有4个取值。,【例3-6】HTML表单标记实例, 标记对用来创建一个表单，也即定义表单的开始和结束位置，在标
8、记对之间的一切都属于表单的内容。标记具有action、method和target属性。具体如表3-5所示。,【例3-7】HTML框架标记实例保护环境网站,框架是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个HTML文件。即每个HTML文件占据一个框架，而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架，也即是一个包含多个HTML文档的HTML文件（我们称之为框架集）。框架通常的使用方法是在一个框架中放置导航栏目（带可供选择的链接），然后将导航项所对应的链接跳转目标HTML文件显示在另一个框架中。我们平时用到的邮箱和聊天室很多都是采取框架结构来布局的。 框架的基本
9、结构如下： 框架的基本结构分为两部分：标记符frameset和标记符frame，其中frameset相当于前面实例中讲到的“房间”，专用的名词为“框架集”。所谓框架集就是指构造整个框架结构的文档，它不包含任何可以显示的内容，只包含如何组织各个框架的信息和框架中的初始页面信息。而每一个就是这个房间里面包含的每一个物品。,【例3-8】HTML多媒体标记实例,在主页中加入声音有三种方法： （1）用标记加入背景音乐。 （2）用标记嵌入声音。 （3）用ActiveX控件中的ActiveMovie控件。,【例3-9】标记实例,文字移动标记的应用非常广泛，既可以用于滚动文字，也可以用于滚动图片等元素。语法如
10、下： 滚动的文字或者图片等 标记有以下一些主要的属性： direction（方向）：定义滚动文本的移动方向。该属性有4种取值，分别为left（向左移动）、right（向右移动）、up（向上移动）、down（向下移动），默认值为left。 behavior（行为、方式）：定义滚动文本的滚动方式。该属性有3个取值，分别为scroll（一圈圈滚动）、slide（只滚动一次）和alternate（来回滚动），默认值为scroll。,loop（循环）：指定循环滚动的次数。若没有设置该值，则表示无限次循环。 scrollamout（滚动的速度）：用来设置滚动文本的速度。该属性的值是数字，数字越大，移动的越
11、快。 scrolldelay（滚动延时）：定义滚动字幕移动的延时。该属性的值是数字，单位是千分之一秒。 align（对齐方式）：定义滚动文本与周围其他页面元素之间的对齐方式。该属性有3个取值：top（顶端对齐）、middle（居中对齐）、bottom（底端对齐）。 bgcolor（背景颜色）：定义滚动文本的背景色。该属性的值可以是16进制数字（如#ff0000）或者具体的颜色名称（如red）等。 height（高度）和width（宽度）：定义滚动文本的尺寸。两个属性的值都是数字，表示像素数。 hspace（垂直间距）和vspace（水平间距）：定义滚动文本与周围页面元素之间的间隔。两个属性的值都是数字，表示像素数。 onmouseover与onmouseout：是两个行为，onmouseover表示当鼠标悬停在滚动文本上方时进行相应的操作；onmouseout表示鼠标移开滚动文本时进行相应的操作。本例的事件处理调用JavaScript语句来实现。,小结,本章的9个实例完整而又详细地讲解了HTML标记的语法与使用方法，从这些实例中可以掌握HTML中的大部分标记，为以后用PHP进行Web程序开发奠定扎实的基础。,
