实验要求
模仿 http://ccs.scu.edu.cn/jscc/201610/84.html创建一个个人主页,要求:
有照片;
有表格;
有列表;
有超级链接
实验目的
熟悉掌握html的标签使用(添加图片,表格,列表和超链接等)
实验内容
-
打开visual studio core,创建一个文件夹。在文件夹中增添html文件,记得加上后缀名.html
-
打出‘!’+tab键,使用emmet插件进行自动补齐
-
写'title'标签,命名网页名;在body中写段落,注意使用换行标签‘br’
-
插入图片'img\',注意附上图片的路径,为方便可把图片和代码放在同一文件夹下,如下示例:
<body >
<h1>朱砂痣的个人主页</h1>
<img src="wyb.jpg" width="500" height="300" alt="idle">
<p >
<b >Character</b><br>
<b >
Dr. Linghe Kong <br>
孔令和<br>
</b>
Research Professor (特别研究员)<br>
Ph.D. Advisor (博士生导师)<br><br>
Department of Computer Science and Engineering (计算机科学与工程)<br>
Shanghai Jiao Tong University (上海交通大学)<br>
<b>Office:</b> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240<br>
<b>Phone: </b>021-34208292<br>
<b> Email: </b>linghe.kong [AT] sjtu.edu.cn<br>
<b>Homepage:</b><i style="color:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/</i><br>
</p>
5.写自定义列表'dl',如下示例:
<dl style="font-size:25px;">
<dt><b>专业</b></dt>
<dd>- 计算机</dd>
<dt><b>家乡</b></dt>
<dd>- 广东广州</dd>
<dt><b> 成就</b></dt>
<dd>- 一事无成</dd><br>
</dl>
-
专业
- - 计算机 家乡
- - 广东广州 成就
- - 一事无成
<table border="1" >
<caption>成绩表</caption>
<tr>
<th>科目</th>
<td>信安</td>
<td>离散</td>
<td>数电</td>
<td>数构</td>
<td>大物</td>
<td>大英</td>
<td>体育</td>
</tr>
<tr>
<th>成绩</th>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
科目 | 信安 | 离散 | 数电 | 数构 | 大物 | 大英 | 体育 |
---|---|---|---|---|---|---|---|
成绩 | 100 | 100 | 100 | 100 | 100 | 100 | 100 |
<a href="http://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank"><i style="font-size:25px;">课程中心</i></a><br>
<a href="http://jwc.scu.edu.cn/" target="_blank"><i style="font-size:25px;">教务处</i></a><br>
<a href="http://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank"><i style="font-size:25px;">个人主页模板</i></a>
课程中心
教务处
个人主页模板
8. 为了使页面看来更有条理,插入小标题来分类内容——‘Character’,’ Information’,’Grade’,’Link’,如:
<b style="font-size:40px;color: greenyellow">Character</b><br>
Character
10. 美化页面,比如修改主页背景颜色,调整字体大小,字体颜色,调整照片大小等
实验效果
实验完整代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>我的网页</title>
</head>
<body bgcolor="pink" >
<h1>朱砂痣的个人主页</h1>
<img src="wyb.jpg" width="500" height="300" alt="idle">
<p style="font-size:25px;">
<b style="font-size:40px;color: greenyellow">Character</b><br>
<b style="font-size:30px;">
Dr. Linghe Kong <br>
孔令和<br>
</b>
Research Professor (特别研究员)<br>
Ph.D. Advisor (博士生导师)<br><br>
Department of Computer Science and Engineering (计算机科学与工程)<br>
Shanghai Jiao Tong University (上海交通大学)<br>
<b>Office:</b> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240<br>
<b>Phone: </b>021-34208292<br>
<b> Email: </b>linghe.kong [AT] sjtu.edu.cn<br>
<b>Homepage:</b><i style="color:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/</i><br>
</p>
<p>
<b style="font-size:40px;color: greenyellow">Information</b><br>
<dl style="font-size:25px;">
<dt><b>专业</b></dt>
<dd>- 计算机</dd>
<dt><b>家乡</b></dt>
<dd>- 广东广州</dd>
<dt><b> 成就</b></dt>
<dd>- 一事无成</dd><br>
<b style="font-size:40px;color: greenyellow">Grade</b><br>
</dl>
<table border="1" style="font-size:25px;" >
<caption>成绩表</caption>
<tr>
<th>科目</th>
<td>信安</td>
<td>离散</td>
<td>数电</td>
<td>数构</td>
<td>大物</td>
<td>大英</td>
<td>体育</td>
</tr>
<tr>
<th>成绩</th>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</p>
<b style="font-size:40px;color: greenyellow">Link</b><br><br>
<a href="http://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank"><i style="font-size:25px;">课程中心</i></a><br>
<a href="http://jwc.scu.edu.cn/" target="_blank"><i style="font-size:25px;">教务处</i></a><br>
<a href="http://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank"><i style="font-size:25px;">个人主页模板</i></a>
</body>
</html>