HTML语言专题

《HTML语言专题》由会员分享，可在线阅读，更多相关《HTML语言专题（86页珍藏版）》请在金锄头文库上搜索。

1、HTML知识专题,HTML,Hypertext Markup Language 超文本标记语言使用标签来标记文档的不同结构部分，如段落、列表、标题、表格等。HTML文档只是由一系列标签格式化的普通文本文件。W3C标准组织1998.4.24发布了HTML4标准文档http:/www.w3.org/TR/1998/REC-html40-19980424,语法、注释,语法 内容 例：株洲工学院注释 ,HTML数据类型,空白字符 空白符号是指半角的空格，水平制表符(TAB)，回车换行符 忽略元素之间的空白字符 紧接在开始标签之后的所有空白字符将被忽略 元素内容中连续出现的空白字符被处理为一个空格,HT

2、ML数据类型,字符实体 有些字符不能直接在HTML中使用 表示 n表示该ASCII字符的十进制方式的值,HTML数据类型,长度单位象素pixels (绝对) width=“100” height=“50”百分比 (相对) width=“100%” height=“50%”,HTML数据类型,颜色使用RGB(红绿蓝)颜色 #RRGGBB (十六进制) 例：#FF0000代表红色使用HTML定义的颜色代码 例：red 红色，blue 蓝色，green 绿色。,HTML文档的基本构成,支持HTTP的浏览器均为图形用户界面(GUI)，HTML文档的基本结构据此而确立。GUI通常由标题栏和窗口作为其最基

3、本的构成，对应于HTML文档中的头部分“HEAD”和文档主体部分“BODY”。HTML的基本结构如下：,基本HTML页面以标签开始，以结束。,HTML文档的基本构成,使用HTML设计一个简单的网页(1) 打开Windows的附件中的记事本功能，输入下列内容，以E2_hello.HTM作为文件名保存到D:WWW文件夹中。,一个Hello网页function myp() alert(“大家好!“); 学生成绩管理系统,HTML文档的基本构成,(2) 在浏览器地址栏输入“D:WWWE2_hello.HTM”；或者配置IIS后将当前的虚拟根目录设置为D:WWW，然后在浏览器地址栏可输入http:/12

4、7.0.0.1/E2_hello.HTM。将显示如图所示的页面。,文档头标记,1. HTML标记HTML标记表示文档内容的开始和结束标记，是开始标记，是结束标记，其他所有HTML代码都位于这两个标记之间。 2. 首部标记：指定网页的标题：定义文档内容样式表：插入脚本语言程序：描述网页信息：注释内容这些信息首先向浏览器提供, 但不作为文档内容提交。 3. 标题栏标记在浏览器标题栏中显示的文本。通常，Web搜索工具用它作为索引。,文档头标记,4. 描述标记描述文档属性参数。常用属性NAME= META名字CONTENT=页面的内容HTTP-EQUIV = CONTENT属性的类别 说明：HTTP-

5、EQUIV =“Content-TYPE“ CONTENT=页面内容类型HTTP-EQUIV =“refresh”, CONTENT =“页面刷新时”HTTP-EQUIV =“content-language”, CONTENT =“页面语言”HTTP-EQUIV =“PICS-Label”, CONTENT =页面内容的等级HTTP-EQUIV =“expires”, CONTENT =页面过期的日期,文档头标记,【例】HEAD演示页面。输入下列内容，以E2_head.HTM作为文件名保存：HAED演示页面标题演示页面内容,文档头标记,用浏览器打开文档，将显示如图所示的页面。,4. 正文标记

6、 正文标记中包含了文档的内容。常用属性如下：BACKGROUND=文档背景图像的URL地址BGCOLOR=文档的背景颜色TEXT=文档中文本的颜色LINK=文档中链接的颜色VLINK=文档中已被访问过的链接的颜色ALINK=文档中正被选中的链接的颜色,文档头标记,颜色属性的值有3种表示方法：（1） 使用颜色名称来表示。（2）使用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。,（3）RGB(r,g,b)函数表示。r,g,b的数值范围为0255或者0%100%。,设置文本格式,1. 分段标记段落是文档的基本信息单位。文档中原有的回车和换行

7、均被忽略，分段标记定义一个新段落，换行并插入一个空行。ALIGN=段落的水平对齐方式其值如下:Left: 左对齐（默认值）center: 对中right: 右对齐justify: 两边对齐省略该属性，则取默认值。下同。 2换行标记换行标记强行规定了当前行的中断，使后续内容在下一次显示的。,设置文本格式,【例】分段标记和换行标记的演示。 输入下列内容，以E2_pbr.HTM作为文件名保存：分段标记和换行标记演示第1行演示第2行演示第3行演示第4行演示,设置文本格式,用浏览器打开文档，将显示如图所示的页面。,3. 标题标记 标题标记用于设置文档中的标题和副标题标记表示字体最大的标题，标记表示字体最

8、小的标题。,ALIGN=段落的水平对齐方式其值如下：Left: 左对齐（默认值）center: 对中right: 右对齐Justify: 两边对齐,设置文本格式,【例】各种标题标记大小演示。输入下列内容，以E2_h16.HTM作为文件名保存：H1-H6标题演示下面是标题演示H1标题演示H2标题演示H3标题演示 H4标题演示H5标题演示H6标题演示,用浏览器打开文档，将显示如图所示的页面,设置文本格式,4. 对中标记 标记中间的内容全部对中。 【例2.5】CENTER标记演示。输入下列内容，以E2_center.HTM作为文件名保存：CENTER标记演示下面是CENTER标记演示H1标题演示H2

9、标题演示H3标题演示H4标题演示H5标题演示H6标题演示,设置文本格式,5. 块标记定义文档块。常用属性如下：ALIGN=段落的水平对齐方式其值如下：Left: 左对齐（默认值）center: 对中right: 右对齐,【例】DIV标记演示。 输入下列内容，以E2_div.HTM作为文件名保存：DIV标记演示下面是DIV标记演示H1标题演示H2标题演示H3标题演示 H4标题演示 H5标题演示H6标题演示,设置文本格式,6. 水平线标记HR标记在文档中添加一条水平线，用来分隔文档。 常用属性如下： ALIGN=段落的水平对齐方式 其值如下：Left: 左对齐（默认值）center: 对中righ

10、t: 右对齐 COLOR=线的颜色 NOSHADE=显示一条无阴影的实线 SIZE=线的宽度(以像素为单位) WIDTH=线的长度(像素或百分比(占页面宽度的百分数)。,设置文本格式,【例】各种水平线的演示。输入下列内容，以E2_hr.HTM作为文件名保存；各种水平线的演示用浏览器打开文档，将显示如图所示的页面。,设置文本格式,7. 字体标记使用字体标记FONT来设置文本的字符格式，主要包括字体、字号和的颜色等。常用属性如下： FACE=“字体名表”(字体名之间用“,”分隔)浏览器首先使用字体名表中的第1种字体来显示标记内的文本。如果在运行浏览器的计算机上没有安装第1种字体，则会尝试字体名表中

11、的第2种字体，直至找到匹配字体。如果到达列表结束，仍然找不到匹配字体，浏览器将使用默认字体。 SIZE=“字号值”SIZE属性指定字体的大小（字号），其值从17，默认值为3。SIZE值越大，显示的字号就越大。也可以使用+或号来指定相对字号，相对于基本字体（BASEFONT）的大小。例如： COLOR=“颜色值”,设置文本格式,【例2.8】使用字体标记来设置文本的字体、字号和颜色。输入下列内容，以E2_font.HTM作为文件名保存：设置字体、字号和颜色设置字体、字号和颜色设置的中文字体English FONT Demo.Good night! 晚安！,设置文本格式,用浏览器打开文档，将显示如图

12、所示的页面。,8. 固体字体标记 粗体 斜体 大字体 小字体 固定宽度字体 9. 样式标记 上标 下标 下划线 删除线 删除线,设置文本格式,10. 原样显示标记将包含其中的内容(包括回车和空格)原样显示出来。,设置文本格式,【例】特殊符号样式。输入下列内容，以E2_schar.HTM作为文件名保存：设置字符样式Microsoft 解二元一次方程aX2+bX+c=0解不等式x+y 2x-y ,用浏览器打开文档，将显示如图2.9所示的页面。,列表标记,列表格式包括有序列表格式和无序列表格式。1. 有序列表标记列表项1列表项2列表项n有序列表是在各列表项前面显示数字或字母的缩排列表，可以使用有序列

13、表标记OL和列表项记LI来创建。(1) OL标记OL标记控制有序列表样式和起始值。有两个常用属性：START=数字序列的起始值(可以取整数值)TYPE=数字序列样式其取值如下：1：表示阿拉伯数字1、2、3等，此为默认值。A：表示大写字母A、B、C等a：表示小写字母a、b、c等I：表示大写罗马数字I、II、III、IV等i：表示小写罗马数字i、ii、iii、iv等,列表标记,(2) LI标记LI标记定义列表项。位于和标记之间。LI标记有两个常用属性：TYPE=数字样式(其取值与OL标记的TYPE属性相同)VALUE=新的数字序列起始值以获得非连续性的数字序列【例】创建有序列表。输入下列内容，以E

14、2_olli.HTM作为文件名保存：有序列表示例用数字表示的列表电子管晶体管小规模集成电路中规模集成电路大规模集成电路,列表标记,2. 创建无序列表无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记UL和列表项标记LI来创建。列表项1列表项2列表项nUL标记控制列表项前面显示的项目符号。常用属性如下：TYPE=列表项前面显示的项目符号其取值如下：disc：使用实心圆作为项目符号（默认值）circle：使用空心圆作为项目符号square：使用方块作为项目符号 注意：在IE浏览器中，TYPE属性的值是区分大小写的。,列表标记,用浏览器打开文档，将显示如图所示的页面。,【例

15、】创建无序列表。 输入下列内容，以E2_ulli.HTM作为文件名保存：无序列表计算机课程计算机导论 操作系统 计算机原理 数据结构,列表标记,3. 目录列表: 列表项1列表项2列表项n4. 菜单列表列表项1列表项2列表项n5. 描述性列表列表描述项列表项列表项列表描述项,【例】创建描述性列表。 输入下列内容，以E2_dldt.HTM作为文件名保存：描述性列表 描述性列表江苏省镇江市常州市扬州市 山东省济南市青岛市,多媒体标记,1. 图像标记在网页中插入图像、在网页中播放视频文件。SRC=图像文件的URL地址图像可以是JPEG文件、GIF文件或PNG文件。ALT=图像的简单文本说明在浏览器下不

16、能显示图像或图像加载时间过长时显示该文本。HEIGHT=显示图像的高度(像素或百分比)WIDTH=显示图像的宽度(像素或百分比)如果给出了高度或宽度，则图像将按比例进行缩放。HSPACE=与左右相邻对象的间隔(像素)VSPACE=与上下相邻对象的间隔(像素)ALIGN=图像不到显示区域大小时的对齐方式 ALIGN属性的取值如下：top：图像与文本顶部对齐。middle：图像与文本中央对齐。bottom：图像与文本底部对齐 也可以在图像的左右绕排文本，此时ALIGN属性的取值如下： left：图像居左文本居右 right：图像居右文本居左,多媒体标记,使用换行标记的CLEAR属性。BORDER=图像边框点数。CONTROLS：指定该选项后，若有多媒体文件，则显示一套视频控件。DYNSRC=指定要播放的多媒体文件的URL。在IMG标记中，dynSRC属性优先于SRC属性。 START=何时开始播放多媒体文件其取值可以是fileopen或mouseover。LOOP=多媒体文件的播放次数(整数)如果不限播放次数，则应将该属性设置为关键字infinite。LOOPDELAY=两次播放之间的延迟。,