写在前面：开始入门网页制作，写下第一篇博文作为记录。纯纯小白一个，如有阅览者，欢迎批评指正！❤

先放上效果图：

使用HBuilderX编辑器创建一个“基本HTML项目”： 双击index.html打开页面，项目中已经默认生成了HTML5所需要的结构，代码如下：

解读：

第1行代码是一个声明，告诉 Web 浏览器当前页面应该使用哪个HTM版本进行解析。

< html >标签是整个页 的最外层围墙，用来“包裏”页面的所有内容。

< head >标签相当于我面的身份证，包括了页面的所有重要信息，这一部分内容不会呈现在页面上，浏览者不能直接看到。

< body >部分是页面的主体部分，包含了所有在浏览器上要呈现的内容信息，也就是浏览者可以着到的内容。

在＜ body ＞标签内加入标题和内容： 标题使用＜h1＞标签， 内容使用＜ p ＞标签， 按钮使用< div >标签。

这里，由于< body > 标签里的元素是散乱的，所以需要< div >标签充当一个“透明的盒子”，将元素收纳在盒子内部。可以使用class属性给< div >标签增加类名以作区分。

接下来主要是在页面中使用CSS进行界面的设计与美化，这里需要在< head >标签中新建一个< style > 标签，页面中的标签都放在< style >标签内部。 （具体见文末完整代码）

一些CSS设计的“出彩点”：

当鼠标放上按钮时，变化效果如下：

在手机（不同屏幕大小的设备）上查看页面样式如下（一些布局都进行了相应的变化）：

最后附上一个简单的网页界面的代码：

完事！😀