web程序设计（１）——制作个人静态网页

最新推荐文章于 2024-06-01 11:09:12 发布

My_summers

最新推荐文章于 2024-06-01 11:09:12 发布

阅读量1.3w

点赞数 21

分类专栏： Web 文章标签： html web html5

本文链接：https://blog.csdn.net/weixin_44164249/article/details/103926140

版权

Web 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

实验要求

模仿 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>

专业

- 计算机

家乡

- 广东广州

成就

- 一事无成

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>

成绩表
科目	信安	离散	数电	数构	大物	大英	体育
成绩	100	100	100	100	100	100	100

７. 插入超链接——课程中心，川大教务处，PPT的个人主页模板，如下示例：

<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>

课程中心

教务处

个人主页模板
８. 为了使页面看来更有条理，插入小标题来分类内容——‘Character’,’ Information’,’Grade’,’Link’，如：

<b style="font-size:40px;color: greenyellow">Character</b><br>

Character

１０. 美化页面，比如修改主页背景颜色，调整字体大小，字体颜色，调整照片大小等

实验效果

在这里插入图片描述

实验完整代码

<!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>

My_summers

关注

21
点赞
踩
156

收藏

觉得还不错? 一键收藏
1
评论
web程序设计（１）——制作个人静态网页

实验要求模仿 http://ccs.scu.edu.cn/jscc/201610/84.html创建一个个人主页，要求：有照片；有表格；有列表；有超级链接实验目的熟悉掌握html的标签使用（添加图片，表格，列表和超链接等）
复制链接

扫一扫