Download presentation
Presentation is loading. Please wait.
1
HTML
3
HTML概念 HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文件称为HTML文件，也称Web文件。
4
HTML文档的编写方法 手工直接编写 使用可视化HTML编 辑 器 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。
记事本等，存成.htm .html格式 使用可视化HTML编 辑 器 Frontpage、Dreamweaver等 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。
5
网页文件命名 *.htm或*.html 无空格 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 区分大小写
首页文件名默认为：index.htm 或 index.html
6
HTML 文件结构 <html>...</html> <head>...</head>
<body>...</body> 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。
7
HTML 文件结构 (Document Structures)
<HEAD> <title></title> <meta> </HEAD> <BODY> HTML 文件的正文 </BODY> </HTML>
8
第一张网页（01.htm） <html> <head>
<title>第一张网页</title> </head> <body> 欢迎光临我的主页！ </body> </html>
9
基本组成部分—— HTML元素属性 HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。
10
第二张网页（02.htm） <html> <head>
<title>第一张网页</title> </head> <body> <p align="center">欢迎光临我的主页!</p> </body> </html>
11
HTML基本结构的 有关元素和元素属性 HEAD元素——1 <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 <title> <title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。
12
HTML基本结构的 有关元素和元素属性 HEAD元素——2 <meta>元素
<meta name="keywords" content="study,computer"> 用来标记搜索引擎在搜索你的页面时所取出的关键词。
13
HTML基本结构的 有关元素和元素属性 HEAD元素——3 <meta>元素
<meta name="author" content=“wutao"> 用来标记文档的作者。
14
HTML基本结构的 有关元素和元素属性 HEAD元素——4 <meta>元素
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 用来标记你的页面的解码方式。
15
HTML基本结构的 有关元素和元素属性 HEAD元素——5 <meta>元素
<meta http-equiv=“refresh” content=“5;URL= 用来自动刷新网页
16
练习（03.htm） 编写一个网页，要求3秒钟后自动跳转到校网主页。 <html> <head>
<title>my first page</title> <meta http-equiv=“refresh” content=“3;URL= </head> <body> <p align=“center”>三秒钟后本网页将自动跳转到华东理工大学首页</p> </body> </html>
17
<body>元素及元素属性——1
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。
18
<body>元素及元素属性——2
(1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#CCFFCC”。 例：04.htm
19
HTML对颜色的控制 HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
20
常见颜色的代码 颜色 颜色名和RGB值 黑色 Black=”#000000” 银色 Silver=”#c0c0c0” 红色
Red=”#ff0000” 蓝色 Blue=”#0000ff” 白色 White=”#ffffff” 黄色 Yellow=”ffff00” 绿色 Green=”#00ff00” 海蓝色 Aqua=”#00ffff”
21
<body>元素及元素属性——3
(2)background background属性标志HTML文档的背景图片。如：background=“images/bg.gif"。 可以使用的图片格式为GIF，JPG 例：05.htm、06.htm
22
<body>元素及元素属性——4
(3)bgproperties=fixed bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。 例：07.htm和08.htm对比
23
<body>元素及元素属性——5
(4)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。 例：09.htm
24
文字标签属性——1 文字属性标记<font>..</font> 1.文字颜色
指定颜色 <font color=#> ... </font> #=RRGGBB 16 进制数码 例：010.htm
25
文字标签属性——2 文字属性标记 2.文字字体 <font face=“#, #, ..., #”> ... </font> #=客户端可获得的字体 011.htm
26
文字标签属性——3 文字属性标记 3.文字大小 <font size=#> ... </font>
#=1, 2, 3, 4, 5, 6, 7 or +#, -# 例：012.htm
27
文字布局 行的控制 段(Paragraph) (可以看作是空行) <p> 空白占位符 例：013.htm
28
文字布局 行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。 例：014.htm 不换行<nobr> 015.htm
29
HTML文字与段落格式控制 <body>…… <i>倾斜文本</i>
<b>粗体文本</b> <u>下划线文本</u> <s>删除线文本</s> ……</body> 例：016.htm
30
基本组成部分—HTML注释 HTML文档可以插入注释。注释内容不会在浏览器窗口显示
31
文字的对齐 <hn align=#>...</hn> (n=1,2,3,4,5,6)
<p align=#>...</p> (#=left, center, right)
32
3.HTML段落与分行控制 居中--- <center>元素
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似 例如：<center>居中段落</center> 例：018.htm
33
3.HTML段落与分行控制 标尺线 <hr size = #>：设定线宽 <hr width=#>：设定线长
<hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色 例：019.htm
34
3. HTML的段落与分行控制 无序列表元素—1 列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。
35
3. HTML的段落与分行控制 无序列表元素—2 例：020.htm <li>sports</li>
无序列表是由<ul>和<li>元素定义的: <ul> <li>sports</li> <li> food </li> <li> drink </li> <li> friends </li> </ul> 例：020.htm
36
4.超级链接—普通超级链接1 超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。
37
4.超级链接—普通超级链接2 超级链接是用锚元素<a>定义的
在<a>元素下，有元素属性href, href的属性值为一个URL地址 如：<a href=“ 如：<a href=“29.htm">普通超级链接</a> 例：021.html
38
4.超级链接—E-mail超级链接 超级链接可以指向E-mail地址
如：<a 例：022.htm
39
4.超级链接—新开链接窗口 开一个新的(浏览器)窗口 (Target Window)
<a href="URL" target=“_blank"> ... </a> 例：023.htm
40
HTML对图片的控制--1 基本语法: <img src=“图片名称”>
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址
41
HTML对图片的控制--2 所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
定义图片替代文本的方法是： <img src=“图片名称” alt=“这是一张图片”> 例：024.htm
42
HTML对图片的控制--3 图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是：
<img src="sample.jpg" width=100 height=100 > width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 例：025.htm
43
HTML对图片的控制--4 图片的边框 我们可以为一幅图片加一个边框以突出显示：
<img src="sample.jpg" border= " 2 " > border的属性值为象素数 例：026.htm
44
HTML对图片的控制--5 图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是：
<img src=“sample.jpg” align=“left” > <img src=“sample.jpg” align=“right”> 例：027.htm
45
表格(TABLE)标记--1 <table> 元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。 <tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。 <td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。
46
表格(TABLE)标记--2 表格的基本结构 <table>定义表格 </table>
<tr> <th>定义表头</th> </tr> <tr>定义表行 <td>…</td>定义单元格 </table>
47
表格(TABLE)标记--3 表格的属性 –1 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细
48
表格(TABLE)标记--2 表格的属性 –1 bgcolor属性：指定表格或某一个单元格的背景颜色。
background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。
49
<h1 align=“center”><font face=“华文琥珀” color=pink>小小网上书屋 </font> </h1>
静态网页 <img border="0" src="图片/z159.jpg" width="150" height="100"> <table> <tr> <td>…</td> … </tr> </table>
50
<p align="center"><a href="读者须知
<p align="center"><a href="读者须知.htm"><b>读者须知</b></a>
52
<a href="mailto:wang@online. sh
<a
53
网页中的框架 制作框架页面的步骤： 1.编写所有子框架页面 2.编写主框架页面 3.在主框架页面中设定子框架名称
4.如果框架页面之间存在链接，在子框架中设定链接。 注意：框架页面是不含<body>标签的
54
网页中的框架 基本语法 <frameset> </frameset> <frame src="url">
<noframes> <body> 您的浏览器不支持框架，请考虑升级您的浏览器！ </body> </noframes> </frameset>
55
网页中的框架 定义框架的基本语法 框架由一对<frameset>定义
<frameset>有两个属性：rows和cols Rows定义上下分割的框架的大小； cols定义左右分割的框架的大小； 在定义大小时，rows和cols可以使用相对大小或以百分比为单位。
56
网页中的框架 各窗口的尺寸设置 排列方式： A B C <frameset rows=#>横排多个窗口
<frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> 排列方式： A B C 例：041.htm
57
网页中的框架 各窗口的尺寸设置 <frameset cols=#>纵向排列多个窗口
<frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> 排列方式：A B C 例：042.htm
58
网页中的框架 COLS & ROWS：纵横排列多个窗口 <frameset cols=137，*> 排列方式： B A C
<frame src="A.htm"> <frameset rows=82,*> <frame src="B.htm"> <frame src="C.htm"> </frameset> 排列方式： B A C 例：053.htm
59
网页中的框架 框架边框的颜色 各窗口边框的设置 bordercolor="ff0000“ 例：043.htm frameborder=#
#=yes, no / 1, 0 框架边框的宽度 framespacing="10" 例：044.htm
60
网页中的框架 <frame>的属性 name：定义该框架的名字。这个名字可以被一些网页元素引用，如被<a>元素引用。
<a href=url target=“framename”> Src：在本框架里显示网页的URL。 Target：目标框架,引用的是目标框架的名字。
61
网页中的框架 在当前框架中打开超链接页面 在指定框架中打开超级链接页面 新开窗口打开链接页面 跳出整个框架集
默认就是在当前框架页中打开,也可以采用Target=“_self” 在指定框架中打开超级链接页面 Target=“name” 新开窗口打开链接页面 Target=“_blank” 跳出整个框架集 Target=“_parent”
62
网页中的框架 <frame>的属性 Scrolling：是否显示滚动条。yes, no, auto
Noresize：框架在浏览器里不可以被调整大小。
63
会移动的文字 基本语法 文字移动属性 <marquee> ... </marquee>
(1)方向 ：direction=# #=left, right,up,down
64
会移动的文字 2、文字移动属性 (2)方式： behavior=#
#=scroll(循环), slide(只走一次), alternate(来回走) (3)循环: loop=# #=次数；若未指定则循环不止(infinite)
65
会移动的文字 2、文字移动属性 (4)速度: scrollamount=# (5)延时: scrolldelay=#
66
会移动的文字 3、其他属性 (1)底色: bgcolor=# (2)面积: height=# width=#
#=RRGGBB 16 进制颜色代码 (2)面积: height=# width=# (3)空白:hspace=# vspace=#
67
表单(FORM)标记 HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。
在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。
68
表单(FORM)标记 表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。 <form>元素
action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。 Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。
69
表单(FORM)标记 表单的基本语法: <form action="url" method=“*” > ...
<input type=“submit”> <input type=“reset”> </form> * =GET有数据量限制，POST无以上限制,以文件形式传输
70
表单(FORM)标记 <input name=? type=* value=** size=*** maxlength=??>
文本框 <input name=? type=* value=** size=*** maxlength=??> ? 文本框的名字 * text,password ** 默认值 *** 长度 ?? 最大输入字符数
71
表单(FORM)标记 3.文本域 <textarea name=* rows=** cols=**> ... </textarea>
72
表单(FORM)标记 按钮 包括普通按钮、重置按钮和提交按钮
<input type="submit" value="提交" name=“B1"> <input type="reset" value="全部重写" name=“B2">
73
表单(FORM)标记 5.复选框(Checkbox) 在一个表单里的所有多选框可以有一个或多个被选中。
<input type=checkbox> <input type=checkbox value=**>
74
表单(FORM)标记 6.单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。
<input type=radio name=sex value=**> 各个选项的name必须一样才能达到预期效果
75
表单(FORM)标记 7.下拉列表 基本语法 <select name=*> <option selected>说明</option> <option value=**>说明2 </option> </select>
76
表单(FORM)标记 7.下拉列表 <select size=**>
（2）列表框的长度 <select size=**> （3）允许多选 <select size=** multiple>
77
表单(FORM)标记 8.图象域 <input type=image src=url>
78
动态网页 <p>姓名：<input type="text" name="Name">
<P>性别: <INPUT Type=Radio Name=sex Value="male" Checked>男 <INPUT Type=Radio Name=sex Value="female">女
79
<p>户籍：<select name="City" size=1> <option>北京市
<option selected>上海市 <option>天津市 <option>重庆市 </select> <P>兴趣： <UL> <LI><INPUT Type=CheckBox Name=love Value="电脑">电脑 <LI><INPUT Type=CheckBox Name=love Value="体育">体育 <LI><INPUT Type=CheckBox Name=love Value="游戏">游戏 <LI><INPUT Type=CheckBox Name=love Value="音乐">音乐 <LI><INPUT Type=CheckBox Name=love Value="电影">电影 </UL>
80
<p>留言： <p><textarea name="Memo" rows="4" cols="60"></textarea> <p><input type="submit" value="提交"> <input type="reset" value="清空">
81
<form action="Echo64.asp" method="POST">
82
ASP文件包括文本、HTML标记、ASP脚本语句（用<% %>界定符标记）。
name = Request("Name") If Request("sex")="male" Then appellation = "先生" Else appellation = "小姐" End If city = Request("City") loves = Request("love") Memo = Request("Memo") Memo = Replace(Memo, vbCrLf, "<BR>") %> <HTML> <BODY> <FONT face="华文楷体" color="#990033" SIZE=5> <CENTER><% =name&appellation&" ： 欢迎您!“ %><br> <p>您是<%=city%>人<br> </CENTER> <p>您喜欢的是： <UL><%=loves%></UL> 您的留言是：<br> <p><%=Memo%> </FONT> </BODY> </HTML> 文件Echo64.asp ASP文件包括文本、HTML标记、ASP脚本语句（用<% %>界定符标记）。
83
name = Request("Name") city = Request("City") loves = Request("love")
If Request("sex")="male" Then appellation = "先生" Else appellation = "小姐" End If city = Request("City") loves = Request("love") Memo = Request("Memo")
84
Name=林琳； appellation=小姐； city= 北京； loves=体育，音乐，电影
Memo= 你们好！ 在哪儿能看到免费电影？ <HTML> <BODY> <FONT face="华文楷体" color="#990033" SIZE=5> <CENTER><% =name&appellation&" ： 欢迎您!" %><br> <p>您是<%=city%>人<br> </CENTER> <p>您喜欢的是： <UL><%=loves%></UL> 您的留言是：<br> <p><%=Memo%> </FONT> </BODY> </HTML>
85
http://localhost/ w / Echo64.asp
Similar presentations
