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

本文主要介绍了使用HBuilder制作一个简单的HTML5网页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

先放上效果图:

使用HBuilderX编辑器创建一个“基本HTML项目”:

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

    

解读:

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

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

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

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

在< body >标签内加入标题和内容:

  • 标题使用<h1>标签,
  • 内容使用< p >标签,
  • 按钮使用
    标签。

这里,由于 标签里的元素是散乱的,所以需要

标签充当一个“透明的盒子”,将元素收纳在盒子内部。可以使用class属性给
标签增加类名以作区分。

  

Let's start our first page!

欢迎大家来到LinWit的制作的网页, 一起开启精彩的世界吧!

start

接下来主要是在页面中使用CSS进行界面的设计与美化,这里需要在标签中新建一个

Let's start our first page!

欢迎大家来到LinWit的制作的网页, 一起开启精彩的世界吧!

start

 到此这篇关于使用HBuilder制作一个简单的HTML5网页的文章就介绍到这了,更多相关HBuilder制作HTML5网页内容请搜索0133技术站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持0133技术站!

以上就是使用HBuilder制作一个简单的HTML5网页的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » HTML5 答疑