網頁技術

首頁 > 網頁技術目錄 > 文字的列表

文字的列表

2020/8/11 , 由 Wanding 編寫發布

分類：

HTML

網頁中的內容文字若很多又雜，會造成不易閱讀。一堆資料若能整理成列表來呈現，將會讓使用者閱讀時會更清楚。 html中的排列可分為無序號列表<ul>、有序號列表<ol>、定義式列表<dl>，以下分別說明：

無序號列表 <ul>

用<ul>和</ul>把各項條列式的內容包起來。各條列內容則用<li>和</li>包圍起來。

<ul>
 <li>文字的內容</li>
 <li>圖片的顏色</li>
 <li>影片的動態效果</li>
</ul>

網頁顯示如下

文字的內容
圖片的顏色
影片的懂態效果

有序號列表 <ol>

用<ol>和</ol>把各項條列式的內容包起來。各條列內容則用<li>和</li>包圍起來。

<ol>
 <li>文字的內容</li>
 <li>圖片的顏色</li>
 <li>影片的動態效果</li>
</ol>

網頁顯示如下

文字的內容
圖片的顏色
影片的懂態效果

定義式列表 <dl>

用<dl>和</dl>把各項需要定義內容包起來。項目則使用<dt>標籤，定義則使用<dd>標籤。

<dl>
 <dt>項目1</dt>
 <dd>項目1的定義說明</dd>
 <dt>項目2</dt>
 <dd>項目2的定義說明</dd>
</dl>

網頁顯示如下：

光圈: 光圈，是照相機上用來控制鏡頭孔徑大小的部件，以控制景深、鏡頭成像素質、以及和快門協同控制進光量。有時也表示光圈值的概念。表達光圈大小用f值表示，對於已經製造好的鏡頭，不能隨意改變鏡頭的直徑，但是可以通過在鏡頭內部加入多邊形或者圓型，並且面積可變的孔狀光柵來達到控制鏡頭通光量，這個裝置就叫做光圈，光圈f值=鏡頭的焦距/光圈口徑。
快門: 快門也叫光閘，是照相機中控制曝光時間的重要部件，快門時間越短，曝光時間越少。速度規格：T、B、1/2、1/5、1/10、1/20、1/50、1/100、1/250、1/500、 1/1000秒。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 文字的列表

文字的列表

2020/8/11 , 由 Wanding 編寫發布

HTML

無序號列表 <ul>

用<ul>和</ul>把各項條列式的內容包起來。各條列內容則用<li>和</li>包圍起來。

<ul>
 <li>文字的內容</li>
 <li>圖片的顏色</li>
 <li>影片的動態效果</li>
</ul>

網頁顯示如下

文字的內容
圖片的顏色
影片的懂態效果

有序號列表 <ol>

用<ol>和</ol>把各項條列式的內容包起來。各條列內容則用<li>和</li>包圍起來。

<ol>
 <li>文字的內容</li>
 <li>圖片的顏色</li>
 <li>影片的動態效果</li>
</ol>

網頁顯示如下

文字的內容
圖片的顏色
影片的懂態效果

定義式列表 <dl>

用<dl>和</dl>把各項需要定義內容包起來。項目則使用<dt>標籤，定義則使用<dd>標籤。

<dl>
 <dt>項目1</dt>
 <dd>項目1的定義說明</dd>
 <dt>項目2</dt>
 <dd>項目2的定義說明</dd>
</dl>

網頁顯示如下：

光圈: 光圈，是照相機上用來控制鏡頭孔徑大小的部件，以控制景深、鏡頭成像素質、以及和快門協同控制進光量。有時也表示光圈值的概念。表達光圈大小用f值表示，對於已經製造好的鏡頭，不能隨意改變鏡頭的直徑，但是可以通過在鏡頭內部加入多邊形或者圓型，並且面積可變的孔狀光柵來達到控制鏡頭通光量，這個裝置就叫做光圈，光圈f值=鏡頭的焦距/光圈口徑。
快門: 快門也叫光閘，是照相機中控制曝光時間的重要部件，快門時間越短，曝光時間越少。速度規格：T、B、1/2、1/5、1/10、1/20、1/50、1/100、1/250、1/500、 1/1000秒。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 文字的樣式變化和特殊符號查詢表

文字的樣式變化和特殊符號查詢表

2020/8/10 , 由 Wanding 編寫發布

分類：

HTML

文字有粗體、斜體、大小、顏色的不同，運用字體的變化，可以幫我們強化文字的語氣，或凸顯主題的某些特色。目前網頁建構的趨勢大都已經使用CSS來控制文字的變化，但是認識HTML基本調整樣式的標籤仍是重要的基礎，因為還是在許多地方會常用到。

以下為我們常用在改變文字樣式的標籤：

<b> ：粗體字
<i> ：斜體字
<u> ：文字加底線
<sup> ：上標字
<sub> ：下標字
<adress > ：用來顯示電子信箱的地址
<cite> ：用於引經據典的文字
<code> ：用於一段程式碼
<dfn> ：用來顯示定義的文字
<em> ：強調
<kbd > ：用來表示使用者輸入的文字
<samp > ：用於引用字
<strong> ：用於加強語氣
<var> ：用於顯示變數

HTML特殊符號表

符號	意義	名稱表示法	十進位表示法
→	向右箭頭	→	→
←	向左箭頭	←	←
↑	向上箭頭	↑	↑
↓	向下箭頭	↓	↓
"	雙引號	"	"
&	&記號	&	&
<	小於	<	<
>	大於	>	>
≤	小於或等於	≤	≤
≥	大於或等於	≥	≥
∼	相似	&sim;	∼
≅	趨近等於	&cong;	≅
≈	幾乎等於	≈	≈
≠	不等於	≠	≠
≡	等值、等量	&equiv;	≡
ˆ	進格修飾抑揚符	&circ;	ˆ
˜	小波浪符號	&tilde;	˜
	半格空格	&ensp;
	全格空格	&emsp;	&#8195
–	半格破折號	–	–
‘	左單引號	‘	‘
’	右單引號	’	’
‚	單下引號	&sbquo;	—
“	左雙引號	“	“
”	右雙引號	”	”
„	雙下引號	&bdquo;	„
‰	千分之符號	&permil;	‰
‹	指左單尖引號	&lsaquo;	‹
›	指右單尖引號	&rsaquo;	›
€	歐元符號	€	€
©	版權符號	©	©
®	註冊商標	®	®
°	度	°	°
∀	for all	∀	∀
∂	part	∂	∂
∃	exists	&exists;	∃
∅	empty	∅	∅
∇	nabla	∇	∇
∈	isin	∈	∈
∉	notin	∉	∉
∋	ni	&ni;	∋
∏	prod	∏	∏
∑	sum	∑	∑
−	minus	−	−
∗	lowast	&lowast;	∗
√	square root	√	√
∝	proportional to	&prop;	∝
∞	infinity	∞	∞
∠	angle	&ang;	∠
∧	and	&and;	∧
∨	or	&or;	∨
∩	cap	∩	∩
∪	cup	∪	∪
∫	integral	∫	∫
∴	therefore	&there4;	∴
⊂	subset of	⊂	⊂
⊃	superset of	⊃	⊃
⊄	not subset of	&nsub;	⊄
⊆	subset or equal	&sube;	⊆
⊇	superset or equal	&supe;	⊇
⊕	circled plus	&oplus;	⊕
⊗	cirled times	&otimes;	⊗
⊥	perpendicular	&perp;	⊥
⋅	dot operator	⋅	⋅

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 文字的樣式變化和特殊符號查詢表

文字的樣式變化和特殊符號查詢表

2020/8/10 , 由 Wanding 編寫發布

HTML

以下為我們常用在改變文字樣式的標籤：

<b> ：粗體字
<i> ：斜體字
<u> ：文字加底線
<sup> ：上標字
<sub> ：下標字
<adress > ：用來顯示電子信箱的地址
<cite> ：用於引經據典的文字
<code> ：用於一段程式碼
<dfn> ：用來顯示定義的文字
<em> ：強調
<kbd > ：用來表示使用者輸入的文字
<samp > ：用於引用字
<strong> ：用於加強語氣
<var> ：用於顯示變數

HTML特殊符號表

符號	意義	名稱表示法	十進位表示法
→	向右箭頭	→	→
←	向左箭頭	←	←
↑	向上箭頭	↑	↑
↓	向下箭頭	↓	↓
"	雙引號	"	"
&	&記號	&	&
<	小於	<	<
>	大於	>	>
≤	小於或等於	≤	≤
≥	大於或等於	≥	≥
∼	相似	&sim;	∼
≅	趨近等於	&cong;	≅
≈	幾乎等於	≈	≈
≠	不等於	≠	≠
≡	等值、等量	&equiv;	≡
ˆ	進格修飾抑揚符	&circ;	ˆ
˜	小波浪符號	&tilde;	˜
	半格空格	&ensp;
	全格空格	&emsp;	&#8195
–	半格破折號	–	–
‘	左單引號	‘	‘
’	右單引號	’	’
‚	單下引號	&sbquo;	—
“	左雙引號	“	“
”	右雙引號	”	”
„	雙下引號	&bdquo;	„
‰	千分之符號	&permil;	‰
‹	指左單尖引號	&lsaquo;	‹
›	指右單尖引號	&rsaquo;	›
€	歐元符號	€	€
©	版權符號	©	©
®	註冊商標	®	®
°	度	°	°
∀	for all	∀	∀
∂	part	∂	∂
∃	exists	&exists;	∃
∅	empty	∅	∅
∇	nabla	∇	∇
∈	isin	∈	∈
∉	notin	∉	∉
∋	ni	&ni;	∋
∏	prod	∏	∏
∑	sum	∑	∑
−	minus	−	−
∗	lowast	&lowast;	∗
√	square root	√	√
∝	proportional to	&prop;	∝
∞	infinity	∞	∞
∠	angle	&ang;	∠
∧	and	&and;	∧
∨	or	&or;	∨
∩	cap	∩	∩
∪	cup	∪	∪
∫	integral	∫	∫
∴	therefore	&there4;	∴
⊂	subset of	⊂	⊂
⊃	superset of	⊃	⊃
⊄	not subset of	&nsub;	⊄
⊆	subset or equal	&sube;	⊆
⊇	superset or equal	&supe;	⊇
⊕	circled plus	&oplus;	⊕
⊗	cirled times	&otimes;	⊗
⊥	perpendicular	&perp;	⊥
⋅	dot operator	⋅	⋅

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 如何讓網頁文章段落分明？

如何讓網頁文章段落分明？

2020/8/6 , 由 Wanding 編寫發布

分類：

HTML

瀏覽器不認識空格，遇到空格一律忽略；也不認識換行，縱使你在編輯器裡拼命換行，瀏覽器呈現出來卻完全不同，文字全都黏在一起。那麼怎麼讓文字呈現段落，如同一般文章易於閱讀？

會出現這種狀況，原因是瀏覽器顯示須由HTML來安排，而空格與換行在HTML規範裡，是由標籤來控制，而不是鍵盤的空白鍵和enter鍵。若要編輯基本有段落的文字，則必須對本篇所介紹的標籤熟記並善加運用。

強制換行 <br>

瀏覽器的寬度會隨著不同裝置，或使用者的放大縮小而文字會自動跳到下一行。但是若少了強制換行，在寬一點的螢幕裡，文字都會連在一起，根本毫無段落感可言。<br>這個標籤可以命令瀏覽器強制換行，解決這個問題。

文字段落 <p>

HTML裡的段落標籤為<p>，某一些文字可以使用<p>和</p>包圍起來形成一個段落。這個標籤除了會換行之外，還會多空出一行，讓視覺產生段落感。

<p>讓文字有段落感

分隔線 <hr>

有時候為了讓網頁的段落更清晰，會用一條水平線當分隔線。你只要在一段落的文字結束的地方鍵入<hr>標籤，即會出現一條水平線。如下所示:

文字標題 <h1>、<h2>、<h3>、<h3>、<h5>、<h6>

文字章節中的標題往往都是字體比較大，這組標籤總共有六個大小。<h1>最大，依序逐漸變小，到<h6>最小。屬於前後包夾型的標籤。用法如 <h3>標題文字 </h3>。

控制文件結構

有些標籤是用來表示文字的區塊及結構，如最常用的<div>標籤，可以將網頁中的某一段內容包起來，然後再透過 CSS來控制這一區段的內容所要呈現的樣式。另外還有以下幾個標籤也是用來控制文件結構的：

<div>：區塊
<section>：章節段落
<article>：內文
<aside>：註釋
<header>：頁首
<footer>頁尾

實際的寫法如下

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 如何讓網頁文章段落分明？

如何讓網頁文章段落分明？

2020/8/6 , 由 Wanding 編寫發布

HTML

強制換行 <br>

文字段落 <p>

HTML裡的段落標籤為<p>，某一些文字可以使用<p>和</p>包圍起來形成一個段落。這個標籤除了會換行之外，還會多空出一行，讓視覺產生段落感。

<p>讓文字有段落感

分隔線 <hr>

有時候為了讓網頁的段落更清晰，會用一條水平線當分隔線。你只要在一段落的文字結束的地方鍵入<hr>標籤，即會出現一條水平線。如下所示:

文字標題 <h1>、<h2>、<h3>、<h3>、<h5>、<h6>

控制文件結構

<div>：區塊
<section>：章節段落
<article>：內文
<aside>：註釋
<header>：頁首
<footer>頁尾

實際的寫法如下

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 什麼是HTML？網頁入門從這裡開始

什麼是HTML？網頁入門從這裡開始

2020/8/4 , 由 Wanding 編寫發布

分類：

HTML

網頁是怎麼做出來的呢？它不像我們常使用的文書編輯軟體WORD，在版面上打字就會出現想要的樣子。因為我們打開網頁的瀏覽器有一套自己的語法，透過這套語法，瀏覽器可以解讀內容並將之呈現在螢幕上。這套語法就是HTML，為HyperText Markup Language的縮寫。中文稱為超文字標記語言，有點長且不易記，所以大家還是都習慣稱HTML。

HTML文件是由標籤組成的，他是由小於符號"<"以及大於符號">"所組成的記號，像是<head> 、<body>、<p>，我們稱這些由小於和大於組成的記號為標籤(tag)。這些標籤讓瀏覽器更清楚的辨別要呈現的樣式，最後在螢幕上呈現出來。當你在瀏覽網頁時如果想看看原始碼，只要按滑鼠右鍵選擇檢視原始碼，即可看到網頁的原始碼是怎麼編寫的。

為何要學HTML？

目前很流行的Wordpress是CMS(Content Management System)的一種，當它安裝好之後就可以像Word一般在後台寫文章。對於不懂編碼的人士們，也可以輕鬆操作。另外還有像WIX商業付費網頁平台，只要用滑鼠拖拉文件，即可完成一個初步的網站。

如果只是業餘寫個網站玩玩，可能不需要花時間學習HTML。但是若要學好網頁製作，就必須對這網頁的基本構成要素有一定的瞭解。而且有些細節是建站軟體做不到的，如果你熟悉HTML網頁構成元素，即可自行動手編輯。所以，對於想在網頁領域精進的人士，學習HTML是必備的基礎。

基本的HTML標籤

以下幾個基本標籤架構出HTML文件的結構。也就是說，一般看到的HTML文件都是由這幾個標籤形成主體，再加上其他的標籤進行擴充。為了建立良好的文件架構，避免瀏覽器誤判，應該在文件中正確的使用這些標籤：

<!DOCTYPE>：宣告網頁的文件標準
<html>：文件的開始與結束
<head>：標示文件的各項資訊
<title>：文件的標題
<body>：標示本文

範例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
--這個區域放置網頁內容--
</body>
</html>

<!DOCTYPE> 文件標準的宣告

DOCTYPE宣告的完整名稱為Document Type Declaration，這是從HTML4.01版開始設為標準，目的是宣告文件的類型，讓網頁瀏覽器能正確的解析HTML文件。DOCTYPE必須寫在文件的最開頭，<html>標籤之上。通常使用網頁編輯軟體建立新文件時，都會自動加上DOCTYPE宣告。若使用記事本編寫，則需自己加上宣告<!DOCTYPE html>。

<html> 文件的開始與結束

HTML文件應該以<html>為開始，以</html>結束，頁面中的所有內容都由這兩個標籤上下包圍起來，如圖一所示。

<head> 存放與瀏覽器溝通的各項資訊

這個標籤主要是用以敘述HTML文件的各項資訊，以及宣告程式碼，這些資訊大都是供瀏覽器處理，瀏覽網頁時除了標題之外，其他的資訊不會出現。在<head>與</head>之間，常會出現的標籤有下列四種：

title元素：為HTML文件的標題，這裡所填入的文字會顯示在瀏覽器分頁標籤或視窗標題上。
meta元素：中繼資料(metadata)，用來標示檔案所使用的編碼、作者、文章簡述等資訊。
style元素：宣告使用的CSS樣式表。
script元素：宣告使用的JavaScript程式碼

<body> 網頁的內容

body元素是用來標示網頁本文的部份，主要的內文都會在<body>與</body> 之間。

目前最常出現網頁的組成

如果只用HTML來編寫網頁，就資訊的呈現是沒問題的，但網頁就顯得呆板。若要做出網路上常見的特殊網頁排版、動畫、特效、或互動式功能，光靠HTML是不夠的，必須透過聯合使用CSS樣式表和JavaScript程式，才能做出在視覺或互動上比較豐富的網頁。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 什麼是HTML？網頁入門從這裡開始

什麼是HTML？網頁入門從這裡開始

2020/8/4 , 由 Wanding 編寫發布

HTML

為何要學HTML？

基本的HTML標籤

<!DOCTYPE>：宣告網頁的文件標準
<html>：文件的開始與結束
<head>：標示文件的各項資訊
<title>：文件的標題
<body>：標示本文

範例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
--這個區域放置網頁內容--
</body>
</html>

<!DOCTYPE> 文件標準的宣告

<html> 文件的開始與結束

HTML文件應該以<html>為開始，以</html>結束，頁面中的所有內容都由這兩個標籤上下包圍起來，如圖一所示。

<head> 存放與瀏覽器溝通的各項資訊

title元素：為HTML文件的標題，這裡所填入的文字會顯示在瀏覽器分頁標籤或視窗標題上。
meta元素：中繼資料(metadata)，用來標示檔案所使用的編碼、作者、文章簡述等資訊。
style元素：宣告使用的CSS樣式表。
script元素：宣告使用的JavaScript程式碼

<body> 網頁的內容

body元素是用來標示網頁本文的部份，主要的內文都會在<body>與</body> 之間。

目前最常出現網頁的組成

返回目錄

Subscribe to HTML