Html網頁入門

門——01

1.首先打開Sublime Text 3，這是一款超級好用的文本編輯器。

Sublime Text 3

2.新建html文件，先點擊file，創建文檔

新建文檔

3.Ctrl+s保存，注意后綴名為 .html。比如（我的網頁.html）

4.開始寫代碼了，下面的幾行代碼是網頁的基本框架。頭部引入外部css樣式，主體內容是網頁的內容。

<!DOCTYPE html>
<html>
<head>
	》
</head>
<body>
 
</body>
</html>

截圖

4.下面開始寫內容了

<!DOCTYPE html>
<html>
<head>
	<title>我的網頁</title>
</head>
<body>
 <div style="width: 100%;height: 400px;background: blue">
 	<h1 style="color:#fff;text-align: center;">我是h1標簽</h1>

 </div>
</body>
</html>

一個div標簽里面寫了個h1標簽。div標簽是相當于一個容器，容器里擺放了一個h1標簽，其中容器顏色為藍色，h1標簽默認顏色是黑色，所以給他白色。效果如下：

效果

家好，上一篇文章介紹了HTML+CSS的基礎知識和開發工具，接下來就要開始實戰編寫了

首先在桌面創建一個新文件夾，重命名為網頁開發，進入文件夾右鍵創建一個文本文檔，然后重命名為index.html，我們的第一個網頁文件就創建好了。注意：有些同學的電腦無法編輯后綴，文件夾頭部有個查看，點擊進去進入選項，然后再點擊查看，下面有個隱藏已知文件類型的擴展名，去掉選擇框確定就可以了。

打開notepad++編輯器，把index.html直接拖進去，然后在里面寫上如下代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>網頁設計</title>
</head>
<body>
<style type="text/css">
body{
 background: #000;
}
</style>
</body>
</html>

直接點擊index.html，瀏覽器會直接打開并解析，就會顯示一個全黑的網頁，哈哈哈?。?！

那么這些標簽都代表什么意思呢？首先html網頁頭部都會有一個版本聲明，這里的<!DOCTYPE html>代表HTML5版本，每個網頁都需要寫上此聲明，這樣瀏覽器就能判斷用哪個html版本解析當前的頁面，而<html lang="zh-CN">則表示網頁內容屬于中文簡體語法。
<head>標簽表示網頁頭部元素的容器，這里可以放網頁的標題、關鍵詞、描述等，也可以包含腳本、樣式以及其他meta等其他信息。這里我寫了一個標題，它就會在瀏覽器頭部顯示出來。<meta charset=utf-8"/>標簽則是告訴瀏覽器我這個網頁的編碼是utf-8編碼，這個很重要哦，否則網頁容易出現亂碼。
<body>標簽表示網頁主體元素的容器，它包含了網頁所有的html標簽如：文本、圖片、列表等等。以后我們編寫的網頁標簽都需要放在這里面，這些就構成了html網頁的基本格式，大家也不需要去背，知道表示什么意思就行，需要的時候直接拿來用。
<style type="text/css">標簽表示規定樣式表的MIME類型，它告訴瀏覽器這里面的文本內容text要當css樣式表來解析，常用的有兩種引用方法（內部和外部引用），外部引用就是用<link>標簽引用css文件，后面的文章我會講解。它以分號(;)開始和結束，每個屬性有一個值，屬性和值用冒號分開，如：body{background:#000;}表示指定給body標簽一個顏色為黑色的背景。

接下來我們就開始編寫我們的網頁代碼，我寫一段圖文標簽，大家把下面一段代碼插入到body里面

<!--HTML-->
<div>
<h2>這是我的第一個網頁</h2>
<p>BODY標簽表示網頁主體元素的容器，它包含了網頁所有的html標簽如：文本、圖片、列表等等。以后我們編寫的網頁標簽都需要放在這里面，這里我寫了一段文字，它就會在瀏覽器里顯示出來。這些就構成了我們網頁的基本格式，大家也不需要去背，知道表示什么意思就行，需要的時候直接拿來用。</p>
<p><img src="http://m.jungjaehyung.com/uploadfile/2024/0807/20240807025415861.png"></p>
</div>
<!--CSS-->
<style type="text/css">
div {
	width: 300px;
	padding: 20px;
	margin: 20px;
	border: 1px solid #eee;
}
h2 {
	font-size: 18px;
	color: #000;
	text-align: center;
}
p {
	line-height: 24px;
	font-size: 14px;
	color: #000;
}
img {
	width: 100%;
}
</style>

效果圖如下：

這是我的第一個網頁

大家可以先嘗試一下解釋這些標簽的意義，下一篇我會詳細為大家講解，謝謝觀看?。?！

人網頁已經成為展示自己技能和更好地傳達信息的有力工具，個人網頁設計關鍵是堅持自己的風格，充分展示自己的專業技能，選擇合適的顏色、排版、圖片和視頻，簡化設計，與互聯網趨勢同步，獨特的個人網頁設計可以幫助個人在競爭激烈的數字市場中脫穎而出，吸引人們的注意力。

確定自己的風格

一個出色而獨特的個人網頁需要創建自己的風格，這可以是一個個人的標志，也可以是一種獨特的設計風格。

在開始設計之前，你應該首先接近你的個性、偏好或專業領域，并確定個人網頁的風格，以幫助你更好地表達自己，更好地展示你真實的自己。

顏色與排版的搭配

顏色和排版是所有網頁設計中最基本和最重要的元素之一。

當你確定你的網頁的風格時，你應該考慮的下一件事是顏色和排版的搭配，以及如何使用顏色和排版來突出個人網頁的獨特性和個性特征。

對于顏色的使用，你可以選擇柔和或明亮，但必須符合主題和整體風格。

對于排版設計，您可以選擇自己獨特的字體、排版形式或插入圖片等，以創建一個獨特的個人網頁。

使用圖片和視頻

你可以通過選擇漂亮的圖片和視頻來吸引用戶的注意，但也可以讓用戶更好地了解自己。

因此，在選擇圖片和視頻時，你應該選擇符合主題和整體風格的材料來為網頁注入活力。

同時，不要忘記使用圖片和視頻來輕松地展示你的個人才能、技能和文化，這可以使你的個人網頁更加生動和可讀。

設計簡潔明了

簡潔明了的設計是良好UI設計的重要目的。

如果你的網頁設計太復雜，用戶會不知道從哪里開始，最終失去興趣。

因此，在設計個人網頁時，要注意網頁的整體結構布局、清晰的排版和優化的質量，避免過度的裝飾和過多的插圖。

相反，要保證網頁簡潔易懂，讓人輕松找到自己想要的內容，更好地展現自己的個人特色。

與互聯網潮流同步

設計一個時尚的個人網頁不僅要考慮個人的風格、偏好和表達形式，還要與互聯網的趨勢保持同步。

除了了解自己的喜好和興趣外，還要關注市場的流行趨勢和當前前沿的網頁設計趨勢，還要跟上時代的步伐，界面的設計應該符合當前人們的審美觀點，而不是過時和僵化的設計。

來源

https://yncaili.com/22997.html

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商