预习报告部分
- 实验目的：掌握静态 HTML 页面的分析方法，了解 HTML 语言的特点，掌握 HTML 语言的基本结构，学会简单 HTML 页面的编写。
- 实验原理：
使用记事本或VS code。使用原生的html书写相对应的静态网页。
（1）<HTML></HTML>：此对标签用于标记一个页面的开始和结束。
（2）<HEAD></HEAD>：此对标签用于标记头部，主要用于对页面中使用的字符集、脚本语言、页面的标题、背景音乐、样式表单等进行说明和设置。此标签内还可以嵌套<TITLE></TITLE>标签，用于显示网页标题。
（3）<BODY></BODY>：此对标签用于标记一个页面输出显示的开始和结束。该标签内 包含 Web 页面的具体内容（文字、图形、图像、超链接等各种 HTML 对象）。
- 实验内容：
- 使用记事本或VS code 书写自我介绍的网页
- 实验所用设备：C1-412机房电脑
- 实验步骤：
- 打开电脑，打开VS code软件；
- 根据下图的网页基本内容设置网页
- 写下相对应HEAD BODY STYLE 板块
实验报告部分
- 实验步骤
- 打开电脑，打开VS code软件；
- 根据下图的网页基本内容设置网页
- 写下相对应HEAD BODY STYLE 板块
- 实验数据及结果分析
- 打开VS code 新建基础的.HTML文件使用VS code原生自带的！操作符生成最基础的界面模板
- 修改基础界面面板为下图
- 设置style板块以方便下文body板块使用class标记对应的div盒子
这里需要注意是 各个标签内部的项有自己的界面要求 具体的CCS的属性大全表格可以参考下文中复制提及的CSDN文档
CSS样式全解析：属性、用法及示例
然后style盒子完成后 效果图如下文所示
- 在body板块内部设置好网页主体内容
先建立一个主容器用于容纳内部所有的板块，包含所有个人信息的部分
然后建立各个小板块div的内容分下列
- 、包合姓名、专业和联案方式的部分
- 、教育经历部分
- 、个人荣誉部分
- 、项目经验部分
- 、技能部分
- 、自我评价部分
期间需要注意到的是 基本信息那里有一个 对本人博客的CSDN的网址的链接 以及对本人照片的上传
<a href="https://blog.csdn.net/qq_46512332?spm=1000.2115.3001.5343" target="_blank">Lomos_II</a></p>
<img src="C:\Users\asus\Desktop\mmexport1734403487910.jpg" alt="个人照片" style="margin-left: 400px; ">
使用这两条代码 实现功能 需要注意到的是要合理的修改自己的照片的绝对地址 以免造成图片无法加载 所有的板块全部书写完成后 如下图所示
至此 个人简介的网页制作就完成了 效果图如下
- 实验结论：
通过本次实验 自主设计并实现HTML网页 学习并运用多种标签 掌握其用途和功能，掌握静态 HTML 页面的分析方法，了解 HTML 语言的特点，掌握 HTML 语言的基本结构，学会简单 HTML 页面的编写。
- 总结及心得体会：
通过本次实验 自主设计并实现HTML网页 学习并运用多种标签 掌握其用途和功能 学会使用标题、段落、链接、图像等构建网页结构和内容，并运用样式和布局标签美化页面 加深了对HTML标签的理解 培养网页设计和开发能力 显著提升学习效果
源码开源
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介绍</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
padding: 0;
background-color: #f4f4f9;
}
.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #333;
}
img {
max-width: 150px;
border-radius: 50%;
margin-right: 20px; /* 添加右边距以分隔图片和文本 */
}
.section {
margin-bottom: 30px;
}
.section h2 {
border-bottom: 2px solid #ddd;
padding-bottom: 5px;
margin-bottom: 15px;
}
.section ul {
list-style-type: disc;
margin-left: 20px;
}
.section p {
margin-bottom: 10px;
}
.contact-info {
margin-top: 20px;
font-size: 0.9em;
}
.contact-info a {
color: #007BFF;
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
.section1 {
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中对齐 */
margin-bottom: 30px;
}
.section1 h1 {
margin: 0; /* 移除默认的顶部和底部外边距 */
}
</style>
</head>
<body>
<div class="container">
<!-- 主容器，包含所有个人信息的部分 -->
<div class="section1">
<!-- 包含姓名、专业和联系方式的部分 -->
<div>
<h1>xxx</h1>
<p>xxx专业</p>
<div class="contact-info">
<p>Email: xxxxxx@qq.com</p>
<p>Phone: +86 xxxxxxxxxx</p>
<p>CSDN: <a href="https://blog.csdn.net/qq_46512332?spm=1000.2115.3001.5343" target="_blank">Lomos_II</a></p>
</div>
</div>
<img src="C:\Users\asus\Desktop\mmexport1734403487910.jpg" alt="个人照片" style="margin-left: 400px; ">
<!-- 个人照片 -->
</div>
<div class="section">
<!-- 教育经历部分 -->
<h2>教育经历</h2>
<p><strong>xx大学</strong></p>
<p>计xx专业 | 本科 | 2024 - 2028</p>
<ul>
<li>主修课程：xxx等。</li>
</ul>
</div>
<div class="section">
<!-- 个人荣誉部分 -->
<h2>个人荣誉</h2>
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div class="section">
<!-- 项目经验部分 -->
<h2>项目经验</h2>
<p><strong>xxx</strong></p>
<ul>
<li>xxx</li>
</ul>
<p><strong>xxx</strong></p>
<ul>
<li>xxx</li>
</ul>
</div>
<div class="section">
<!-- 技能部分 -->
<h2>技能</h2>
<ul>
<li>编程语言：Java / C++ | C</li>
<li>前端框架：Vue.js</li>
<li>开发工具：Visual Studio Code | IntelliJ IDEA | Visual Studio 2022</li>
</ul>
</div>
<div class="section">
<!-- 自我评价部分 -->
<h2>自我评价</h2>
<p>本人严谨务实，诚挚待人，具有较强的团队协作能力；勇于挑战，有较强的管理，动手和学习能力；吃苦耐劳，具有良好的适应性，做事认真负责。
<br>学习方面：较强的自律性和自我管理能力，能够合理安排时间，注重学习方法，提高自己的学习效率。
<br>生活方面：吃苦耐劳，做事认真，遇到困难，有克服困难的毅力与决心。
<br>本人坚信，困难是通往成功的基石与阶梯。长风破浪会有时，直挂云帆济沧海。守住初心，方得始终。
</p>
</div>
</div>
</body>
</html>