个人信息展示码动未来教案篇

HTML是web前端开发中最基础的内容。使用HTML标签可以搭建任何一个网站页面的整体结构。这一节我们要使用HTML中常用的文本及图片标签实现一个展示个人信息的界面。接下来我们就来详细地介绍这个项目。
任务描述
通过使用本节学习的标签显示你的个人信息，包括基本信息，教育背景，个人特长3个部分。要求必须使用常用的文本标签，另外要使用img>标签并设置标签属性
页面结构
根据上述功能，新建一个名称为index.html
div>
h1>学生信息/h1>
h3>基本信息/h3>
hr>
span>姓名:小明/span> span>年龄:12/span>
br>
img src=“img.jpg” alt="" width=“200px” height=“200px”>
/div>
div>
h3>教育背景/h3>
hr>
div>学校:乔布斯大学/div>
div>专业:计算机科学与技术/div>
h3>特长/h3>
hr>
/div>
div>
ul>
li>唱歌/li>
li>跳舞/li>
li>玩游戏/li>
/ul>
div>
页面布局
页面文件index.html在chrome浏览器执行后
源码分析
代码中通过使用标题标签来显示个人信息的分类标题，使用span>标签显示不需要换行的基本信息，使用img>标签显示图片并设置图片的宽高，通过div>标签显示教育信息，通过ul>列表显示爱好。每个模块之间使用hr>分割。
更多内容请添加微信：madongweikai，或扫描下方二维码添加