本教程源于本人学习的一些经验的总结,希望大家帮忙完善与指正,也希望会给初学者带来方便,希望大家不要随便转载,写的不是很好,还不完善
关键词:
上一讲我主要讲解了一下网页的基本结构与网页主体部分的基本结构,以及常用的html标签。
非常感谢网友对我的大力支持,谢谢你们给我的鼓励!
我继续上一讲:又开始实战了,代码敲起来!
代码如下:
<div id=”logo”>
<a href=”http://online.cumt.edu.cn”><img src=”logo.jpg” title=”Welcome!” alt=”logo” /></a>
</div>
title
1.Ehtmlimageshtmlhtmlindex.htmlimagesok
index.html代码如下:
<body>
<img alt=”我是图片” title=”Hello!” src=”../images/images.jpg” />
</body>
imgwidthheight代码如下:
<body>
<img alt=”我是图片” title=”Hello!” src=”../images/images.jpg” />
<img alt=”我是图片” title=”Hello!” src=”../images/images.jpg” width=”20″ height=”20″ />
<img alt=”我是图片” title=”Hello!” src=”../images/images.jpg” width=”200″ height=”200″ />
</body>
So easy !
好,我们继续头部讲解,导航的搜索框部分代码被我省略了,表单元素准备单独进行将讲解。
代码如下:
<div id=”nav”>
<ul>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>新闻中心</a></li>
<li><a href=”#”>资源下载</a></li>
<li><a href=”#”>论坛</a></li>
</ul>
<ul>
<li><a href=”#”>个人空间</a></li>
<li><a href=”#”>博雅园</a></li>
<li><a href=”#”>跳蚤市场</a></li>
<li><a href=”#”>音乐站 </a></li>
</ul>
</div>
So easy !
有人可能疑问这代码的运行结果与所给的图片差的太多了,哈哈,这是正常的,但到目前为止至少文字还是对的,如果感兴趣可以提前去学习一下css;
好标签继续:
标签5:ul
使用指数:*****
功能:构造一个无序列表,必须配合li来使用
类型:块级元素
常用属性:id,class
标签6:ol
使用指数:*****
功能:构造一个有序列表,必须配合li来使用
类型:块级元素
常用属性:id,class
何为无序?何为有序?运行一下代码便知分晓:
代码如下:
<div id=”nav”>
<ul>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>新闻中心</a></li>
<li><a href=”#”>资源下载</a></li>
<li><a href=”#”>论坛</a></li>
</ul>
<ol>
<li><a href=”#”>个人空间</a></li>
<li><a href=”#”>博雅园</a></li>
<li><a href=”#”>跳蚤市场</a></li>
<li><a href=”#”>音乐站 </a></li>
</ol>
</div>
So easy !
感兴趣的可以提前去看看他们的list-style属性,你会觉得很有意思,这里就不介绍了,这部分还是在讲解css的时候再说吧。到这里header就完成了。
整理:
代码如下:
<div id=”header”>
<div id=”banner”>
<span>你还没有登录,请登录</span>
<a target=”_blank” href=”#” title=”注册只需要5分钟!”>登陆</a><a href=”#”>注册</a>
</div>
<div id=”logo”>
<img src=”../images/images.jpg” alt=”logo” title=”其实这不是logo” />
</div>
<div id=”nav”>
<ul style=”list-style:”>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>新闻中心</a></li>
<li><a href=”#”>资源下载</a></li>
<li><a href=”#”>论坛</a></li>
</ul>
<ul>
<li><a href=”#”>个人空间</a></li>
<li><a href=”#”>博雅园</a></li>
<li><a href=”#”>跳蚤市场</a></li>
<li><a href=”#”>音乐站 </a></li>
</ul>
</div>
</div>
So easy !
效果好难看。。。
至于content部分我只讲三小块,不要惊讶,因为其他的大体都是一样的啊,目的还是为了让大家认识一些常用的标签,ok,Begin!Right now!
代码:
代码如下:
<div>
<a title=”全国高校百佳网站网络评选活动即将进入投票阶段” href=”#”>
<img alt=”全国高校百佳网站” src=”tempImg/nschool_pic.jpg”/>
</a>
<h3>
<a href=”#”>全国高校百佳网站</a>
</h3>
<p>
由教育部思想政治工作司指导、中国大学生在线网站主办…
<a href=”#”>