实验 1 Web 前端开发环境配置与 HTML 基础

目录

一、项目 1 使用 VSCode 编写网页

二、项目 2 meta 标记、body 标记属性使用

三、课外拓展训练 1

四、课外拓展训练2

一、项目 1 使用 VSCode 编写网页

1. 要求：

页面效果图

页面文字素材如下：

          我，生于1997年8月，北京人，录取专业：移动互联网学院软件工程专业录取，我非常高兴。

所在班级： 17软件，学号：1709200199  姓名：李新。 

2. 模块：

html代码：

    
    
    
    



    
欢迎访问我的简易主页
    

    
我，生于1997年8月，北京人，录取专业：移动互联网学院软件工程
    专业录取，我非常高兴。

    所在班级：17软件，学号：1709200199  姓名：李新

    

效果图：

二、meta 标记、body 标记属性使用

1. 要求：

页面效果如图：

段落文字素材：

        Mozilla Firefox 是由 Mozilla 基金会与开源团体共同开发的网页浏览器。Firefox 28全新发布，从 火弧官方中文网站 上下载最新版 Firefox 火狐浏览器，拥有最快、最安全的上网体验。

2. 模块：

html代码：

    
    
    
    



    
meta 标记、body 标记属性使用
    

    

    Mozilla Firefox 是由 Mozilla 基金会与开源团体共同开发的网页浏览器。
    Firefox 28全新发布，从火弧官方中文网站上下载最新版 Firefox 火狐浏览器，拥有最快、最安全的上网体验。
    

效果图：

三、课外拓展训练1

1. 要求：

页面效果如图：

页面文字素材如下：

        HTML 标准自 1999 年 12 月发布的 HTML4.01 后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext

Application Technology Working Group （Web 超文本应用技术工作组 -WHATWG） 的组织。

2. 模块：

html代码：

    
    
    
    


    
meta、h3、hr、p 等标记的应用
    

    
HTML 标准自 1999 年 12 月发布的 HTML4.01 后，后继的 HTML5 和其它标准被束之高阁，为
        了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext
        Application Technology Working Group （Web 超文本应用技术工作组 -WHATWG） 的组织。
    

效果图：

四、课外拓展训练2

1. 要求：

页面效果如图：

页面文字素材如下：

        HTML（Hyper Text Mark-up Language）即超文本标记语言，是 WWW 的描述语言，由 Tim

Berners-Lee 提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

2.模块：

html代码：

    
    
    
    


    
body的属性应用
    

        
在div中插入标题字、水平分隔线和段落
        
设计彩色页面
        

        

            HTML（Hyper Text Mark-up Language）即超文本标记语言，是 WWW 的描述语言，由 Tim
            Berners-Lee 提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一
            台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当
            前电脑上还是在网络的其它电脑上。
        
        

    

效果图：

这些代码纯纯的我自己写的，不是标准答案！