使用天码营前端预览工具 由David发表在天码营
本实验将创建一个简单的HTML页面，展现北京大学创新工程实践老师的信息展示。
同学们将在这个实验中学习HTML、CSS和JavaScript的基本使用，对于Web前端开发有一个初步了解。
最终的效果图如下：
实验概览
实验分为三个步骤：
- 编写HTML代码，展示我们希望显示的内容
- 编写CSS代码，为内容增加样式，让展示更加美观
- 编写JavaScript代码，让页面出现动态的弹幕效果
整个实验通过前端预览工具完成，请访问http://preview.tianmaying.com
前端预览工具的截图如图所示：
- 预览工具一共分为四个部分：
- 左上角为HTML代码输入区域
- 右上角为CSS代码输入区域
- 左下角为JavaScript代码输入区域
- 右下角的效果预览区域，输入代码后可以实时看到效果变化
1 编写HTML代码
1.1 创建HTML页面框架
首先创建一个HTML页面的框架，HTML页面由<head>和<body>两部分构成。
<head>与<／head>之间可以编写基本的元信息，比如字符编码<body>与<／body>之间是HTML的正文部分
注意大部分标签都是成对出现的，后面出现的标签会有一个／符号。
打开前端预览工具，已经默认给大家创建好了一个HTML页面框架：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
1.2 内容布局
<div>是组织HTML内容最重要的一个元素之一，定义了一个文档中的区域（Division）。
我们首先添加以下代码，到<body>的内部：
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
