预习报告部分
- 实验目的：掌握静态 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>
