首頁>網頁設計教程>HTML教程

html網頁製作程式碼大全(html常用標記)

作者：Eve Cole 更新時間：2024-12-20 14:02:13

1. 建立一個段落

HTML的基礎元件之一就是段落。使用“<p>”和“</p>”標籤來定義段落。例如：

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

2. 新增連結

超連結是指向其他頁面或網站的連結。使用“<a href=''>”和“</a>”標籤來建立超鏈接，其中href屬性指定連結的URL。例如：

 <a href="https://www.jb51.net">這是一個連結</a>

3. 插入影像

圖像可以增強頁面的視覺效果並傳達更多的訊息。使用“<img src='' alt=''/>”標籤來插入圖像，其中src屬性指定圖像檔案的路徑，而alt屬性包含在圖像無法顯示時顯示的替代文字。例如：

 <img src="image.jpg" alt="一張美麗的圖片">

4. 建立表格

表格是網頁中呈現資料的一種主要方式。使用「<table>」、「<tr>」和「<td>」標籤分別定義表格、行和儲存格。例如：

 <table>
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
</table>

5. 建立無序列表或有序列表

使用“<ul>”或“<ol>”標籤建立無序列表或有序列表，然後使用“<li>”標籤定義列表項目。例如：

 <ul>
<li>列表項1</li>
<li>列表項2</li>
</ul>
<ol>
<li>列表項1</li>
<li>列表項2</li>
</ol>

6. 建立表單

表單是用於收集使用者輸入的元件。使用“<form>”標籤建立表單，並使用“<input>”標籤定義輸入欄位。例如：

 <form action="submit.php" method="post">
<label for="username">使用者名稱：</label>
<input type="text" name="username" id="username">
<label for="password">密碼：</label>
<input type="password" name="password" id="password">
<input type="submit" value="提交">
</form>

7. 設定樣式

CSS可用來控制網頁的外觀和排版。可以使用「<style>」標籤將CSS樣式加入HTML文件中。例如：

 <style>
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
text-align: center;
}
</style>

以上程式碼片段只是HTML語言中的冰山一角。但是，它們可幫助您建立基本的網頁結構和樣式，並為您提供更多學習的啟示。現在，試著利用這些HTML程式碼建立自己的網站吧！

以下一些常用的html標籤

HTML5的文件聲明

HTML5的文件聲明

<!DOCTYPE html>

上面的程式碼區塊是HTML5的文件聲明，聲明目前的網頁是依照HTML5的標準寫的。
編寫網頁時，一定要將HTML5的文檔聲明寫在網頁的最上面，如果不寫文檔聲明，則會導致有些瀏覽器進入怪異模式。進入怪異模式以後，瀏覽器解析頁面會導致頁面無法正常顯示，所以為了避免進入該模式，請務必寫文件聲明。

常用的文檔聲明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

註：<!DOCTYPE> 不是HTML 標籤。它為瀏覽器提供一項資訊（聲明），即HTML 是用什麼版本編寫的。
為了相容於一些舊的頁面，瀏覽器當中設定了兩種解析模式：

Standards Mode 標準模式
Quirks Mode 怪異模式

怪異模式解析網頁時會產生一些不可預期的行為，我們應該避免怪異模式的出現。

文件類型<HTML></HTML> （放在檔案的開頭與結尾）

文件主題<TITLE></TITLE> （必須放在「文頭」區塊內）

文頭<HEAD></HEAD> （描述性資料，像是「主題」）

文體<BODY></BODY> （文件本體）

標題<H?></H?> （從1到6，有六層選擇）

標題的對準<H?ALIGN=LEFT|CENTER|RIGHT></H?>

區分<DIV></DIV>

區分的對齊<DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊<BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）

強調<EM></EM> （通常以斜體顯示）

特別強調<STRONG></STRONG> （通常會以加粗顯示）

引用<CITE></CITE> （通常會以斜體顯示）

碼<CODE></CODE> （顯示原始碼之用）

樣本<SAMP></SAMP>

鍵盤輸入<KBD></KBD>

變數<VAR></VAR>

定義<DFN></DFN> （有些瀏覽器不提供）

位址<ADDRESS></ADDRESS>

大字<BIG></BIG>

小字<SMALL></SMALL>

與外觀相關的標籤（作者自訂的表現方式）

加粗<B></B>

斜體<I></I>

底線<U></U> （尚有些瀏覽器不提供）

刪除線<S></S> （尚有些瀏覽器不提供）

下標<SUB></SUB>

上標<SUP></SUP>

打字機體<TT></TT> （以單一空格字體顯示）

預定格式<PRE></PRE> （保留檔案中空格的大小）

預定格式的寬度<PRE WIDTH=?></PRE>（以字元計​​算）

向中看齊<CENTER></CENTER> （文字與圖片都可以）

閃耀<BLINK></BLINK> （有史以來最被嘲弄的標籤）

字體大小<FONTSIZE=?></FONT>（從1到7）

改變字體大小<FONTSIZE=+|-?></FONT>

基本字體大小<BASEFONTSIZE=?> （從1到7; 內定為3）

字體顏色<FONTCOLOR="#$$"></FONT>（$$為顏色代碼）

1)貼圖：<img src="圖片地址">

2)加入連結：<a href="所要連接的相關地址">寫上你想寫的字</a>

3)在新視窗開啟連線：<a href="相關位址" target="_blank">寫上要寫的字</a>

4)移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

5)字體加粗：<b>寫上你想寫的字</b>

6)字體斜體：<i>寫上你想寫的字</i>

7)字體底線: <u>寫上你想寫的字</u>

8)字體刪除線: <s>寫上你想寫的字</s>

9)字體加大: <big>寫上你想寫的字</big>

10)字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

11)更改字型顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位元進位)之間

12)消除連接的底線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

13)貼音樂：<embed src="音樂位址" width="寬度" height="高度" autostart=false>

14)貼flash: <embed src="flash位址" width="寬度" height="高度">

15)貼影視檔案：<img dynsrc="檔案位址" width="寬度" height="高度" start=mouseover>

16)換行：<br>

17)段落：<p>段落</p>

18)原始文字樣式：<pre>正文</pre>

19)換貼文背景：<body background="背景圖片地址">

20)固定貼文背景不隨捲軸滾動：<body background="背景圖片位址" bodybgproperties=fixed>

21)自訂貼文背景顏色：<body bgcolor="#value">(value值見10)

22)貼文背景音樂：<bgsound="背景音樂地址" loop=infinite>

23)貼網頁：<iframe. src="相關位址" width="寬度" height="高度"></iframe>

相關文章