1、第2章 超文本标记语言,2.1 HTML基础 2.2 文字设计 2.3 网页布局 2.4 加入网页元素 2.5 框架 2.6 表单,2.1 HTML基础,2.1.1 HTML概述 2.1.2 HTML文档的结构,返回首页,2.1.1 HTML概述,超文本标记语言（Hyper Text Makeup Language，简称HTML），是一种专门用来设计网页的标记语言。标记语言提供的是向文本文件中添加标记的规则，浏览器（Browser）可阅读并显示这些被标记过的文件。一个标准的HTML文件是由元素和一些要在网页上显示的信息组成的。,返回本节,信息 文字、图片、图像和声音等,元素 定义信息在网页中出
2、现的位置、形式、顺序及关系等。元素用标签表示。,标签 由“”组成。,2.1.2 HTML文档的结构,头部信息正文部分,HTML文档标记 格式： 功能：标志文档开始和结尾的标记。,HTML文件头标记 格式： 功能：用于包含文件的基本信息。,HTML文件主体标记 格式： 功能：文件主体标记。,文件头部包含的属性,1TITLE元素 格式：文字 功能：“文字”会显示在网页的标题栏上。,3META元素 格式： 功能：通过属性定义网页的基本信息。,2LINK元素 格式： 功能：指示该文件与其它文件的关系。,LINK元素的属性,href 被引用的HTML文件的URL。rel 正向关系。rev 逆向关系，通常
3、是文件作者的电子邮件地址。title 链接的标题。,META元素的属性,name 指定文件的一个说明，对应于content。 例如：,http-equiv 相当于http文件头，影响网页的传输。 自动刷新，并指向新网页。 例如： 效果是10秒后刷新网页，跳转到http:/yourlink 定义指向窗口。可以防止网页被别人作为一个FRAME页调用。,BODY元素的属性,bgcolor 用于设置背景颜色。,text 用于设置非可链接文字的颜色。,alink 用于设置正被单击的可链接文字的颜色。,link 用于设置可链接文字的颜色。,vlink 用于设置已经单击（访问）过的可链接文字的颜色。,bac
4、kground 用于设置背景图象，其属性值是图片存放的具体位置。,返回本节, 例4.1 例4.1：初识HTML,【例4.1】 初识HTML,结果,2.2 文字设计,2.2.1 文字样式 2.2.2 FONT元素,返回首页,2.2.1 文字样式,标题字体 使用H元素将文字显示成文章中的标题语法 .，其中n为1到6的数字，根据n的大小不同，将显示出不同大小的黑体字。H1最大，H6最小。标题文字独占一行。,物理字体 文字的粗体、斜体、下划线等形式。语法 .黑体字文本 .斜体字文本.加下划线文本 .打字机风格文本.上标.下标.或.加删除线文本,例题4.2,2.2.1 文字样式,逻辑字体 文字的大号字体
5、、强调字体、着重字体、引用字体等形式。语法 .强调字体.着重字体.代码字体.样例字体.键盘字体.变量字体.定义字体.引用字体.小号字体.大号字体,例题4.3,【例4.2】 标题字体,标题字体这是一级标题字体 这是二级标题字体 这是三级标题字体 这是四级标题字体 这是五级标题字体 这是六级标题字体,结果,【例4.3】 字体示例,字体示例这是粗体文本 x这是x的上标 这是强调字体 这是引用字体,结果,返回本节,2.2.1 FONT元素,标记通过属性设置字体的大小、颜色、字型等size 绝对字号：1、2、3、4、5、6、7相对字号：基准字号为绝对字号等于3的字体大小。 例如 或,格式 功能 设置字体
6、格式标记。,color 用于设置字体颜色，属性值为rrggbb，即16进制数表示的rgb颜色值，也可为下列预定义颜色：Black，Olive，Teal，Red，Fuchsia，Blue，Maroon，Navy，Gray，Lime，White，Green，Purple，Silver，Yellow，Aqua等。,face 用于设置文字字体的种类，属性值为客户端可获得的字体，如：Arial，TimeNewRoom，隶书，楷体_gb2312，仿宋_gb2312，黑体等。,例题4.4,【例4.4】 FONT元素,FONT元素这是7号黑体 这是6号隶书 ,结果,返回本节,2.3 网页布局,2.3.1 文字
7、布局 2.3.2 列表,返回首页,2.3.1 文字布局,1）段落标记 格式： 功能：设置段落标记。,2）换行标记 格式： 功能：强制换行。,3）文字对齐,例题4.5,文字布局这里左对齐这里居中这里右对齐 这里换两行这是右对齐二级标题字体 ,【例4.5】 文字布局,结果,返回本节,2.3.2 列表,1有序列表 格式：,2无序列表 格式：,2.3.2 列表,3自定义列表 格式：表题表元内容, 自定义列表标识。标识标题内容。标识表中内容。,例题4.6,列表网页布局 文字布局段落标记 换行标记 文字对齐 ,列表one 有序列表 two 无序列表 three 自定义列表,【例4.6】 列表显示,结果,返
8、回本节,2.4 加入网页元素,2.4.1 加入水平线 2.4.2 加入图像 2.4.3 加入超级链接 2.4.4 加入表格,返回首页,2.4.1 加入水平线,格式：,属性：,width 用于设置线条的宽度。,align 用于设置线条的对齐方式，属性值可 以是left、center和right。,size 用于设置线条的高度。,color 用于设置线条的颜色。,noshade 用于说明水平线为无阴影。,例题4.7,【例4.7】 在网页中加入水平线, 水平线这是高度是10的水平线这是长度比例是50%左对齐的水平线这是长度比例是50%右对齐的水平线这是无阴影的水平线,返回本节,结果,2.4.2 加入
9、图像,格式：,属性：,Width/height 设置图像的宽度和高度，单位为像素。,Border 设置图像边框的宽度，单位为像素,align 设置图像与文字混排时对齐方式 。,Vspace 调整图像与上下文本的距离，单位为像素。,Hspace 调整图像与左右文本的距离，单位为像素。,例题4.8, 图像与文字的对齐方式。 top： 图像的顶部与该行文本的顶部对齐。 middle： 图像的中部与该行文本的底部对齐。 bottom： 图像的底部与该行文本的底部对齐。 图像在网页中的位置。 left： 图像放在网页左边。 right： 图像放在网页右边。,【例4.8】 在网页中加入图片,加入图像这一张
10、图片与文字是“top”对齐这一张图片在右边，图片边框是2像素,返回本节,结果,2.4.3 加入超级链接,格式：,链接到其它地址,链接到本页的其它地方,链接到其它页的某一地方,在新窗口打开链接,例题4.9,页面上显示的提示文字,页面上显示的提示文字,页面上的提示文字,页面上的提示文字,例题4.10,例题4.11,【例4.9】 在网页中加入超级链接（一）,超级链接（一）点击这里可进入搜狐网站 点击这里可进入E盘下的例4_8.htm网页,结果,【例4.10】 在网页中加入超级链接（二）,超级链接（二）网络程序设计 第1章 第2章 第3章 第4章第1章 计算机网络基础计算机网络的基本概念 Window
11、s 2000 Server简介 Internet概述 IP地址第2章 IIS和PWS,【例4.10】 在网页中加入超级链接（二）,结果, IIS 5.0规划与管理 PWS配置与管理第3章 网页文件编辑器MSE Visual InterDev第4章 超文本标记语言HTML基础文字设计网页布局加入网页元素框架表单,【例4.11】 在网页中加入超级链接（三）,超级链接（三）绝对路径链接到例4_8.htm点击图片就可以相对路径链接到例4_8.htm,结果,返回本节,2.4.4 加入表格,定义表格的基本标签 . 定义表格. 定义表头，表头可以省略. 定义表行. 定义单元格，表格的具体数据,（1） bor
12、der 设置表格边框，取值为边框宽度，单位为像素，默认值为0。同时也可以设置下列几种值，void（无边框）、above（仅上边框）、below（仅下边框）、tasides（仅左右边框）、wides（仅上下边框）、lhs（仅左边框）、rhs（仅右边框）。,表格的属性,（2） bordercolor 改变边框颜色。,（3）width和height 设置表格的宽度和高度。单位可以是像素，也可以是上一层宽度的百分比。,2.4.4 加入表格,（4）bgcolor和background 设置表格背景颜色和背景图片,（5） 设置表元的边框颜色,（6） 设置表元间隙，属性值单位为像素。,（7） 设置表元内部空
13、白，属性值单位为像素。,2.4.4 加入表格,（8） 设定所跨行数和列数。,（9） align用来设置标题的横向对齐方式，属性值有left(左对齐)、right（右对齐）和center（居中对齐）。valign用来设置标题的纵向对齐方式，属性值有top（标题在上）和bottom（标题在下）。,例题4.12,(10) Align 表格内文字的布局,【例4.12】 表格设计,表格表格标题文字居顶文字居中文字居底文字居左文字居右,结果,返回本节,2.5 框架,2.5.1 设置框架 2.5.2 窗口间的相互操作 2.5.3 浮动窗口,返回首页,2.5.1 设置框架, . ,框架的基本结构,FRAMES
14、ET元素,功能 定义一个框架容器。,属性,框架窗口的边框颜色 语法：,是否显示边框 语法：，“#”取值单位为像素。，“#”取值1代表显示边框，取值0代表不显示边框。,FRAME元素,功能 在网页中定义框架。FRAME是一个单一标记，使用时放在FRAMESET的开始和结束标记之间。,主要属性值,（1）Src 设置要链接到的HTML文件,（2）Name 表示子窗口的名字,（3）设置网页空白语法： “#”取值单位为像素。,框架的外观设置,（5）不允许某窗口改变大小语法：,例题4.13,NOFRAMES 用于不支持框架结构的浏览器， 标签后的文字将显示在不支持框架结构的浏览器中。,（4）设置滚动条语法
15、：“#”的取值可以为yes（有滚动条），no（无滚动条）和auto（当需要时自动出现滚动条），默认值为auto。,【例4.13】 加入框架,例4_13.htm框架,【例4.13】 加入框架,结果,right.htmright 这是嵌套的右窗口,top.htmtop这是顶端窗口left.htmleft这是嵌套的左窗口 ,返回本节,2.5.2 窗口间的相互使用,1用于A标记 在A标记中，除了指定被链接的文件之外，还可以用TARGET属性指定被链接的文件显示在哪个子窗口。语法如下： A HREF = “ TARGET = “WINDOWS_NAME“,TARGET属性的使用,2用于BASE标记 如果
16、在同一个文件中有多个链接都指向同一个子窗口，那么使用BASE语句将更简单。语法如下： BASE TARGET= “WINDOWS_NAME“,3用于FORM标记 如果想把提交表单的结果放在指定的窗口，可以在FORM标记中使用TARGET属性。 FORM ACTION = “ TARGET = “WINDOWS_NAME“,例题4.14,例4_14.htm框架,【例4.14】 窗口间的相互操作用。,例4_14_left.htm第一章第二章第三章,【例4.14】 窗口间的相互操作用。,例4_14_right.htm网络程序设计,【例4.14】 窗口间的相互操作用。,第一章.htm第一章 计算机网络
17、的基本概念 Windows 2000 Server简介 Internet概述 IP地址,返回本节,结果,【例4.14】 窗口间的相互操作用。,2.5.3 浮动窗口,格式：浮动窗口内容,URL是指浮动窗口内初始状态显示的网页URL， name的值为窗口的表示名称。 IFRAME元素可用于和之间，这与标签不同。,例题4.15, 浮动窗口浮动窗口上面是一个浮动窗口,【例4.15】 浮动窗口,返回本节,结果,2.6 表单,2.6.1 表单基本结构 2.6.2 按钮 2.6.3 文本框和密码框 2.6.4 单选框和复选框 2.6.5 下拉列表和滚动列表 2.6.6 文本区域,返回首页,2.6.1 表单的
18、基本结构,格式： ,返回本节,功能：定义表单。在中要包含很多控件来实现整个表单的交互功能，另外标记还有很多的属性来协助完成此项功能。,按钮（button）是由INPUT元素来指定的 语法：,2.6.2 按钮,type属性值可以是submit、reset、image或button， value属性的属性值可显示在按钮上。 name属性就是给按钮取个名以区分其它按钮,建立图像化按钮 语法： ,返回本节,2.6.3 文本框和密码框,（1）建立文本框的基本语法如下：这里INPUT元素的type属性说明了建立的是一个文本输入框，value属性用于设置文本输入框的初始值，可以省略，name属性同上。,（2
19、）建立密码框的基本语法如下：INPUT元素的type属性说明了建立的是密码输入框，value属性和name属性的用法同在文本输入框中相同。,例题4.16,文本输入框和密码输入框单位名称：单位密码：,【例4.16】文本输入框和密码输入框,返回本节,结果,2.6.4 单选框和复选框,（1）建立单选框的基本语法如下：Type 说明建立的是一个单选框（radio） Value 当该选项被选中并提交后，浏览器要传送的数据 Name 指明同一组单选选项，在这里该属性是不可缺省的。 Checked 指定某选项的初始状态是被选中的。,例题4.17,（2）建立复选框的基本语法如下：,选择框论文名称：来源项目：是
20、否,【例4.17】选择框,收录情况：SCI 收录是否 E I 收录是否 ,【例4.17】选择框,【例4.17】选择框,结果,返回本节,2.6.5 下拉列表和滚动列表,下拉列表基本语法如下： ,name属性用来指定列表名称，在这里是不可缺省的。OPTION元素有两个属性value和selected。value属性的值是当提交该选项后浏览器传输给服务器的数据。selected属性用来指定选项的初始状态为被选中。 size的值为滚动列表显示时所出现的列表项的数目。,例题4.18,下拉列表和滚动列表项目名称：来源级别：国家级省部级地市级横向项目其它,【例4.18】下拉列表和滚动列表, 所属院系：数学与系统科学学院物理科学学院化学与生命科学学院信息与计算科学学院外语学院,【例4.18】下拉列表和滚动列表,返回本节,结果,2.6.6 文本区域, ,Name 属性用来指定文本区域的名称。 rows 属性用来设置文本区域的水平行数。 Cols 属性用来设置文本栏的垂直列数。,例题4.19,文本区域著作名称：内容简介： 著作相关内容，字数不超过1000。,【例4.19】文本区域,返回本节,结果,
