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

  发布时间:2022-06-29 17:03:44   作者:蔺WIT   我要评论
本文主要介绍了使用HBuilder制作一个简单的HTML5网页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

先放上效果图:

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

解读:

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

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

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

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

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

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

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

<body>
		<div class="container">
		<h1>Let's start our first page!</h1>
		<p>欢迎大家来到LinWit的制作的网页,
		一起开启精彩的世界吧!
		</p>
		<div class="btn" id="start">start</div>
		</div>
	</body>

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

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

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

.btn:hover{
			background-color: royalblue;
			width: 300px;
			height: 100px;
			line-height: 100px;
			font-size: 36px;
			margin: 100px auto;
		}

当鼠标放上按钮时,变化效果如下:

在手机上查看页面样式调整:在HTML文档的< meta >中设置移动端的viewport显示窗口。(注:在电脑上可运行在浏览器上时进入开发者模式,亦可查看在手机上的界面样式)

<meta name="viewport" content="width=device-width,initial-scale=1 .0 user-scale"/>

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1 .0 user-scale"/>
		<meta charset="utf-8" />
		<title>Document</title>
		<style>
		html,body{
			height:100%;
			margin:0;
			padding:0;
		}
		body{
			background: red url(img/index.jpg) center center;
			background-size: cover;
			position: relative;/* 相对位置 */
		}
		.container{
			position: absolute;/* 绝对位置 */
			top: 50%;
			text-align: center;
			width: 100%;
			transform: translateY(-50%);/* 将div元素上移至自身高度的50% */
		}
		h1{
			line-height: 90px;
			color: royalblue;
			font-size: 50px;
		}
		p{
			line-height: 80px;
			color: royalblue;
			font-size: 22px;
		}
		.btn{
			width: 200px;
			height: 60px;
			background-color: #7cacae;
			color: #fff;
			font-size: 24px;
			line-height: 60px;
			margin: 30px auto;/* 设置其上下边距:30px 左右边距:自动 */
			border-radius: 10px;/* 给按钮增加圆角样式 */
			transition: 1s;
		}
		.btn:hover{
			background-color: royalblue;
			width: 300px;
			height: 100px;
			line-height: 100px;
			font-size: 36px;
			margin: 100px auto;
		}
		</style>
	</head>
	<body>
		<div class="container">
		<h1>Let's start our first page!</h1>
		<p>欢迎大家来到LinWit的制作的网页,
		一起开启精彩的世界吧!
		</p>
		<div class="btn" id="start">start</div>
		</div>
	</body>
</html>

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

相关文章

  • uniapp在h5页面实现扫码功能(html5-qrcode)

    这篇文章主要介绍了uniapp在h5页面实现扫码功能(html5-qrcode),本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-06-11
  • HTML5中的A 标签详解

    a 元素可通过其href属性创建指向其他网页、文件、同一页面内的位置或其他URL的超链接,这篇文章主要介绍了HTML5中的A 标签,需要的朋友可以参考下
    2024-05-28
  • HTML5中的Button 标签示例详解

    button 用于显示一个可点击的按钮,可用在表单或文档的其它地方,button元素是内联双标签,不同浏览器下button样式不同,可以通过CSS修改,这篇文章主要介绍了HTML5 中的Bu
    2024-05-28
  • 关于document.body.clientHeight返回值为0的完美解决方案

    这篇文章主要介绍了关于document.body.clientHeight返回值为0的完美解决方案,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-05-16
  • HTML5兼容HEVC视频格式且支持本地绝对路径访问的操作方法

    通过PotPlayer发现该MP4文件的编码格式为HEVC,而video标签不支持该编码格式的视频文件,这篇文章主要介绍了HTML5兼容HEVC视频格式且支持本地绝对路径访问,需要的朋友可以
    2024-05-15
  • HTML5 服务器发送事件(Server-Sent Events)使用详解

    HTML5服务器发送事件(server-sent event)允许网页获得来自服务器的更新,下面通过本文给大家介绍HTML5 服务器发送事件(Server-Sent Events)使用详解,感兴趣的朋友跟随小
    2024-05-15
  • html5 video 标签 controlslist详细使用

    video controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件,下面我们将从几个方面来介绍 video controlslist 的详细使用,感兴趣的朋友跟
    2024-05-15
  • html网页播放多个视频的几种方法

    本文主要介绍了html网页播放多个视频的几种方法,包含iframe标签,VLC插件和一些常见的js插件,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-04
  • HTML5中video标签禁止右键和下载视频的问题解决

    做HTML5的video标签,本身我们有下载功能,由于权限问题,所以本文就来介绍一下HTML5中video标签禁止右键和下载视频的问题解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-28
  • html5 video标签controlslist的具体使用

    HTML5 提供了内置的视频播放控件,其中 video controlslist 是其中一个很有用的属性,本文主要介绍了html5 video标签controlslist的具体使用,具有一定的参考价值,感兴趣
    2024-02-27

最新评论