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>
相关推荐
Frag0ut1 天前
【深度思考】前端基石的觉醒:探讨 HTML 语言的再进化方向
html5·前端开发·前端架构·大前端·webcomponents·技术趋势·浏览器api
Frag0ut2 天前
告别插件时代:HTML5 视频播放对比 Flash/Silverlight/ActiveX 的性能与技术优势解析
前端·html5·视频播放·flash·activex·流媒体技术·silverlight
只睡四小时7 天前
Canvas 弹道联机实战:700 行 + 固定时间步长
python·websocket·html5·游戏开发·canvas
我命由我123458 天前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
志尊宝9 天前
Vue3 零基础每日笔记(048):嵌套路由与命名视图——后台管理系统布局雏形
前端·javascript·vue.js·笔记·html5
志尊宝9 天前
Vue3 零基础每日笔记(052):路由常见坑一次排雷——404、刷新丢参数、部署白屏
前端·javascript·vue.js·笔记·html5
志尊宝11 天前
Vue3 零基础每日笔记(037):动手封装 useMouse 与 useWindowSize——事件监听的标准模板
前端·javascript·vue.js·笔记·html5
志尊宝11 天前
Vue3 零基础每日笔记(047):动态路由与路由参数——:id 传参、query 传参、props 解耦
前端·javascript·vue.js·笔记·html5
梦想的颜色12 天前
【AI科普】AI 时代,纯 H5+CSS PK React & Vue:前端技术孰优孰劣深入剖析
ai·前端框架·大模型·vue·react·html5·vibecoding
志尊宝13 天前
Vue3 零基础每日笔记(032):Suspense 与异步组件——懒加载与顶层 await 终极方案
前端·javascript·vue.js·笔记·html5