Web前端开发技术实验与实践——实训1

最新推荐文章于 2024-06-08 12:52:46 发布

是小六儿呀

最新推荐文章于 2024-06-08 12:52:46 发布

阅读量3.7k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_58243276/article/details/129482082

版权

该实验旨在让学生了解Web前端开发工程师的岗位需求和技术要求，掌握HTML基本结构和常用开发工具如EditPlus、HBuliderX的使用。实验内容包括环境配置、页面设计、模板定制和元信息处理等，通过实践提升初级编程技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目3：用EditPlus编辑项目3：自定义HTML模板

项目4：meta标记，body标记属性使用

一、实验目的

（1）了解Web前端开发工程师岗位需求和技术要求。

（2）了解Web前端开发技术基本组成。

（3）掌握HTML文档结构，学会编写简单的HTML程序。

（4）学会使用EditPlus、WebStorm、HBulider X、Sublime Text等常用Web前端开发工具。

二、实验内容

（1）通过网络搜索有关Web前端开发工程师岗位需要和技术要求。

（2）安装并使用各种常用的Web前端开发工具。

（3）安装各种Web浏览器软件，并熟知各种浏览器的功能与差异。

（4）掌握EditPlus、HBulider X等HTML集成开发环境软件的功能。

（5）掌握EditPlus、HBulider X等编辑软件编写简易Web网页程序。

三、实验项目

（1）Web前端开发环境配置。

（2）新生简易主页设计。

（3）用EditPlus或HBulider X自定义HTML模板。

（4）meta标记、body标记属性使用。

（5）HTML、CSS、JavaScript综合编程。

四、实验所需知识点

1.html标记

<html>...</html>

2.头部head标记

<head>

<meta charset="utf-8">

       <meta name="Generator" content="EditPlus@">

       <meta name="Author" content=" ">

       <meta name="Keywords" content=" ">

       <meta name="Description" content=" ">

<title>Document</title>

</head>

3.主体body标记

<body>

   <h1>1号标题字</h1>

   <p>段落<br>段落</p>

   <hr width="200px">

   <blockquote>段落缩进</blockquote>

</body>

4.段落p标记

<p align=”center”>这是一个段落</p >

5.水平分隔线hr标记

<hr size=”3”color=”red”width=”80%”align=”center”>

6.样式style标记

<style type=”text/css”>

p{font - size:28px;color:blue;   /*设置字体大小、颜色*/}

</style>

7.元信息meta标记

<meta charset=”UTF-8”>

<meta name=”Generator”content=”EditPlus@”>

<meta name=”Author”content=”Web前端开发工程师”>

<meta name=”Keywords”content=”Web前端开发，网页设计”>

<meta name=”Description”content=”初学者网站，实验家园”>

<meta http - equiv=”content - type”content=””>

8.主体body标记

<body bgcolor=””text=””link=””alink=””vlink=””>…</body>

注：颜色设置方法有RGB函数（整数、百分比）、十六进制表示法（6位、3位）、颜色英文名称。

9.标题字h2标记

<h2 align=”center ”>…</h2>

10超链接a 标记

<a href="http://firefox.com.cn/">火狐官方中文网站</a>

五、实验步骤及内容

项目1：Web前端开发环境配置

下载并安装HBuilder
下载并安装谷歌浏览器

项目2：新生简易主页设计

输入如下代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>新生建议主页设计</title>

</head>

<body text="blue" >

<h2 align="center" size="">欢迎访问我的简易主页</h2>

<hr color="red">

<p align="center">我，生于1997年8月，北京人，录取专业：计算机科学与技术系计算机科学与技术专业，我非常高兴<br>

所在班级计科2222，学号：6666666   姓名：六六六<br />

</p>

</body>

</html>

保存并在谷歌浏览器运行得到如下网页

项目3：用EditPlus项目3：自定义HTML模板

1.右键新建html文件，在右上角选择自定义模板

2.新建文本文档mystyle.txt，并输入如下内容保存

<!--

姓名：六六

学号：66666

班级：计算机2222

-->

3.即可选择mystyle使用自定义模板

项目4：meta标记，body标记属性使用

输入如下代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>mate标记、body标记属性应用</title>

</head>

<body bgcolor="antiquewhite">

<h2 align="center">mate标记、body标记属性应用</h2>

<hr size="1px" color="aqua">

<p>    Mozilla Firefox是由Mozilla基金会与开源团体共同开发的网页浏览器。Firefox 28  全新发布，从<a href="http://firefox.com.cn/">火狐官方中文网站</a>上下载</p>

<p>最新版Firefox 火狐浏览器，拥有最快、最安全的上网体验。</p>

</body>

</html>

2.保存并在谷歌浏览器运行得到如下网页