Download presentation
Presentation is loading. Please wait.
1
HTML概念 HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。
2
HTML文档的编写方法 手工直接编写 记事本等，存成.htm .html格式 使用可视化HTML编 辑 器
Frontpage、Dreamweaver等 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。
3
网页文件命名 *.htm或*.html 无空格 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 区分大小写
首页文件名默认为：index.htm 或 index.html
4
HTML 文件结构 <html>...</html> <head>...</head>
<body>...</body> 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。
5
HTML 文件结构 (Document Structures)
<HEAD> <title></title> <meta> </HEAD> <BODY> HTML 文件的正文 </BODY> </HTML>
6
第一张网页（01.htm） <html> <head>
<title>第一个网页</title> </head> <body> 我的第一个网页! </body> </html>
7
基本组成部分—— HTML元素属性 HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。
8
第二张网页（02.htm） <html> <head>
<title>第一个网页</title> </head> <body> <p align="center">我的第一个网页!</p> </body> </html>
9
HTML基本结构的 有关元素和元素属性 HEAD元素——1 <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 <title> <title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。
10
HTML基本结构的 有关元素和元素属性 HEAD元素——2 <meta>元素
<meta name="keywords" content=“BNU-ITSE"> 用来标记搜索引擎在搜索你的页面时所取出的关键词。
11
HTML基本结构的 有关元素和元素属性 HEAD元素——3 <meta>元素
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 用来标记你的页面的解码方式。
12
HTML基本结构的 有关元素和元素属性 HEAD元素——4 <meta>元素
<meta http-equiv=“refresh” content=“5;URL= 用来自动刷新网页
13
练习（03.htm） 编写一个网页，要求3秒钟后自动跳转到172.17.7.250的首页 <html> <head>
<title>my first page</title> <meta http-equiv=“refresh” content=“3;URL= </head> <body> <p align=“center”>三秒钟后本网页将自动跳转到学院首页</p> </body> </html>
14
<body>元素及元素属性——1
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。
15
<body>元素及元素属性——2
(1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor="#CCFFCC"。
16
HTML对颜色的控制 HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
17
常见颜色的代码 颜色 颜色名和RGB值 黑色 Black=”#000000” 银色 Silver=”#c0c0c0” 红色
Red=”#ff0000” 蓝色 Blue=”#0000ff” 白色 White=”#ffffff” 黄色 Yellow=”ffff00” 绿色 Green=”#00ff00” 海蓝色 Aqua=”#00ffff”
18
<body>元素及元素属性——3
(2)background background属性标志HTML文档的背景图片。如：background=“images/bg.gif"。 可以使用的图片格式为GIF，JPG
19
<body>元素及元素属性——4
(3)bgproperties=fixed bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。
20
<body>元素及元素属性——5
(4)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。
21
<body>元素及元素属性——6
(5)超级链接颜色 link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。
22
<body>元素及元素属性——7
(6) leftmargin和topmargin 设置网页主体内容距离网页顶端和左端的距离如：leftmargin="20" topmargin="30“
23
文字标签属性——1 文字属性标记 1.文字标题 <h#> ... </h#> #=1, 2, 3, 4, 5, 6
24
文字布局 行的控制 段(Paragraph) (可以看作是空行) <p> 空白占位符
25
文字布局 行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。 不换行<nobr>
26
HTML文字与段落格式控制 <body>…… <i>倾斜文本</i>
<b>粗体文本</b> <u>下划线文本</u> <s>删除线文本</s> ……</body>
27
基本组成部分—HTML注释 HTML文档可以插入注释。注释内容不会在浏览器窗口显示
28
3.HTML段落与分行控制 居中--- <center>元素
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似 例如：<center>居中段落</center>
29
3.HTML段落与分行控制 标尺线 <hr size = #>：设定线宽 <hr width=#>：设定线长
<hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
30
3. HTML的段落与分行控制 无序列表元素—1 列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。
31
3. HTML的段落与分行控制 无序列表元素—2 无序列表是由<ul>和<li>元素定义的: <ul>
<li>sports</li> <li> food </li> <li> drink </li> <li> friends </li> </ul>
32
3. HTML的段落与分行控制 无序列表元素—3 无序列表的默认符号是圆点。 <ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有： disc(圆)、circle（圆圈）、square（方块）
33
3. HTML的段落与分行控制 有序列表元素—1 有序列表由<ol>和<li>定义: <ol>
<li>sports</li> <li> drink</li> <li> friends</li> </ol>
34
3. HTML的段落与分行控制 有序列表元素—2 <ol>元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C……作为列表的编号 <ol>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<ol>元素的start属性
35
4.超级链接—普通超级链接1 超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。
36
4.超级链接—普通超级链接2 超级链接是用锚元素<a>定义的
在<a>元素下，有元素属性href , href的属性值为一个URL地址 如：<a href=“ 如：<a href=“29.htm">普通超级链接</a> file:///C:\WINDOWS\123.html
37
4.超级链接—E-mail超级链接 超级链接可以指向E-mail地址
如：<a
38
4.超级链接—新开链接窗口 开一个新的(浏览器)窗口 (Target Window)
<a href="URL" target=“_blank"> ... </a>
39
4.超级链接—去除下划线 去掉超级连接的下划线：style=“text-decoration: none”
40
4.超级链接——其他超级链接 WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接; 指向其他Internet应用的超级链接不是我们掌握的重点。
41
4.超级链接——锚点(书签) 1 <a name="aa">
<a href="#aa">指向本页面锚点aa的超级链接</a> <a href=“23.htm#top”>指向23页面的锚点top的超级链接</a>
42
练习：手写代码实现 链接（新开窗口与 ）、背景、文字颜色、字体、换行、页面标题。
43
HTML对图片的控制--1 基本语法: <img src=“图片名称”>
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址
44
HTML对图片的控制--2 所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
定义图片替代文本的方法是： <img src=“图片名称” alt=“这是一张图片”>
45
HTML对图片的控制--3 图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是：
<img src="sample.jpg" width=100 height=100 > width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。
46
HTML对图片的控制--4 图片的边框 我们可以为一幅图片加一个边框以突出显示：
<img src="sample.jpg" border= " 2 " > border的属性值为象素数
47
HTML对图片的控制--5 图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是：
<img src=“sample.jpg” align=“left” > <img rc=“sample.jpg” align=“right”>
48
HTML对图片的控制--6 图片的对齐方式 定义图片的垂直对齐方式：
<img src="sample.jpg" align="top" > <img src="sample.jpg" align="middle"> <img src="sample.jpg" align="bottom" > 对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。
49
HTML对图片的控制--7 定义图片与左、右的文本之间的间距 图片在显示时，与左右的文本之间可以有一定的间距
<img src="sample.jpg" hspace=5 vspace=5 > Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数.
50
HTML对图片的控制--8 图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是： <a href=“ >img src="sample.jpg" </a> 所以，所谓超级链接实际上就是用<a>元素标志一个图象的引用;
51
HTML对图片的控制--9 图象映射 所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。
52
HTML对图片的控制--10 图象映射（只要求理解标记含义）
图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。 <map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)
53
HTML对图片的控制--11 图象映射实例 <img src="bear.jpg" usemap="#Map" >
<map name=“Map"> <area shape="rect" coords="46,29,253,164" href="#" > <area shape="circle" coords="76,510,59" href="#" > <area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" > </map>
54
一月 二月 三月 1200 1000 1500 表格（用<Table>来表示，表格可以有背景颜色、背景图片） 表格边框
单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片） 每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。 表头（用<TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）
55
表格(TABLE)标记--1 <table> 元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。 <tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。 <td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。
56
表格(TABLE)标记--2 表格的基本结构 <table>定义表格 <tr>
<th>定义表头</th> </tr> <tr>定义表行 <td>…</td>定义单元格 </table>
57
表格(TABLE)标记--3 表格的属性 –1 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细
58
表格(TABLE)标记--2 表格的属性 –1 4、bgcolor属性：指定表格或某一个单元格的背景颜色。
5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。
59
表格(TABLE)标记--3 表格的属性 –2 6、bordercolor属性：指定表格或某一个单元格的边框颜色。
7、Bordercolorlight属性：亮边框的颜色 8、Bordercolordark属性：暗边框的颜色
60
表格(TABLE)标记--3 表格的属性 –2 9、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。
61
表格(TABLE)标记--3 表格的属性 –2 10、cellspacing属性：单元格间距。
11、cellpadding属性：单元格边距。
62
表格(TABLE)标记--4 单元格属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐; Baseline：相对于基线对齐;
63
表格(TABLE)标记--5 单元格属性 2、Colspan：属性值表示当前单元格跨越几列 3、Rowspan：属性值表示当前单元格跨越几行
64
表格(TABLE)标记--6 行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包
top：顶端对齐； middle：居中对齐； bottom：底端对齐。 Baseline：相对于基线对齐。
65
表格(TABLE)标记--7 行属性 2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式
3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素
66
表格进阶 表格的嵌套 在<td> </td>之间插入表格，实现表格嵌套
表格的作用一般只是控制文本和图像的显示，而不显示表格的边框
67
综合案例 表格的综合使用
68
表单(FORM)标记 HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。
在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。
69
表单(FORM)标记 表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。 <form>元素
action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。 Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。
70
表单(FORM)标记 表单的基本语法: <form action="url" method=* type=text/plain> ... <input type=submit> <input type=reset> </form> * =GET有数据量限制，POST无以上限制,以文件形式传输
71
表单(FORM)标记 <input name=? type=* value=** size=*** maxlength=??>
文本框 <input name=? type=* value=** size=*** maxlength=??> ? 文本框的名字 * text,password ** 默认值 *** 长度 ?? 最大输入字符数
72
表单(FORM)标记 3.文本域 <textarea name=* rows=** cols=**> ... </textarea>
73
表单(FORM)标记 按钮 包括普通按钮、重置按钮和提交按钮
<input type="submit" value="提交" name=“B1"> <input type="reset" value="全部重写" name=“B2">
74
表单(FORM)标记 5.复选框(Checkbox) 在一个表单里的所有多选框可以有一个或多个被选中。
<input type=checkbox> <input type=checkbox checked> <input type=checkbox value=**>
75
表单(FORM)标记 6.单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。
<input type=radio name=sex value=**> <input type=radio name=sex value=** checked> 各个选项的name必须一样才能达到预期效果
76
表单(FORM)标记 7.下拉列表 基本语法 <select name=*> <option selected>说明</option> <option value=**>说明2 </option> </select>
77
表单(FORM)标记 7.下拉列表 （2）列表框的长度 <select size=**> （3）允许多选
<select size=** multiple>
78
表单(FORM)标记 8.图象域 <input type=image src=url>
79
表单(FORM)标记 综合练习（*） 实现留言簿
要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。
80
网页中的框架 制作框架页面的步骤： 1.编写所有子框架页面 2.编写主框架页面 3.在主框架页面中设定子框架名称
4.如果框架页面之间存在链接，在子框架中设定链接。 注意：框架页面是不含<body>标签的
81
网页中的框架 基本语法 <frameset> <frame src="url"> <noframes>
<body> 您的浏览器不支持框架，请考虑升级您的浏览器！ </body> </noframes> </frameset>
82
网页中的框架 定义框架的基本语法 框架由一对<frameset>定义
<frameset>有两个属性：rows和cols Rows定义上下分割的框架的大小； cols定义左右分割的框架的大小； 在定义大小时，rows和cols可以使用相对大小或以百分比为单位。
83
网页中的框架 各窗口的尺寸设置 <frameset rows=#>横排多个窗口
<frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> 排列方式： A B C
84
网页中的框架 各窗口的尺寸设置 <frameset cols=#>纵向排列多个窗口
<frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> 排列方式：A B C
85
网页中的框架 COLS & ROWS：纵横排列多个窗口 <frameset cols=137，*>
<frame src="A.htm"> <frameset rows=82,*> <frame src="B.htm"> <frame src="C.htm"> </frameset> 排列方式： B A C
86
网页中的框架 框架边框的颜色 bordercolor="ff0000“ 各窗口边框的设置 frameborder=#
#=yes, no / 1, 0 框架边框的宽度 framespacing="10"
87
网页中的框架 <frame>的属性 name：定义该框架的名字。这个名字可以被一些网页元素引用，如被<a>元素引用。
<a href=url target=“framename”> Src：在本框架里显示网页的URL。 Target：目标框架,引用的是目标框架的名字。
88
网页中的框架 在当前框架中打开超链接页面 默认就是在当前框架页中打开,也可以采用Target=“_self” 在指定框架中打开超级链接页面
Target=“name” 新开窗口打开链接页面 Target=“_blank” 跳出整个框架集 Target=“_parent”
89
网页中的框架 <frame>的属性 Scrolling：是否显示滚动条。yes, no, auto
Noresize：框架在浏览器里不可以被调整大小。
90
网页中的框架 内含窗口 <iframe src=# name=##> ... </iframe>
#=初始页面的 URL ##=框架名称(Frame Name)
91
会移动的文字 基本语法 <marquee> ... </marquee> 文字移动属性
(1)方向 ：direction=# #=left, right,up,down
92
会移动的文字 2、文字移动属性 (2)方式： behavior=#
#=scroll(循环), slide(只走一次), alternate(来回走) (3)循环: loop=# #=次数；若未指定则循环不止(infinite)
93
会移动的文字 2、文字移动属性 (4)速度: scrollamount=# (5)延时: scrolldelay=#
94
会移动的文字 3、其他属性 (1)底色: bgcolor=# (2)面积: height=# width=#
#=RRGGBB 16 进制颜色代码 (2)面积: height=# width=# (3)空白:hspace=# vspace=#
95
多媒体页面 用<EMBED>嵌入多媒体对象 基本语法 <embed src=#> #=URL 注：
对于不同的plugin，其embed属性也不同。
96
多媒体页面（*） 嵌入背景音乐 <bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
97
多媒体页面（*） 特殊标记元素Object <OBJECT>元素用来包含图像、动态图像、Java小程序。
<OBJECT>元素用以替换更具体的<IMG>和<APPLET>元素，以及<EMBED>和<BGSOUND>元素。
Similar presentations
