七小時帶你入門HTML+CSS網(wǎng)頁設(shè)計，創(chuàng)建自己第一個網(wǎng)頁（二）

家好，上一篇文章介紹了HTML+CSS的基礎(chǔ)知識和開發(fā)工具，接下來就要開始實戰(zhàn)編寫了

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

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

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

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

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

接下來我們就開始編寫我們的網(wǎng)頁代碼，我寫一段圖文標(biāo)簽，大家把下面一段代碼插入到body里面

<!--HTML-->
<div>
<h2>這是我的第一個網(wǎng)頁</h2>
<p>BODY標(biāo)簽表示網(wǎng)頁主體元素的容器，它包含了網(wǎng)頁所有的html標(biāo)簽如：文本、圖片、列表等等。以后我們編寫的網(wǎng)頁標(biāo)簽都需要放在這里面，這里我寫了一段文字，它就會在瀏覽器里顯示出來。這些就構(gòu)成了我們網(wǎng)頁的基本格式，大家也不需要去背，知道表示什么意思就行，需要的時候直接拿來用。</p>
<p><img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042727720.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>

效果圖如下：

這是我的第一個網(wǎng)頁

大家可以先嘗試一下解釋這些標(biāo)簽的意義，下一篇我會詳細(xì)為大家講解，謝謝觀看！！！

一部分：HTML簡介

什么是HTML？

HTML代表超文本標(biāo)記語言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁的標(biāo)記語言。HTML文件包含一組標(biāo)簽，這些標(biāo)簽用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標(biāo)記中的指示呈現(xiàn)網(wǎng)頁內(nèi)容。

HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。

HTML的基本結(jié)構(gòu)

每個HTML文檔都應(yīng)該遵循以下基本結(jié)構(gòu)：

<!DOCTYPE html>
<html>
<head>
    <title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
    <!-- 內(nèi)容在這里 -->
</body>
</html>

讓我們逐步解釋這個結(jié)構(gòu)：

<!DOCTYPE html>：這是文檔類型聲明，它告訴瀏覽器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文檔的根元素。所有其他元素都包含在<html>標(biāo)簽內(nèi)。
<head>：包含與文檔相關(guān)的元信息，如頁面標(biāo)題、字符集聲明和外部樣式表鏈接。
<title>：定義網(wǎng)頁的標(biāo)題，顯示在瀏覽器標(biāo)簽頁上。
<body>：包含網(wǎng)頁的主要內(nèi)容，如文本、圖像和其他媒體。

HTML標(biāo)簽和元素

HTML標(biāo)簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標(biāo)簽通常成對出現(xiàn)，有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽。例如：

<p>這是一個段落。</p>

<p>是開始標(biāo)簽，</p>是結(jié)束標(biāo)簽，文本位于兩個標(biāo)簽之間。標(biāo)簽定義了元素的類型和結(jié)構(gòu)。

有些HTML標(biāo)簽是自封閉的，不需要結(jié)束標(biāo)簽，例如<img>用于插入圖像。

HTML注釋

在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用結(jié)尾，如下所示：

<!-- 這是一個注釋 -->

注釋通常用于添加文檔說明、調(diào)試代碼或標(biāo)記未來的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、標(biāo)題、列表等元素中。以下是一些常見的文本元素：

<p>：定義一個段落。
<h1>到<h6>：定義標(biāo)題，<h1>是最高級別的標(biāo)題，<h6>是最低級別的標(biāo)題。
<strong>：定義強(qiáng)調(diào)文本，通常以粗體顯示。
<em>：定義強(qiáng)調(diào)文本，通常以斜體顯示。
<a>：定義超鏈接，允許用戶點擊跳轉(zhuǎn)到其他頁面。

示例：

<p>這是一個段落。</p>
<h1>這是一個標(biāo)題</h1>
<p><strong>這是強(qiáng)調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網(wǎng)站</a></p>

圖像

要在網(wǎng)頁中插入圖像，可以使用<img>標(biāo)簽。它是一個自封閉標(biāo)簽，需要指定圖像的src屬性來指定圖像文件的路徑。

示例：

htmlCopy code
<img src="image.jpg" alt="圖像描述">

src：指定圖像文件的路徑。
alt：提供圖像的替代文本，用于無法加載圖像時的文字描述。

鏈接

通過使用<a>標(biāo)簽，可以在網(wǎng)頁中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標(biāo)URL。

示例：

<a href="https://www.example.com">訪問示例網(wǎng)站</a>

href：指定鏈接的目標(biāo)URL。

列表

HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。

無序列表

無序列表使用<ul>標(biāo)簽定義，每個列表項使用<li>標(biāo)簽。

示例：

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

有序列表

有序列表使用<ol>標(biāo)簽定義，每個列表項使用<li>標(biāo)簽。

示例：

<ol>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

定義列表

定義列表使用<dl>標(biāo)簽定義，每個定義項目使用<dt>標(biāo)簽定義術(shù)語，使用<dd>標(biāo)簽定義描述。

示例：

<dl>
    <dt>術(shù)語1</dt>
    <dd>描述1</dd>
    <dt>術(shù)語2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表單

HTML表單允許用戶與網(wǎng)頁進(jìn)行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：

<form>元素

<form>元素用于創(chuàng)建表單，可以包含文本字段、復(fù)選框、單選按鈕、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表單元素在這里 -->
</form>

action：指定表單數(shù)據(jù)提交的目標(biāo)URL。
method：指定提交方法，通常是"post"或"get"。

輸入字段

輸入字段用于接收用戶輸入的數(shù)據(jù)，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復(fù)選框等。

文本框

文本框使用<input>標(biāo)簽，type屬性設(shè)置為"text"。

示例：

<input type="text" name="username" placeholder="用戶名">

type：指定字段類型。
name：指定字段的名稱。
placeholder：設(shè)置文本框的占位符文本。

密碼框

密碼框使用<input>標(biāo)簽，type屬性設(shè)置為"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密碼">

單選按鈕

單選按鈕使用<input>標(biāo)簽，type屬性設(shè)置為"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定單選按鈕組的名稱。
value：指定每個選項的值。

復(fù)選框

復(fù)選框使用<input>標(biāo)簽，type屬性設(shè)置為"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">訂閱新聞

下拉列表

下拉列表使用<select>和<option>標(biāo)簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項。

示例：

<select name="country">
    <option value="us">美國</option>
    <option value="ca">加拿大</option>
    <option value="uk">英國</option>
</select>

name：指定下拉列表的名稱。
每個<option>標(biāo)簽表示一個選項，使用value屬性定義選項的值。

第四部分：HTML樣式和CSS

HTML用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。

內(nèi)聯(lián)樣式

可以在HTML元素內(nèi)部使用style屬性來定義內(nèi)聯(lián)樣式。

示例：

<p style="color: blue; font-size: 16px;">這是一個藍(lán)色的段落。</p>

外部樣式表

外部樣式表將樣式規(guī)則保存在獨立的CSS文件中，并通過<link>標(biāo)簽將其鏈接到HTML文檔。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中鏈接外部樣式表：

<link rel="stylesheet" type="text/css" href="style.css">

這使得可以在整個網(wǎng)站上共享相同的樣式。

總結(jié)

HTML是構(gòu)建現(xiàn)代網(wǎng)頁的基礎(chǔ)。通過學(xué)習(xí)HTML的基本語法和元素，你可以創(chuàng)建吸引人且功能強(qiáng)大的網(wǎng)頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現(xiàn)內(nèi)容和實現(xiàn)用戶交互。

這篇文章提供了HTML的基礎(chǔ)知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網(wǎng)頁。繼續(xù)學(xué)習(xí)和實踐，你將成為一個熟練的網(wǎng)頁開發(fā)者。

互聯(lián)網(wǎng)高速發(fā)展的今天，我們通過瀏覽器可以看到各種各樣的網(wǎng)站，包含了各式不同的領(lǐng)域還有內(nèi)容，通過點擊網(wǎng)站上的標(biāo)簽和欄目我們就能夠很方便地看到網(wǎng)站上顯示的各種數(shù)據(jù)，而這些都是建立在HTML這種標(biāo)記語言的基礎(chǔ)上做到的。

HTML的英文全稱為Hyper Text Markup Language，中文稱作超文本標(biāo)記語言，是一種專門用來建立網(wǎng)站的標(biāo)識語言。其中包括了許多標(biāo)簽將分散的網(wǎng)絡(luò)數(shù)據(jù)連接到一起，聚合同一之后形成了我們現(xiàn)在所看到的網(wǎng)頁。

看到這里是不是有許多朋友想要知道這個HTML語言該怎么去學(xué)習(xí)呢？是需要找老師統(tǒng)一學(xué)，還是去圖書館找專業(yè)書籍自己學(xué)好呢？不用擔(dān)心，因為今天要給大家推薦的就是一個專門為大家提供各種編程語言教程的學(xué)習(xí)網(wǎng)站。

這個網(wǎng)站名叫 runoob，直接在瀏覽器上搜索即可找到。

圖片來自RUNOOB網(wǎng)頁截圖

在首頁可以看到該欄目的第二個就是關(guān)于HTML的學(xué)習(xí)教程，點擊左邊的方框可以調(diào)整你的課程進(jìn)度，在第一章節(jié)的教程中很清晰地講解了什么是HTML，以及告訴了你一些關(guān)于網(wǎng)站建立的小知識。

下方的提示框會給你提供一些對HTML零基礎(chǔ)新手的科普，關(guān)于這種標(biāo)記語言應(yīng)該如何進(jìn)行保存，如何查看文件后輟名，如何打開代碼文件等等，還會提供一些專用工具供你學(xué)習(xí)使用。同時網(wǎng)站會給你簡單介紹一些網(wǎng)頁編程語言的區(qū)別，還有各種用途上的區(qū)分，非常地詳細(xì)。

圖片來自RUNOOB網(wǎng)頁截圖

在第三章節(jié)的編輯器一欄里，會提供給你一些HTML的專用編輯器，例如VS Code，還有sublime text 等實用工具，在后面會教你如何將這些HTML必備編輯器下載并安裝，然后在瀏覽器上面運行。

通過插件還有語言編程的格式我們就能夠?qū)W會如何制作第一步的標(biāo)題了，剛開始的一步比較簡單，相信大家很快就能學(xué)會如何在網(wǎng)頁上顯示自己打入的文字了。之后進(jìn)一步的學(xué)習(xí)就是關(guān)于如何調(diào)整文字段落，還有各種標(biāo)識的使用。

圖片來自RUNOOB網(wǎng)頁截圖

在如何進(jìn)行文字排版編輯的方面，教程中也講述得很詳細(xì)，包括一些用戶們常犯的錯誤，還有一些網(wǎng)頁的實例，甚至是這個教學(xué)網(wǎng)站上的排版示范都會進(jìn)行一一講解。

更深入的章節(jié)會對如何進(jìn)行圖像排列，傳輸?shù)确矫孢M(jìn)行細(xì)講，教程中把大部分網(wǎng)站會使用到的技巧還有排版方式都分成了許多個小片段，方便大家能夠?qū)γ總€方面針對性地學(xué)習(xí)。這些內(nèi)容并不多，幾乎每一個片段都是用很直白的語言進(jìn)行講解，方便所有人都能夠看懂，并且在下方都會有更詳細(xì)的術(shù)語解析，還有一些比較難懂的點會舉例解釋。

圖片來自RUNOOB網(wǎng)頁截圖

經(jīng)過十幾章節(jié)的教學(xué)之后，基本上能夠掌握HTML語言的基本用法，還有一些簡單的操作了，這個時候如果想要進(jìn)階學(xué)習(xí)的話還可以在網(wǎng)站上查找其他的進(jìn)階語言用法，例如CSS, JavaScript等等復(fù)雜一些的語言，相應(yīng)的你也會學(xué)到更多如何運營網(wǎng)頁的方法。

當(dāng)然如果想要自己建立一個網(wǎng)站的話，還需要更多資源還有設(shè)備，例如高速的網(wǎng)絡(luò)連接保持網(wǎng)頁的穩(wěn)定性，以及穩(wěn)定的服務(wù)器，用來保證自己的網(wǎng)頁24小時都能保持流暢可用。不過這些都是在學(xué)會了如何建立網(wǎng)頁之后才考慮的事了。

現(xiàn)在網(wǎng)上也有許多編程教學(xué)，在網(wǎng)上自學(xué)一門知識一門語言變得非常方便，但是僅僅是擁有資源還是不夠的。學(xué)習(xí)如何建立自己的網(wǎng)站還需要大量的努力以及知識的積累，通過不斷的練習(xí)還有實踐才能自如地使用，只有基礎(chǔ)扎實，建立出來的網(wǎng)站才能夠長久。但還需要大家能夠行動起來，只有去學(xué)習(xí)去實踐才能夠真正學(xué)會東西，希望這個教學(xué)網(wǎng)站推薦能夠幫到更多人！

在線咨詢

上一篇：WEB編程里面的HTML英文文檔，你能夠正確翻譯嗎？
下一篇：HTML5-拖放

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

七小時帶你入門HTML+CSS網(wǎng)頁設(shè)計，創(chuàng)建自己第一個網(wǎng)頁（二）

一部分：HTML簡介

什么是HTML？

HTML的基本結(jié)構(gòu)

HTML標(biāo)簽和元素

HTML注釋

第二部分：HTML基本元素

文本

圖像

鏈接

列表

無序列表

有序列表

定義列表

第三部分：HTML表單

<form>元素

輸入字段

文本框

密碼框

單選按鈕

復(fù)選框

下拉列表

第四部分：HTML樣式和CSS

內(nèi)聯(lián)樣式

外部樣式表

總結(jié)

您的項目需求