使用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网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用户体验，感兴趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的<button>标签，详细介绍其属性、样式以及实际2025-06-18
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)
本文将深入剖析一段基于 HTML5 Canvas 的代码，该代码实现了图片的旋转（90 度和 180 度）以及旋转后图片的下载功能,通过对代码的解读，我们可以学习到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API网页录音实现指南示例小结
本教程将指导你如何利用这一API，结合Web Audio API，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步详解,此外，还讨论了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中Checkbox标签的深入全面解2025-06-13
- 本实例展示了一种基于HTML5技术的图片上传功能，无需外部插件即可通过拖放图片实现上传,涉及到HTML5的拖放API和File API，以及使用CSS来增强用户界面的交互性和视觉反馈，2025-05-16
- 在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制,主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧2025-04-21
最新评论