使用HBuilder制作一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)

發(fā)布時(shí)間：2022-06-29 17:03:44 作者：藺WIT

本文主要介紹了使用HBuilder制作一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

寫在前面：開始入門網(wǎng)頁(yè)制作，寫下第一篇博文作為記錄。純純小白一個(gè)

先放上效果圖：

使用HBuilderX編輯器創(chuàng)建一個(gè)“基本HTML項(xiàng)目”：

雙擊index.html打開頁(yè)面，項(xiàng)目中已經(jīng)默認(rèn)生成了HTML5所需要的結(jié)構(gòu)，代碼如下：

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

解讀：

第1行代碼是一個(gè)聲明，告訴 Web 瀏覽器當(dāng)前頁(yè)面應(yīng)該使用哪個(gè)HTM版本進(jìn)行解析。

< html >標(biāo)簽是整個(gè)頁(yè) 的最外層圍墻，用來“包裏”頁(yè)面的所有內(nèi)容。

< head >標(biāo)簽相當(dāng)于我面的身份證，包括了頁(yè)面的所有重要信息，這一部分內(nèi)容不會(huì)呈現(xiàn)在頁(yè)面上，瀏覽者不能直接看到。

< body >部分是頁(yè)面的主體部分，包含了所有在瀏覽器上要呈現(xiàn)的內(nèi)容信息，也就是瀏覽者可以著到的內(nèi)容。

在＜ body ＞標(biāo)簽內(nèi)加入標(biāo)題和內(nèi)容：

標(biāo)題使用＜h1＞標(biāo)簽，
內(nèi)容使用＜ p ＞標(biāo)簽，
按鈕使用< div >標(biāo)簽。

這里，由于< body > 標(biāo)簽里的元素是散亂的，所以需要< div >標(biāo)簽充當(dāng)一個(gè)“透明的盒子”，將元素收納在盒子內(nèi)部?？梢允褂胏lass屬性給< div >標(biāo)簽增加類名以作區(qū)分。

<body>
		<div class="container">
		<h1>Let's start our first page!</h1>
		<p>歡迎大家來到LinWit的制作的網(wǎng)頁(yè)，
		一起開啟精彩的世界吧！
		</p>
		<div class="btn" id="start">start</div>
		</div>
	</body>

接下來主要是在頁(yè)面中使用CSS進(jìn)行界面的設(shè)計(jì)與美化，這里需要在< head >標(biāo)簽中新建一個(gè)< style > 標(biāo)簽，頁(yè)面中的標(biāo)簽都放在< style >標(biāo)簽內(nèi)部。
（具體見文末完整代碼）

一些CSS設(shè)計(jì)的“出彩點(diǎn)”：

頁(yè)面動(dòng)態(tài)效果：當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)，讓按鈕的形態(tài)發(fā)生變化。及在按鈕選擇器后面加上:hover,表示鼠標(biāo)移動(dòng)到按鈕上的狀態(tài)。

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

當(dāng)鼠標(biāo)放上按鈕時(shí)，變化效果如下：

在手機(jī)上查看頁(yè)面樣式調(diào)整：在HTML文檔的< meta >中設(shè)置移動(dòng)端的viewport顯示窗口。(注：在電腦上可運(yùn)行在瀏覽器上時(shí)進(jìn)入開發(fā)者模式，亦可查看在手機(jī)上的界面樣式）

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

在手機(jī)（不同屏幕大小的設(shè)備）上查看頁(yè)面樣式如下（一些布局都進(jìn)行了相應(yīng)的變化）：

最后附上一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)界面的代碼：

<!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;/* 相對(duì)位置 */
		}
		.container{
			position: absolute;/* 絕對(duì)位置 */
			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;/* 設(shè)置其上下邊距：30px 左右邊距：自動(dòng) */
			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的制作的網(wǎng)頁(yè)，
		一起開啟精彩的世界吧！
		</p>
		<div class="btn" id="start">start</div>
		</div>
	</body>
</html>

到此這篇關(guān)于使用HBuilder制作一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)的文章就介紹到這了,更多相關(guān)HBuilder制作HTML5網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！