1、第三章 HTML语言, HTML语言 ,2,主要内容,3.1 基本概念 3.2 HTML 的基本语法 3.3 常见标签的使用, HTML语言 ,3,3.1 基本概念,HTML文档的概念 HyperText Markup Language，即超文本标记语言。由万维网联盟负责制订和更新。 HTML是一种描述语言，对WEB页面中显示内容的属性以标签Tag的形式进行描述。使用该语言可将文本、图像、声音等结合在一张网页文件中。 客户机上的浏览器(browser) 对这些描述进行解释将相应页面内容正确显示在显示器上。一个WEB页面就是一个HTML文档 。 HTML是一种解释语言，可以直接运行；C、Basi
2、c、Java等都是编译语言，需要经过编译才能运行。, HTML语言 ,4,3.2 HTML的基本语法,标签由标签名、属性以及属性值组成。多数标签有开始标记和结束标记。 属性值：前后要加双引号（某些情况下可省略P16）。 值应在预先定义的范围内选取，不能自己定义。, 受影响的内容 ,开始标记,结束标记, html的基本概念 , HTML语言 ,5,网页实例：,我的主页我的第一张网页第三章实例,文件头部,文件主体,3.2 HTML的基本语法, HTML语言 ,6,几点说明 1、HTML的标签：识别网上元素、描述元素的样式、指向其它资源，不分大小写。不同的标签可嵌套使用，但不可交叉。 2、标签的属性
3、：要放在开始标签的尖括号中，可以有多个属性，用空格分隔，通常不分大小写。 4、和标签：网页文档的开始和结束标签。告诉浏览器是网页文档。 5、和标签：设置web页的一些特定信息。 6、和标签：设置web页的主体信息。 7、可以采用存文本文件编辑HTML文件。例如记事本。,3.2 HTML的基本语法, HTML语言 ,7,3.3 常用标签介绍,3.3.1 文件标签 3.3.2 排版标签 3.3.3 字体标签 3.3.4 表格和清单 3.3.5 在网页中建立超链接 3.3.6 多媒体标签 3.3.7 框架标签 3.3.8 表单标签 3.3.9 其它标签, HTML语言 ,8,3.3.1 文件标签,文
4、件标签共四种： 类型声明标签 文件头标签 标题标签 正体标签 注：作为完整的html文件，文件标签不可缺少。, HTML语言 ,9,3.3.1 文件标签,1. 标签 类型声明标签：用于告诉浏览器这个文件是HTML文件。 如果将标签删去，不会影响html文件在浏览器中的显示效果。浏览器的容错功能, HTML语言 ,10,3.3.1 文件标签,2. 标签 放在标签之后，用以描述html文件整体的一些信息。 标签对中的内容不会显示在浏览器页面上。只为html的解释器服务。 与构成了HTML文件的两大主要部分。, HTML语言 ,11,文件头的()相关标记应用 1. 标识网页主体的标记 2.标记 3.
5、注释标记, HTML语言 ,12,1. 标识网页主体的标记,标识网页的主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内！ 例如：欢迎光临网站 , HTML语言 ,13,2.标记,是一个辅助性标记，且没有结束标记。主要用于设置网页的一些属性。 标记共有两个重要的属性，分别为： name：用于描述网页，对应的参数值则用content标示。 一大应用：告诉搜索引擎改网页的关键字 http-equiv：相当于HTTP的文件头的作用，可以向浏览器传回一些有用的信息，以帮助正确显示网页内容。与“name”属性一样，其参数值用content标示。 一大应用，设置自动刷新并指向新页面。,例如：, HT
6、ML语言 ,14,3.3.1 文件标签,3. 标签 标签对中的内容将显示在网页文件上。所以网页文件的大部分信息内容都位于标签的包围之中。 与这些文件标签不同，body标签支持属性。, HTML语言 ,15,3.3.1 文件标签,3. 标签 (1) text属性设定网页上的文字颜色 COLOR的值可以是以十六进制表示的颜色，或者是16种颜色中的一种。 名称 | 颜色 | 名称 | 颜色 black | 黑色 | Red | 红色 Line | 石灰色 | Maroon | 栗色 Gray | 灰色 | Silver | 银白色 Navy | 海军蓝 | Olive | 橄榄绿 Purple |
7、紫色 | Yellow | 黄色 Aqua | 浅绿色 | Blue | 蓝色 Green | 绿色 | Fuchsia | 紫红色 White | 白色 | Teal | 暗蓝绿, HTML语言 ,16,3.3.1 文件标签,3. 标签 (2) bgcolor属性设定网页上的背景色, HTML语言 ,17,3.3.1 文件标签,3. 标签 (3) link、alink、vlink属性设定超级链接不同状态的颜色 link：指定html文档中访问之前的超链接的颜色 alink: 指定html文档中正在按下的超链接的颜色。 vlink: 指定html文档中访问之后的超链接的颜色 若body属性中不
8、指定，则使用默认值，分别为：link=“#0000ff”(蓝色） alink=“#ff0000” （红色）vlink=“#800080”（紫色）, HTML语言 ,18,3.3.1 文件标签,3. 标签 (4) background属性设定背景图片 选择图片 保存图片 编写html代码(5) scroll属性设定隐藏浏览器的滚动条 常用于弹出性页面（广告弹出窗口、弹出最新通知等） scroll=“no”即可隐藏滚动条。, HTML语言 ,19,3.3.2 排版标签,排版标签主要为以下几种： ：注释 ：段落 ：换行 ：水平线 ：预设格式 ：区段 ：不折行 ：建议折行, HTML语言 ,20,1.
9、注释标记,用于在HTML文档中书写说明性的文字，内容在浏览器中不显示。 格式： , HTML语言 ,21,2、段落、换行编辑,分段标签 和 强制换行标签 分段标签用于将文档划分为段落，标签为 ，效果相当于在段间插入一个硬回车，段间有空行。要将文字强制换行，而不是另起段落，可以用换行标签实现该功能。换行后，与前一行间无空行。注意，仅单独使用，而非成对出现。即非围堵标签。, HTML语言 ,22,2、段落、换行编辑续,段落对齐的方法 align属性：用于设置段落的对齐方式，其常见取值有4种： right（右对齐） left（左对齐） center（居中对齐） justify（两端对齐） 例如： c
10、enter标签：. 用以居中, HTML语言 ,23,3、水平线,（hrhorizon） 用于在标签所在位置插入一条水平线，可以美化网页。 与类似，也无结束标签。 属性 size（粗细）像素，值应为整数，默认为2 。 width（宽度）值可用百分比和像素两种方式表示。 color（颜色）值为颜色 align（对齐方式）left / right / center noshade（无阴影）无需值，用以指定没有阴影的水平线 title（标题）设定标题，当鼠标移至水平线时才显示。,3 hr.htm, HTML语言 ,24,4. 预设格式和区段标签,（1）预格式化文本 html源代码中书写的空格、回车等
11、字符在版式输出时均无效，必须用特殊的字符串来代替。如空格。 采用标签可使源文件中的空格、回车等版式符号正常地在浏览器中显示。,3 pre.htm, HTML语言 ,25,4. 预设格式和区段标签,（2）设置区段 P32 主要用于文件分节，位于标签对内的多段文本被认为一节，可设置一致的对齐方式。 应与align联用。在Dreamweaver中，用该标签对设置层。, HTML语言 ,26,5. 不折行和建议折行,详见P33自学, HTML语言 ,27,3.3.3 字体标签,均为围堵标签（即有开始标签和结束标签），有实体标签（显示效果绝对）和逻辑标签（浏览器是否支持）之分。 用于设置字符的风格。详见
12、表2-1(P37) 和：加粗字体 /：倾斜字体 ：标题标签 ：字体设置 ：字体设置 /：设置字符串宽度等宽 和：下划线和删除线 和：字体变大和变小 和：下标和上标,需要设置其具体属性。,3 fonthtml, HTML语言 ,28,3.3.3 字体标签,font标签： size属性：控制文字的大小（17，默认3）；或用”+”、”-”前缀，表示相对于标签所设定的字体大小。 color属性：控制文字的颜色（#rrggbb 16 进制数码，或者是下列预定义色彩：black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, whit
13、e, green, purple, silver, yellow, aqua ） face属性：指定字体样式，可指定多种，用逗号分隔，哪种字体被安装，即以哪种字体显示。, HTML语言 ,29,颜色的英文单词,名称 | 颜色 | 名称 | 颜色 black | 黑色 | Red | 红色 Line | 石灰色 | Maroon | 栗色 Gray | 灰色 | Silver | 银白色 Navy | 海军蓝 | Olive | 橄榄绿 Purple | 紫色 | Yellow | 黄色 Aqua | 浅绿色 | Blue | 蓝色 Green | 绿色 | Fuchsia | 紫红色 Whit
14、e | 白色 | Teal | 暗蓝绿, HTML语言 ,30,3.3.3 字体标签,basefont标签： 设定页面基本字体的显示大小。若某段文字未被标签包含，则其输出风格为所设定的风格。 其属性设置基本与标签相同，但size属性必须设定一个绝对的size大小。不能用“”和“”前缀。 size属性： color属性： face属性：, HTML语言 ,31,3.3.4、表格与清单,1、清单、标签 （1）有序清单定义： 定义有序清单那需要使用有序清单标签和列表项（list item）标签， 语法如下： list item1 list item2另： #=a, a, i, i, 1,3 ul.h
15、tml, HTML语言 ,32,3.3.4、表格与清单,（2）无序清单定义 要使用无序清单标签和列表项标签 语法如下： list item1 list item2li的属性type的应用：disp；square；circle, HTML语言 ,33,2、表格标签、 （1）标签声明表格 ，其他表格标签应在该标签范围内容使用。 属性 P43 border cellpadding cellspacing cols width height,3.3.4、表格与清单,align valign bgcolor bordercolor borderColorLight和borderColorDark bac
16、kground, HTML语言 ,34,（2）标签和标签 （P43，最后一行错误修正） ：表示表格的行；：表示表格的单元格 常用属性： width height align：文字水平对齐（left、center、right） valign：文字垂直对齐（top、middle、bottom） bgcolor bordercolor borderColorLight和borderColorDark background,3.3.4、表格与清单, HTML语言 ,35,（3）表格的应用 页面显示表格的需要嵌入表格 排版排版布局、对齐某些文字。,3.3.4、表格与清单, HTML语言 ,36,3.3.
17、5 在网页中建立超链接 P50,超链接标签（围堵标签） a是anchor的首字母，标签的最基本属性是href和name。 href：值为一个有效的URL，表明标签围堵的字符串是一个超链接。若用户单击该超链接，则会转向href属性所指定的URL地址。, HTML语言 ,37,3.3.5 在网页中建立超链接 P50,href属性值的常用的几种形式 1指向本地网页的链接： 若链接至相同文件夹的文件：指定文件名即可 若链接至不同文件夹的文件：指定文件的具体路径 2链接至WWW服务器上的某文件： 3链接至URL指定的FTP站点： 4链接至E-mail地址：, HTML语言 ,38,3.3.5 在网页中建
18、立超链接 P50,name属性建立指向页面特定部分的链接 若网页的内容众多，需要多屏来显示（拖动滚动条），可利用name属性对同一页面的不同部分进行链接。 步骤： (1) 用name属性在特定部分做标记(类似书签的作用)。 例如： (2) 在长文档顶部以超链接的方式显示一个目录，将内容链接至本页的具体内容中去。 例如：第一章, HTML语言 ,39,3.3.6 多媒体标签,1、插入图像 P54 用标签在html文件中插入图片， 标签常用的属性 src width、height alt align border,hspace、vspace name usemap longdesc lowsrc,
19、例如： , HTML语言 ,40,2、嵌入其他媒体 P54 背景音乐 ：标记（支持midi、wav、au格式的文件）#=WAV 文件的 URL#=循环数 插入视频剪辑 ： src：视频的封面的URL(在浏览器尚未完全读入视频 文件时显示的内容) dynsrc：视频文件的URL； start：何时播放(fileopen /mouseover ) controls :是否使用控制条(无属性值) loop ：循环次数(数值; infinite 无限循环) loopdelay ：延时（毫秒数） 标签：嵌入文件（显示文件的控制板）。,3.3.6 多媒体标签, HTML语言 ,41,3.3.7 框架设计(
20、P34),允许设计者在多个视图内放置页面。 框架标签主要包括：、标签。 1、：围堵标签，所有其他框架标签应包含在该标签对内。 常用属性： rows：横行排列多个窗口，指定每个窗口的高度 cols：纵向排列多个窗口，指定每个窗口的宽度 border：设定窗口边界值，单位为像素 bordercolor：窗口边界颜色, HTML语言 ,42,3.3.7 框架设计(P34),2、：具体定义每个窗口，包括窗口显示的网页文件。 常用属性： src：设定该窗口显示的页面。 src=“url”。 name：设定窗口的唯一的名字，用作标识。 scrolling：是否显示滚动条（yes,no,auto） nore
21、size：设定窗口大小禁止被改变。无属性值。, HTML语言 ,43,3.3.8 表单设计(P45),用于实现与服务器端的交互。 如上网注册时用于填写个人资料，而后按递交按钮，这样，服务器即可处理递交的信息，这个页面即为表单。 主要包括：、等标签。, HTML语言 ,44,3.3.8 表单设计(P45),1、标签 围堵标签，所有其他的表单标签应写作标签包含的范围内。 主要属性： action：值为URL，指向处理表单的程序。 method：设定数据的传送方式。get或post。 name：设定表单的名字，在处理表单时可能会用到。, HTML语言 ,45,3.3.8 表单设计(P45),2、标签
22、 用于制作各种表单输入元素、如文本框、单选框、复选框等。 主要属性： type：设置输出形式。属性值详见P45 value：设定表单元素的初始值，显示在页面上。 disabled：用于设定表单元素不被输入和修改。无属性值。 readonly：只读。无属性值。, HTML语言 ,46,3.3.8 表单设计(P45),3、标签和标签 用于形成下拉列表，必须与标签结合使用。 标签是围堵标签，被标签包围，用于设置下拉列表每个选项的内容。 主要属性： selected：用于设定下拉列表的初始选择状况。 value：若设置了value属性，则表单提交的内容即为value属性中设定的内容，而非下拉列表中显示
23、的内容。, HTML语言 ,47,3.3.8 表单设计(P45),4、标签 围堵标签，是多行文本输入框标签。 主要属性： rows：用于设定多行文本输入框的最大行数。 cols：用于设定多行文本输入框的最大列数。 wrap：用于设定是否转行方式。off / virtual / physical accesskey：用于设定一个激活文本框的快捷键，激活时要按住Alt键，再按设定的键即可。, HTML语言 ,48,3.3.9 其他标签：会移动的文字(Marquee),基本语法 ： . 文字移动属性的设置： 方向 #=left, right 方式 #=scroll, slide, alternate 循环 #=次数；若未指定则循环不止 速度 ：值越大越快 延时 ：值越大时延越长 外观(Layout)设置 对齐方式(Align) #=top, middle, bottom 底色 面积 ,
