html5cssjs代码 010 个人简历模板一

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文档结构中有广泛的作用。