DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 4.7 網頁特殊符號
4.7 網頁特殊符號
編輯:HTML入門知識     

一、網頁中的空格

默認情況下,<p>標簽的段落文字首行是不會縮進2個字的。例如:

為了使得每個段落首行縮進,我們要在段落前加入空格。空格的HTML代碼是“&nbsp;”。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>網頁空格</title>
</head>
<body>
    <h3>愛蓮說</h3>
    <p>&nbsp; &nbsp;水陸草木之花,可愛者甚蕃。晉陶淵明獨愛菊。自李唐來,世人甚愛牡丹。予獨愛蓮之出淤泥而不染,濯清漣而不妖,中通外直,不蔓不枝,香遠益清,亭亭淨植,可遠觀而不可亵玩焉。</p>
    <p>&nbsp; &nbsp;予謂菊,花之隱逸者也;牡丹,花之富貴者也;蓮,花之君子者也。噫!菊之愛,陶後鮮有聞;蓮之愛,同予者何人? 牡丹之愛,宜乎眾矣。</p>
</body>
</html>

在浏覽器預覽效果如下:

分析:

網頁空格跟你平常排版的空格是不一樣的,你不能在網頁代碼中按入space鍵來輸入空格,這是無效的做法。在HTML中,空格也是要用代碼來實現。

空格“&nbsp;”,在前端界又稱為“牛逼SP”。一般大家說往<p>標簽前加入兩個空格,大家都稱作“往<p>標簽加入兩個’牛逼SP’”。現在大家都記住了吧。

二、特殊符號

經常使用word的人都知道,當用輸入法沒辦法輸入某個字符(如歐元符號€、英鎊符號£等)時,我們都會查找word本身提供的特殊字符。但是對於網頁來說,怎樣在網頁輸入這種特殊字符呢?

往網頁中輸入特殊字符,需要在HTML代碼中輸入該特殊字符相對應的代碼。這些特殊字符相對應的代碼都是以“&”開頭,以“;”(注意是英文分號喔)結束的。

表1 可輸入的特殊符號 特殊符號 名稱 代碼 " 雙引號(英文) &quot; ‘ 左單引號 &lsquo; ’ 右單引號 &rsquo; × 乘號 &times; ÷ 除號 &divide; < 小於號 &lt; > 大於號 &gt; & 與符號 &amp; — 長破折號 &mdash; | 豎線 &#124;

說明:

這些所謂的特殊符號,要想在網頁中顯示出來,你有兩種方式:一是直接在網頁HTML代碼中輸入該字符,二是用在HTML代碼輸入該字符所對應的代碼(如表所示)。

:空格“牛逼SP”也可以看做一個特殊符號。

表2 難輸入的特殊符號 特殊符號 名稱 代碼 § 分節符 &sect; © 版權符 &copy; ® 注冊商標 &reg; ™ 商標 &trade; € 歐元 &euro; £ 英鎊 &pound; ¥ 日元 &yen; ° 度 &deg;

對於表1中的特殊符號,我們可以通過輸入法輸入,沒必要使用代碼來實現。而對於表2中的特殊符號,我們可能沒辦法用輸入法輸入,那就使用代碼進行輸入。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>特殊符號</title>
</head>
<body>
    <p>歐元符號:&euro;</p>
    <p>英鎊符號:&pound;</p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

上面特殊符號效果,使用下面代碼同樣能實現,在浏覽器預覽效果是一樣的:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>特殊符號</title>
</head>
<body>
    <p>歐元符號:€</p>
    <p>英鎊符號:£</p>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved