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

2023-10-22 19:23:04

实验要求

模仿 http://ccs.scu.edu.cn/jscc/201610/84.html创建一个个人主页，要求：
有照片；
有表格；
有列表；
有超级链接

实验目的

熟悉掌握html的标签使用（添加图片，表格，列表和超链接等）

实验内容

  1. 打开visual studio core，创建一个文件夹。在文件夹中增添html文件，记得加上后缀名.html
    在这里插入图片描述

  2. 打出‘！’+tab键，使用emmet插件进行自动补齐

  3. 写＇title＇标签，命名网页名；在body中写段落，注意使用换行标签‘br’

  4. 插入图片＇img＼＇,注意附上图片的路径，为方便可把图片和代码放在同一文件夹下，如下示例：

>
>朱砂痣的个人主页>idle>
>>Character>>>Dr. Linghe Kong 　>孔令和>>Research Professor (特别研究员)>Ph.D. Advisor (博士生导师)>>Department of Computer Science and Engineering (计算机科学与工程)>Shanghai Jiao Tong University (上海交通大学)>>Office:> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240>Phone: >021-34208292>> Email: >linghe.kong [AT] sjtu.edu.cn>>Homepage:>:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/>>>

5．写自定义列表＇dl＇，如下示例：

-size:25px;">>>专业>>>- 计算机>>>家乡>>>- 广东广州>>> 成就>>>- 一事无成>>>
专业
- 计算机
家乡
- 广东广州
成就
- 一事无成

6. 写表格＇table＇,注意表头＇th＇,单元格＇td＇的使用，加上＇caption＇标注表格名称，如下示例： 
>>成绩表>>>科目>>信安>>离散>>数电>>数构>>大物>>大英>>体育>>>>成绩>>100>>100>>100>>100>>100>>100>>100>>>

 

成绩表 
科目信安离散数电数构大物大英体育
成绩100100100100100100100
 ７. 插入超链接——课程中心，川大教务处，PPT的个人主页模板， 如下示例： 

://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank">-size:25px;">课程中心>>>://jwc.scu.edu.cn/" target="_blank">-size:25px;">教务处>>>
://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank">个人主页模板

 

课程中心

 教务处

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

-size:40px;color: greenyellow">Character>>

 

Character

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

实验效果
 

在这里插入图片描述
 在这里插入图片描述
 

实验完整代码
 

<!DOCTYPE html>://www.w3.org/1999/xhtml">
>-8" />>我的网页>
>
>>朱砂痣的个人主页>idle>-size:25px;">-size:40px;color: greenyellow">Character>>-size:30px;">Dr. Linghe Kong 　>孔令和>>Research Professor (特别研究员)>Ph.D. Advisor (博士生导师)>>Department of Computer Science and Engineering (计算机科学与工程)>Shanghai Jiao Tong University (上海交通大学)>>Office:> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240>Phone: >021-34208292>> Email: >linghe.kong [AT] sjtu.edu.cn>>Homepage:>:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/>>>>-size:40px;color: greenyellow">Information>>-size:25px;">>>专业>>>- 计算机>>>家乡>>>- 广东广州>>> 成就>>>- 一事无成>>-size:40px;color: greenyellow">Grade>>> -size:25px;" >>成绩表>>>科目>>信安>>离散>>数电>>数构>>大物>>大英>>体育>>>>成绩>>100>>100>>100>>100>>100>>100>>100>>>>-size:40px;color: greenyellow">Link>>>://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank">-size:25px;">课程中心>>>://jwc.scu.edu.cn/" target="_blank">-size:25px;">教务处>>>://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank">个人主页模板
>
>                        

                        

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

                        
                        

                    

                    



                    


    
    




                    

    

    




                    

    

        
        

            
相关文章

        

                

            
Duilib中list控件支持ctrl和shif多行选中的实现

        

                

            
[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

        

                

            
win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法

        

                

            
Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

        

                

            
读LDD3，内存映射与DMA--PAGE_SHIF…

        

                

            
VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

        

                

            
更换iBus五笔的左与右Shif

        

                

            
sublime ctrl+shif+f 没用解决办法

        

                

            
idea 对 ctrl + z 的撤销 是 ctrl + shif + z

        

                

            
计算机最早的设计师应用于,计算机应用基础选择题doc.doc

        

                

            
win10自带截图神器：Win+Shift+S

        

                

            
Python基础之文件目录操作

        

                

            
python简述目录_Python基础之文件目录操作(示例代码)

        

                

            
tp5 如何做数据采集

        

                

            
任务2-7(服务器字体+阿里巴巴矢量库)

        

                

            
html标签（1)：h1~h6,p,br,pre,hr

        

                

            
TI 电量计介绍与芯片选型指南

        

                

            
几款TI电源芯片简介

        

                

            
TI DSP芯片C2000系列读取FLASH数据

        

                

            
德州仪器(Ti)平台嵌入式开发基础

        

                

            
TI三相电机智能栅极驱动芯片特点分类

        

                

            
省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

        

                

            
Hadoop生态圈技术栈（上）

        

                

            
大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

        

                

            
小猿圈之Linux下Mysql 操作命令

        

                

            
大数据Hadoop生态圈常用面试题

        

                

            
大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

        

                

            
备战Noip2018模拟赛11（B组）T3 Monogatari 物语

        

                

            
【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

        

                

            
NYOJ 78 圈水池

        

                

            
递归问题 跑道 汽车 绕圈问题 Python实现

        

                

            
Hadoop生态圈（三）：MapReduce