AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

HTML入门教程

发布者 csser
发布于 1440756043310  浏览 2691 关键词 HTML5, 前端 
分享到

第1页

HTML

第2页

第3页

HTML概念
HTML(Hyper Text Markup Language 超文本标识语言)
是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文件称为HTML文件,也称Web文件。

第4页

HTML文档的编写方法
手工直接编写
记事本等,存成.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) 
<HTML> 
<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>元素下面可以插入很多很有用的元素属性。下面介绍四种:
<meta name="keywords" content="study,computer"> 
用来标记搜索引擎在搜索你的页面时所取出的关键词。

第13页

设置页面关键字-keywords
   基本语法


<meta name=”keywords” content=”value”>
Keywords用于说明定义的是关键字,value用于说明为该网页定义的关键字,可以是多个关键字。

第14页

设置页面关键字-keywords
<html>
<head>
  <title>设置文件关键字</title>
<meta name=”keywords” content=”计算机、英语、经管、财会、职场”> …
</head>
<body>

</body>
</html>
此行代码表示在该HTML文件中,定义的关键字为“计算机、英语、经管、财会、职场”,当利用搜索引擎搜索图书时,输入任何一个关键字都可以搜索到该网页。

第15页

HTML基本结构的有关元素和元素属性
HEAD元素——3
<meta>元素 
<meta name="author" content=“wutao"> 
用来标记文档的作者。

第16页

HTML基本结构的有关元素和元素属性
HEAD元素——4
<meta>元素 
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 
用来标记你的页面的解码方式。 

第17页

HTML基本结构的有关元素和元素属性
HEAD元素——5
<meta>元素 
<meta http-equiv=“refresh” content=“5;URL=http://www.ecust.edu.cn”>
用来自动刷新网页

第18页

设置页面过期时间-expires
   基本语法


<meta http-equiv=”expires” content=”value”>
expires用于设计页面过期时间,content属性设置具体过期时间值。

第19页

设置页面过期时间-expires
<html>
<head>
  <title>设置页面过期时间</title>
<meta http-equiv=”expires” content =”FRI,1 JUN 2007 00 00 00 GMT”> 
</head> <body>
</body>
</html>
Expires用于设置网页的过期时间,content给出了网页过期的具体时间值。

第20页

定义元信息<meta>
   基本语法


<meta http-equiv=”” name=”” content=””>

第21页

定义元信息<meta>
   语法说明


<meta>标记中的http-equiv属性用于设置一个http的标题域,但确定值由content属性决定,name属性用于设置元信息出现的形式,content属性用于设置元信息出现的内容。

第22页

练习(03.htm)
编写一个网页,要求3秒钟后自动跳转到校网主页。
<html>
      <head>
        <title>my first page</title>
        <meta http-equiv=“refresh” content=“3;URL=http://www.sict.edu.cn/”>
      </head>
      <body>
       <p align=“center”>三秒钟后本网页将自动跳转到山东商业职业技术学院首页</p>
      </body>
</html>

第23页

设置基准文字<basefont>
   基本语法


<html>
<head> 
   <basefont face=”” size=”” color=””>
</head> 
<body>
</body>
</html>

第24页

设置基准文字<basefont>
   语法说明


  <basefont>标记用于设置网页中的文字;
  face属性用于设置文字的名称,可以是宋体、隶 
      体、楷体等;
  size属性用于设置字号的大小;
  color用于设置字体的颜色。

第25页

设置基准文字<basefont>
<html>
<html>
<head> 
<basefont face="宋体" size="h2" color ="#666666"> </head>
<body>
</body>
</html>
此行代码表示将网页中文字的字体设置为“宋体”,字号大小为“h2”,颜色为“#666666”(灰色)。

第26页

<body>元素及元素属性——1
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。

第27页

<body>元素及元素属性——2
<body>元素中有下列元素属性: 
(1)bgcolor
bgcolor属性标志HTML文档的背景颜色。如:bgcolor=“#CCFFCC”。
例:04.htm

第28页

HTML对颜色的控制
HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

第29页

常见颜色的代码

第30页

<body>元素及元素属性——3
<body>元素中有下列元素属性: 
(2)background
background属性标志HTML文档的背景图片。如:background=“images/bg.gif"。
可以使用的图片格式为GIF,JPG
例:05.htm、06.htm

第31页

<body>元素及元素属性——4
<body>元素中有下列元素属性: 
(3)bgproperties=fixed
bgproperties=fixed使背景图片成水印效果,即图片不随着滚动条的滚动而滚动。
例:07.htm和08.htm对比

第32页

<body>元素及元素属性——5
<body>元素中有下列元素属性: 
(4)text
text属性标志HTML文档的正文文字颜色。如:text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。
例:09.htm

第33页

设置页面边距——topmargin、leftmargin、rightmargin、bottomnargin
基本语法

 <body topmargin=value leftmargin=value rightmargin=value
 bottomnargin=value>

第34页

设置页面边距——topmargin、leftmargin、rightmargin、bottomnargin
通过设置topmargin/leftmargin/rightmargin/bottomnargin不同的属性值来设置显示内容与浏览器的距离:
  topmargin设置到顶端的距离
  leftmargin设置到左边的距离
  rightmargin设置到右边的距离
  bottommargin设置到底边的距离。

第35页

设置页面边距——topmargin、leftmargin、rightmargin、bottomnargin

第36页

文字标签属性——1
文字属性标记<font>..</font>
1.文字颜色 
指定颜色 <font color=#> ... </font>
#=RRGGBB 16 进制数码
例:010.htm

第37页

文字标签属性——2
文字属性标记
2.文字字体
<font face=“#, #, ..., #”> ... </font>#=客户端可获得的字体
011.htm

第38页

文字标签属性——3
文字属性标记
3.文字大小
<font size=#> ... </font> 
#=1, 2, 3, 4, 5, 6, 7 or +#, -#
例:012.htm

第39页

文字布局
行的控制 
段(Paragraph) (可以看作是空行) <p>
空白占位符 
例:013.htm

第40页

文字布局
行的控制 
HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。
例:014.htm
不换行<nobr>
    015.htm

第41页

换行与不换行<wbr>/<nobr>
基本语法
<body>
输入要显示的文字内容<nobr><wbr>继续输入要显示的内容</wbr></nobr>
</body>

第42页

语法说明
HTML文件中,成对的<nobr></nobr>标记表示不换行,但是在<nobr>标记中,插入成对的<wbr> </wbr>标记后,<wbr> </wbr>标记之间的内容会被强制换行。

第43页

HTML文字与段落格式控制
<body>……
     <i>倾斜文本</i>
     <b>粗体文本</b>
     <u>下划线文本</u>
  <s>删除线文本</s>
     ……</body> 
例:016.htm

第44页

确定文字上下标——<sup>/<sub>
基本语法
<body>
   <sup>上标内容</sup><br>
   <sub>下标内容</sub><br>
</body>

第45页

设置地址文字<address>
基本语法
<body>
   <address>请在此添加地址信息</address>
</body>
在HTML文件中,利用成对<address> </address>标记就可以
将网页需要显示的地址文字突出显示。

第46页

预格式化<pre>
基本语法
<body>
  <pre>
  </pre>
</body>
在HTML文件中,利用<pre>标记不仅可以定义网页文字中的段落,还可以对段落格式进行定义。

第47页

第48页

网页效果

第49页

设置段落缩进<blockquote>
基本语法
<body>
   <blockquote>需要缩进的内容</blockquote>
 </body>

第50页

语法说明
在HTML文件中,利用成对<blockquote> </blockquote>标记对网页中的文字进行缩进,可以更好地体现网页文字的层次结构。

第51页

第52页

忽略HTML标记<xmp>
基本语法
<body>
  <xmp>…</xmp>
</body>
在HTML文件中,只要是插入在成对的<xmp>…</xmp>标记中的内容,都会将HTML标记忽略,包括标记在内的所有内容都会直接显示在页面上。

第53页

第54页

小实例——文字网页

第55页

接上页

第56页

网页效果

第57页

基本组成部分—HTML注释
HTML文档可以插入注释。注释内容不会在浏览器窗口显示
HTML注释的格式为:<!-- 注释内容 -- ><!--多行注释内容 -- >
或<comment>

例:017.htm

第58页

添加注释<!-->或<comment>
<html>
<head> 
 <!--请在此添加注释语句!>
<title>添加注释<title>
</head>
<body>
<!--请在此添加注释语句!>
<comment>此处也可以添加注释语句</comment>
</body>
</html>

第59页

文字的对齐
<hn align=#>...</hn> (n=1,2,3,4,5,6) 
<p align=#>...</p> (#=left, center, right)

第60页

3.HTML段落与分行控制

居中--- <center>元素
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似
例如:<center>居中段落</center>
例:018.htm

第61页

3.HTML段落与分行控制
标尺线
<hr size = #>:设定线宽
 <hr width=#>:设定线长
 <hr align=#>:设定对齐方式 #=left, right 
 <hr color=#> :设定线的颜色

例:019.htm

第62页

3. HTML的段落与分行控制
无序列表元素—1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。

第63页

3. HTML的段落与分行控制
无序列表元素—2
无序列表是由<ul>和<li>元素定义的:
<ul>
<li>sports</li>
<li> food </li>
<li> drink </li>
<li> friends </li>
</ul>
例:020.htm

第64页

列表类型
列表类型与标记符号
 

第65页

插入定义列表<dl>
<dl>
  <dt>名称<dd>说明  
  <dt>名称<dd>说明
  <dt>名称<dd>说明
  …
<dl>
  <dt>标记定义了组成列表项名称部分,同
时此标记只在<dl>标记中使用;
  <dd>用于解释说明<dt>标记定义的项目名称,此标记也只能在<dl>标记中使用。

第66页

语法说明:

第67页

第68页

网页效果

第69页

插入无序列表<ul>
<ul>
  <li>项目名称</li>…
  <li>项目名称</li>…
  <li>项目名称</li>…
  …
<ul>
在HTML文件中,利用成对<ul></ul>标记可以插入无序列表,但<ul>标记之间必须使用成对<li></li>标记添加列表项值。

第70页

第71页

插入目录列表<dir>
基本语法
<dir>
  <li>项目名称</li>…
  <li>项目名称</li>…
  <li>项目名称</li>…
  …
</dir>
在HTML文件中,利用成对<dir></dir>标记可以插入目录列表,但<dir>标记之间必须使用成对<li></li>标记添加列表项值。

第72页

第73页

插入菜单列表<menu>
基本语法
<menu>
  <li>项目名称…
  <li>项目名称…
  <li>项目名称…
  …
</menu>
在HTML文件中,利用成对<menu></menu>标记可以插入菜单列表,但<menu>标记之间只需要单个<li>标记添加列表项值。

第74页

第75页

插入有序列表<ol>
基本语法
<ol>
  <li>项目名称</li>…
  <li>项目名称</li>…
  <li>项目名称</li>…
  …
</ol>
在HTML文件中,利用成对<ol></ol>标记可以插入有序列表,但<ol>标记之间必须使用成对<li></li>标记添加列表项值。

第76页

第77页

有序列表Type属性及说明

第78页

插入有序列表<ol>——在<ol>中输入<type>属性
基本语法
<ol Type=””>
  <li>项目名称</li>…
  <li>项目名称</li>…
  <li>项目名称</li>…
  …
</ol>

第79页

第80页

4.超级链接—普通超级链接1
超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。

第81页

4.超级链接—普通超级链接2
超级链接是用锚元素<a>定义的 
在<a>元素下,有元素属性href, href的属性值为一个URL地址
如:<a href=“http://www.sict.edu.cn/”>指向学校的超级链接</a> 
如:<a href=“29.htm">普通超级链接</a>
例:021.html

第82页

4.超级链接—E-mail超级链接 
超级链接可以指向E-mail地址
如:<a href=“mailto:ldd@mail.ecust.edu.cn">指向E-mail地址的超级链接</a>
例:022.htm

第83页

4.超级链接—新开链接窗口
开一个新的(浏览器)窗口 (Target Window) 
<a href="URL" target=“_blank"> ... </a>
例:023.htm

第84页

设置绝对路径
绝对路径指文件的完整路径,包括文件传输的协议http、ftp等,一般用于网站的外部链接,例如:
http://www.broadview.com.cn
ftp://219.153.41.160

第85页

设置相对路径
相对路径使用方法

第86页

设置根路径
根路径的设置也适合内部链接的建立,一般情况下不使用根路径。根路径的使用很简单,以“/”开头,后面紧跟文件路径,例如:/download/index.html

第87页

插入外部链接
在HTML文件中,需要使用外部超链接时,插入成对的标记并将href属性的URL值设置为绝对路径。

第88页

插入内部链接
语法说明
在HTML文件中,需要使用内部超链接时,插入成对的标记将href属性的URL值设置为相对路径。

第89页

HTML对图片的控制--1
基本语法:
<img src=“图片名称”>
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。
src属性是必须的。Src的URL可以是绝对地址,也可以是相对地址

第90页

HTML对图片的控制--2
所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
定义图片替代文本的方法是:
<img src=“图片名称” alt=“这是一张图片”>
例:024.htm

第91页

HTML对图片的控制--3
图片的显示大小
我们可以指定一幅图片在浏览器窗口里的显示大小。
定义图片的显示大小的方法是:
<img src="sample.jpg" width=100 height=100 >
width指定图片的宽度,height指定高度。它们的属性值可以是象素,也可以是%。 
例:025.htm

第92页

HTML对图片的控制--4
图片的边框
我们可以为一幅图片加一个边框以突出显示:
 <img src="sample.jpg" border= " 2 " >
border的属性值为象素数
例:026.htm


第93页

HTML对图片的控制--5
图片的对齐方式
图片可以相对于页面或单元格有一个对齐方式。
定义水平对齐方式的方法是:
<img src=“sample.jpg” align=“left” >
<img src=“sample.jpg” align=“right”>
例:027.htm


第94页

设置图像映射
基本语法
<img src=”URL” usemap=””></img>
<map name=””>
<area shape=”” cords=” , , , ” href=”URL”>
</map>

第95页

语法说明
  <img>标记表示插入图像文件,src表示插入图像的路径;
  <map>标记表示插入图像映射;
  <area>标记表示图像映射区域;
  rhape属性表示映射区域形状:
      “rect”表示矩形区域;
      “circle”表示椭圆形区域;
      “poly”表示多边形区域;
  cords表示感应区域的坐标。

第96页

第97页

第98页

设置文字标注标记<ruby>
基本语法
<ruby>
被说明的文字
 <rt>
文字的标注
 </rt>
</ruby>
利用成对的<ruby><rt>…</rt></ruby>标记,可以对网页中的文字进行标注。

第99页

设置等宽文字<tt>、<samp>、<code>、<kdb>
基本语法
<body>
   <tt>打字机风格显示</tt>
<code>等宽文字设置内容</code>
<samp>等宽文字设置内容</ samp >
<kdb>键盘输入</ kdb >
</body>

第100页

语法说明
在HTML文件中,利用成对标记就可以对网页中的文字进行等宽设计。
 成对<tt></tt>标记设置打字机显示风格
  <code></code>等宽文字设置
  <samp></samp>等宽文字设置
  <kdb></kdb>键盘输入风格

第101页

实例代码

第102页

设置文字标注标记<ruby>
实例代码

第103页

设置文字标注标记<ruby>
网页效果

第104页

插入特殊符号
基本语法
<body>
  & …… ©
</body>

第105页

插入特殊符号
部分特殊符号与对应代码

第106页

插入特殊符号
语法说明
在HTML文件中,特殊符号对应的代码,在网页中显示的就是该代码对应的特殊符号。

第107页

实例代码

第108页

表格(TABLE)标记--1
<table> 元素:定义一个表格。每一个表格只有一对<table>和</table>,一张页面中可以有多个表格。
<tr>元素:定义表格的行,一个表格可以有多行,所以<tr>对于一个表格来说不是唯一的。
<td>元素:定义表格的一个单元格。每行可以有不同数量的单元格,在<td>和</td>之间是单元格的具体内容。
需要注意的是:上述的三个元素必须、而且只能够配对使用。缺少任何一个元素,都无法定义出一个表格。

第109页

表格(TABLE)标记--2
表格的基本结构
<table>定义表格
<tr>
<th>定义表头</th>
</tr>
<tr>定义表行
<td>…</td>定义单元格
</tr>
</table>

第110页

表格(TABLE)标记--3
表格的属性 –1
width属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
height属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素。
border属性:表格边线粗细

第111页

表格(TABLE)标记--2
表格的属性 –1
bgcolor属性:指定表格或某一个单元格的背景颜色。
background属性:指定表格或某一个单元格的背景图片。其属性值为一个URL地址。
align属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式。

第112页

表格常用元素标签及说明

第113页

第114页

接上页

第115页

插入表格<table> 
1  设置基本表格结构<table>、<tr>、<td>
2  设置表格标题<caption>
3  设置表格表头<th>
4  设置划分结构表格<thead>、<tbody>和<tfoot>

第116页

基本语法
<table>
  <tr>
   <td></td>
  </tr>
</table>
   <table>标记表示插入表格;
  <tr>表示插入一行;
  <td>表示插入一列。

第117页

第118页

设置基本表格结构<table>、<tr>、<td>
<table>
  <tr>
   <td></td>
  </tr>
</table>
  <table>定义表结构;
  <tr>定义行结构;
  <td>定义列结构。

第119页

第120页

接上页

第121页

设置表格标题<caption>
基本语法
<table>
<caption>插入表格标题</caption>
  <tr>
  </tr>
  <tr>
   <td></td>
  </tr>
</table>
在HTML文件中,使用成对<caption></caption>标记给表格插入标题。

第122页

第123页

接上页

第124页

设置表格表头<th>
基本语法
<table>
  <tr>
   <th>…</th>
  </tr>
  <tr>
   <td></td>
  </tr>
</table>
在HTML文件中,要将某一行作为表格文件的表头,只要将该行包含的列标记<td>改为<th>即可。

第125页

第126页

接上页

第127页

设置表格表头<th>
网页效果

第128页

设置划分结构表格<thead>、<tbody>和<tfoot>
基本语法
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
  <thead></thead>表示定义一组表头行;
  <tbody></tbody>表示定义表格主体部分;
  <tfoot></tfoot>表示为表格添加一个标注。

第129页

第130页

实例代码

第131页

网页效果

第132页

设置表格标记属性
1  设置表格的宽度和高度——width和height
2  设置表格的边框属性——border
3  设置边框的样式——frame、rules
4  设置表格的背景——bgcolor

第133页

设置表格的宽度和高度——width和height
<table width=”” height=””>
  <tr>
   <td></td>
  </tr>
</table>
在HTML文件中,<table>标记中的width用于设置表格的宽度,height属性用于设置表格的高度。

第134页

第135页

实例代码

第136页

设置表格的边框属性——border
 表格边框属性

第137页

设置表格的边框属性——border
基本语法
<table border=""  bordercolor=””>
  <tr>
  <td></td>
  </tr>
</table>
  border属性用于设置边框的粗细;
 
  bordercolor设置表格边框的颜色。

第138页

第139页

接上页

第140页

设置边框的样式——frame、rules
frame常见属性

第141页

设置边框的样式——frame、rules
rules常见属性

第142页

设置边框的样式——frame、rules
基本语法
<table frame=”” rules=””>
  <tr>
   <td></td>
  </tr>
</table>
在HTML文件中,对表格边框进行一些特殊样式设置时,需要使用frame、rules进行设置。

第143页

第144页

接上页

第145页

设置表格的背景——bgcolor
基本语法
<table bgcolor=””>
  <tr>
   <td></td>
  </tr>
</table>
在HTML文件中,通过设置bgcolor的属性值就可以设置表格的颜色。bgcolor的属性值可以是十六进制数或者英文。

第146页

第147页

接上页

第148页

设置表格行与单元格
1  调整行内容水平对齐——align
2  调整行内容垂直对齐——valign
3  设置跨行——rowspan
4  设置跨列——colspan
5  设置单元格间距——cellspacing
6  设置单元格边距——cellpadding

第149页

调整行内容水平对齐——align
基本语法
<table>
<tr align=””>
  </tr>
  <tr>
  <td></td>
  </tr>
</table>
在HTML文件中,设置行内容水平对齐方式常用的有:
  Left设置内容左对齐;
  Right设置内容右对齐
  Center设置内容居中对齐。

第150页

第151页

接上页

第152页

调整行内容垂直对齐——valign
基本语法
<table>
<tr valign=””>
  </tr>
  <tr>
   <td></td>
  </tr>
</table>
在HTML文件中,常用的4种对齐方式有:
  top内容顶端对齐;
  middle内容居中对齐;
  bottom内容底端对齐;
  baseline内容基线对齐。

第153页

第154页

接上页

第155页

设置跨行——rowspan
基本语法
<table>
  <tr>
    <td rowlspan="2"></td>
    <td></td>
  </tr>
 </table>
在HTML文件中,设置单元格的跨行,只要设置<td>标记中的rowspan的属性值即可实现。

第156页

第157页

设置跨行——rowspan
接上页

第158页

7.4.3  设置跨行——rowspan
网页效果

第159页

7.4.4  设置跨列——colspan
基本语法
<table>
<tr>
  <td colspan="2"> </td>
  <td></td>
  </tr>
  <tr>
  <td></td>
  </tr>
</table>

第160页

7.4.4  设置跨列——colspan
语法说明
在HTML文件中,设置单元格的跨列,只要设置<td>标记中的colspan的属性值即可实现。

第161页

7.4.4  设置跨列——colspan
实例代码

第162页

7.4.4  设置跨列——colspan
接上页

第163页

7.4.4  设置跨列——colspan
网页效果

第164页

7.4.5  设置单元格间距——cellspacing
基本语法
<table cellspacing=””>
  <tr>
    <td > </td>
    <td> </td>
    <td> </td>
    </tr>
</table>

第165页

7.4.5  设置单元格间距——cellspacing
语法说明
在HTML文件中,设置<table>标记中的cellspacing属性值就可以设置表格中单元格的间距。

第166页

7.4.5  设置单元格间距——cellspacing
实例代码

第167页

7.4.5  设置单元格间距——cellspacing
接上页

第168页

7.4.5  设置单元格间距——cellspacing
网页效果

第169页

7.4.6  设置单元格边距——cellpadding
基本语法
<table cellpadding="0">
  <tr>
  <td> </td>
  </tr>
  <tr>
  <td></td>
  </tr>
</table>

第170页

7.4.6  设置单元格边距——cellpadding
语法说明
在HTML文件中,设置<table>标记中的cellspacing属性值就可以设置单元格中内容与边框之间的间距。

第171页

7.4.6  设置单元格边距——cellpadding
实例代码

第172页

7.4.6  设置单元格边距——cellpadding
接上页

第173页

7.4.6  设置单元格边距——cellpadding
网页效果

第174页

7.5  表格嵌套
基本语法
<table width="760" border="1">
  <tr>
  <td> </td>
  </tr>
  <tr>
  <td>
   <table width=“100%”  border=“1”>
    <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    </tr>
   </table>
   </td>
   </tr>
</table>

第175页

7.5  表格嵌套
语法说明
在HTML文件中,第一个<table>标记表示插入第一表格,第二个<table>标记插入在标记<td></td>之间,表示在单元格中插入表格,也就是嵌套表格。

第176页

7.5  表格嵌套
实例代码

第177页

7.5  表格嵌套
接上页

第178页

7.5  表格嵌套
接上页

第179页

7.5  表格嵌套
网页效果

第180页

7.6  小实例——表格在网页中的应用
实例代码

第181页

7.6  小实例——表格在网页中的应用
网页效果

第182页

7.6  小实例——表格在网页中的应用
接上页

第183页

7.6  小实例——表格在网页中的应用
接上页

第184页

7.6  小实例——表格在网页中的应用
接上页

第185页

7.6  小实例——表格在网页中的应用
 网页效果

第186页

<h1 align=“center”><font face=“华文琥珀”  color=pink>小小网上书屋 </font> </h1>
<table>   
      <tr> 
         <td>…</td>
         …
      </tr>
        <tr> 
                      
          <td>…</td>
                 …
            </tr>
 </table>
<img border="0" src="图片/z159.jpg" width="150" height="100">

第187页

<p align="center"><a href="读者须知.htm"><b>读者须知</b></a>

第188页

第189页

<a href="mailto:wang@online.sh.cn"><b>联系我们</b></a>

第190页

网页中的框架
制作框架页面的步骤:
1.编写所有子框架页面
2.编写主框架页面
3.在主框架页面中设定子框架名称
4.如果框架页面之间存在链接,在子框架中设定链接。
注意:框架页面是不含<body>标签的

第191页

网页中的框架
基本语法
<frameset>
<frame src="url">
<noframes>
<body>
您的浏览器不支持框架,请考虑升级您的浏览器!
</body>
</noframes>
</frameset>

第192页

网页中的框架
定义框架的基本语法
框架由一对<frameset>定义
<frameset>有两个属性:rows和cols
Rows定义上下分割的框架的大小;
cols定义左右分割的框架的大小;
在定义大小时,rows和cols可以使用相对大小或以百分比为单位。

第193页

网页中的框架
各窗口的尺寸设置 
<frameset rows=#>横排多个窗口
<frameset rows=30%,20%,*> 
<frame src="A.html"> 
<frame src="B.html"> 
<frame src="C.html"> 
</frameset> 
排列方式:  A
B
C
例:041.htm

第194页

网页中的框架
各窗口的尺寸设置 
 <frameset cols=#>纵向排列多个窗口
    <frameset cols=30%,20%,*> 
<frame src="A.html"> 
<frame src="B.html"> 
<frame src="C.html"> 
</frameset> 
排列方式:A  B  C
例:042.htm

第195页

网页中的框架
COLS & ROWS:纵横排列多个窗口
<frameset cols=137,*> 
<frame src="A.htm">
<frameset rows=82,*>
<frame src="B.htm"> 
<frame src="C.htm"> 
</frameset> 
</frameset>
排列方式:      B
A
C
例:053.htm

第196页

网页中的框架
框架边框的颜色
bordercolor="ff0000“
例:043.htm
各窗口边框的设置 
frameborder=#
 #=yes, no / 1, 0
框架边框的宽度
framespacing="10" 
例:044.htm

第197页

网页中的框架
<frame>的属性
name:定义该框架的名字。这个名字可以被一些网页元素引用,如被<a>元素引用。
<a href=url target=“framename”>
Src:在本框架里显示网页的URL。
Target:目标框架,引用的是目标框架的名字。 

第198页

网页中的框架
在当前框架中打开超链接页面
默认就是在当前框架页中打开,也可以采用Target=“_self”
在指定框架中打开超级链接页面
Target=“name”
新开窗口打开链接页面
Target=“_blank”
跳出整个框架集
Target=“_parent”

第199页

网页中的框架
<frame>的属性
Scrolling:是否显示滚动条。yes, no, auto
Noresize:框架在浏览器里不可以被调整大小。

第200页

会移动的文字
基本语法
<marquee> ... </marquee> 

文字移动属性
(1)方向 :direction=#
#=left, right,up,down

第201页

会移动的文字
2、文字移动属性
(2)方式: behavior=# 
#=scroll(循环), slide(只走一次), alternate(来回走)
(3)循环:  loop=# 
#=次数;若未指定则循环不止(infinite) 

第202页

会移动的文字
2、文字移动属性
(4)速度: scrollamount=#
(5)延时: scrolldelay=#

第203页

会移动的文字
3、其他属性
(1)底色: bgcolor=#
#=RRGGBB  16 进制颜色代码
(2)面积: height=#  width=#
(3)空白:hspace=# vspace=#  

第204页

表单(FORM)标记
HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。
在HTML里,我们可以定义表单,并且使表单与CGI或ASP等服务器端的表单处理程序配合。

第205页

表单(FORM)标记
表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。 
<form>元素
action属性:用来定义表单处理程序(一个ASP、CGI等程序)的位置(相对地址或绝对地址)。
Method定义表单结果从浏览器传送到服务器的方法,一般有两种方法:get、post。

第206页

表单(FORM)标记
表单的基本语法:
<form action="url" method=“*” >... 
<input type=“submit”>
 <input type=“reset”>
</form> 
* =GET有数据量限制,POST无以上限制,以文件形式传输

第207页

表单(FORM)标记
文本框
<input name=jQuery110209567228257207123_1440756099363  type=*  value=**  size=*** maxlength=??> 
?  文本框的名字
*  text,password
**  默认值
*** 长度
??  最大输入字符数

第208页

表单(FORM)标记
3.文本域
<textarea name=* rows=** cols=**> ... </textarea>

第209页

表单(FORM)标记
按钮
包括普通按钮、重置按钮和提交按钮
<input type="submit" value="提交" name=“B1">
<input type="reset" value="全部重写" name=“B2">

第210页

表单(FORM)标记
5.复选框(Checkbox) 
在一个表单里的所有多选框可以有一个或多个被选中。
<input type=checkbox>
<input type=checkbox value=**>

第211页

表单(FORM)标记
6.单选框(RadioButton)
一个表单里的所有变量名相同的单选框只能够有一个被选中。
<input type=radio  name=sex value=**>
各个选项的name必须一样才能达到预期效果

第212页

表单(FORM)标记
7.下拉列表
基本语法
<select name=*><option selected>说明</option>
<option value=**>说明2 </option>
</select>

第213页

表单(FORM)标记
7.下拉列表
(2)列表框的长度
<select size=**>
(3)允许多选
<select size=** multiple>

第214页

表单(FORM)标记
8.图象域
<input type=image src=url>

第215页

<p>姓名:<input type="text"  name="Name"> 
<P>性别: <INPUT Type=Radio Name=sex Value="male" Checked>男
               <INPUT Type=Radio Name=sex Value="female">女

第216页

 <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>

第217页

<p>留言:
  <p><textarea name="Memo" rows="4" cols="60"></textarea> 
<p><input type="submit" value="提交">
         <input type="reset"  value="清空"> 

第218页

<form  action="Echo64.asp"    method="POST"> 

第219页

<% 
  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脚本语句(用<%    %>界定符标记)。

第220页

第221页

<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> 
Name=林琳; appellation=小姐;   city= 北京; 
loves=体育,音乐,电影
Memo= 你们好!
               在哪儿能看到免费电影?

第222页

http://localhost/ w / Echo64.asp
支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。