HTML第四课:个人简介页面开发

HTML第四课:个人简介页面开发

个人简介页面开发

  • 效果示列
  • 代码展示
html 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人简介页面</title>
</head>
<body>
<!-- 页面标题,使用块级元素 h1 -->
<h1>个人简介</h1>

<!-- 基本信息,使用块级元素 div 和 p  -->
<div>
    <h2>基本信息</h2>
    <p><strong>姓名</strong>:李四</p>
    <p><strong>性别</strong>:女</p>
    <p><strong>出生日期</strong>:1998 年 5 月</p>
    <p><strong>籍贯</strong>:上海</p>
</div>

<!-- 教育背景,使用块级元素 div 和 ul、li -->
<div>
    <h2>教育背景</h2>
    <ul>
        <li><strong>2017 - 2021</strong>:XX 大学 汉语言文学 学士</li>
        <li><strong>2021 - 2024</strong>:YY 大学 中国古代文学 硕士</li>
    </ul>
</div>

<!-- 兴趣爱好,使用块级元素 div 和 ul、li -->
<div>
    <h2>兴趣爱好</h2>
    <ul>
        <li>阅读古典文学作品,尤其喜欢《红楼梦》《三国演义》等名著</li>
        <li>书法,擅长楷书和行书</li>
        <li>旅行,喜欢体验不同地区的文化和风俗</li>
    </ul>
</div>

<!-- 获奖经历,使用块级元素 div 和 ul、li -->
<div>
    <h2>获奖经历</h2>
    <ul>
        <li><strong>2018 年</strong>:获得学校 "优秀学生奖学金" 二等奖</li>
        <li><strong>2020 年</strong>:在全国大学生书法比赛中获得三等奖</li>
        <li><strong>2023 年</strong>:获得硕士研究生国家奖学金</li>
    </ul>
</div>

<!-- 个人作品,使用块级元素 div 和 ul、li -->
<div>
    <h2>个人作品</h2>
    <ul>
        <li><em>《论〈红楼梦〉中的女性形象》</em>,发表于《文学研究》期刊 2023 年第 3 期</li>
        <li><em>《唐代边塞诗中的家国情怀》</em>,收录于《古代文学研究文集》</li>
    </ul>
</div>

<!-- 人生格言,使用块级元素 div 和 p  -->
<div>
    <h2>人生格言</h2>
    <p>"路漫漫其修远兮,吾将上下而求索。" 不断追求知识和真理,在成长中实现自我价值。</p>
</div>
</body>
</html>
相关推荐
谢彦超oooo25 分钟前
HTML5 与前端开发要点
前端·html·html5
我命由我1234519 小时前
HTML - 换行标签的 3 种写法(<br>、<br/>、<br />)
前端·javascript·css·html·css3·html5·js
涤生啊20 小时前
一键搭建 Coze 智能体对话页面:支持流式输出 + 图片直显,开发效率拉满!
javascript·html5
Qrun1 天前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
星光一影2 天前
打车/网约车、代驾、顺风车/拼车、货运、租车等多种出行服务的一站式解决方案
mysql·微信小程序·php·uniapp·html5·web app
星光一影2 天前
悬赏任务平台/拉新地推系统源码
redis·mysql·小程序·php·uniapp·html5
Zzzzzxl_3 天前
互联网大厂前端面试实录:HTML5、ES6、Vue/React、工程化与性能优化全覆盖
性能优化·vue·es6·react·html5·前端面试·前端工程化
BetterChinglish3 天前
html5中canvas图形变换transform、setTransform原理(变换矩阵)
javascript·html5·canvas·变换矩阵
子醉4 天前
html5 input[type=date]如何让日期中的年/月/日改成英文
前端·html·html5
xuehuayu.cn5 天前
基于HTML5、阿里云播放SDK、腾讯云播放SDK开发的M3U8在线播放器
阿里云·腾讯云·html5