html个人网站源代码

HTML 个人网站源代码详解

代码核心功能解析

头部信息

• 字符编码设置：<meta charset="UTF-8"> 确保网页能正确显示各种字符，避免乱码问题。
• 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 使网页在不同设备上能自适应显示，提升移动端浏览体验。

导航栏

• 列表结构：使用<ul>无序列表包裹导航链接，<li>作为列表项，每个<a>标签定义一个跳转链接。
• 锚点定位：如<a href="#about">关于我</a>，点击可跳转到页面中 id 为”about”的元素位置，方便页面内导航。

区

• 个人信息展示：通过<h1>标题和<p>段落展示姓名、职业等信息，<img>标签插入个人头像。
• 技能展示：用<div class="skill">包裹每个技能项，<span>显示技能名称，<div class="progress">结合 CSS 实现进度条效果，直观展示技能熟练程度。
• 作品展示：<div class="work">包含作品图片（<img>）和描述（<p>），<a>标签嵌套可点击跳转到作品详情页。
• 联系方式：<form>表单收集访客信息，<input>定义输入框类型（文本、邮箱等），<textarea>用于多行文本输入，<button>提交按钮触发表单提交动作。

页脚

• 版权信息：<footer>标签内的文本声明网站版权归属及年份，简单明了。

相关问题与解答

问题 1：如何修改网站整体颜色风格？

解答：主要通过修改 CSS 样式表中的颜色属性来实现，在<style>标签或外部 CSS 文件中，找到定义字体颜色（如color属性）、背景颜色（background-color属性）等相关样式规则，将原来的色值更改为想要的新颜色值，比如原本文字颜色是黑色（color: #000;），若要改为红色，可将其改为color: #f00;，保存后刷新网页即可看到效果，注意保持各板块颜色搭配协调，避免视觉上的冲突。

问题 2：怎样给网站添加一个新的页面，并在导航栏中创建对应链接？

解答：在网站文件目录下创建一个新的 HTML 文件，如projects.html（假设是作品详细介绍页面），按照常规 HTML 结构编写该页面内容，包括作品图片放大展示、详细文字描述等，回到首页 HTML 文件，在<nav>标签内的<ul>列表中添加新的<li>项，如<li><a href="projects.html">作品集</a></li>，这里的href属性值就是新页面的文件名，这样，当点击导航栏中的“作品集”链接时，就会跳转到新建的projects.html页面，展示更详细的作品