چهارشنبه ۱۲ بهمن ۱۴۰۱

Wednesday, February 1, 2023 GMT +3:30

نحوه درج علامت های خاص در HTML

html-special-characters

شاید تا به حال پیش آمده باشد که بخواهید حرف یا کاراکتر خاصی را در صفحات وب و کدهای HTML درج کنید ولی با وجود جستجو و دقت در صفحه کلید یا آزمون و خطای ترکیب کلید های مختلف، به نتیجه مورد نظر نرسیده باشید، به طور مثال علائمی مانند ©، ®، ♥، ♦، ← و... معمولا به صورت عادی در صفحه کلید دیده نمی شوند و برای درج آنها باید از ترفندهایی که در ادامه خواهیم دید استفاده نمائیم، البته این ترفندها نیز خود متکی بر ترکیب کلیدهای مختلف یا بر اساس کدهای عددی و حروفی استاندارد هستند که در ادامه با آنها بیشتر آشنا خواهیم شد.

استاندارد مرورگرهای وب


قبل از ادامه آموزش بد نیست اشاره ای داشته باشیم به استانداردهای پشتیبانی شده توسط مرورگر های وب، توضیح اینکه مرورگرها برای نمایش حروف، اعداد و علائم به شکل درست، از استانداردهای تعریف شده ای پیروی می کنند که توسط نهادهای پژوهشی و بین المللی (کنسرسیوم استاندارد کاراکترها یا Unicode Consortium) ایجاد شده اند، به طور مثال در ابتدای پیدایش وب، مرورگر ها تنها از استاندارد ISO-8859-1 که شامل حروف و اعداد انگلیسی و برخی علائم بود، استفاده می کردند (که به آن ASCII گفته می شود، ASCII استاندارد پیش فرض وب است)، اما به تدریج به جهت فراوانی و نیاز سایر زبان ها، استانداردهای تعریف شده دیگری نیز توسط مرورگرها پشتیبانی شد، از جمله ISO-8859-6 برای زبان عربی، ISO-8859-7 برای زبان یونانی و...، اما کثرت زبان های دنیا متخصصان را به فکر ایجاد استانداردی فراگیرتر به نام UTF-8 یا (Unicode Transformation Format) انداخت تا اینکه با ایجاد آن الگویی فراگیر در حوزه وب شکل گرفت، البته نسخه های دیگری نیز از استاندارد ISO و UTF وجود دارد (به طور مثال UTF-16)، ولی پایه و اساس وب دو نسخه ISO-8859-1 یا همان ASCII و استاندارد UTF-8 هستند، اکنون در چارچوب این استانداردها است که می توانیم با ترکیب حروف، علائم و اعداد، کاراکترهای ویژه ای فراتر از تگ های معمولی HTML خلق کنیم که به طور عادی در صفحه کلید کامپیوترمان دیده نمی شوند.

جدول علامت های خاص و نحوه درج آنها


در جدول زیر علامت های خاص و نحوه درج آنها قید شده است، البته به دلیل گستردگی این کاراکترها، در اینجا تنها به مواردی که جزء استاندارد ASCII هستند، اشاره می کنیم.
کاراکترمعادل HTML - حروفیمعادل HTML - عددیمیانبرتوضیح
‘‘Alt+0145نقل قول
’’Alt+0146-
‚‚--
““Alt+0147-
””Alt+0148-
„„--
††Alt+0134خنجر
‡‡Alt+0135خنجر مضاعف
 …-چند نقطه
‰‰Alt+0137در هزار
‹‹Alt+0139اشاره راست
››Alt+0155اشاره چپ
♠♠-بیلچه
♣♣-کلوب
♥♥-قلب
♦♦-الماس
‾‾-خط
←←-فلش چپ
↑↑-فلش بالا
→→-فلش راست
↓↓-فلش پائین
™™Alt+0153نماد تجاری
"""-نقل قول
&&&-امپرسند
<&lt;&#60;-کوچکتر از
>&gt;&#62;-بزرگتر از
[ &#91;-قلاب
] &#93;-قلاب
&ndash;&#150;Alt+0150خط
&mdash;&#151;Alt+0151خط مضاعف
 &nbsp;&#160;Alt+0160فضای خالی
¡&iexcl;&#161;Alt+0161تعجب برعکس
¢&cent;&#162;Alt+0162سنت
£&pound;&#163;Alt+0163لیره
¤&curren;&#164;Alt+0164پول رایج
¥&yen;&#165;Alt+0165ین
¦&brvbar; یا &brkbar;&#166;Alt+0166خط شکسته
§&sect;&#167;Alt+0167علامت بخش
¨&uml; یا &die;&#168;Alt+0168ادغام
©&copy;&#169;Alt+0169کپی رایت
ª&ordf;&#170;Alt+0170اعداد ترتیبی
«&laquo;&#171;Alt+0171گیومه چپ
¬&not;&#172;Alt+0172نماد هیچ
­&shy;&#173;Alt+0173فاصله
®&reg;&#174;Alt+0174ثبت تجاری
¯&macr; یا &hibar;&#175;Alt+0175علامت صدای کشیده
°&deg;&#176;Alt+0176درجه
±&plusmn;&#177;Alt+0177جمع و تفریق
²&sup2;&#178;Alt+0178بالانویس
³&sup3;&#179;Alt+0179بالانویس
´&acute;&#180;Alt+0180صدای زیر
µ&micro;&#181;Alt+0181علامت میکرو
&para;&#182;Alt+0182پاراگراف
·&middot;&#183;Alt+0183نقطه
¸&cedil;&#184;Alt+0184صدای z برای حرف s
¹&sup1;&#185;Alt+0185بالانویس
º&ordm;&#186;Alt+0186اعداد ترتیبی
»&raquo;&#187;Alt+0187گیومه راست
¼&frac14;&#188;Alt+01881 بر روی 4
½&frac12;&#189;Alt+01891 بر روی 2
¾&frac34;&#190;Alt+01903 بر روی 4
¿&iquest;&#191;Alt+0191علامت سوال برعکس
À&Agrave;&#192;Alt+0192-
Á&Aacute;&#193;Alt+0193-
Â&Acirc;&#194;Alt+0194-
Ã&Atilde;&#195;Alt+0195-
Ä&Auml;&#196;Alt+0196-
Å&Aring;&#197;Alt+0197-
Æ&AElig;&#198;Alt+0198-
Ç&Ccedil;&#199;Alt+0199-
È&Egrave;&#200;Alt+0200-
É&Eacute;&#201;Alt+0201-
Ê&Ecirc;&#202;Alt+0202-
Ë&Euml;&#203;Alt+0203-
Ì&Igrave;&#204;Alt+0204-
Í&Iacute;&#205;Alt+0205-
Î&Icirc;&#206;Alt+0206-
Ï&Iuml;&#207;Alt+0207-
Ð&ETH;&#208;Alt+0208-
Ñ&Ntilde;&#209;Alt+0209-
Ò&Ograve;&#210;Alt+0210-
Ó&Oacute;&#211;Alt+0211-
Ô&Ocirc;&#212;Alt+0212-
Õ&Otilde;&#213;Alt+0213-
Ö&Ouml;&#214;Alt+0214-
×&times;&#215;Alt+0215علامت ضرب
Ø&Oslash;&#216;Alt+0216-
Ù&Ugrave;&#217;Alt+0217-
Ú&Uacute;&#218;Alt+0218-
Û&Ucirc;&#219;Alt+0219-
Ü&Uuml;&#220;Alt+0220-
Ý&Yacute;&#221;Alt+0221-
Þ&THORN;&#222;Alt+0222-
ß&szlig;&#223;Alt+0223-
à&agrave;&#224;Alt+0224-
á&aacute;&#225;Alt+0225-
â&acirc;&#226;Alt+0226-
ã&atilde;&#227;Alt+0227-
ä&auml;&#228;Alt+0228-
å&aring;&#229;Alt+0229-
æ&aelig;&#230;Alt+0230-
ç&ccedil;&#231;Alt+0231-
è&egrave;&#232;Alt+0232-
é&eacute;&#233;Alt+0233-
ê&ecirc;&#234;Alt+0234-
ë&euml;&#235;Alt+0235-
ì&igrave;&#236;Alt+0236-
í&iacute;&#237;Alt+0237-
î&icirc;&#238;Alt+0238-
ï&iuml;&#239;Alt+0239-
ð&eth;&#240;Alt+0240-
ñ&ntilde;&#241;Alt+0241-
ò&ograve;&#242;Alt+0242-
ó&oacute;&#243;Alt+0243-
ô&ocirc;&#244;Alt+0244-
õ&otilde;&#245;Alt+0245-
ö&ouml;&#246;Alt+0246-
÷&divide;&#247;Alt+0247علامت تقسیم
ø&oslash;&#248;Alt+0248-
ù&ugrave;&#249;Alt+0249-
ú&uacute;&#250;Alt+0250-
û&ucirc;&#251;Alt+0251-
ü&uuml;&#252;Alt+0252-
ý&yacute;&#253;Alt+0253-
þ&thorn;&#254;Alt+0254-
ÿ&yuml;&#255;Alt+0255-
نکته 1: برخی از علائم با عبارات استاندارد متشکل از حروف و اعداد و برخی نیز به وسلیه میانبرهای صفحه کلید قابل درج هستند.
نکته 2: برای درج کاراکترها توسط میانبرهای صفحه کلید، کلید Alt را نگه داشته و سپس شماره متناظر را از قسمت شماره های سمت راست به ترتیب بزنید، دقت کنید که چراغ Num Lock روشن و فعال باشد.
نکته 3: همان طور که ملاحظه می کنید، معادل کاراکترهای خاص چه به صورت حروفی و چه به صورت عددی، با علامت & شروع شده و با علامت ; بسته می شوند.
دسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
نحوه متحرک ساختن متن با تگ marquee در HTML
کاربرد متاتگ refresh در صفحات وب (HTML)
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
دیدگاه
more ۲۵ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
۱۴:۱۶ ۱۳۹۷/۰۷/۱۲
سلام دوستان عزیز من میخوام آیکن تماس با قابلیت شماره گیری مستقیم و آیکن ایمیل و شبکه های اجتماعی رو تو یه خط‌ بیارم تو html و php چه کدی باید نوشته بشه؟
برای کنار هم قرار گرفتن افقی عناصر وب معمولا از خاصیت display با مقدار inline یا inline-block در استایل CSS استفاده می شود، باید در قسمت استایل CSS تگ های HTML خود این خاصیت را تعریف کنید.
اکبر
۱۸:۰۳ ۱۳۹۷/۰۸/۱۹
سلام. ببخشید اینجا می پرسم سایتو گشتم پیدا نکردم.
برای ضخیم کردن تگ hr چه کدی رو باید بهش بدیم.
برای اعمال تغییرات سفارشی بر روی تگ hr می توانیم از استایل CSS استفاده کنیم، مثال:
<style>
.hr-1{
border: 0;
border-top: 5px solid #666;
}
.hr-2{
height: 4px;
}
</style>
<hr class="hr-1">
<hr class="hr-2">
علی
۱۶:۴۶ ۱۳۹۸/۰۵/۲۷
سلام من میخوام تو صفحه html همچین طرحی رو بندازم میشه راهنماییم کنید (به صورت جداگانه یعنی هر کدوم توی یه صفحه)
***** *
**** **
*** ***
** ****
* *****
در صورتی که فایل تصویر گرافیکی (با فرمت jpg، png و...) این اشکال را در اختیار داشته باشید می توانید با نرم افزارهای تبدیل تصویر به اشکال متنی (در وب جستجو کنید) این کار را انجام دهید در غیر اینصورت باید به صورت دستی کاراکترها را در سورس HTML مطالب یا صفحات سایت درج کنید.
سعید سلیمانی
۲۳:۳۳ ۱۳۹۸/۰۷/۲۹
سلام ممنون از آموزش جالبتون ولی بنده هم یه ترفند خیلی ساده دارم که میشه بدون یاد گرفتن این علائم هر سیمبولی را که دوست داشته باشیم در Html مشاهده کنیم فقط کافیه اون سیمبول مورد نظر را در برنامه آفیس ورد با استفاده از تب insert>symbol درج کرده و سپس کپی کنیم داخل کدهای اچ تی ام ال و با استفاده از تگ <pre> اون رو ثبت و در مرورگرها استفاده کنیم مثلا <pre>®</pre> به همین سادگی برای کلیه سیمبولها قابل استفاده است تست کردم. لطفا منتشر کنید شاید دوستان بخوان استفاده کنن
سپاس فراوان از به اشتراک گذاری.
فرید
۱۲:۱۹ ۱۳۹۸/۱۱/۰۷
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
برای نماد @ (At Sign) در HTML می توانید از معادل های زیر استفاده کنید:
&#64;

&commat;
مریم
۱۷:۴۵ ۱۴۰۰/۰۲/۱۲
سلام.
من با php یه API رو فراخوانی می کنم. و اطلاعات فارسی هستن. اما به صورت
\u0627\u0633\u062a\u0627\u062f\u064a
نمایش داده میشه. چیکار کنم بشه UTF8 ؟
خیلی توی اینترنت گشتم مواردی که گفتن به کارم نیومد.
این کد کامل هست.
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https:/e",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_SSL_VERIFYHOST => false,
CURLOPT_SSL_VERIFYPEER => false,
CURLOPT_HTTPHEADER => array(
"cache-control: no-cache",
),
));

$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
echo ($response);
این شیوه کد شدن کاراکترها معمولا در نقل و انتقال داده های JSON مشاهده می شود، برای بازگردان به حالت عادی می توانیم از تابع json_decode به شکل نمونه زیر استفاده کنیم که کلمه "استادي" را در خروجی چاپ می کند:
<?php
header('Content-Type: text/html; charset="UTF-8"');
$str = '["\u0627\u0633\u062a\u0627\u062f\u064a"]';
$convert = json_decode($str, true);
//var_dump($convert);
echo $convert[0];
?>
دقت کنیم در این نمونه کد برای اینکه رشته ما به صورت فرمت JSON باشد کاراکترهای [] را اضافه کرده ایم، خروجی API احتمالا به صورت پیش فرض JSON است و نیازی نیست فرایند بالا انجام شود.
مریم
۲۲:۴۱ ۱۴۰۰/۰۲/۱۲
ممنونم خیلی عالی راهنمایی کردین.
این کد خیلی خوب بود
$convert = json_decode($str, true);
echo $convert['x'];
ابوالفضل
۰۰:۵۰ ۱۴۰۱/۰۱/۰۷
سلام استاد
یک فایل داریم که مدام اطلاعات جدیدی درونش به صورت زیر ذخیره میشود
16:24:10:516;Wr_5 => @03WD3001000052*[0D]
16:24:10:562;Rd_5 <= @03WD0050*[0D]
البته 16:24:10 رو مطمئنم زمان هستش به نظرتون این اطلاعات کد شده اسکی هست؟ مثلا
@03WD0050*[0D]
یعنی چی؟
به نظر نمی رسد رمزنگاری خاصی صورت گرفته باشد، شبیه خروجی هیچ الگوریتم آشنایی نیست، بیشتر شبیه ذخیره سازی مقادیر عددی و تاریخ به صورت خطی و خلاصه است که برای استفاده های بعدی به پارامترهای کوچکتر تجزیه می شود، اگر رمزنگاری باشد احتمالا الگوریتم آن شخصی است و به نظر بدون داشتن رمز به راحتی قابل دیکد شدن نباشد.
Atefeh Hazratzad
۰۷:۳۰ ۱۴۰۱/۰۲/۰۲
سلام وقتتون بخير
وقتي كد هاي اسكي رو تايپ مي كنم، به جاي اون علامت خاص، يه علامت سوال كه داخل لوزي هست، بهم نشون ميده، شما مي دونيد مشكل كجاست؟!
در کل این موارد به بحث تنظیم صحیح یونیکد مربوط می شود اما ریشه مشکل می تواند دلایل مختلف و راه حل های متفاوتی داشته باشد، لطفا کد را داخل یک صفحه وب درج کنید تا امکان بررسی و ارائه راه حل وجود داشته باشد.
پارسا
۲۱:۵۴ ۱۴۰۱/۰۹/۲۱
ببخشید چطور سایز هاشون و اندازه هاشون رو بزرگ تر کنیم ؟
در ساده ترین حالت می توانیم علامت را در تگ span یا p قرار دهیم و با اختصاص صفت style و خاصیت font-size اندازه نمایشی کاراکتر را کم و زیاد کنیم:
<span style="font-size: 56px;"></span>
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
5 × 9
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
علی رستگار
سلام خسته نباشید با تشکر از سایت خوبتون. من میخوام منوی سایت رو به صورت کامل از دید گوگل مخفی کنم، در حال حاضر...
۱۴۰۱/۱۱/۱۱

m.b
با سلام و خسته نباشید من یک سوال دارم . تو فرم لاگین بعد از لاگین کردن کاربر میخوام تاریخ و ساعت آخرین زمان...
۱۴۰۱/۱۱/۰۶

سینا
با سلام و درود من چهار تا داده به شیوه زیر دارم میخوام با php کوچکترین تاریخ هر دو کاربر ۲ و ۳...
۱۴۰۱/۱۱/۰۶

امیرحسین رستمی
سلام وقت بخیر یه همچین ارایه ای داریم میخوام همه حالت های حروفو بدست بیارم مثل بازی کلماتیک که هر حرف دوبار تکرار نشه...
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
اینم لینک مستقیمش حتی لطفا خودتون با این لینک یا هر لینک آهنگ درست کنید بزارین ببینم
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
هر چی میزارم رو پخش خودکار ولی تا وقتی روش کلیک نکنی پخش نمیشه چرا؟؟ رو اتو پلیِ ! هزارتا راهو روش رو رفتم جواب...
۱۴۰۱/۱۱/۰۵

نور
سلام این کد ابتدای وبلاگه منه چطور میتونم به آدرس لینکی که توش میشه تغییرات کد رنگ ها رو انجام داد دسترسی پیدا...
۱۴۰۱/۱۱/۰۴

پــــرتو
سلام خسته نباشید شرمنده دوباره مزاحم میشم نه انگار متوجه سوالم نشدین ، عه جناب منظورم این هستش که یه کدی دارم و میخاستم ویرایشش...
۱۴۰۱/۱۱/۰۳

پــــرتو
سلام جناب خسته نباشید شاید این سوالم تکراری باشه ولی خب راستش نمیدونم سوالمو کجا ثبت کردم واسه همین دوباره می پرسم ببخشید...
۱۴۰۱/۱۱/۰۳

پژمان
با سلام من یک سوال دارم می خواستم ببینم چطور میشه وقتی صفحات سایت عوض می شن هدر و فوتر ثابت بمونه و فقط محتویات...
۱۴۰۱/۱۱/۰۱

سینا
با سلام و با تشکر از شما از لطف و محبت شما بسیار ممنون و سپاسگزارم ببخشید این چند خیلی پیام دادم و مزاحم...
۱۴۰۱/۱۰/۲۹

سینا
با سلام و درود من یه کد نوشتم که برای id های پشت سر هم جواب میده و زمان رو برام تغییر میده وقتی...
۱۴۰۱/۱۰/۲۹

سینا
باسلام مجدد و درود برشما واسه مطالب جدید راحته آخرین مطلب رو با کوئری زدن توی دیتابیس پیدا کنم و برای مطلب بعدش آپدیت...
۱۴۰۱/۱۰/۲۸

سینا
با تشکر از شما استاد بزرگوارم اینو شب تست می کنم من واسه آپدیت کردن تایم لازم دارم توضیح کامل به اینصورت: واسه...
۱۴۰۱/۱۰/۲۷

سینا
با سلام و درود بر شما راهی هست توی mysql من داده های یک جدول رو که عددی هستند به صورت زیر آپدیت کنم!...
۱۴۰۱/۱۰/۲۶

علی داوری
سلام. چطور از فایل های داخلی کامپیوتر برای آیکون سایت استفاده کنیم؟ مسیر عکسو تو href کپی میکنم اتفاقی نمیفته
۱۴۰۱/۱۰/۲۴

سینا
شرمنده تورو خدا ببخشید الان یه سوال دیگه و یه مشکل دیگه هم دارم ممنون میشم راهنمایی کنید یه قسمت از سایتم مطالب رو...
۱۴۰۱/۱۰/۲۲

سینا
با تشکر از شما بخاطر پاسخ قبلی بسیار از لطف شما سپاسگزارم شرمنده یه سوال دیگه هم داشتم راهی وجود داره موقع export کردن...
۱۴۰۱/۱۰/۲۲

سینا
با سلام و خسته نباشید من یه صفحه دارم مثلا اول یه متنی رو echo می کنم رو وارد کنه با...
۱۴۰۱/۱۰/۲۱

ali
میخواستم حالت تصویر بدم بدون استفاده از list_style_image روشی هست بشه طراحی کرد
۱۴۰۱/۱۰/۲۰

محمد جواد
با سلام ... من میخوام اطلاعات محصولی که داخل دیتابیس mysql هست رو بجای ستونی ، ردیفی نمایش بدم برای نمایشش چطوری باید کد...
۱۴۰۱/۰۹/۲۷

کاربر
سلام هر کاری کردم جواب نداد
۱۴۰۱/۰۹/۲۳

پارسا
ببخشید چطور سایز هاشون و اندازه هاشون رو بزرگ تر کنیم ؟
۱۴۰۱/۰۹/۲۱

ابراهیم جهانگیری
حدود سه روز بود دنبال این مطلب بودم . ممنون از شما
۱۴۰۱/۰۹/۱۶

پــــرتو
سلام خسته نباشید ببخشید اگر بخایم همین منو رو بصورت عمودی بخایم انجامش بدیم باید از چه کدی استفاده کنیم و اگر بخایم برای قالبمون...
۱۴۰۱/۰۹/۱۵

میثم
بسیار سپاسگزار و ممنونم. واقعا عالی بود.
۱۴۰۱/۰۹/۱۵

میثم
ممنونم خیلی عالی بود. کلی محاسبات ریاضی انجام دادم :) اخرش یه شرط دیگه میخواست! حالا یه سوال: در حال حاضر بعد از...
۱۴۰۱/۰۹/۱۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.