编程笔记 html5&css&js 011 HTML内连框架 个人简历二
- 一、代码
- 二、解释
这段HTML代码定义了一个个人简历的页面布局和样式。页面分为多个部分,包括基本信息、自我评价、工作经历、教育经历、项目经历和期望的职业方向。每个部分都使用了自定义的样式,如背景颜色、字体颜色和边框样式等。页面还包含了一个表格用于展示工作经历和教育经历,以及一些段落用于填写其他信息。页面底部添加了一个页脚,显示了代码的作者信息。
一、代码
<!DOCTYPE html>
<html lang="zh">
<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;background-color: #222;color: #fff;margin: 20px 150px;padding: 20px;}h1, h2, h3 {color: #f00;}.section-title {background-color: #444;color: #f33;padding: 10px;margin-top: 20px;margin-bottom: 10px;}table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #555;padding: 8px;text-align: left;}th {background-color: #333;}tr:nth-child(even) {background-color: #555;}</style>
</head>
<body>
<h1>个人简历</h1><div class="section-title">基本信息</div>
<p>姓名:王小五</p>
<p>性别:男</p>
<p>年龄:30岁</p>
<p>联系电话:1234567890</p>
<p>电子邮箱:ww@example.com</p><div class="section-title">自我评价</div>
<p>这里可以填写自我评价内容...</p><div class="section-title">工作经历</div>
<table><tr><td>公司名称</td><td>职位</td><td>工作时间</td></tr><tr><td>公司A</td><td>开发工程师</td><td>2018-2020</td></tr><tr><td>公司B</td><td>项目经理</td><td>2020-至今</td></tr><!-- 可以继续添加更多行 -->
</table>
<div class="section-title">教育经历</div>
<table><tr><td>大学A</td><td>计算机科学与技术</td><td>2015-2018</td></tr><tr><td>硕士学院B</td><td>软件工程</td><td>2018-2020</td></tr>
</table>
<div class="section-title">项目经历</div>
<table><tr><td>项目A</td><td>描述项目A的功能和特点...</td><td>2020-05</td></tr><tr><td>项目B</td><td>描述项目B的内容和贡献...</td><td>2021-01</td></tr>
</table>
<div class="section-title">期望的职业方向</div>
<p>这里可以填写期望的职业方向的内容...</p>
</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代码定义了一个个人简历的页面布局和样式。页面分为多个部分,包括基本信息、自我评价、工作经历、教育经历、项目经历和期望的职业方向。每个部分都使用了自定义的样式,如背景颜色、字体颜色和边框样式等。页面还包含了一个表格用于展示工作经历和教育经历,以及一些段落用于填写其他信息。页面底部添加了一个页脚,显示了代码的作者信息。
本例并未使用内联框架。
内联框架(Inline Frame),也称为IFrame,是HTML中的一种元素,用于在一个网页中嵌入另一个网页。它类似于一个窗口,可以在当前网页中显示另一个网页的内容。
内联框架具有以下特点:
- 内联框架在网页中创建一个独立的区域来显示嵌入的网页,类似于一个独立的窗口。
- 内联框架可以在不同的网页之间实现数据的传递和交互,因为它们之间可以共享一些信息。
- 内联框架可以在不同的域名下加载内容,即可以实现跨域加载网页。
- 内联框架可以通过设置属性来自定义其外观和行为,如设置大小、边框、滚动条等。
使用内联框架可以带来以下优点:
- 可以将其他网站的内容嵌入到自己的网页中,从而实现网页内容的丰富多样性。
- 可以实现网页的模块化,将不同的功能模块分别放在不同的内联框架中,便于管理和维护。
- 可以通过加载外部网页的方式来节约网页的加载时间和带宽。
- 可以实现页面的异步加载,提高页面渲染速度和用户体验。
然而,内联框架也存在一些缺点:
- 内联框架可能会导致网页加载时间延长,特别是当嵌入的网页包含大量内容时。
- 内联框架的安全性需要注意,因为它可以加载其他域名下的内容,可能存在安全漏洞。
- 内联框架的外观和行为受限于浏览器的支持和兼容性。
因此,在使用内联框架时,需要注意选择合适的内容进行嵌入,并进行适当的安全性和兼容性考虑。