HTML 语言常用标记 tag (Continued )

来源:互联网 发布:淘宝教育 编辑:程序博客网 时间:2024/06/04 19:41

这里先把上次没说完的字体标记<b>, <u> , <h1> 说一下,然后就看一下 表格(Table ) 和 表单(Form)里面常用的基础标记。

No 1、
<pre><em><strong>abc</strong></em></pre>
<pre><b><i>abc</i></b></pre>

<em> , <i> 都是 斜体; <b>, <strong> 都是 粗体, 至于二者的先后可以调换

No 2、
<pre><u>abc</u>        <strike>def</strike>  <big><big> ghi   <small>jkl  <sub>1   <sup>  2</pre>

在ie中显示为:

abc        def   ghi   jkl  1     2
<u> 加底线( DW中不显示 )
<STRIKE> 加上删除线的标记。
<BIG> 令字体加大。
<SMALL> 令字体变细。
<SUB> 为下标字, <SUP> 则为上标字。

 No 3、
<h1>abc</h1>
<h6>abc</h6>

<h1> 到 <h6>标题标记,默认下由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。可以在style中自己定义每个h(n)的参数

 
No 4、
<font face="Arial" size="+2" color="#008000">Creation of Webpage</font>
size: 有1~7; +1~+7; -7~-1;

face: 设定文字的字形,Arial 是常用的一种,最好不要使用 Windows 内建字 形以外的字形


No 5、
<ul type="square" >
  <li type="circle">a</li>
  <li type="disc" >b</li>
  <li>c</li>
</ul>

<ol type="I" start="2"  >
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>

<ol> ordered list; type 有 i, I, 1, a, A 五种,默认为1, start只能是正整数,默认为1;
<ul> unordered list; type 有 disc, square, circle 三种
<li> list item; type同上,因为<li> 和 <ul> type相同,所以二者连用时最好选一个


No 6、
<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

<TABLE>是一个容器标记,其他表格标记只能在他的范围内才适用。<TR> row; <TD> column
border: 表格边框厚度,不同浏览器有不同的内定值,故最好指明。
cellspacing: 表格格线厚度,指整个表格的框架的厚度
cellpadding: 文字与格线的距离,指框内文字与框边的距离
valign: 表格内字画等的摆放位置(垂直),可选值为: top, middle, bottom
background: 表格纸,与 bgcolor同用时,bgcolor 被覆盖
bordercolor : 又可分为 bordercolorlight( “左+上” 边)和 bordercolordark
cols: 表格栏位数目,让浏览器在下载表格时先画出整个表格
(<TR>, <TD> 参数设置与<Table>类似)


No 7、
<form action="
http://your.isp.com/cgi-local/example.cgi" method="POST">
<from> 为容器标记,<input type="text" > 等都是在这里面的。
action="http://your.isp.com/cgi-local/example.cgi"
表单通常是与 CGI 配合使用的,参数 action 便是用以指明该 CGI的位置,这样此表单所填的资料才能正确传给 CGI 作处理。若没有 CGI 以进行测试,可设定此参数为 ACTION="mailto:your@email.com" 那样该表单所填的资料将会寄至 此电邮地址。
method: 传送资料给 CGI 的的方式,可选值为 POST, GET。你只需记住POST容许传送大量资料,但 GET则只接受低于 1K 的资 料,所以申请表单用的是POST 而搜找器用的是 GET。

No 8、
<input name="Your_Name" type="text" size="2" maxlength="100" value="abc" align="middle" />

name: 方便 CGI 辨认由表单传来的资料
text: 单行文字盒,上限为 255 字
size: 此一单行文字盒显示的长度
maxlength: 在输入电话时可设为8,年龄时可设为2


No 9、
<input name="Gender" type="radio" value="Male" checked /> Male
<input name="Gender" type="radio" value="Famale" checked /> Famale

radio: 单选按钮;
checked: 默认已选
另外两个t ype 类型: checkbox: 多选按钮;    password: 输入值显示位*,即密码输入框


No 10、
<input type="reset" name="Reset" value="确定" />
<input type="submit" name="Submit" value="取消" />

type: 只有 submit;
name: Submit 的功能随 name 的不同而不同,须和 CGI 配合。若你只需要普通的传送 键,则是其内定,不必用此参数。
value: 这个值不是输给 CGI 的,而是显示在按键上,可以不用,传送键的内定值为 Submit Query,清除键的内定值为 Reset。

No 11、
<input type="image" name="Submit" src="../images/0001.gif" align="absbottom" />

image: 这通常用以取代 Submit 及 Reset 两个按键,因为由DW产生的按键并不漂亮,这 Image 参数便容许你采用自已制造的按键。
align: 有 absmiddle, absbottom, baseline, left, right, middle, top, bottom, top, texttop


No 12、
<form action="
http://your.isp.com/cgi-local/example.cgi" method="POST" enctype="multipart/form-data">
<input type="File" name="upload" size="30" maxlength="100" accept="text/html">
</form>

accept: 所接受的文件类别,有二十六种选择,可不设定。
用以上传文件,点击Browse 可在本地浏览

No 13、
<input type="Hidden" name="ID" value="6618">

hidden: 输入方式为隐藏或内定。它不会显示任何输入介面,而是一个内定值随表单一起 传给 CGI,如由 CGI 产生的会员号码,或传入可更改的参数以调整 CGI 而避免 修改 CGI 程式码。
name:这文件传输的名称,用以识别之用。
value: 内定值,如此例会以如 ID=6618 形式传给 CGI。

No 14、
<input type="Button" value="回前一页" onclick="history.go( -1 );return true;">

button:输入方式为一般按键。常配合 Java Script 作为其启动按键。
name: 文件传输的名称,用处不大
value: 按键显示名称

No 15、
<select name="where" size="5"  multiple>
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>

select: 是卷动选单标记,每一选项皆由 <OPTION> 所标示
name: 卷动选单名称,作识别之用,将会传及 CGI
size: 这卷动选单的列数,即其高度,若使用此参数则不会有 Pop Up 效 果。
multiple: 有多选功能


No 16、
<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">
这是预设的字句,通常留空的,随你喜欢。
</textarea>

textarea:  在DreamWeaver中,选择TextField后,选multiple,就可以产生此文字区块(TextArea)
wrap: 设定其折行属性,可选值为:default, off, physical, virtual。physical 会强迫刘览器在送资料到 CGI时必须将实际文字中的换行一 并

送出,设为 virtual 时则送出连续成串的字(除非使用者按了键盘的 RETURN / ENTER)。
下面是 DreamWeaver 8 Help 中对 wrap 的解释:

Wrap (available when the Multiline option is selected) specifies how the user’s input will be displayed when the user enters more information than can be displayed within the defined text area. The wrap options are as follows:
Selecting Off or Default prevents text from wrapping to the next line. When the user’s input exceeds the right boundary of the text area, text will scroll toward the left. Users must press Return to move the insertion point to the next line in the text area.
Selecting Virtual sets word wrap in the text area. When the user’s input exceeds the right boundary of the text area, text wraps to the next line. When data is submitted for processing, word wrap isn’t applied to the data. It is submitted as one string of data.
Selecting Physical sets word wrap in the text area, as well as to the data when it is submitted for processing.

 

原创粉丝点击