您的位置：首页 > Web前端 > CSS

HTML+CSS初学者练习项目1：利用HTML简单标签制作《我的自我介绍》网页

2019-04-04 10:19 1216 查看

适合初学者练习的HTML项目：制作一个《自我介绍》网页。

需要掌握内容：

HTML+CSS第一课：初识HTML-3个步骤创建自己的第一个html网页

HTML+CSS第二课：格式标签、图像标签、链接标签的使用

HTML+CSS第五课：使用Dreamweaver工具制作网页

知识点：

HTML文档基本结构、图像标签<img /> 、段落标签<p></p> 、强制换行<br />、水平线<hr />、标题标签<h1>—<h6>、更改字体样式标签<font></font>、链接标签<a></a>制作锚点

制作思路：

1、整体页面居中，使用<center></center>标签实现

2、制作滚动文字效果，使用<marquee></marquee>标签实现。（<marquee>在HTML和HTML5中都属于废弃的特性，建议不要使用这个标签，这里是为了增加网页动态效果而演示使用）

3、利用<hr />标签制作水平线，可以通过属性设置，设置水平线的颜色、宽度等。

4、利用<a></a>标签制作锚点，实现从页面的底部直接回到当前页面的顶端。

实现效果：

网页代码：

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>王迪的自我介绍网页</title>
</head>

<body>
<center><!--让网页中内容居中显示-->
<a name="top"></a><!--设置一个锚点，点击时跳转到该位置-->
<img src="timg.png" width="160" height="160" />
<h1><font color="#FF6633">王迪</font></h1>
<p>星座控/轻生活/轻日记/轻梦想</p>
<marquee width="750px"><p>======QQ：1476737138======</p></marquee><br /><br />
<img src="20190214095702_90925.jpg" />
<h2><font color="red"></font></h2>
<h3>生活</h3>
<p>给时光一份浅浅的回眸，给心灵一份淡淡的安暖，芬芳过往，岁月静好。</p> <br /><br />
<hr color="#FFCCCC" width="750px" /><br /><br />

<h2><font color="red">02</font></h2>
<h3>工作</h3>
<img src="20190214095710_36438.jpg" /><br /><br />
<hr color="#FFCCCC" width="750px" /><br /><br />

<h2><font color="red">03</font></h2>
<h3>胡言</h3>
<p>当网页设计遇上文艺范是一场怎样的邂逅，不要计划相遇，最美好的事情总是偶然发生的！——王迪</p>
<img src="img/cat.gif" /><br /><br />
<hr color="#FFCCCC" width="750px" /><br /><br />

<h2><font color="red">04</font></h2>
<h3>日记</h3>
<img src="20190214095726_34296.jpg" /><br /><br /><br />

<a href="#top">点击回到顶部</a><!--希望在这里给用户一个链接，用户点击此处的内容，跳转到锚点的位置-->
</center>

</body>
</html>

注意事项：

1、在DW软件中新建站点，并提前将制作网页要用到的图片拖放到站点文件里。

2、在网页上引用图像时，注意图像路径的正确引用。

3、页面元素之间希望空行多一些时，可以多用几个<br />标签或者几对<p></p>标签。

思考延伸：

在自我介绍网上，利用<ul></ul>标签或<ol></ol>标签添加更多对自己的自我介绍，比如我的兴趣爱好介绍、我喜欢的食物等……

====================这里是结束分割线=========================

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航