html5&css&js代码 010 个人简历模板一
- 一、代码
- 二、解释
这段HTML代码定义了一个个人简历的页面布局和样式。页面分为多个部分，包括基本信息、自我评价、工作经历、教育经历、软件产品及著作、未来研究方向等。每个部分都使用section标签包裹，并通过h2标签给出小标题。页面使用内联样式表定义了字体、颜色、背景色、边框、对齐方式等样式。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>个人简历</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #2f323a;
color: #f5f7fa;
font-family: Arial, sans-serif;
}
h1, h2 {
color: #fff;
text-align: center;
}
section {
margin: 2em auto;
padding: 1em;
background-color: #3b3e45;
border-radius: 5px;
width: 80%;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
}
td {
border: 1px solid #5a5d65;
padding: 1em;
text-align: center;
}
th {
display: none; /* 隐藏表头 */
}
</style>
</head>
<body>
<h1>个人简历</h1>
<!-- 基本信息 -->
<section>
<h2>基本信息</h2>
<p>姓名：[姓名]</p>
<p>性别：[性别]</p>
<p>出生日期：[出生日期]</p>
<p>联系电话：[联系电话]</p>
<p>电子邮箱：[电子邮箱]</p>
</section>
<!-- 自我评价 -->
<section>
<h2>自我评价</h2>
<p>[自我评价内容]</p>
</section>
<!-- 工作经历 -->
<section>
<h2>工作经历</h2>
<table>
<tr>
<td>[公司名称1]</td>
<td>[职位1]</td>
<td>[工作时间1]</td>
</tr>
<tr>
<td>[公司名称2]</td>
<td>[职位2]</td>
<td>[工作时间2]</td>
</tr>
<tr>
<td>[公司名称3]</td>
<td>[职位3]</td>
<td>[工作时间3]</td>
</tr>
<tr>
<td>[公司名称4]</td>
<td>[职位4]</td>
<td>[工作时间4]</td>
</tr>
<tr>
<td>[公司名称5]</td>
<td>[职位5]</td>
<td>[工作时间5]</td>
</tr>
</table>
</section>
<!-- 教育经历 -->
<section>
<h2>教育经历</h2>
<table>
<tr>
<td>[学校名称1]</td>
<td>[学历1]</td>
<td>[入学年份 - 毕业年份1]</td>
</tr>
<tr>
<td>[学校名称2]</td>
<td>[学历2]</td>
<td>[入学年份 - 毕业年份2]</td>
</tr>
<!-- 更多教育经历行... -->
</table>
</section>
<!-- 软件产品及著作 -->
<section>
<h2>软件产品及著作</h2>
<table>
<tr>
<td>[产品/著作名称1]</td>
<td>[简介或功能1]</td>
<td>[发布年份1]</td>
</tr>
<tr>
<td>[产品/著作名称2]</td>
<td>[简介或功能2]</td>
<td>[发布年份2]</td>
</tr>
<tr>
<td>[产品/著作名称3]</td>
<td>[简介或功能3]</td>
<td>[发布年份3]</td>
</tr>
<tr>
<td>[产品/著作名称4]</td>
<td>[简介或功能4]</td>
<td>[发布年份4]</td>
</tr>
<tr>
<td>[产品/著作名称5]</td>
<td>[简介或功能5]</td>
<td>[发布年份5]</td>
</tr>
</table>
</section>
<!-- 未来研究方向 -->
<section>
<h2>未来研究方向</h2>
<p>[未来研究方向内容]</p>
</section>
</body>
<footer style="
text-align: right;
font-size: 1.5rem;
font-weight: bold;
margin-right: 22%;
margin-bottom: 5rem;
color: #ffcc00;
">
HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>
二、解释
这段HTML代码定义了一个个人简历的页面布局和样式。页面分为多个部分，包括基本信息、自我评价、工作经历、教育经历、软件产品及著作、未来研究方向等。每个部分都使用section标签包裹，并通过h2标签给出小标题。页面使用内联样式表定义了字体、颜色、背景色、边框、对齐方式等样式。
<!DOCTYPE html>声明文档类型为HTML5。
<html lang="zh-cn">表示文档语言为中文。
<head>标签内定义了页面的元数据，如标题、字符编码、视口设置和样式。
<body>标签内包含页面的主要内容，分为多个section部分。
<h1>和<h2>标签定义了标题级别，用于区分各个部分的标题。
<p>标签用于展示文本信息。
<table>、<tr>、<td>和<th>标签用于展示表格内容。
<footer>标签定义了页面底部的信息。
这段HTML代码中用到了以下全局属性：
<html lang="zh-cn">中的lang属性：这是一个全局属性，用于指定文档或文档片段的语言。在这个例子中，它指定了整个HTML文档的语言是中文（简体）。<meta charset="UTF-8">中的charset属性：尽管不是直接应用于HTML元素，但它是<meta>标签中的一个全局性质的属性，用来定义HTML文档的字符编码为UTF-8。<footer style="...">中的style属性：这是全局属性之一，允许开发者在元素内嵌入CSS样式信息。这个示例中使用了内联样式来设置页脚的样式属性。
虽然上述属性并非严格意义上的“可以应用于所有HTML元素”的全局属性（如class、id、title等），但它们在各自的上下文中都是全局适用的，并且在整个HTML文档结构中有广泛的作用。
