利用HBuilder制作一个简单的HTML5网页

写在前面：开始入门网页制作，写下第一篇博文作为记载。纯纯小白一个

先放上结果图：

利用HBuilderX编辑器创建一个“根本HTML项目”：

双击index.html打开页面，项目中已经默认生成了HTML5所必要的结构，代码如下：

解读：

第1行代码是一个声明，告诉 Web 欣赏器当前页面应该利用哪个HTM版本举行分析。

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

< head >标签相称于我面的身份证，包括了页面的全部紧张信息，这一部分内容不会呈如今页面上，欣赏者不能直接看到。

< body >部分是页面的主体部分，包含了全部在欣赏器上要出现的内容信息，也就是欣赏者可以着到的内容。

在＜ body ＞标签内加入标题和内容：

• 标题利用＜h1＞标签，
• 内容利用＜ p ＞标签，
• 按钮利用< div >标签。

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

接下来主要是在页面中利用CSS举行界面的计划与美化，这里必要在< head >标签中新建一个< style > 标签，页面中的标签都放在< style >标签内部。
（详细见文末完整代码）

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

页面动态结果：当鼠标移动到按钮上时，让按钮的形态发生变革。及在按钮选择器后面加上:hover,表现鼠标移动到按钮上的状态。

当鼠标放上按钮时，变革结果如下：

在手机上查看页面样式调整：在HTML文档的< meta >中设置移动端的viewport表现窗口。(注：在电脑上可运行在欣赏器上时进入开辟者模式，亦可查看在手机上的界面样式）

在手机（不同屏幕大小的装备）上查看页面样式如下（一些结构都举行了相应的变革）：

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

 到此这篇关于利用HBuilder制作一个简单的HTML5网页的文章就先容到这了,更多相关HBuilder制作HTML5网页内容请搜索脚本之家从前的文章或继续欣赏下面的相关文章，盼望各人以后多多支持脚本之家！