Html基础学习四:列表,超链接,表格,层,框架,表单
2011-07-13 17:49
876 查看
1. 列表
定义列表dl(Definition List)
无序列表ul(Unordered List)
有序列表ol(Order List)
目录列表dir
菜单列表menu
(1) 定义列表dl
<dl>
<dt>*************</dt>
<dd>*************</dd>
<dt>*************</dt>
<dd>*************</dd>
</dl>
备注:<dt>定义组成列表项名称部分
<dd>解释说明<dt>标记定义的项目名称
(2) 插入无序列表ul
<ul>
<li>************</li>
<li>************</li>
<li>************</li>
<ul>
(3) 插入有序列表ul
<ol>
<li>************</li>
<li>************</li>
<li>************</li>
<ol>
(4) 插入目录列表 dir
<dir>
<li>****************</li>
<li>****************</li>
<li>****************</li>
</dir>
(5) 插入菜单列表 menu
<dir>
<li>****************</li>
<li>****************</li>
<li>****************</li>
</dir>
2. 超链接:相对路径,绝对路径,跟路径
3. 表格
<table> <tr> <td>
表格标题:<caption>
表格表头:<th>
划分结构表格<thead><tbody><tfoot>
表格的宽度和高度:width,height
表格的边框属性:border
边框的样式:frame ,rules
Frame的常见属性
Rules常见属性
表格背景:bgcolor
调整行内容水平对齐:align:left|right|center
调整行内容垂直对齐:valign:top|middle|bottom|baseline
设置跨行:rowspan
设置跨列:colspan
设置单元间距:cellspacing
设置单元格边距:cellpadding
4. 框架frame,iframe,frameset用法和区别
转自:/article/5207617.html
参考:http://wenku.baidu.com/view/c6e125f8aef8941ea76e05ed.html
■ 框架概念 :
所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只需要 <FRAMESET> <FRAME> 即可,而所有框架标记需要放在一个总起的html 档,这个档案只记录了该框架如何划分,不会显示任何资料,所以不必放入 <BODY> 标记,浏览这框架必须读取这档案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗,每一框窗由一个 <FRAME> 标记所标示,<FRAME>必须在 <FRAMESET> 范围中使用。如下例:
<frameset cols="50%,*">
<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset>
此例中 <FRAMESET> 把画面分成左右两相等部分,左便是显示 up2u.html,右边则会显示 me2.html 这档案,<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。
本节与 Composer 教室的【运用框架】大部分相同,只是本节增加了内容及较为详细,正如其它篇章一样并不会提及网页制作工具,若阁下学会了 HTML 相信你亦不会选用 Composer , FrontPage 一类的工具了。
■ <FRAMESET> <FRAME> :
<FRAMESET> 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
<FRAME> 则只是设定某一个框窗内的参数属性。
<FRAMESET> 参数设定:
例子:
<frameset rows="90,*" frameborder="0" border=0framespacing="2" bordercolor="#008000">
COLS="90,*"
垂 直切割画面(如分左右两个画面),接受整数值、百分数, *则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如COLS="30,*,50%" 可以 切成叁个视窗,第一个视窗是 30pixels 的宽度,为一绝对分割,第二个视窗是当分配完第一及第叁个视窗後剩下的空间,第叁个视窗则占整个画面的 50% 宽度为 一相对分割。您可自己调整数字。
ROWS="120,*"
就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量不要同在一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类形的框架,尽采用多重分割。
frameborder="0"
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避免使用 yes 或 no )
border="0"
设定框架的边框厚度,以 pixels 为单位。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【调色原理】。
framespacing="5"
表示框架与框架间的保留空白的距离。
<FRAME> 参数设定:
例子:
<frame name="top" src="a.html" marginwidth="5"marginheight="5" scrolling="Auto" frameborder="0"noresize framespacing="6" bordercolor="#0000FF">
SRC="a.html"
设定此框窗中要显示的网页档案名称,每个框窗一定要对应着一个网页档案。你可使用绝对路径或相对路径,有关此两者详见於【连结进阶】。
NAME="top"
设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避免使用 yes 或 no )
framespacing="6"
表示框架与框架间的保留空白的距离。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【HTML 剖析】。
scrolling="Auto"
设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示, AUTO是视情况显示。
noresize
设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随意地拉动框架,改变其大小。
marginhight=5
表示框架高度部份边缘所保留的空间。
marginwidth=5
表示框架宽度部份边缘所保留的空间。
以下是一些例子:(与 Composer 教室的【运用框架】相同)
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
例子 HTML Code
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset>
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frame name="left" src="a.html">
<frameset rows="80,*">
<frame name="upper_right" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
■ <NOFRAMES> :
当 别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。
应用方法:
在<frameset> 标记范围加入 </NOFRAMES> 标记,以下是一个例子:
<frameset rows="80,*">
<noframes>
<body>
很抱歉,阁下使用的浏览器不支援框架功能,请转用新的浏览器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
若浏览器支援框架,那麽它不会理会 <noframes> 中的东西,但若浏览器不支援框架,由於不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,所以放在 <noframes>范围内的文字会被显示。
■ <IFRAME> :
这 标记只适用於IE(comet:也使用于FireFox)。它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记,但围着的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 JavaScript 会较好,若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。PS:一定要使用</iframe>关闭,否则后面的内容显示不出来。
<iframe> 的参数设定如下:
例子:
<iframe src="iframe.html" name="test" align="MIDDLE"width="300" height="100" marginwidth="1"marginheight="1" frameborder="1"scrolling="Yes"> </iframe>
src="iframe.html"
欲显示於此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name="test"
此框窗名称,这是连结标记的 target 参数所需要的,
align="MIDDLE"
可选值为 left, right, top, middle, bottom,作用不大
width="300" height="100"
框窗的宽及长,以 pixels 为单位。
marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
frameborder="1"
使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling="Yes"
使用 Yes 表示容许卷动(内定), No 则不容许卷动。
5. 表单
form,
input,text,password,file,checkbox,radio,button,submit,reset,image,hidden,
textarea
select,option,
定义列表dl(Definition List)
无序列表ul(Unordered List)
有序列表ol(Order List)
目录列表dir
菜单列表menu
(1) 定义列表dl
<dl>
<dt>*************</dt>
<dd>*************</dd>
<dt>*************</dt>
<dd>*************</dd>
</dl>
备注:<dt>定义组成列表项名称部分
<dd>解释说明<dt>标记定义的项目名称
(2) 插入无序列表ul
<ul>
<li>************</li>
<li>************</li>
<li>************</li>
<ul>
(3) 插入有序列表ul
<ol>
<li>************</li>
<li>************</li>
<li>************</li>
<ol>
(4) 插入目录列表 dir
<dir>
<li>****************</li>
<li>****************</li>
<li>****************</li>
</dir>
(5) 插入菜单列表 menu
<dir>
<li>****************</li>
<li>****************</li>
<li>****************</li>
</dir>
2. 超链接:相对路径,绝对路径,跟路径
3. 表格
<table> <tr> <td>
表格标题:<caption>
表格表头:<th>
划分结构表格<thead><tbody><tfoot>
表格的宽度和高度:width,height
表格的边框属性:border
边框的样式:frame ,rules
Frame的常见属性
above | 显示上边框 |
border | 显示上下左右边框 |
below | 显示下边框 |
hsides | 显示上下边框 |
lhs | 显示左边框 |
rhs | 显示右边框 |
vsides | 显示左右边框 |
void | 不显示边框 |
All | 显示所有内部边框 |
Groups | 显示介于行列边框 |
None | 不显示内部边框 |
Cols | 仅显示列边框 |
Rows | 仅显示行边框 |
调整行内容水平对齐:align:left|right|center
调整行内容垂直对齐:valign:top|middle|bottom|baseline
设置跨行:rowspan
设置跨列:colspan
设置单元间距:cellspacing
设置单元格边距:cellpadding
4. 框架frame,iframe,frameset用法和区别
转自:/article/5207617.html
参考:http://wenku.baidu.com/view/c6e125f8aef8941ea76e05ed.html
■ 框架概念 :
所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只需要 <FRAMESET> <FRAME> 即可,而所有框架标记需要放在一个总起的html 档,这个档案只记录了该框架如何划分,不会显示任何资料,所以不必放入 <BODY> 标记,浏览这框架必须读取这档案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗,每一框窗由一个 <FRAME> 标记所标示,<FRAME>必须在 <FRAMESET> 范围中使用。如下例:
<frameset cols="50%,*">
<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset>
此例中 <FRAMESET> 把画面分成左右两相等部分,左便是显示 up2u.html,右边则会显示 me2.html 这档案,<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。
本节与 Composer 教室的【运用框架】大部分相同,只是本节增加了内容及较为详细,正如其它篇章一样并不会提及网页制作工具,若阁下学会了 HTML 相信你亦不会选用 Composer , FrontPage 一类的工具了。
■ <FRAMESET> <FRAME> :
<FRAMESET> 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
<FRAME> 则只是设定某一个框窗内的参数属性。
<FRAMESET> 参数设定:
例子:
<frameset rows="90,*" frameborder="0" border=0framespacing="2" bordercolor="#008000">
COLS="90,*"
垂 直切割画面(如分左右两个画面),接受整数值、百分数, *则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如COLS="30,*,50%" 可以 切成叁个视窗,第一个视窗是 30pixels 的宽度,为一绝对分割,第二个视窗是当分配完第一及第叁个视窗後剩下的空间,第叁个视窗则占整个画面的 50% 宽度为 一相对分割。您可自己调整数字。
ROWS="120,*"
就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量不要同在一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类形的框架,尽采用多重分割。
frameborder="0"
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避免使用 yes 或 no )
border="0"
设定框架的边框厚度,以 pixels 为单位。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【调色原理】。
framespacing="5"
表示框架与框架间的保留空白的距离。
<FRAME> 参数设定:
例子:
<frame name="top" src="a.html" marginwidth="5"marginheight="5" scrolling="Auto" frameborder="0"noresize framespacing="6" bordercolor="#0000FF">
SRC="a.html"
设定此框窗中要显示的网页档案名称,每个框窗一定要对应着一个网页档案。你可使用绝对路径或相对路径,有关此两者详见於【连结进阶】。
NAME="top"
设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避免使用 yes 或 no )
framespacing="6"
表示框架与框架间的保留空白的距离。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【HTML 剖析】。
scrolling="Auto"
设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示, AUTO是视情况显示。
noresize
设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随意地拉动框架,改变其大小。
marginhight=5
表示框架高度部份边缘所保留的空间。
marginwidth=5
表示框架宽度部份边缘所保留的空间。
以下是一些例子:(与 Composer 教室的【运用框架】相同)
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
例子 HTML Code
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset>
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frame name="left" src="a.html">
<frameset rows="80,*">
<frame name="upper_right" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
■ <NOFRAMES> :
当 别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。
应用方法:
在<frameset> 标记范围加入 </NOFRAMES> 标记,以下是一个例子:
<frameset rows="80,*">
<noframes>
<body>
很抱歉,阁下使用的浏览器不支援框架功能,请转用新的浏览器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
若浏览器支援框架,那麽它不会理会 <noframes> 中的东西,但若浏览器不支援框架,由於不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,所以放在 <noframes>范围内的文字会被显示。
■ <IFRAME> :
这 标记只适用於IE(comet:也使用于FireFox)。它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记,但围着的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 JavaScript 会较好,若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。PS:一定要使用</iframe>关闭,否则后面的内容显示不出来。
<iframe> 的参数设定如下:
例子:
<iframe src="iframe.html" name="test" align="MIDDLE"width="300" height="100" marginwidth="1"marginheight="1" frameborder="1"scrolling="Yes"> </iframe>
src="iframe.html"
欲显示於此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name="test"
此框窗名称,这是连结标记的 target 参数所需要的,
align="MIDDLE"
可选值为 left, right, top, middle, bottom,作用不大
width="300" height="100"
框窗的宽及长,以 pixels 为单位。
marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
frameborder="1"
使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling="Yes"
使用 Yes 表示容许卷动(内定), No 则不容许卷动。
5. 表单
form,
input,text,password,file,checkbox,radio,button,submit,reset,image,hidden,
textarea
select,option,
相关文章推荐
- HTML--文本标签/marquee/bgsound/列表标签/超链接标签/img 图像标签/转义字符/表格标签/表单提交/框架标签
- html系统学习之三 <表格,列表,表单>
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]
- HTML&CSS基础学习笔记1.22-表单的文本域和下拉列表
- HTML2 body中的属性、列表、表格、表单、Div和Span、框架标签
- HTML、CSS和JavaScript学习五(案例分析二表格、项目列表和超链接)
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单
- html学习记录之表格、表单基础
- HTML学习之表格表单及框架介绍
- HTML 基本元素2(图像、超链接、表格、列表、块div和span、字体、内联框架)
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- JavaWeb - HTML,字体/列表/图形/超链接/表格/表单/其它(标签),CSS,CSS与HTML结合方式,CSS选择器,CSS扩展选择器
- HTML&CSS基础学习笔记1.14-创建表格
- 6、HTML 学习记录——表单、框架
- HTML基础学习-6-表格学习2
- web学习—html标签—超链接、表格
- HTML&CSS基础学习笔记1.18-表格的边框
- html基础知识:form表单和框架
- html中meta标签link标签无序有序列表表格表单
- html的学习二--类,块,表格,列表。布局元素和属性总结