Windows LiveWindows Live™
 
 
科's profileiWaNtFlyPhotosBlogLists Tools Help

Blog
January 09

css层叠样式(1)----植入样式表

植入样式表：
 
所有的样式表信息都列于HTML文件的顶部：
 

<HTML>
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
-->
</STYLE>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>

入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你想对网页一次性加入样式表，就可采用该方法。

链接到样式表上：

 

 

它的使用方法：产生一个普通的网页，但使用 <STYLE>规则，而是在<HEAD>内使用<LINK>标签：

    <HTML>
    <HEAD>
    <TITLE>My First Stylesheet
    </TITLE>
    <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
    </HEAD>
    <BODY>
    <H1>Stylesheets: The Tool of
    the Web Design Gods</H1>
    <P>Amaze your friends! Squash
    your enemies!</P>
    </BODY>
    </HTML>


(使用链接的样式表时，你无须使用注释标签。)


现在生成一个单另的文本文件，起名mystyles.css (或者其任何你喜欢的名字)。文件内容如下：

    H1 { color: green; font-family: impact }
    P { background: yellow; font-family: courier }


如同发布HTML文件那样，将这个CSS文件布到你的服务器中。在浏览器中观看网时，你会发现浏览器将依照链接标签将有链接了的HTML网页按照样式表的规则示，在HREF属性中你可以选择使用绝对相对URL。

 

输入样式表：

 

输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用，但输入法则可以。例：

    <HTML>
    <STYLE TYPE="text/css">
    <!--
    @import url(company.css);
    H1 { color: orange; font-family: impact }
    -->
    </STYLE>
    <HEAD>
    <TITLE>My First Stylesheet
    </TITLE>
    </HEAD>
    <BODY>
    <H1>Stylesheets: The Tool of
    the Web Design Gods</H1>
    <P>Amaze your friends! Squash
    your enemies!</P>
    </BODY>
    </HTML>


而其中输入的 company.css文件内容如下：

    H1 { color: green; font-family: times }
    P { background: yellow; font-family: courier }


在本例中，浏览器首先输入 company.css的规则 ( @import 必须打头), 然后加入移植的规则从而为这个网页产生规则集合。

请注意，对于H1在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行哪一项规则呢？植入的规则此时将占上风。 

 

在行内加入样式

<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
<P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>

 

 分类

我先前已经讲过所有的HTML标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢？比如,你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示，你能做到吗？

这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。这些规则（不论是植入的还是外部样式表文件）将以以下方式显示：

    P.first { color: green }
    P.second { color: purple }
    P.third { color: gray }

  • 你的HTML代码如下：


    <P CLASS=first>The first paragraph,
    with a class name of "first."</P>
    <P CLASS=second>The second paragraph, with a class name of "second."</P>
    <P CLASS=third>The third paragraph,
    with a class name of "third."</P>


你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的 .）


你还可以生成不加任何HTML标签的分类：

    .first { color: green }


这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，并应用到网页<BODY>中，而设定的文字将以绿色显示。

情景选择：

如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。

    P B { color: red }

    <H1><B>Emma Thompson</B>, Actress
    </H1>
    <P>Dramatic actor, inspired
    comedienne. Is there <B>nothing</B>
    she can't do?</P>


样式表的规则告诉浏览器只将所有<P>之内加重显示的文字以红色显示。所以，<P>之外标题的加重文字不会以红色显示，而<P>之内的文字则是。

注释

即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例：

    P.first { color: green } /* green
    for the first paragraph of every
    page */H1 { text-indent: 10px;
    font-family: verdana }
    IMG { margin-top: 100px } /* give
    all images a top margin */

屏幕就是一个战场，在一个HTML文件中，如果有3种不同的样式表规则都使用P作为其选择。输入的样式表指示浏览器将<P>文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。

那么可怜的浏览器该听谁的呢？

好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序：

  1. Inline styles （行内样式）
  2. Embedded styles （植入样式）
  3. Linked styles （链接样式）
  4. Imported styles （输入样式）
  5. Default browser styles（缺省浏览器样式）

浏览器将按照上述顺序执行样式表的指令。

但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将<P>以绿色显示，而另一个规则要求以红色显示？

多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺序：

  1. 使用特别说明的样式表规则，例：

    BODY { color: green }
    P { color: red }

    有一项规则特别说明<P> 中的文字一红色显示，但它同时也继承了<BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以<P>之内的文字一红色显示。

  2. 应用继承的样式表规则

    如果不存在第1步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第3步。

  3. 按照样式表规则在HTML中的显示顺序执行。

    P { color: green }
    P { color: red }

    当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，<P>作为讲座一红色显示，因为它是最后给出的规则。


注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定Netscape Communicator 和Internet Explorer都不支持，所以本文中不再细述。

最后一个问题：如果样式表规则同HTML标签冲突时，如何处理？我们看一下这个例子：

    I { font-family: impact }

    <P>I think <I><FONT FACE="Times">
    East of Eden</FONT></I> is Stein
    beck's best novel.</P>


该例中样式表规则要求浏览器使用Impact，但是传统的HTML<FONT FACE>标签要求用Times字体，一个很明显的传统。

根据正式的样式表规定，应该优先执行样式表规则。

但是最主要的几种浏览器Netscape 和IE 4.0 都规定应优先执行HTML。唉.......

12:01 PM | Add a comment | Permalink | Blog it | STUDY

html语法(10)----多窗口页面(Frames)

    基本语法

    <frameset> ... </frameset>
    <frame src="url">
    <noframes> ... </noframes>

    在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。

            <HTML>
        <HEAD>
        </HEAD>
        <FRAMESET>
             <FRAME SRC="url">
             <NOFRAMES> ... </NOFRAMES>
        </FRAMESET>
        </HTML>

    各窗口的尺寸设置

    <frameset cols=#>

    纵向排列多个窗口： 
    <frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
    A B C 
    

    

    <frameset rows=#>
    横向排列多个窗口： 

    <frameset rows=25%,25%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>


    

    COLS & ROWS
    纵横排列多个窗口： 

    <frameset cols=20%,*>
<frame src="A.html">
     <frameset rows=40%,*>
     <frame src="B.html">
     <frame src="C.html">
     </frameset>
</frameset>



    

    


    
A 
B 
    

    
C 
    

    

    不允许各窗口改变大小 <frame noresize>
    

    

    缺省设置是允许各窗口改变大小的。 
    

    

    各窗口间相互操作(Frame Target) 
    

    

    窗口标识(Frame Name) 
    <frame name=#>
    <a href=url target=#> 
    

    <frameset cols=50%,50%>
<frame src="A.html">
<frame src="B.html" name="HELLO">
</frameset>



    

    


    
A 
B 
    

    特殊的 4 类操作(很有用喔)
    

    <a href=url target=_blank> 新窗口
    <a href=url target=_self> 本窗口
    <a href=url target=_parent> 父窗口
    <a href=url target=_top> 整个浏览器窗口
    

     
    

    

     Frame 的外观(Appearance) 
    

    

    各窗口边框的设置 <frame frameborder=#> #=yes, no / 1, 0
    

    <frameset rows=30%,*>
<frame src="Acol.html" frameborder=1>
<frameset cols=30%,*>
     <frame src="Bcol.html" frameborder=0>
     <frame src="Ccol.html" frameborder=0>
</frameset>
</frameset>

示例

    (A 有边框，B、C 没有) 
    

    


    
A 
    

    
B 
C 
    

    

    各窗口间空白区域的设置 
    <frameset framespacing=#> #=空白区域的大小 
    

    <frameset rows=30%,* framespacing=100>
<frame src="Acol.html">
<frameset cols=30%,*>
     <frame src="Bcol.html">
     <frame src="Ccol.html">
</frameset>
</frameset>

示例

    

    


    
A 
    

    
B 
C 
    

    

    边框色彩 <frameset bordercolor=#> 
    

    

    #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
    Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, 
    Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 
    

    <frameset rows=30%,* bordercolor=red>
<frame src="Acol.html">
<frameset cols=30%,*>
     <frame src="Bcol.html">
     <frame src="Ccol.html">
</frameset>
</frameset>

示例

    

    


    
A 
    

    
B 
C 
    

    

    页面空白(Margin) <frame marginwidth=# marginheight=#>
    

    <frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html" 
    marginwidth=50 
    marginheight=50>
</frameset>

示例

    

    


    
AAAA 
AA
    AA 
    

    

    卷滚条设置 <frame scrolling=#> #=yes, no, auto
    

    

    #=缺省值是 auto。 
    

    

    浮动窗口(Floating Frame)
    

    

    <iframe src=# name=##> ... </iframe> 
    #=初始页面的 URL
    ##=    窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
    ... = 此处文字将只出现在不支持 FRAMES 的浏览器中。
    

    <center>
<iframe src="A.html" name="window">
   Here is a Floating Frame
</iframe>
<br><br>
<a href="A.html" target="window">Load A</A><BR>
<a href="B.html" target="window">Load B</A><BR>
<a href="Ccol.html" target="window">Load C</A><BR>
</center>








Pre 



10:57 AM | Add a comment | Permalink | Blog it | STUDY
html语法(9)---- 表格进阶(TABLE ADVANCED)
表格的色彩 



表元的背景色彩和背景图象
<th bgcolor=#> 
<th background="URL"> 




#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, 
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 
<table border height=100 width=200 align=center>
<tr><th bgcolor=ffaa00>Food</th>
    <th bgcolor=Red>Drink</th>
    <th rowspan=2 background="URL">Sweet</th>
<tr bgcolor=white><td>A</td><td>B</td>
</table>







Food
Drink
Sweet


A
B


 




表格边框的色彩 
<table bordercolor=#>
<table cellspacing=5 border=5 bodercolor=#ffaa00>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>







Food
Drink
Sweet



A
B
C


 




表格边框色彩的亮度控制 
<table bordercolorlight=#>
<table bordercolordark=#> 
<table cellspacing=5 border=5 
     bordercolorlight=White bordercolordark=blue>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>







Food
Drink
Sweet



A
B
C


 


表格的分组显示(Structured Table) 



按行分组 
<thead> ... </thead> - 表的题头(Header) 
<tbody> ... </tbody> - 表的正文(Body) 
<tfoot> ... </tfoot> - 表的脚注(Footer) 
<table border>
<thead>
     <tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>











Food
Drink
Sweet





A
B
C



D
E
F



 




按列分组 
<colgroup align=#> #=left, right, center 
<table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
</table>














Food
Drink
Sweet





A
B
C



D
E
F





列的属性控制 
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center 
<table border width=160>
<colgroup>
     <col align=center span=2>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
</table>














Food
Drink
Sweet





A
B
C



D
E
F



 


 


 表格中边框的显示 



显示所有 4 个边框 <table frame=box>
<table border frame=box>
<thead>
     <tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>











Food
Drink
Sweet





A
B
C



D
E
F





只显示上边框 <table frame=above>










Food
Drink
Sweet





A
B
C



D
E
F





只显示下边框 <table frame=below>










Food
Drink
Sweet





A
B
C



D
E
F





只显示上、下边框 <table frame=hsides>










Food
Drink
Sweet





A
B
C



D
E
F





只显示左、右边框 <table frame=vsides>










Food
Drink
Sweet





A
B
C



D
E
F





只显示左边框 <table frame=lhs>










Food
Drink
Sweet





A
B
C



D
E
F





只显示右边框 <table frame=rhs>










Food
Drink
Sweet





A
B
C



D
E
F





不显示任何边框 <table frame=void>










Food
Drink
Sweet





A
B
C



D
E
F



 


表格中分隔线(Rules)的显示 



显示所有分隔线 <table rules=all> 
<table border rules=all>
<colgroup><col align=center span=2>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
     <tbody>
          <tr><td rowspan=3 align=right>Total $-00.0</td>
     </tbody>
</table>














Food
Drink
Sweet





A
B
C



D
E
F





Total $-00.0



 




只显示组(Groups)与组之间的分隔线 <table rules=groups> 













Food
Drink
Sweet





A
B
C



D
E
F





Total $-00.0





只显示行与行之间的分隔线 <table rules=rows> 













Food
Drink
Sweet





A
B
C



D
E
F





Total $-00.0





只显示列与列之间的分隔线 <table rules=cols> 













Food
Drink
Sweet





A
B
C



D
E
F





Total $-00.0





不显示任何分隔线 <table rules=none> 













Food
Drink
Sweet





A
B
C



D
E
F





Total $-00.0



 






Pre 
Next


10:46 AM | Add a comment | Permalink | Blog it | STUDY
html语法(8)---表格(TABLE)标记(TAGS)
表格的基本语法 

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
带边框的表格： 
<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>







Food
Drink
Sweet


A
B
C


 


不带边框的表格： 






Food 
Drink 
Sweet 


A 
B 
C


 


 


 跨多行、多列的表元(Table Span) 



跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>









Moring Menu


Food 
Drink 
Sweet 


A 
B 
C


 


 




跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th>
        <th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>








Morning Menu 
Food 
A 


Drink 
B 


Sweet 
C


 


 表格尺寸设置


 


 边框尺寸设置： <table border=#>
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>








Food
Drink
Sweet


A
B
C


 




<table border width=# height=#>
表格尺寸设置： 
<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>







Food
Drink
Sweet



A
B
C


 




<table border cellspacing=#>
表元间隙设置： 
<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>



 






Food
Drink
Sweet



A
B
C


 




<table border cellpadding=#>
表元内部空白设置： 
<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>







Food
Drink
Sweet



A
B
C


 


表格内文字的对齐/布局 



<tr align=#> 


<th align=#> #=left, center, right


<td align=#> 
<table border width=160>
<tr>
                <th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
                <td align=left>A</td>
                <td align=center>B</td>
                <td align=right>C</td>  
</table>




 


 






Food
Drink
Sweet



A
B
C


 


<tr valign=#> 


<th valign=#> #=top, middle, bottom, baseline


<td valign=#> 
<table border height=100>
<tr>
                <th>Food</th><th>Drink</th>
                <th>Sweet</th><th>Other</th>
<tr>
                <td valign=top>A</td>
                <td valign=middle>B</td>
                <td valign=bottom>C</td>
                <td valign=baseline>D</td>
</table>




 






Food
Drink
Sweet
Other



A
B
C
D


 


 


表格在页面中的对齐/布局(Floating Table) 



<table align=left> 

<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.







Food
Drink
Sweet


A
B
C
My favorites...
cookies,chocolates,and more. 



<table align=right> 


<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.



 






Food
Drink
Sweet


A
B
C
My favorites...
cookies,chocolates,and more. 

 


 


表格的标题 



<caption align=#> ... </caption> #=left, center, right
<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>




Lunch



Food
Drink
Sweet


A
B
C


 




<caption valign=#> ... </caption> #=top, bottom


    

  • valign=top is default. 
<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>




Lunch



Food
Drink
Sweet


A
B
C






Pre 
Next


10:23 AM | Add a comment | Permalink | Blog it | STUDY
January 08
html语法(7)---表单(FORM)标记(TAGS)
基本语法 



表单的基本语法




<form action="url" method=*>
... 
... 
<input type=submit> <input type=reset>
</form> 


*=GET, POST 




表单中提供给用户的输入形式




<input type=* name=**>


*=text, password, checkbox, radio, image, hidden, submit, reset


**=Symbolic Name for CGI script 




表单中提供给用户的输入形式




<input type=* name=**>


*=text, password, checkbox, radio, image, hidden, submit, reset


**=Symbolic Name for CGI script 


文字输入和密码输入 

*=text, password 


<input type=*>
<input type=* value=**>
<form action=/cgi-bin/post-query method=POST>
您的姓名: 
<input type=text name=姓名><br>
您的主页的网址: 
<input type=text name=网址 value=http://><br>
密码: 
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>



 


 


 




<input type=* size=**>
<input type=* maxlength=**>
<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>
 




复选框(Checkbox)和单选框(RadioButton) 



<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
        香蕉<p>
<input type=checkbox name=水果2 checked>
        苹果<p>
<input type=checkbox name=水果3 value=橘子>
        桔子<p>
<input type=submit><input type=reset>
</form>
<input type=radio value=**>
<input type=radio value=** checked>
<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
        香蕉<p>
<input type=radio name=水果 checked>
        苹果<p>
<input type=radio name=水果 value=橘子>
        桔子<p>
<input type=submit><input type=reset>
</form>

 
隐藏表单的元素 
<input type=hidden value=*>
<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>

列表框(Selectable Menu) 
基本语法
<select name=*>
<option> ...
</select> 
<option selected>
<option value=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
        <option>香蕉
        <option selected>苹果
        <option value=My_Favorite>桔子
</select><p>
<input type=submit><input type=reset>
</form>


<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
        <option>香蕉
        <option selected>苹果
        <option value=My_Favorite>桔子
        <option>桃子
</select><p>
<input type=submit><input type=reset>
</form>

 
<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样) 
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
        <option selected>香蕉
        <option selected>苹果
        <option value=My_Favorite>桔子
        <option selected>桃子
</select><p>
<input type=submit><input type=reset>
</form>
 
 
文本区域
<textarea name=* rows=** cols=**> ... <textarea>
<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>


对于很长的行是否进行换行的设置(Word Wrapping) 
<textarea wrap=off> ... </textarea>
不换行，是缺省设置。 
<textarea wrap=soft> ... </textarea>
“软换行”，好象 MS－WORD 里的“软回车”。 
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
<textarea wrap=hard> ... </textarea>
“硬换行”，好象 MS－WORD 里的“硬回车”。 
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>










Pre 
Next


11:10 AM | Add a comment | Permalink | Blog it
 

 
 

 

 
 

 
 

 

 

 

 
 

 

 
Photos

 

 

 		
 
 
 
 
 
 

 

 

 

 
 

 
 

 
 

 
 
 
 
 
 

 

 
 

 
 

 
 贴图
  
 

 

 

 
 
 

 

 
 
 

 

 
 

 
 

 

 
Photo 1 of 67

 
 

 
 
 

 		
 

 

 
 
 
 
 
 
 
 


 
 
 















 
 
 
 

 		
 
 
 
 
 
|false|

 
 

 
 

 

 

 

 
 

 

 
用的学习资源