網頁的內容中常有需要一些符號, 例如 <、>... , 但有些符號是會與 HTML 語法本身有衝突的, 例如
你會看到執行結果只剩下
因為 < > 這兩個符號是用來做為 HTML 的標籤符號, 若在 < 符號後緊跟著英文字母, 那麼瀏覽器就會將從 < 符號開始直到下一個 > 符號為止的內容皆視為一個標籤, 而且若這不是一個實際已被定義的 HTML 標籤, 那它就會看不見任何內容或效果, 所以上例中就是 <B, C> 這幾個字被視為一個標籤, 才會在執行結果中看不到這幾個字
改善方式就是將特殊符號改用 HTML 編碼的方式來撰寫
HTML 編碼的格式有兩種
格式一
格式二
下面是一些常用符號所對應的編碼
<：<
>：>
&：&
空格：
"："
這就是格式一的撰寫方式
上面已有提到 < 與 > 的理由, 而 & 符號之所以會是特殊符號, 同樣是因為它有可能跟 HTML 編碼混淆, 例如像我在這篇文章中要讓訪客能看見 > 這幾個文字, 若我直接在內容中打 > , 那訪客就只會看到 > 符號, 而不是我打的那幾個字, 所以我必須打成 &gt; , 如此訪客才能看到 > 這幾個字
而空格的狀況我在「表格的框線」一文中也有提過一個按 SPACE 按鈕所打出來的空格 " " , 對於 HTML 而言不見得會把它真的當成空格(詳見該文), 所以在有時我們也須要用 HTML 編碼的方式來寫空格
雙引號則是一般用在屬性值裡面, 例如要在輸入格的預設值中帶有一個雙引號
另外, 上面也有提到過格式二的方式, 以這種方式可以將 UTF-8 中所有語系的文字與符號呈現在網頁上, 包含一般的英數字、繁體中文、簡體中文、日文、韓文...., 例如下面的編碼
執行後就會變成
謝謝
谢谢
ありがとう
대단히 감사합니다.
спасибо
下面附上一個 HTML 編碼產生器
--gs--
{HTML基礎教學}{HTML編碼}{什麼是UTF-8}
<BODY>
假如 A<B, C>B, 那麼 A 一定小於 C
</BODY>
假如 A<B, C>B, 那麼 A 一定小於 C
</BODY>
你會看到執行結果只剩下
假如 AB, 那麼 A 一定小於 C
因為 < > 這兩個符號是用來做為 HTML 的標籤符號, 若在 < 符號後緊跟著英文字母, 那麼瀏覽器就會將從 < 符號開始直到下一個 > 符號為止的內容皆視為一個標籤, 而且若這不是一個實際已被定義的 HTML 標籤, 那它就會看不見任何內容或效果, 所以上例中就是 <B, C> 這幾個字被視為一個標籤, 才會在執行結果中看不到這幾個字
改善方式就是將特殊符號改用 HTML 編碼的方式來撰寫
HTML 編碼的格式有兩種
格式一
&+已被定義的 HTML 編碼名稱
格式二
&#+文字所對應 UTF-8 的號碼
下面是一些常用符號所對應的編碼
<：<
>：>
&：&
空格：
"："
這就是格式一的撰寫方式
上面已有提到 < 與 > 的理由, 而 & 符號之所以會是特殊符號, 同樣是因為它有可能跟 HTML 編碼混淆, 例如像我在這篇文章中要讓訪客能看見 > 這幾個文字, 若我直接在內容中打 > , 那訪客就只會看到 > 符號, 而不是我打的那幾個字, 所以我必須打成 &gt; , 如此訪客才能看到 > 這幾個字
而空格的狀況我在「表格的框線」一文中也有提過一個按 SPACE 按鈕所打出來的空格 " " , 對於 HTML 而言不見得會把它真的當成空格(詳見該文), 所以在有時我們也須要用 HTML 編碼的方式來寫空格
雙引號則是一般用在屬性值裡面, 例如要在輸入格的預設值中帶有一個雙引號
<INPUT value="aaa"bbb" type="text">
另外, 上面也有提到過格式二的方式, 以這種方式可以將 UTF-8 中所有語系的文字與符號呈現在網頁上, 包含一般的英數字、繁體中文、簡體中文、日文、韓文...., 例如下面的編碼
謝謝<BR/>
谢谢<BR/>
ありがとう<BR/>
대단히 감사합니다.<BR/>
спасибо<BR/>
谢谢<BR/>
ありがとう<BR/>
대단히 감사합니다.<BR/>
спасибо<BR/>
執行後就會變成
謝謝
谢谢
ありがとう
대단히 감사합니다.
спасибо
下面附上一個 HTML 編碼產生器
<html>
<head>
<title>HTML Encoder</title>
<script>
function fn(){
div_1.innerHTML = "";
div_2.innerHTML = "";
var s = fta.value;
for(var i=0;i<s.length;i++){
var n = s.charCodeAt(i);
if(n<256){
if(n==13){
div_1.innerHTML += "<BR>";
div_2.innerHTML += "<BR>";
}else{
div_1.innerHTML += s.charAt(i);
div_2.innerHTML += s.charAt(i);
}
}else{
div_1.innerHTML += "&#"+n+";" ;
div_2.innerHTML += "&#"+n ;
}
}
}
</script>
</head>
<body>
[玩Web無窮]網站提供<BR>
Provided by http://enjoywebtech.blogspot.com/<BR>
<BR>
輸入您想要編碼的文字<BR>
Input the words what you want to be encode<BR>
<textarea id="fta" style="width:100%;height:200;"></textarea><BR>
<input type="Button" onclick="fn()" value="進行編碼(Encode)"><BR>
編碼結果(Result):<BR>
<div id="div_1"></div>
<BR>
預覽(Preview):<BR>
<div id="div_2"></div>
</body>
</html>
<head>
<title>HTML Encoder</title>
<script>
function fn(){
div_1.innerHTML = "";
div_2.innerHTML = "";
var s = fta.value;
for(var i=0;i<s.length;i++){
var n = s.charCodeAt(i);
if(n<256){
if(n==13){
div_1.innerHTML += "<BR>";
div_2.innerHTML += "<BR>";
}else{
div_1.innerHTML += s.charAt(i);
div_2.innerHTML += s.charAt(i);
}
}else{
div_1.innerHTML += "&#"+n+";" ;
div_2.innerHTML += "&#"+n ;
}
}
}
</script>
</head>
<body>
[玩Web無窮]網站提供<BR>
Provided by http://enjoywebtech.blogspot.com/<BR>
<BR>
輸入您想要編碼的文字<BR>
Input the words what you want to be encode<BR>
<textarea id="fta" style="width:100%;height:200;"></textarea><BR>
<input type="Button" onclick="fn()" value="進行編碼(Encode)"><BR>
編碼結果(Result):<BR>
<div id="div_1"></div>
<BR>
預覽(Preview):<BR>
<div id="div_2"></div>
</body>
</html>
--gs--
{HTML基礎教學}{HTML編碼}{什麼是UTF-8}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
0 意見:
張貼留言
廣告訊息會被我刪除