1 / 43

HTML 网页制作

HTML 网页制作. 名词解释. HTML(HyperText Markup Language ) ： 编写网页的基本语法，简单易懂，用最基本的文字编辑器即可编写。 例如：记事本、 FrontPage 、 DreamWeaver 。 浏览器 (Browser) ： 相当于 html 翻译器，将 html 语法，用生动活泼易懂的方式解读出来，目前时 　下最受欢迎的浏览器有 IE 、 Netscape 。 网页： 您所看到的每一页 html 文件都叫做网页。 首页： 连上一个站时，所出现的第一个画面就叫做首页。

poppy
Télécharger la présentation

HTML 网页制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML网页制作

  2. 名词解释 • HTML(HyperText Markup Language )： • 编写网页的基本语法，简单易懂，用最基本的文字编辑器即可编写。 • 例如：记事本、FrontPage、DreamWeaver。 • 浏览器(Browser)： • 相当于html翻译器，将html语法，用生动活泼易懂的方式解读出来，目前时 　下最受欢迎的浏览器有IE、Netscape。 • 网页： • 您所看到的每一页html文件都叫做网页。 • 首页： • 连上一个站时，所出现的第一个画面就叫做首页。 • 通常完整档名应该存成index.htm或是index.html 。 • 但有些提供网页空间的公司，会规定你首页的档名，那你就必须存成这个档名才行(例如default.htm)。 • 标签： • 又称为标记，例如<body>。 • html文件就是由一群标签所构成的，浏览器会根据所写的标签，解读出相对应的内容。以下数章就是说明各个卷标的功能与写 　法。 • 属性： • 有些卷标中还可以加入属性来做进阶的控制。 • 例如 <body text="#000000">，text就是body这个卷标下的一个属性，是用来控制文字颜色的。

  3. 基本架构 • 打开附属应用程序中的[记事本]。 • <html> • <head> • <title></title> • </head> • <body> • </body> • </html> • 在<title>与</title>之间，输入简短的文字。 　 • 在<body>与</body>之间，输入简短的文字。 　 • 步骤1、2、3如下图所示 　 　 • 要存档时，主档名自行选择，扩展名则必须是 htm或html。 • 若是没有特别规定，首页的档名必须是index.htm或index.html。 • 找到刚存好的档案，快速用鼠标左键按两下！所看到的，就是你的第一个网页。

  4. 卷标功能解说 • <html>...</html> • 是用来表示这份html文件的有效范围。 • <title>...</title> • 输入在这对卷标中的文字，将成为网页的标题，会出现在浏览器最左上方的部分。 • <body>...</body> • 是用来标示网页主要内容(文字或图片等等)的开始与结束。 • 接下来介绍的所有语法都必须放在这对标签之中！ • body这个卷标内可加入许多的属性， • <body>中最常用的属性如下: • text:用来控制你网页中，所有文字的颜色， • 写法:<body text="#000000"> • #000000 是网页所使用的颜色代码，变换这些色码，可自行设定颜色。 • bgcolor :用来控制您网页中，背景的颜色。 • 写法是<body bgcolor="#ffffff"> • link:用来控制网页中，超级链接的颜色。 • 写法是<body link="#0080ff"> • alink:用来指定超级链接，在连结中的颜色(鼠标按下去时)。 • 写法是<body alink="#8000ff">

  5. vlink:用来指定超级链接，在连结后的颜色， • 写法是<body vlink="#ff0000"> • background:用来控制网页中，背景的图案，若嫌背景每次都用素面的颜色不好看，那就一定要用这个， • 写法是<body background=“xxx.jpg”> 直接将图文件的位置输入在引号中，可放置 jpg 或 gif 这两种格式的图档。 　 • 若是想一次控制很多属性，这些属性可以在一个卷标内完成。只要在属性与属性之间空一格即可。 　 • EX: <body text=“#000000” bgcolor=“#ffffff”> • <html> • <head> • <title>HTML教学范例</title> • </head> • <body text="#3366ff" bgcolor="#000000"> • 请注意看窗口左上角，还有文字与背景的颜色。 • </body> • </html>

  6. 换行 : • html文件并不是按下 enter就会自动换行，它必须使用这些标签。<p>...</p> • <p> :代表一个段落的开始，使用后，文字会自动换行。 • </p> :则代表此段落结束。 • <br> :可以使文字换到下一行。注意！它并没有配对标签。 • 对齐 ： • <p align=left>...</p>靠左 • <p align=center>...</p>置中 • <p align=right>...</p>靠右 • 只要用<p>...</p>中 align这个属性就可以做到，所以除了对齐的功能外，也有上述的换行功能。 • <center>...</center> • 夹在这组配对卷标中的组件，将会被置中。 • 固定模式: • <pre>...</pre> • 可以先用平常在word中的排版方式，将网页的主要内容搞定，再用这个标签将主要内容全部包起来，最后在浏览器看到的结果，不管是空格、空行、换行或是文字的位置，都会依原来的格式排好。 • 缩排： • <blockquote>...</blockquote> • 文字将会向右缩排，相当于打字时按下「 Tab」键的效果。 • 如果使用两组的话，就会缩排两单位，依此类推。

  7. <html> • <body> • 钓鱼台是台湾的 • <p>你总以为爱是讨你欢心，</p> • <p>对你好不过是天经地义，</p> • <p>却不曾关心我也有情绪。</p> • <p>我的付出需要你的热情响应。 • <br>是我宠坏了你 • <br>溺爱骄纵了你的心</p> • 小痞子， • <br>逛大街， • <br>沿街被人扁。 • <p align=left>走路靠左边</p> • <p align=center>走路走中间</p> • <p align=right>走路靠右边</p> • <center>土木AB最赞了!!!</center> • <pre>男人不该让女人流泪 • 至少我尽力而为 • 相　　信　　我</pre> • <blockquote>缩排一次</blockquote> • <blockquote><blockquote>缩排两次</blockquote></blockquote> • </body> • </html>

  8. 标题文字 ： • <h1>...</h1>～<h6>...</h6> • 叫做标题卷标，当想要加入一个标题文字时，就需要用到。 • 其中<h1>是最大的，<h6>则是最小的。 • 写法是： • <h1>小远</h1> • 标题的大小还可以自由控制！ 　 • <h1>小</h1> • <h2>远</h2> • <h3>真</h3> • <h4>的</h4> • <h5>很</h5> • <h6>帅</h6>

  9. 字体大小 • <font>...</font> • 这个卷标可以加入一些属性以控制文字的大小、颜色、字型等 • 先把注意力摆在“大小”， • 写法是：　<font size=“3”>小远</font> • size属性：　用来控制大小。 • 基本上如果没有特别规定，默认值就是3，值越大字就越大。 　 • size还有一种写法:<font size=“+1”>小远</font> • 因为默认值为3，所以+1以后就变成4的效果， • 同理-1就变成 2的效果。 • <font size=“7”> = <font size=“+4”> <font size=“6”> = <font size=“+3”> <font size=“5”> = <font size=“+2”> <font size=“4”> = <font size=“+1”> <font size=“3”> = <font size=“+0”> <font size=“2”> = <font size=“-1”> <font size=“1”> = <font size=“-2”> • 如果写<font size=“+100”>小远</font>，会失败！因为属性有一定的限制，不能让你做出超级大字或是蚂蚁小字， • 若设定超过最大值，那将会以最大的字体来显示。 　 • <font size=-2>Ｈ</font> • <font size=“-1”>Ｔ</font> • <font size=“+0”>Ｍ</font> • <font size=“+1”>Ｌ</font> • <font size="+2">网</font> • <font size="+3">页</font> • <font size="+4">教</font> • <font size="+100">学</font>

  10. 修改文字大小默认值 ： • 文字大小默认值是3。利用 <basefont size=“1~7”>默认值可以改成1~7。 • 字型及颜色 ： • face：是用来控制字型的， • 写法是<font face=“标楷体”> 　文字就变成标楷体 • 如果没有所设定的字型，文字仍然只会以细明体的型式呈现。 • Color： • 除了可在<body>中控制字的颜色，也可以让某特定的一段文 　字换颜色。 • 写法是 <font color="#ff0000"> • 其中 #ff0000 是网页使用的颜色代码。 • 其它的特别效果 ： • 我是<i>斜体字</i> 我是斜体字 • 我是<b>粗体字</b> 我是粗体字 • 我有<u>底线</u> 我有底线 • 我是<tt>打字机字型</tt> 我是打字机字型 • 我让<big>文字加大</big> 我让文字加大 • 我让<small>文字变小</small> 我让文字变小 • 我在<sup>上</sup> 我在上 • 我在<sub>下</sub> 我在下 • 我会<blink>闪烁</blink>(IE不支持) 我会闪烁 • 我是<code>原始码</code> 我是原始码 • 我是<var>变数</var> 我是变数 • 我是<address>地址</address> 我是地址 • <strong>加强</strong>语气 加强语气 • <cite>引用</cite>名言 引用名言 其它的特殊符号 ： &lt; < &gt; > &amp; &

  11. 图片卷标 ： • <img src="xxx.gif"> • 利用这个写法就可以把图放进网页中了 • src 后面要填的是图片的位置所在。 • 绝对位置与相对位置： • <img src=“http://www.csie.nctu.edu.tw/~jmsu/1.gif”> (绝对位置) • <img src="1.gif"> (相对位置) • 如果两个档案都是放在http://www.csie.nctu.edu.tw/~jmsu这个目录下，则选择相对路径的写法. • <img src=“http://www.csie.nctu.edu.tw/~jmsu/pic/1.jpg”> (绝对位置) • <img src=“pic/1.jpg"> (相对位置) • 如果首页，放在http://www.csie.nctu.edu.tw/~jmsu/index.html (绝对位置) • 网页教学第二章，放在 　http://www.csie.nctu.edu.tw/~jmsu/teach/2.html (绝对位置) • 要在第二章中，利用超级链接连到首页，有两种写法： 　 • <a href=“http://http://www.csie.nctu.edu.tw/~jmsul/index.html”>首页</a> (绝对位置) • <a href="../2.html">首页</a> (相对位置)

  12. img中的属性 ： • width height • 用来控制图形的宽跟长。如果把图形过度的放大，会使图形产生粗糙失真的情形。 • <img src="015.gif" width="26" height="40"> • <img src="015.gif" width="60" height="90"> • alt • 可将图片加入批注。 • border • 这个属性控制图片边框的粗细，如果没有特别指定，默认值是0 • <img src="015.gif" border="4"> • vspace=xx • 图的垂直方向预留的空白宽度。 • xx里面填的是数字。 • hspace=xx • 图的水平方向预留的空白宽度。

  13. align • 控制图片的定位。 • left、center、right • 分别表示将图片置左、置中、置右。 • top、middle、bottom • 分别表示图片的上缘、中间、下缘对齐基准线。

  14. 超级链接的标签 • <a href="xxx.html">文字叙述</a> • 文字叙述用来表示这个超级链接连到何处。 • 而xxx.html处，则是填入网页的位置。 • 这牵涉到绝对位置跟相对位置的问题 • 文字叙述的部分还可以用图片来代替，这就是网页中按钮的道理。 • 按钮的旁边有一层框线，要让这个框线消失。 • 只要在<img>后面加上border="0"这个属性就可以了。

  15. 内部连结 • 当一页内容太多时，可以在这一页，做一些超级链接， 直接连到这页的某个地方。 　 • 首先将欲连结处定义起来。 • <a name=“point”>欲连结处</a> • 想用一个超级链接连到此处，连结的写法只要在前面多加一个 #。 • <a href="#point">连到欲连结处</a> • <html> • <head><title>范例</title></head> • <body> • <pre> • <a href="#step1">第一步</a> • <a href="#step2">第二步</a> • <a href="#step3">第三步</a> • <a name="step1">第一步</a> • <a name="step2">第二步</a> • <a name="step3">第三步</a> • </pre> • </body> • </html>

  16. 网页开启位置 • target: • 决定了按下超级链接后，新网页开启的位置。 • 写法：<a href=“xxx.html” target=“??”>文字叙述</a> • ??可以换成_blank、_parent、_self、_top • target="_blank" • 使连结的画面内容，在新窗口中开启。 • target="_parent“ • 使连结的画面内容，当成文件的上一个画面。 • target="_self" • 使连结的画面内容，显示在目前的框架中。(默认值) • target="_top" • 将浏览器的画面全部清掉之后，再贴上连结的画面内容，也就是可以去除原来的框架。

  17. 连结的其它功能

  18. 预设超级链接样式 • <style> • <!– • a {text-decoration:none;color:#8080ff} • a:hover {text-decoration:underline;color:#ff9900} • // --> • </style> • 这是一种CSS的排版方法，加在<head>和</head>之间。 • CSS :Cascading Style Sheets，中文名称为样式表 。 • a { }： • 这个括号里的设定是鼠标还没有放上超级链接时，超级链接的样式。 • none :代表不加底线， • color :里面的色码是超级链接的颜色。 • 变换这些色码，可自行设定颜色。 • a:hover { } : • 括号里的设定是鼠标放上超级链接时，超级链接的样式。 • Underline : 代表加底线。 • 色码当然是鼠标放上后超级链接的颜色。 • a:visited { } : • 括号里的设定是代表按过此超级链接后，超级链接的样式。

  19. 加入水平线 • 水平线也是一个相当好用的网页组件，利用它可以让你的版面更容易阅读。 • <hr> • 利用此标签就可以做出基本的水平线，它并没有相对应的配对标签。 • size • 用来控制水平线的厚度，数字越大水平线越厚。 　 • ex.<hr size="8"> • width • 用来控制水平线的宽度，可使用两种写法。 • 相对写法(百分比)： • width=80%，就表示宽度占80%。 • ex.<hr width=“80%"> • 绝对写法(像素)： • width=100px，就表示宽度为100像素。 　ex.<hr width=“100px"> • noshade • 加入这个属性，可以让水平线变成实心的。 　 • ex.<hr size="8" noshade> 加厚的实心水平线

  20. align • 指定水平线的对齐方式 :left(靠左)、center(置中)、right(靠右)。 • ex. <hr width="100px" align="left"> • 还是可以利用<center>来将水平线置中。 　 • ex. <center><hr width="100px"></center> • color • 指定水平线颜色，只有用IE浏览器才能看出此效果，Netscape不支持。 • ex. <hr color="#ff0000"> • 表格的基本架构 : • <table border="1"> • <tr><td>1-1</td></tr> • </table> • <table>...</table>代表一个表格的开始与结束。 • Border • 用这个属性来控制框线的粗细，数字越大，框线越粗，越有立体感。 • <tr>...</tr>代表往下多增加一横列。 • <td>...</td>代表在那一横列中，往右多加一格。

  21. 一个 1 x 2 的表格: • 先写好一组<tr>...</tr>，就有一横列了。 • 在<tr>...</tr>中加入两组<td>...</td>，在第一列中就有两格了。 • 在<td>...</td>中输入任意文字。 • <table border=“1”> • <tr><td>1-1</td><td>1-2</td></tr> • </table> • 一个 2 x 2 的表格 : • 先写好两组<tr>...</tr>，就有两横列了。 • 在<tr>...</tr>中加入两组<td>...</td>，每一列中就都有两格了。 • 在<td>...</td>中输入任意文字 • <table border="1"> • <tr><td>1-1</td><td>1-2</td></tr> • <tr><td>2-1</td><td>2-2</td></tr> • </table>

  22. 第一、第二列各有两格，第三列有三格。 • 先写好三组<tr>...</tr>，就有三横列了。 • 第一、第二列只需要两格，所以在第一、第二组<tr>...</tr>中，分别加入两组<td>...</td> • 第三列需要三格，故在第三组<tr>...</tr>中，放三组<td>...</td> • 在<td>...</td>中输入任意文字。 • <table border=“1”> • <tr><td>1-1</td><td>1-2</td></tr> • <tr><td>2-1</td><td>2-2</td></tr> • <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> • </table> • 横跨越的技巧 : • <table border=“1”> • <tr><td>1-1</td><tdcolspan=“2”>1-2</td></tr> • <tr><td>2-1</td><tdcolspan=“2”>2-2</td></tr> • <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> • </table>

  23. 直跨越的技巧 : • <table border=“1”> • <tr><td>1</td><tdrowspan=“3”>2</td><td>3</td></tr> <tr><td>4</td><td>5</td></tr> • <tr><td>6</td><td>7</td></tr> • </table> • colspan: • 代表横跨。等号后面的数字，代表横跨的格数。 • rowspan: • 代表直跨。等号后面的数字，代表直跨的格数。 • 内容定位： • <td align="left"> • 控制横向定位，left、center、right分别代表置左、置中、置右。 • 默认值是置左。 • <td valign="top"> • 控制纵向定位，top、middle、bottom分别代表置上、置中、置下。 • 默认值是置中。 • <table border="1" width="110" height="150"> • <tr><tdalign="right">置右</td> • <tdalign="center">置中</td></tr> • <tr><tdvalign="top">置上</td> • <tdvalign="bottom">置下</td></tr> • </table>

  24. 表格颜色： • <table bgcolor=“#FFD350”> • 控制整个表格的颜色。 • 其中 #FFD350 是网页所使用的颜色代码。 • <tr bgcolor=“#FFD350”>控制单一列的颜色。 • <td bgcolor="#FFD350">控制单一储存格的颜色。 • <table border="0"> • <tr> • <td bgcolor="#FFD350">昵称</td> • <td bgcolor="#FFD350">小远</td> • </tr> • <tr> • <td bgcolor="#FFD350">绰号</td> • <td bgcolor="#FFD350">Yahoo</td> • </tr> • <tr> • <td bgcolor="#FFD350" colspan="2">有钱人</td> • </tr> • </table>

  25. <caption>...</caption> • 夹在这组配对卷标中的文字，会变成表格的标题。 • <table cellpadding="20"> • cellpadding 这属性可控制内容与框线的距离，数字越大距离越远。 • <table border="1"cellpadding="25"> • <caption>数字游戏</caption> • <tr><td>1</td><td>2</td><tr> • <tr><td>3</td><td>4</td><tr> • </table> • 框线装饰 ： • <table bordercolor="#000080"> • 其中bordercolor用来控制所有框线的颜色。 • <table border="3"bordercolor="#000080"> • <tr><td>1-1</td><td>1-2</td></tr> • </table> • <table bordercolorlight="blue" bordercolordark="red"> • 其中bordercolorlight用来控制亮边框线的颜色。 • bordercolordark用来控制暗边框线的颜色。 • <table border="3"bordercolorlight="blue" bordercolordark="red"> • <tr><td>1-1</td><td>1-2</td></tr> </table>

  26. 分割窗口： • <html> • <head><title>分割窗口</title></head> • <frameset cols="20%,80%"> • <frame src="left.htm" name="left"> • <frame src="right.htm" name="right"> • </frameset> • </html> • 注意1：frameset不能与body共同使用。 　 • 注意2：分割画面最多的四个就好，太多会造成下载画面太久的问题。 • <frameset>...</frameset> • 设定的开始与结束。 • Cols-将窗口左右分割，若改成rows则将窗口上下分割。 • 等号后面用来设定分割画面的大小。设定的方式有三种： 　 • 百分比法： • 直接输入子画面所占的的比例，像本例是左边占整个画面的20%， 　右边80%，全部加起来必须是100% • 相对比例法： • 写法是cols=“1,1”，则两个子画面大小的比例为1：1，各占画面的一半。 • 如果写 1,2就是1：2，依此类推。 • 绝对大小法： • 写法是cols=“80,*”，左边的子画面大小为80像素，其它全部被右边的子画面所占去，如果写成 *,80 就刚好反过来。点数越大子画面越大。 • frame src指定这个分割画面要开启的html文件。

  27. 上下分： • <frameset rows="64,*"> • <frame src="up.html" name="up"> • <frame src="down.html" name="down"> • </frameset> • 左中右分： • <frameset cols="1,1,1"> • <frame src="left.html" name="left"> • <frame src="center.html" name="center"> • <frame src="right.html" name="right"> • </frameset> • 复杂式： • <frameset cols="150,*"> • <frame src="left.html" name="left"> • <frameset rows="20%,*"> • <frame src="rup.html" name="rup"> • <frame src="rdown.html" name="rdown"> • </frameset> • </frameset>

  28. frameset中的属性： • frameborder= • 是否加入框线，可以填0或1，填0代表不加框线，填1代表要。 • border= 　指定框线的宽度。 • bordercolor= 　指定框线的颜色。 • framespacing= 　指定两相邻子画面之间的间隔大小。 • frame中的属性 ： • marginwidth= 　指定子画面左右边缘所保留的空间。 • marginheight= 　指定子画面上下边缘所保留的空间。 • frameborder= 　指定是否加入框线。 • scrolling= 　指定需不需要使用滚动条。 • yes ，表示不管如何都加入滚动条。 　 • auto，如果子画面的内容超过指定的大小时，滚动条才会出现。 • no ，表示不管如何都不要加入滚动条。 • bordercolor= 　指定框线的颜色。 • noresize 　如果加入这个属性，框线就被固定住了。

  29. 不支持分割画面的浏览器 ： • <frameset rows="*,*"> • <frame name="top"> • <frame name="bottom"> • <noframes> • <body> • <p>此网页使用框架，但是您的浏览器并不支持。</p> • </body> • </noframes> • </frameset> • Name之用途： • <frameset rows="64,*"> • <frame src="up.html" name="up"> • <frame src="down.html" name="down"> • </frameset> • 超级链接中加入target=“up”，按下超级链接，新画面会出现在上方 • target="down"，则按下超级链接，新画面会出现在下方

  30. 加入音乐面板： • 支持的模式包括mid、wav与au档 • <embed src=“xxx.mid”></embed> • embed src用来指定音乐的路径 • width= 　控制面板的宽度。 • height= 　控制面板的高度。 • loop= 　控制重复拨放与否，可以填入true或是 false。 • true代表一直重复 、false代表只拨放一次。 • autostart= 　控制是否自动拨放，可以填入true或是 false。 • true代表自动拨放、false代表不会自动拨放，必须按下拨放钮才会出现音乐。 • hidden= 　设定是否隐藏面板，可填入true或是no， • true代表隐藏，no表示不隐藏。 • 范例： • <embed src="1.mid" autostart="false" loop="true" hidden="no" width="90" height="40">

  31. 交互式窗体-基本架构 • <form method="post" action="mailto:xx@xx.tw" enctype="text/plain"> • 窗体内容 • </form> • <form>...</form>： • 宣告一个窗体的开始与结束，也就是窗体的内容必须夹在里面。 • action • 可填入cgi或asp的位置，窗体的数据将由服务器端的程序来处理。 　 • ex.action=“http://www.xxx.com/cgi-bin/board.cgi” • 可填入你的e-mail，数据会直接传送到你的信箱。 　 • ex.action=“mailto:xx@xx.tw” • 你也可以给这封邮件一个主旨，直接在后面加上 • ?subject=主旨 • ex.action="mailto:xx@xx.tw?subject=意见调查" • enctype=text/plain • 数据编码的方式。 　 • 如利用e-mail传送中文，就使用text/plain，否则会出现乱码。

  32. 窗体内容之input形式 • 您的昵称 • 这里可以改成你想要的叙述。 • input type=“text” • 指定输入的形式，text表示要让别人输入文字。 • Name指定这个字段的名称。 • EX:名称为「昵称」，填入资料为「小远」，信件的内容将会显示： • 昵称=小远 • size指定这个字段的长度。 • value可指定字段中预设的文字。 • EX：　value=“http://” • Maxlength指定对方可填入的字符数。

  33. input type=“password”指定输入的形式。 • 一级棒、普普啦、烂毙了 • 是叙述的部分，选项名称。 • input type=“radio”指定输入的形式， • radio表示让别人多选一。 • name指定这个字段的名称。 • 注意！每一个选项的字段名称一定要相同！ • value指定这个选项的名称。 　 • EX: 指定栏’’’’’’位的名称为「评鉴」，而点选项目的选项名称为[SOSO] 。 • 信件的内容将会显示 • 评鉴=SOSO • checked表示预先设定的选择 • checked写在「一级棒」的标签里，所以一开始小黑点就会在那个选项出现。

  34. 执行复选的动作 • input type=“checkbox” • 指定输入的形式，checkbox表示可以做多重选择。 • name指定这个字段的名称。 • 注意！每一个选项的字段名称一定要相同！ • value指定这个选项的名称。 　 • ex:指定字段的名称为「嗜好」，而点选项目的选项名称为「兜风」与「上网」，信件的内容将会显示 • 嗜好=兜风 　 • 嗜好=上网

  35. 下拉式选单 • <select>...</select> • 表示一个选单的开始与结束。 • name指定这个字段的名称。 • option设定一个选项 • 如果有四个选项，就必须存在四个option。 • value指定这个选项的名称。 　 • ex:指定字段的名称为「居住地」，而点选项目的选项名称为 　「北部」，信件的内容将会显示 • 居住地=北部 • selected一开始预设的选择。

  36. 滚动条式选单(单选) • size指定选单中，一次会出现的选项数。 滚动条式选单(多选) • multiple设定成可以复选。 • 只要按着ctrl或是 shift再点选，就可以达到复选的效果。

  37. 输入大量文字 • <textarea>...</textarea>文字方块的开始与结束。 • name设定这个字段的名称。 • rows此文字方块的横列数。输入的数字代表列数。 • cols此文字方块的直行数。 • 输入值代表此列一共可以输入的字符数。 • wrap指定输入文字时是否自动换行。 • 共有三种选择。 　 • off，表示不会自动换行，必须按下enter来换行。 • virtual，表示屏幕上会自动换行，但信件的内容中没有自动换行的效果。必须按下enter来换行。 　 • physical，表示屏幕上会自动换行，信件内容中也有自动换行的效果。

  38. 传送窗体 • input type=“submit” • 指定输入的形式。 • submit • 表示传送数据。 • input type=“reset” • 指定输入的形式。 • reset • 表示重填资料。 • value • 指定按钮上呈现的文字。

  39. 动态的换页 • 进入一个页面后，过了几秒钟，会自动切换到下一页去。 • <head>...</head>的中间加一行﹔ • <meta http-equiv=“refresh” content=“10;url=xxx.htm”> • content • 后面的数字 代表等待的秒数。 • xxx.htm • 代表想要开启的新网页位置。 • 范例： • <head> • <meta http-equiv=“refresh” content=“7; url=http://www.csie.nctu.edu.tw"> • </head>

  40. 动态的跑马灯 • 此效果只有IE支持，Netscape无。 • <marquee direction=“left” behavior=“alternate”> 文字 </marquee> • <marquee>...</marquee> • 跑马灯内容的开始与结束。 • direction=指定跑马灯行进的方向， • left和right分别代表向左与向右。 • behavior=指定跑马灯的形式。 　 • 如不加此属性，默认值为卷动， • 即是跑马灯遇到障碍时，会从另一端重新出现，且重复刚刚的动作。 　 • behavior=“slide” • 表示滑动，遇到障碍立刻停止不动。 • behavior=“alternate” • 表示交错，也就是用到障碍时，会立刻反弹，然后往反方向前进。 • 范例： • <marquee direction="left">向左卷动</marquee> • <marquee direction="right" behavior="slide">向右滑动</marquee> • <marquee direction="left" behavior="alternate">向左交错</marquee>

  41. 有序表列 • <body> • <ol> • <li>小远 • <li>AHE • <li>好野人 • </ol> • </body> • <ol>...</ol> • 表示一个有序表列的开始与结束。 • <li> • 代表一个新项目的开始。 • 有几个项目就要加几个<li>

  42. <ol>中还有几个重要的属性如下： • type= • 里面可以填入 A,a,i...... • 就是设定项目的符号为何? • EX: 选择A 就会以A、B、C......的顺序排下去。 • start= • 里面填入数字，指定起始的编号为何? • EX:如果设定start="3"，那么第一个项目将会从 3 起跳，也就是3、4、5.... • <body> • <ol type=“A” start=“3”> 或(<ol type=“i” start=“4”>) • <li>小远 • <li>AHE • <li>好野人 • </ol> • </body>

  43. 无序表列 • <ul>...</ul>： • 表示一个无序表列的开始与结束。 • <li> • 代表一个新项目的开始。 • 有几个项目就要加几个<li> • <ul>中就没有start 这个属性了，因为它没有顺序。 • type=里面可以填入: • circle(空心方框)、 • disc(实心圆点)、 • square(实心方框) • <ul type="disc"> • <li>小远 • <li>AHE • <li>好野人 • </ul>

More Related