网页设计期末作业html个人介绍
时间: 2024-12-31 07:23:16 浏览: 9
### 使用HTML创建个人介绍网页的设计思路
#### 设计目标
构建一个简洁而功能齐全的个人介绍网页,旨在展示个人信息、兴趣爱好以及联系方式等内容。此网站应易于浏览者理解,并提供良好的用户体验。
#### 技术选型
采用标准的超文本标记语言(HTML),这是构成Web页面的基础语法[^1]。为了增强视觉效果和交互性,还可以引入层叠样式表(CSS)来控制布局与外观;同时利用JavaScript脚本实现某些动态特性(尽管对于简单的自我简介来说可能不是必需)[^3]。
#### 结构规划
- **头部区域**:设置页面标题(title标签内的文字会在浏览器顶部显示),定义字符编码方式(meta charset属性指定文档使用的字符集为UTF-8以支持更多国家的语言符号).另外加入视口(viewport meta tag)设定使得移动设备能够正确缩放页面尺寸.
- **主体部分**
- 利用`<header>`元素作为整个页面最上方的内容容器,其中可放置导航栏或其他重要提示信息;
- `<section>`用来分隔不同主题板块,比如“关于我”、“技能清单”、“作品链接”等;
- 对于每一段落式的描述建议使用`<p>`标签包裹起来便于阅读;
- 如果有图片资源,则通过`<img />`自闭合标签加载图像文件路径;
- 超级链接(anchor element,<a>)可用于指向外部网址或是站内其他位置.
- **底部版权说明**
可选用`<footer>`表示页脚,在这里注明作者姓名、创作日期以及其他必要的版权声明.
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>我的个人主页</title>
<link rel="stylesheet" href="./assets/css/style.css"/>
<style>
body {
font-family:"Arial",sans-serif;
background-color:#f9f9f9;
color:#333;
}
.container{
max-width:70%;
margin:auto;
padding-top:2em;
text-align:center;
}
.profile-pic img{
border-radius:50%;
width:150px;height:150px;
object-fit:cover;
display:block;margin-left:auto;margin-right:auto;border:solid 4px white;box-shadow:rgba(0,0,0,.1) 0 4px 12px;}
h1,h2{font-weight:bold;text-transform:uppercase;color:#ff6b6b;}
.about-me p{text-indent:2em;line-height:1.6;font-size:.9rem;}
.skills ul li{list-style-type:none;display:inline-block;padding:.5em;background:#ff6b6b;border-radius:.25em;margin:.25em;color:white;}
.projects a{text-decoration:none;color:black;}
.social-media i{font-size:2rem;}
.footer small{opacity:.7;}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
/* 手机端适配 */
.container { max-width: none;width: calc(100% - 2 * var(--horizontal-padding)); }
}
</style>
<!-- 引入字体图标库 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
</head>
<body>
<div class="container">
<header>
<hgroup>
<h1>张三丰</h1>
<h2>前端开发工程师 | UI/UX设计师</h2>
</hgroup>
<div class="profile-pic"><img alt="Profile Picture"/></div>
</header>
<section id="aboutMe"class="about-me">
<article><p>大家好!我是来自中国湖南长沙的一名热爱编程的技术宅男...</p></article>
</section>
<section id="skills">
<h3>掌握技术栈:</h3>
<ul>
<li>HTML/CSS</li>
<li>Javascript ES6+</li>
<li>React/Vue框架应用</li>
...
</ul>
</section>
<section id="projects">
<h3>项目经历:</h3>
<a href="#">在线商城系统</a><br/>
<a href="#">企业官网建设案例分享</a>
</section>
<footer>
<i class="fab fa-github-square social-media"></i> <small>@github_username</small><br/><hr style="border:dashed 1px #ddd;" />
<small>© Copyright 2023 by Zhang Sanfeng.All Rights Reserved.</small>
</footer>
</div><!-- End of container -->
</body>
</html>
```
阅读全文