成都理工大学校团委信息中心美工部html培训ppt课件

1、HTML概念HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。HTML文档的编写方法手工直接编写记事本等，存成.htm .html格式使用可视化HTML编 辑 器Frontpage、Dreamweaver等由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。网页文件命名*.htm或*.html无空格无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字区分大小写首页文件名默认为：index.htm 或 index.htmlHTML 文件结构. 元素：是HT

2、ML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML 文件结构(Document Structures) HTML 文件的正文 第一张网页（01.htm） my first page This is my first homepage! 基本组成部分HTML元素属性HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。第二张网页（02.htm） my first

3、 page This is my first homepage! HTML基本结构的有关元素和元素属性HEAD元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。HTML基本结构的有关元素和元素属性HEAD元素2元素 元素下面可以插入很多很有用的元素属性。下面介绍四种： 用来标记搜索引擎在搜索你的页面时所取出的关键词。HTML基本结构的有关元素和元素属性HEAD元素3元素 用来标记文档的作者。HTML基本结构的有关元素和元素属性HEAD元素4元素 用来标记你的页面的解码方

4、式。 HTML基本结构的有关元素和元素属性HEAD元素5元素 用来自动刷新网页练习（03.htm）编写一个网页，要求3秒钟后自动跳转到知了网首页（）。 my first page 三秒钟后本网页自动跳转到知了网首页 元素及元素属性1元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。元素及元素属性2元素中有下列元素属性： (1)bgcolorbgcolor属性标志HTML文档的背景颜色。如：bgcolor=#CCFFCC。例：04.htmHTML对颜色的控制HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色

5、进行控制。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码元素及元素属性3元素中有下列元素属性： (2)backgroundbackground属性标志HTML文档的背景图片。如：background=“images/bg.gif。可以使用的图片格式为GIF，

6、JPG例：05.htm元素及元素属性4元素中有下列元素属性： (3)bgproperties=fixedbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。元素及元素属性5元素中有下列元素属性： (4)texttext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。例：06.htm元素及元素属性6元素中有下列元素属性： (5)超级链接颜色link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。例：07.htm元素及元素属性7元素中有下列元素属性： (6) l

7、eftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20 topmargin=30“例：08.htm文字标签属性1文字属性标记1.文字颜色 指定颜色 . #=RRGGBB 16 进制数码例：09.htm文字标签属性2文字属性标记2.文字字体 . #=客户端可获得的字体10.htm文字标签属性3文字属性标记3.文字大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -#例：11.htm文字标签属性4文字属性标记4.文字标题 . #=1, 2, 3, 4, 5, 6例：12.htm文字布局行的控制 段(Paragraph) (可以

8、看作是空行) 空白占位符例：13.htm文字布局行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。例：14.htm不换行 15.htmHTML文字与段落格式控制 倾斜文本 粗体文本 下划线文本 删除线文本 例：16.htm基本组成部分HTML注释HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为：例：17.htm文字的对齐. (n=1,2,3,4,5,6) . (#=left, center, right)例：18.htm文

9、字的分区显示 . (#=left, center, right) 3.HTML段落与分行控制居中 元素元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似例如：居中段落3.HTML段落与分行控制标尺线：设定线宽 ：设定线长 ：设定对齐方式 #=left, right ：设定线的颜色例：19.htm3. HTML的段落与分行控制无序列表元素1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。3. HTML的段落与分行控制无序列表元素2无序列表是由和元素定义的:sports food drink fr

10、iends 例：20.htm3. HTML的段落与分行控制无序列表元素3无序列表的默认符号是圆点。 元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）例：20.htm3. HTML的段落与分行控制有序列表元素1有序列表由和定义: sports drink friends例：20.htm3. HTML的段落与分行控制有序列表元素2元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号例： 20.htm元素还可以定义列表的起始编号，如我们

11、希望列表的第一个编号为5，而不是1，则需要定义元素的start属性例：20.htm4.超级链接普通超级链接1超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。4.超级链接普通超级链接2超级链接是用锚元素定义的 在元素下，有元素属性href,href的属性值为一个URL地址如：指向知了网的超级链接 如：普通超级链接例：21.htm4.超级链接E-mail超级链接 超级链接可以指向E-mail地址如：指向E-mail地址的超级链接例：21.htm4.超级链接新开链接窗口开一个新的(浏览器)窗口 (Ta

12、rget Window) . 例：21.htm4.超级链接去除下划线去掉超级连接的下划线：style=“text-decoration: none”例：21.htm4.超级链接其他超级链接 WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;指向其他Internet应用的超级链接不是我们掌握的重点。 4.超级链接锚点(书签) 1 指向本页面锚点aa的超级链接例：21.htm指向23页面的锚点top的超级链接例：21.htm练习：标注出学校首页的html静态代码HTML对图片的

13、控制-1基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：22.htmHTML对图片的控制-2所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是：例：23.htmHTML对图片的控制-3图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 例：24.htmHTML对图片的控

14、制-4图片的边框我们可以为一幅图片加一个边框以突出显示： border的属性值为象素数例：25.htmHTML对图片的控制-5图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：例：26.htmHTML对图片的控制-6图片的对齐方式定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：26.htmHTML对图片的控制-7定义图片与左、右的文本之间的间距图片在显示时，与左右的文本之间可以有一定的间距 Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数.例：27.htmHT

15、ML对图片的控制-8图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：所以，所谓超级链接实际上就是用元素标志一个图象的引用;例：28.htm一月二月三月120010001500单元格（用来表示，每个单元格可以有背景颜色和背景图片）表格（用来表示，表格可以有背景颜色、背景图片）表格边框每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。表头（用来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）表格(TABLE)标记-1 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。元素：定

16、义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。表格(TABLE)标记-2表格的基本结构定义表格定义表头定义表行定义单元格表格(TABLE)标记-2练习尝试写出这个表格的代码例:1.htmmondaytuesdaywednesdaythursdayfridaysaturdaysunday1ClassClassClassClass.2ClassClassClassClass.3ClassClassClas

17、sClass.4ClassClassClassClass.5ClassClassClassClass.6ClassClassClassClass.7ClassClassClassClass.8ClassClassclassClass.表格(TABLE)标记-3表格的属性 1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细例02.html表格(TABLE)标记-2表格的属性 14、bgcolor属性：指定表格或某一个单元格的背景颜色。5、background属性：指定表

18、格或某一个单元格的背景图片。其属性值为一个URL地址。例：03.htm表格(TABLE)标记-3表格的属性 26、bordercolor属性：指定表格或某一个单元格的边框颜色。例：04.htm7、Bordercolorlight属性：亮边框的颜色8、Bordercolordark属性：暗边框的颜色例：05.htm表格(TABLE)标记-3表格的属性 29、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。例：06.htm表格(TABLE)标记-3表格的属性 210、cellspacing属性：单元格间距。例：06.htm11、cellpadding属性：单元格边距。例：

19、06.htm表格(TABLE)标记-4单元格属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;Baseline：相对于基线对齐;例：07.htm表格(TABLE)标记-5单元格属性2、Colspan：属性值表示当前单元格跨越几列例：8.htm3、Rowspan：属性值表示当前单元格跨越几行例：8.htm表格进阶表格的嵌套在 之间插入表格，实现表格嵌套例：9.htm表格的作用一般只是控制文本和图像的显示，而不显示表格的边框综合案例表格的综合使用 利用表格做一张你的课程表 做

20、一张最近来访的表格表单(FORM)标记HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单(FORM)标记表单是网页上的一个特定区域。这个区域是由一对元素定义的。 元素action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。表单(FORM)标记表单是网页上的一个特定区域。这个区域是由一对元素定义的。

21、元素enctype属性：规定了用表单传递信息时的编码格式，有application/x-www-form-urlencoded和multiport/form-data两种选择，前者是默认值，后者一般在表单需要提交文件信息的情况下使用表单(FORM)标记表单的基本语法:. * =GET有数据量限制，POST无以上限制,以文件形式传输表单(FORM)标记例：输入以下代码，定义一个基本菜单，并以E-mail方式实现提交表单(FORM)标记Input元素 input元素是与输入相关的元素，它是一个空元素，因此在其末尾必须添加斜杠“/”。Input元素有一个重要的属性type,该属性决定了input的元

22、素类型表单(FORM)标记（1）文本框，type=“text”,用于控制用户仅输入一行文本 size：控制输入文本框所显示的长度，单位为字符 maxlength：控制允许最大输入的字符长度，单位为字符 name：通过表单传递出去的变量的名称 value：即变量的值，是在表单提交的瞬间，在该输入框内的字符串（如果在input元素中定义该属性，则表示设定了输入框的初始值） 11.htm表单(FORM)标记（2）密码框，type=“password”，用户输入时所显示的密码是屏蔽号 11.htm（3）隐藏条目，type=“hidden”，用于输入框不见，但仍然有name和value属性，一般用于不需

23、要用户填写或选择，变量值已知，又需要将变量发送出去的情况 11.htm表单(FORM)标记（4）复选框，type=“checkbox”，一般由若干个复选项组成，改组input元素拥有相同的name属性值，而value值不同。当表单提交后，变量将成为一个数组，且数组中包含选中复选框的value值。Checked=“checked”表示默认将该复选框选中 11.htm（5）单选按钮，type=“radio”，与复选框类似只能选一个 11.htm表单(FORM)标记（6）提交按钮，type=“submit” 按下该按钮时，表单向form中action属性所定义的地址发送表单变量 11.htm（7）重

24、置按钮，type=“reset”按下该按钮时，表单中所有的内容将被清空 11.htm表单(FORM)标记（8）自定义按钮，type=“button”该按钮没有预定义的功能，但可以用onclick事件调用自己编写的js函数，name和value属性可参照提交按钮 （9）图像按钮，type=“image”，该按钮与自定义按钮基本相同，但用图片方式来显示。eg.表单(FORM)标记（10）文件域，type=“file”。使用该属性必须将form的enctype属性设置为multipart/form-data. 该按钮帮助用户选择一个存储在本地计算机上的文件，在提交表单时会将所选中文件发送给服务器，其

25、属性与文本框基本一致 11.html表单(FORM)标记select元素 用于 创建一个下拉菜单或选项表。它是一个非空元素，内容必须包含在和之间。具有一个name属性，其属性值定义了要提交变量的名称.（1）无size属性时；下拉菜单（2）size=“1”且没有multiple属性（表示允许多选）；下拉菜单（3）size“1”或有multiple属性；滚动菜单 12.html表单(FORM)标记Textarea元素创建多行的，可滚动的文本输入框。非空元素，内容必须包含在和之间Cols、rows属性：制定文本框的列数、行数，单位为字符Name属性：定义变量的名称Wrap属性:确定所提交的信息是否包

26、含换行，按其默认值（文本不换行）提交表单(FORM)标记综合练习（*）13.html插入外部资源1.插入音乐embed src=“音乐地址” 插入音乐autostart=true（false） 是否在音乐传送完自动播放 loop=true(无限次)，false（1次），3（3次） 音乐重复次数Width=宽度；height=高度 设定播放器面板大小，均为0则可把播放器隐藏volume=0100 设定音量大小Hidden=true 隐藏控制面板Starttime=“分：秒” 设定歌曲开始播放的时间插入外部资源Align=“center”(top,bottom,center,baseline,left,right,texttop,middle,absmid