web程序设计（１）——制作个⼈静态⽹页实验要求
实验⽬的
熟悉掌握html的标签使⽤（添加图⽚，表格，列表和超链接等）
实验内容
1. 打开visual studio core，创建⼀个⽂件夹。在⽂件夹中增添html⽂件，记得加上后缀名.html
2. 打出‘！’+tab键，使⽤emmet插件进⾏⾃动补齐
3. 写＇title＇标签，命名⽹页名；在body中写段落，注意使⽤换⾏标签‘br’
4. 插⼊图⽚＇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-********<br>
<b> Email: </b>linghe.kong [AT] sjtu.edu<br>
<b>Homepage:</b><i > www.cs.sjtu.edu/~linghe.kong/</i><br>
</p>
5．写⾃定义列表＇dl＇，如下⽰例：
<dl >
<dt><b>专业</b></dt>
<dd>-计算机</dd>
<dt><b>家乡</b></dt>
<dd>-⼴东⼴州</dd>
重定向页面怎么解决<dt><b>成就</b></dt>
<dd>-⼀事⽆成</dd><br>
</dl>
专业
- 计算机
家乡
- ⼴东⼴州
成就
- ⼀事⽆成qmake
6. 写表格＇table＇，注意表头＇th＇，单元格＇td＇的使⽤，加上＇caption＇标注表格名称，如下⽰例：
<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>
成绩表
科⽬信安离散数电数构⼤物⼤英体育成绩100100100100100100100
７. 插⼊超链接——课程中⼼，川⼤教务处，PPT的个⼈主页模板， 如下⽰例：
<a href="cc.scu.edu/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank"><i >课程中⼼</i>< /a><br>
<a href="jwc.scu.edu/" target="_blank"><i >教务处</i></a><br>
<a href="wirelesslab.sjtu.edu/~klh/#stu" target="_blank"><i >个⼈主页模板</i></a>
８. 为了使页⾯看来更有条理，插⼊⼩标题来分类内容——‘Character’,’ Information’,’Grade’,’Link’，如：
<b >Character</b><br>
Character
html个人网页完整代码怎么看１０. 美化页⾯，⽐如修改主页背景颜⾊，调整字体⼤⼩，字体颜⾊，调整照⽚⼤⼩等
实验效果
html5canvas文本框
实验完整代码
<!DOCTYPE html >
<html lang="en" xmlns="http :///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 >
<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-********<br>
<b> Email: </b>linghe.kong [AT] sjtu.edu<br>
<b>Homepage:</b><i > www.cs.sjtu.edu/~linghe.kong/</i><br>
</p>
<p>
<b >Information</b><br>
<dl >
<dt><b>专业</b></dt>
<dd>-计算机</dd>
<dt><b>家乡</b></dt>
<dd>-⼴东⼴州</dd>
<dt><b>成就</b></dt>
<dd>-⼀事⽆成</dd><br>
<b >Grade</b><br>
</dl>
<table border="1" >
小时代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>
</p>
<b >Link</b><br><br>
<a href="cc.scu.edu/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank"><i >课程中⼼</i ></a><br>
<a href="jwc.scu.edu/" target="_blank"><i >教务处</i></a><br>
<a href="wirelesslab.sjtu.edu/~klh/#stu" target="_blank"><i >个⼈主页模板</i></a>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论