韩顺平_php从入门到精通_视频教程_第5讲_无序列表_有序列表_框架_学习笔记_源代码图解_PPT文档整理

原创 2012年11月11日 17:41:01

文西马龙:http://blog.csdn.net/wenximalong/

HTML不区分大小写,但最好统一。


练习题:课程表

<th>定义表头

<th>和<td>从本质上是没有区别的,但是用了<th>会自动的加粗体

<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>
	<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>
	<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

<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>
	<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>
	<head></head>
	<body bgcolor="silver">
		<p>c.html</p>
	</body>
</html>

zjl.html

<html>
	<head></head>
	<body bgcolor="blue">	
		<p>周杰伦的歌</p>
	</body>
</html>

qq.html

<html>
	<head></head>
	<body bgcolor="gray">	
		<p>齐秦的歌</p>
	</body>
</html>

target属性值有四个

1._blank:表示打开一个全新的页面
2._self:替换本页面
3._top:整个浏览器窗口
4._parent:父窗口
5.target值中直接写对应的那个frame的名字

小练习


纵向分割,横向分割

这种结构往往都是在后台,前台很少用,框架多用于后台管理的页面,前台用浮动窗口


实现:点击青花瓷,在歌词大全处切换成,青花瓷的歌词



all.html

<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>
	<head></head>
	<body bgcolor="green">
		<p>Top</p>
	</body>
</html>

left.html

<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>
	<head></head>
	<body bgcolor="red">
		<p>歌词大全</p>
	</body>
</html>

qhc.html

<html>
	<head></head>
	<body bgcolor="blue">	
		<p>青花瓷的歌词</p>
	</body>
</html>

dbr.html

<html>
	<head></head>
	<body bgcolor="gray">	
		<p>当兵的人的歌词</p>
	</body>
</html>

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键,来控制图片的位置 这个小游戏,用面向对象会很方...

韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ ava和javascript的关系,雷锋和雷峰塔的关系。 内容介绍 1.课程介绍 2.javascri...

韩顺平_php从入门到精通_视频教程_第8讲_多媒体页面_标签汇总①_地图映射_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ html其它标记 多媒体标记 我的电影网站 参照清华大学的html...

韩顺平_php从入门到精通_视频教程_第0讲_开山篇_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 怎么讲,如何去学,学完了你可以做什么。 Html:超文本标记语言 Css:层叠样式表 Javascri...

韩顺平_php从入门到精通_视频教程_第13讲_选择器使用细节_块元素和行内元素_盒子模型_盒子模型经典应用①_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ ①父子选择器 类选择器和id选择器都可以有父子选择器 总结: 1.父子选择器可以有多级(但是实际开发中不要...

韩顺平_php从入门到精通_视频教程_第1讲_html介绍_html运行原理①_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ html是web开发中基础的基础 学习目标: 1.了解html的基本概念 2.理解html的运行基本原理 3...

韩顺平_php从入门到精通_视频教程_第20讲_仿sohu首页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 对sohu页面的分析 注释很重要 经验:写一点,测试一点,这是一个很好的方法。别写完了过后,再来测试...

韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ div+css细节 1.初始CSS 2.块元素和行内元素 3.CSS核心内容 3.1标准流 3.2盒子模型...

韩顺平_php从入门到精通_视频教程_第14讲_盒子模型经典应用②_作业布置_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 盒子模型——理解 我们可以把盒子模型转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性...

韩顺平_php从入门到精通_视频教程_第15讲_di-css作业评讲①_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 作业1 home1.html 作业1 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:韩顺平_php从入门到精通_视频教程_第5讲_无序列表_有序列表_框架_学习笔记_源代码图解_PPT文档整理
举报原因:
原因补充:

(最多只允许输入30个字)