HTML5个人介绍页的基本结构
一个HTML5个人介绍页主要包括以下几个部分：
1、文档类型声明(DOCTYPE)
2、html标签
3、head标签
4、body标签
5、header标签
6、nav标签
7、main标签
8、section标签
9、article标签
10、h1-h6标签
11、p标签
12、img标签
13、a标签
14、footer标签
下面我们详细讲解每一个部分的作用和代码示例。
具体实现步骤
1、创建一个新的文件夹，然后在文件夹中新建一个名为index.html的文件。
2、在index.html文件中，首先添加文档类型声明(DOCTYPE),告诉浏览器这是一个HTML5文档。
3、接下来，添加html标签，表示这是一个HTML页面。
4、在head标签中，添加title标签，设置页面标题。
5、在body标签中，添加header、nav、main、section、article、h1-h6、p、img、a和footer等标签，分别表示头部、导航栏、主要内容区域、内容区域、文章区域、标题1-6级、段落、图片、链接和底部。
6、在各个标签内，添加相应的内容，如姓名、年龄、性别、联系方式等。
7、保存文件。
代码示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>个人介绍</title>
</head>
<body>
<header>
<h1>张三的个人介绍</h1>
</header>
<nav>
<ul>
<li><a href="about">关于我</a></li>
<li><a href="contact">联系方式</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>关于我</h2>
<p>姓名：张三</p>
<p>年龄：25岁</p>
<p>性别：男</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>邮箱：zhangsan@example.com</p>
<p>电话：13800138000</p>
</section>
</main>
<footer>版权所有 © 张三</footer>
</body>
</html>
相关问题与解答
1、如何让页面居中显示？
答：可以使用CSS样式将页面内容居中显示，在head标签内添加如下代码：
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
2、如何添加背景图片？
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/218258.html
微信扫一扫 