html 无序列表_有序列表_框架
2015-03-05 15:47
471 查看
HTML不区分大小写,但最好统一。
练习题:课程表
<th>定义表头
<th>和<td>从本质上是没有区别的,但是用了<th>会自动的加粗体
[html] view
plaincopy
<html>
<head></head>
<body>
<center>成绩表</center>
<br/>
<!--表格-->
<table border="3px" align="center" width="600px" bordercolor="579AFE">
<tr align="center">
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr align="center">
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr align="center">
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
经验:为了提高开发效率,把帮助手册,还有index.html的帮助文档首页都弄到快速启动栏里,这样就不用临时去翻动文件夹了,节省时间。
html列表--无序列表
<ul type="属性值">
<li>列表内容</li>
</ul>
<ul>的属性设定(常用):例如<ul type="square">
type="square"
设定符号款式,其值有三种,如下,默认为type="disc";
html的元素参考 html语言教程(html版)
type="disc"时的列项符号为实心圆点
type="circle"时的列项符号为空心圆
type="square"时的列项符号为空心正方形
ul用的很多,新浪搜狐首页面大量使用ul来显示数据,搜索引擎很喜欢ul
[html] view
plaincopy
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
<br/>
<ul type="square">
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
<br/>
<ul type="circle">
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
</body>
</html>
html有序列表
<ol type="属性值" start="起始值">
<li>内容</li>
</ol>
<ol>称为顺序列表标记。<li>则用以标记列表项目。所谓顺序列表就是每一项有顺序,又称编号列表。
<ol>的属性设定(常用):
例如:<ol type="i" start="4"></ol>
设定开始数目,不论设定了哪一数目款式,其值只能是1,2,3……等整数,默认为start="1"。
i可以取以下值中的任意一个:
1阿拉伯数字1,2,3……
a小写字母a,b,c……
A大写字母A,B,C……
i小写罗马字母i,ii,iii……
I大写罗马数字I,II,III……
[html] view
plaincopy
<html>
<head></head>
<body>
<ol>
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
</ol>
<br/>
<ol type="i">
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
<br/>
<ol type="A" start="3">
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
</body>
</html>
html框架
用途主要是用于分割显示多个页面
<frameset frameborder="边框大小" cols="横向各窗口百分比,隔开" rows="纵向各窗口百分比"
<frame name="给frame取名" src="html路径" noresize>
</frameset>
注意:如果a.html包括了其它的页面(framsset)则要求a.html本身不能有body体和body的内容(如hello)
a.html
[html] view
plaincopy
<frameset cols="50%,*">
<!--noresize 不允许改变窗口大小 frameborder="0"没有边框,b和c都要添加-->
<!--框架起名,b.html页面超链接点击后,会在c页面所在位置出现-->
<frame name="frame1" src="b.html" noresize frameborder="0"/>
<frame name="frame2" src="c.html" frameborder="0"/>
</frameset>
b.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="pink">
<!--target表示我们点击后,目标指向谁,替换哪个框架-->
<a href="zjl.html" target="frame2">周杰伦</a><br/>
<a href="qq.html" target="frame2">齐秦</a>
</body>
</html>
c.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="silver">
<p>c.html</p>
</body>
</html>
zjl.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="blue">
<p>周杰伦的歌</p>
</body>
</html>
qq.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="gray">
<p>齐秦的歌</p>
</body>
</html>
target属性值有四个
1._blank:表示打开一个全新的页面
2._self:替换本页面
3._top:整个浏览器窗口
4._parent:父窗口
5.target值中直接写对应的那个frame的名字
小练习
纵向分割,横向分割
这种结构往往都是在后台,前台很少用,框架多用于后台管理的页面,前台用浮动窗口
实现:点击青花瓷,在歌词大全处切换成,青花瓷的歌词
all.html
[html] view
plaincopy
<frameset rows="20%,*">
<!--scrolling="no"不出现滚动轴-->
<frame src="top.html" scrolling="no"/>
<!--对下面的80%再左右分割-->
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html" name="myframe" />
</frameset>
</frameset>
top.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="green">
<p>Top</p>
</body>
</html>
left.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="yellow">
<ul>
<li><a href="qhc.html" target="myframe">青花瓷</a></li>
<li><a href="dbr.html" target="myframe">当兵的人</a></li>
</ul>
</body>
</html>
right.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="red">
<p>歌词大全</p>
</body>
</html>
qhc.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="blue">
<p>青花瓷的歌词</p>
</body>
</html>
dbr.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="gray">
<p>当兵的人的歌词</p>
</body>
</html>
练习题:课程表
<th>定义表头
<th>和<td>从本质上是没有区别的,但是用了<th>会自动的加粗体
[html] view
plaincopy
<html>
<head></head>
<body>
<center>成绩表</center>
<br/>
<!--表格-->
<table border="3px" align="center" width="600px" bordercolor="579AFE">
<tr align="center">
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr align="center">
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr align="center">
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
经验:为了提高开发效率,把帮助手册,还有index.html的帮助文档首页都弄到快速启动栏里,这样就不用临时去翻动文件夹了,节省时间。
html列表--无序列表
<ul type="属性值">
<li>列表内容</li>
</ul>
<ul>的属性设定(常用):例如<ul type="square">
type="square"
设定符号款式,其值有三种,如下,默认为type="disc";
html的元素参考 html语言教程(html版)
type="disc"时的列项符号为实心圆点
type="circle"时的列项符号为空心圆
type="square"时的列项符号为空心正方形
ul用的很多,新浪搜狐首页面大量使用ul来显示数据,搜索引擎很喜欢ul
[html] view
plaincopy
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
<br/>
<ul type="square">
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
<br/>
<ul type="circle">
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
</body>
</html>
html有序列表
<ol type="属性值" start="起始值">
<li>内容</li>
</ol>
<ol>称为顺序列表标记。<li>则用以标记列表项目。所谓顺序列表就是每一项有顺序,又称编号列表。
<ol>的属性设定(常用):
例如:<ol type="i" start="4"></ol>
设定开始数目,不论设定了哪一数目款式,其值只能是1,2,3……等整数,默认为start="1"。
i可以取以下值中的任意一个:
1阿拉伯数字1,2,3……
a小写字母a,b,c……
A大写字母A,B,C……
i小写罗马字母i,ii,iii……
I大写罗马数字I,II,III……
[html] view
plaincopy
<html>
<head></head>
<body>
<ol>
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
</ol>
<br/>
<ol type="i">
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
<br/>
<ol type="A" start="3">
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
</body>
</html>
html框架
用途主要是用于分割显示多个页面
<frameset frameborder="边框大小" cols="横向各窗口百分比,隔开" rows="纵向各窗口百分比"
<frame name="给frame取名" src="html路径" noresize>
</frameset>
注意:如果a.html包括了其它的页面(framsset)则要求a.html本身不能有body体和body的内容(如hello)
a.html
[html] view
plaincopy
<frameset cols="50%,*">
<!--noresize 不允许改变窗口大小 frameborder="0"没有边框,b和c都要添加-->
<!--框架起名,b.html页面超链接点击后,会在c页面所在位置出现-->
<frame name="frame1" src="b.html" noresize frameborder="0"/>
<frame name="frame2" src="c.html" frameborder="0"/>
</frameset>
b.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="pink">
<!--target表示我们点击后,目标指向谁,替换哪个框架-->
<a href="zjl.html" target="frame2">周杰伦</a><br/>
<a href="qq.html" target="frame2">齐秦</a>
</body>
</html>
c.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="silver">
<p>c.html</p>
</body>
</html>
zjl.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="blue">
<p>周杰伦的歌</p>
</body>
</html>
qq.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="gray">
<p>齐秦的歌</p>
</body>
</html>
target属性值有四个
1._blank:表示打开一个全新的页面
2._self:替换本页面
3._top:整个浏览器窗口
4._parent:父窗口
5.target值中直接写对应的那个frame的名字
小练习
纵向分割,横向分割
这种结构往往都是在后台,前台很少用,框架多用于后台管理的页面,前台用浮动窗口
实现:点击青花瓷,在歌词大全处切换成,青花瓷的歌词
all.html
[html] view
plaincopy
<frameset rows="20%,*">
<!--scrolling="no"不出现滚动轴-->
<frame src="top.html" scrolling="no"/>
<!--对下面的80%再左右分割-->
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html" name="myframe" />
</frameset>
</frameset>
top.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="green">
<p>Top</p>
</body>
</html>
left.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="yellow">
<ul>
<li><a href="qhc.html" target="myframe">青花瓷</a></li>
<li><a href="dbr.html" target="myframe">当兵的人</a></li>
</ul>
</body>
</html>
right.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="red">
<p>歌词大全</p>
</body>
</html>
qhc.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="blue">
<p>青花瓷的歌词</p>
</body>
</html>
dbr.html
[html] view
plaincopy
<html>
<head></head>
<body bgcolor="gray">
<p>当兵的人的歌词</p>
</body>
</html>
相关文章推荐
- 06 html无序列表 、有序列表、 框架和综合练习
- 网页HTML 有序列表ol 和无序列表 ul
- html有序列表和无序列表
- HTML 学习笔记之列表控件 无序列表ul(Unordered List)、有序列表ol(Ordered List)、定义列表dl(Definition List)
- HTML学习之有序列表、无序列表和自定义列表
- HTML学习笔记之列表控件 无序列表 ul(Unordered List) 、有序列表 ol(Ordered List) 、定义列表 dl(Definition List)
- HTML入门教程 - 6.无序列表和有序列表(Unordered Lists&Ordered Lists)
- 14. HTML 列表(无序, 有序, 定义)
- HTML无序列表和有序列表
- HTML 无序排列 有序排列 框架
- HTML中的有序排列和无序列表标签
- html有序列表和无序列表
- Html之有序列表和无序列表用法_ol_li_ul_实例
- 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子
- 网页HTML代码讲解:有序列表和无序列表
- html有序列表和无序列表
- 第003讲 无序列表 有序列表 框架
- HTML 分组无序列表和有序列表
- HTML 无序列表和有序列表
- html标签(2)--有序列表与无序列表