一、实验目的
（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，并输入如下内容保存
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.保存并在谷歌浏览器运行得到如下网页
3.点击“火狐官方中文网站”得到下图
标签：
前端
本文转载自: https://blog.csdn.net/weixin_58243276/article/details/129482082
版权归原作者 是小六儿呀 所有， 如有侵权，请联系我们删除。
版权归原作者 是小六儿呀 所有， 如有侵权，请联系我们删除。