目录
实验题目：Web前端开发环境配置与HTML基础
实验目的：熟悉开发环境及HTML文档的编写和浏览
实验要求 ：
项目1 使用HBuilder编写网页
项目2 meta标记、body标记属性使用
项目3 HTML综合编程
课外拓展训练
实验过程及结果：
项目1 使用HBuilder编写网页
项目2 meta标记、body标记属性使用
项目3 HTML综合编程
课外拓展训练一
课外拓展训练二
实验题目：Web前端开发环境配置与HTML基础
实验目的：熟悉开发环境及HTML文档的编写和浏览
实验要求 ：
项目1 使用HBuilder编写网页
- 1.页面效果图,如图1-1-3所示。
图1-1-6 设计网页效果图
2.页面文字素材如下：
我，生于1997年8月，北京人，录取专业：移动互联网学院软件工程专业录取，我非常高 兴。所在班级：17软件，学号：1709200199 姓名：李新。
项目2 meta标记、body标记属性使用
1.页面效果如图图1-1-13所示。
图1-1-13 meta和body标记属性应用页面效果图
2.段落文字素材
Mozilla Firefox是由Mozilla基金会与开源团体共同开发的网页浏览器。Firefox 28全新发布，从 火弧官方中文网站上下载最新版Firefox火狐浏览器，拥有最快、最安全的上网体验。
项目3 HTML综合编程
1.段落的文字素材
WEB前端开发工程师的岗位职责:(1)协助系统架构设计师进行系统架构设计工作；(2)承担 WEB前端核心模块的设计、实现工作；(3)承担主要开发工作，对代码质量及进度负责；(4)参 与进行关键技术验证以及技术选型工作；(5)和产品经理沟通并确定产品开发需求。
2.页面效果如图1-1-14所示。
图1-1-14 三种技术组合编程实现的效果图
课外拓展训练
- 页面效果如图1-1-15所示。
图1-1-15 meta、h3、hr、p等标记的应用
页面文字素材如下：
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。
2.页面效果如图1-1-16所示。
图1-1-16 body属性、注释标记的应用
页面文字素材如下：
HTML（Hyper Text Mark-up Language）即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-Lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。
实验过程及结果：
项目1 使用HBuilder编写网页
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新生简易主页设计</title>
<style type="text/css">
p{
font-size:24px; /*字体大小24px */
color:blue; /*字体颜色蓝色 */
text-indent:2em; /*首行缩进2个字符 */
}
</style>
</head>
<body>
<h2 align="center">欢迎访问我的简易主页</h2>
<hr color="red">
<p align="center">我，生于1997年8月，北京人，录取专业：移动互联网学院软件工程专业录取，我非常高兴。<br />
所在班级：17软件，学号：1709200199 姓名：李新</br>
</p>
</body>
</html>
效果图：
项目2 meta标记、body标记属性使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meta标记、body标记属性应用</title>
<style type="text/css">
p{text-indent: 2em;}
body{background-color: lightcyan;}
a{color: red;}
</style>
</head>
<body text="#000050">
<h2 align="center">meta标记、body标记属性应用</h2>
<hr >
<p>Mozilla Firefox是由Mozilla基金会与开源团体共同开发的网页浏览器。Firefox 28全新发布，从<a href="http://www.firefox/">火弧官方中文网站</a>上下载最新版Firefox火狐浏览器，拥有最快、最安全的上网体验。</p>
</body>
</html>
效果图：
项目3 HTML综合编程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端开发岗位介绍</title>
<style type="text/css">
h2{color: red;}
body{font-family: 宋体;}
p{text-indent: 2em;}
</style>
</head>
<body>
<h2 align="center">Web前端开发岗位介绍</h2>
<hr color="#33CC33">
<p>WEB前端开发工程师的岗位职责:(1)协助系统架构设计师进行系统架构设计工作；(2)承担WEB前端核心模块的设计、实现工作；(3)承担主要开发工作，对代码质量及进度负责；(4)参与进行关键技术验证以及技术选型工作；(5)和产品经理沟通并确定产品开发需求。</p>
<script type="text/javascript">
alert("Web前端开发工程师就业前景好、薪酬高！");
</script>
</body>
</html>
效果图：
课外拓展训练一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标记的应用</title>
<style type="text/css">
</style>
</head>
<body>
<h3 align="center">meta、h3、hr、p等标记的应用</h3>
<hr color="fuchsia">
<p> HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。</p>
</body>
</html>
效果图：
课外拓展训练二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body属性及注释标记的应用</title>
<style type="text/css">
body {
background-color: #0000FF;
color: #FFFFFF;
}
.div1 {
margin-top: 55px;
margin-left: 50px;
margin-right: 50px;
}
.div2 {
border-style: dashed;
border-color: #660033;
border-width: 1.3px;
margin-left: 50px;
margin-right: 50px;
}
</style>
</head>
<body>
<div id="" class="div1">
body的属性应用
</div>
<div id="" class="div2">
在div中插入标题字、水平分隔线和段落
<h2>设计彩色页面</h2>
<hr color="#00CC00">
<p> HTML（Hyper Text Mark-up Language）即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-Lee提出。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。
</p>
<hr color="red">
</div>
</body>
</html>
效果图：
大二学生一枚，分享我的实验报告，鄙人不才，欢迎提出宝贵意见。
更多推荐
Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础
发布评论