目录

实验题目: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-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-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&nbsp;&nbsp;姓名:李新</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.com.cn/">火弧官方中文网站</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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;HTML(Hyper Text Mark-up Language)即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-Lee提出。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。</p><hr color="red"></div></body>
</html>

效果图:

大二学生一枚,分享我的实验报告,鄙人不才,欢迎提出宝贵意见。

Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础相关推荐

  1. Java零基础必看学习教程,Java开发环境配置详解

    很多Java新手小白在学习Java编程的时候,碰到的第一难题就是不知道如何安装和配置java开发环境. 今天整理了史上最详细的安装及Java开发环境配置教程,通过图文并茂的方式详细讲解每一步骤,手把手 ...

  2. 一、C++基础入门之 Windows下C/C++开发环境配置

    Windows 下 C/C++开发环境的配置:(51开源时代) 我的系统是Windows的,所以在这里我以Windows为例,我使用的是微软提供的VS2013(Microsoft Visual Stu ...

  3. Web前端技术基础实验报告三之超链接与多媒体文件应用

    目录 Web前端技术基础实验报告 实验题目:超链接与多媒体文件应用 实验目的:熟悉超链接与多媒体文件的插入的相关标签 实验内容 : 实验过程及结果 Web前端技术基础实验报告 实验题目:超链接与多媒体 ...

  4. Web前端开发技术课程实验报告实验3:Vue路由实验

    实验代码:实验3第2题实验参考.rar-互联网文档类资源-CSDN下载 Web前端开发技术课程实验报告 实验3:Vue路由实验 姓名:_ __ _ ___ ___   班级:_ _ _ ___ _ _ ...

  5. 计算机硬件技术基础实验教程实验报告,计算机硬件技术基础实验报告精选.doc...

    计算机硬件技术基础实验报告精选 计算机硬件?技术基础实?验 实验报告 学 校:_____?_____?_____?___ 院 系:_____?_____?_____?___ 学 号:_____?___ ...

  6. 计算机硬件技术基础实验教程实验报告,计算机硬件技术基础实验报告.doc

    计算机硬件技术基础实验报告 计算机硬件技术基础实验日志认识集成操作软件DDATA SEGMENT MSRDB "HELLO,WORLD!$" LENEQU $- MSR DDATA ...

  7. 东北大学计算机软件基础实验报告,东北大学计算机软件技术基础实验报告.pdf...

    东北大学计算机软件技术基础实验报告 计算机软件技术基础实验 专 业: 学生姓名:[哈哈哈] 学 号:[哈哈哈] 实验时间:[2016 年8 月22 日] 实验一:线性表的排序与查找 #include ...

  8. 计算机基础数据库实验报告,北航计算机软件技术基础实验报告实验报告4-2——数据库应用系统的开发...

    <北航计算机软件技术基础实验报告实验报告4-2--数据库应用系统的开发>由会员分享,可在线阅读,更多相关<北航计算机软件技术基础实验报告实验报告4-2--数据库应用系统的开发(10页 ...

  9. 计算机软件技术冒泡排序,北航计算机软件技术基础实验报告计软实验报告3——冒泡排序和快速排序...

    北航计算机软件技术基础实验报告计软实验报告3--冒泡排序和快速排序 (8页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分 实验报告实验名称 ...

  10. 计算机网络基础实验简答题,计算机网络基础实验报告.doc

    计算机网络基础实验报告 计算机科学与技术系 实 验 报 告专业名称课程名称计算机网络基础项目名称局域网组网实验班 级学 号姓 名同组人员实验日期实验目的与要求: (一).实验目的: 通过组建局域网,了 ...

最新文章

  1. 正向代理和反向代理??
  2. 《51单片机应用开发从入门到精通》——2.2 跑马灯实例
  3. python校园网登录_python实现校园网自动登录的示例讲解
  4. 猛将赵云java,这五位三国猛将临危救主,赵云只能排第二位,第一位大家都服...
  5. windows 自动备份mysql方案
  6. C#无法生成解决方案,System.InvalidOperationException: 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分。
  7. iOS UI-自动布局(Autoresizing)
  8. 相对于其他框架的离子应用开发:它被炒作了吗?
  9. Android系统简介(中):系统架构
  10. Linux网络编程-TCPUDP测试工具下载和使用
  11. web小白,实战操作拿到网站后台账户和密码
  12. 世界观 - 经验事实和哲学性/概念性事实
  13. Unity 面试题汇总(五)性能优化知识点相关
  14. 利用Python绘制柱形图或堆积柱形图
  15. 80老翁谈人生(168):北京大学欠老翁的情,欠老翁的债
  16. Python 博客园快速备份脚本
  17. CSS实例(一):漂亮的表格样式(使用CSS样式表控制表格样式)
  18. Duplicate column name错误办法
  19. 成功解决Error running ‘Application‘: command line is too long
  20. Centos7校正Linux系统时间(超详细)

热门文章

  1. 最小二乘支持向量机(LSSVM)详解
  2. DOSBOX的安装及ASM文件的编译
  3. 安装multisim后汉化过程中,无法创建文件夹拒绝访问怎么办
  4. 基于java的百货中心供应链管理系统
  5. 名校计算机课程百度云,浙江大学计算机类专业视频课程百度云网盘
  6. 项目实战:十种方法实现图像数据集降维
  7. 电力拖动自动控制系统(序)
  8. RTKLIB中的卫星天线与接收机天线修正
  9. 学习笔记4--惯性导航及总结
  10. 模块化的ESP8266小电视设计与制作