مرحله 1: باز کردن یک فایل HTML یک ویرایشگر متن یا یک محیط توسعه یکپارچه (IDE) مانند Visual Studio Code، Sublime Text یا Atom را باز کنید. یک فایل HTML جدید ایجاد کنید یا یک فایل موجود را باز کنید.
مرحله 2: بخش نظر دادن را پیدا کنید بخشی از کد HTML را که میخواهید در آن نظر اضافه کنید، شناسایی کنید. نظرات را می توان در هر جایی از برچسب های </code> قرار داد.</p>
<p><strong>مرحله 3: شروع یک نظر</strong> برای شروع نظر، از نویسههای <code class="inline"><!--
استفاده کنید. این شروع یک نظر HTML را نشان می دهد.
مرحله 4: نظر خود را اضافه کنید نظر خود را بین <!--
و -->
بنویسید شخصیت ها. میتوانید هر اطلاعاتی را که برای خود یا دیگر توسعهدهندگانی که روی کد کار میکنند مرتبط یا مفید میدانید، اضافه کنید.
<!-- این یک نظر است. در صفحه وب نمایش داده نخواهد شد. -->
مرحله 5: فایل HTML خود را ذخیره کنید فایل HTML خود را با پسوند مناسب (به عنوان مثال html.) ذخیره کنید. مطمئن شوید که یک نام فایل معنی دار انتخاب کنید که محتوای آن را منعکس کند.
مرحله 6: صفحه وب خود را مشاهده کنید فایل HTML ذخیره شده خود را در یک مرورگر وب باز کنید تا صفحه وب خود را مشاهده کنید. به یاد داشته باشید که نظرات در صفحه وب واقعی نمایش داده نمی شوند. آنها فقط در کد منبع قابل مشاهده هستند.
مرحله ۷: اصلاح و بهروزرسانی نظرات اگر نیاز به اصلاح یا بهروزرسانی نظرات خود دارید، به سادگی به فایل HTML خود برگردید، تغییرات لازم را انجام دهید و دوباره آن را ذخیره کنید. هنگامی که صفحه وب خود را به روز می کنید، تغییرات منعکس می شود.
مرحله 8: حذف نظرات برای حذف نظرات، همه موارد بین <!--
و --></ را حذف کنید. کد> کاراکترها. همچنین، میتوانید با افزودن یک <code class="inline"><!--
در ابتدا و یک -->
کل خط نظر را نظر دهید. در پایان.
<!-- این نظر حذف خواهد شد. -->
خودشه! اکنون می دانید که چگونه نظرات را در HTML اضافه کنید، تغییر دهید و حذف کنید.
32 نکته برای اظهار نظر در HTML
-
- از نظرات برای توضیح بخش های کد پیچیده یا ارائه زمینه برای مراجعات بعدی استفاده کنید.
- نظرات خود را مختصر و دقیق نگه دارید.
- از اظهار نظر بیش از حد که ممکن است کد شما را به هم ریخته کند اجتناب کنید.
- از نظرات برای غیرفعال کردن موقت کد بدون حذف کامل آن استفاده کنید.
- در هنگام اشکالزدایی یا عیبیابی بخشهایی از کد را نظر دهید.
- کد خود را هنگام نوشتن نظر دهید تا وضوح آن حفظ شود.
- برای اطمینان از صحت، نظرات قدیمی را بهروزرسانی یا حذف کنید.
- از نظرات برای نشان دادن هدف یا عملکرد عناصر یا ویژگی های خاص HTML استفاده کنید.
- درباره راهحلها یا هکهایی که پیادهسازی کردهاید نظر دهید.
- برای روشن شدن هدف پشت انتخاب های طراحی خود نظراتی را اضافه کنید.
- از نظرات برای مستندسازی وابستگی ها یا منابع خارجی استفاده شده در فایل HTML خود استفاده کنید.
- برای خوانایی، از سبکهای نظر منسجم در پروژه خود استفاده کنید.
- از گذاشتن کد اظهار نظر به طور نامحدود خودداری کنید. میتواند توسعه دهندگان دیگر را گیج کند.
- از نظرات در بخش های کد خود توضیحی کم استفاده کنید.
- تغییرات مهم ایجاد شده در کد را با استفاده از نظرات مستند کنید.
- نظرات را قبل از بلوکهای کد پیچیده اضافه کنید تا نمای کلی از عملکرد آنها ارائه شود.
- در مورد هرگونه مشکل یا اشکال احتمالی که در کد خود با آن مواجه می شوید نظر دهید.
- استفاده از یک قرارداد نامگذاری ثابت برای عناصر HTML و مراجع نظر خود را در نظر بگیرید.
- از نظرات برای نشان دادن پیشرفتها یا ویژگیهایی که قصد اجرای آن را دارید استفاده کنید.
- در مورد هر بهینه سازی عملکردی که در کد شما انجام شده است نظر دهید.
- هنگام ادغام کتابخانه ها یا چارچوب های شخص ثالث در فایل HTML خود نظراتی را اضافه کنید.
- در مورد مشکلات سازگاری بین مرورگرها و راه حل های مربوط به آنها نظر دهید.
- از نظرات برای ارائه کدهای جایگزین یا تغییرات برای سناریوهای خاص استفاده کنید.
- در مورد هرگونه ملاحظات امنیتی یا آسیب پذیری در کد خود نظر دهید.
- از نظرات برای مستندسازی هدف و استفاده از کلاسها و شناسههای CSS سفارشی استفاده کنید.
- در مورد هرگونه ملاحظات دسترسی یا ویژگی های ARIA استفاده شده در فایل HTML خود نظر دهید.
- برای توضیح ساختارهای داده یا الگوریتمهای پیادهسازی شده در کد خود، نظراتی را اضافه کنید.
- درباره راهحلها یا هکهای خاص مرورگر که استفاده کردهاید، نظر دهید.
- از comments برای نشان دادن ویژگی ها یا عناصر منسوخ شده که باید از آنها اجتناب شود.
- درباره هر جنبه محلی سازی یا بین المللی سازی فایل HTML خود نظر دهید.
- برای برجسته کردن هر تصمیم مهم طراحی که در طول توسعه گرفته شده است، نظراتی را اضافه کنید.
- در مورد هرگونه محدودیت یا اخطار شناخته شده کد خود نظر دهید.
این نکات به شما کمک می کند تا به طور موثر از نظرات در HTML برای بهبود خوانایی، همکاری و قابلیت نگهداری کد استفاده کنید.
راهنمای کامل برای اظهار نظر HTML
کامنت گذاری HTML روشی مفید برای توسعه دهندگان است تا کد خود را حاشیه نویسی کنند و اطلاعات اضافی را بدون تأثیر بر نمایش واقعی صفحه وب ارائه دهند. در اینجا یک راهنمای کامل برای کامنت گذاری HTML وجود دارد که جنبه های مختلف را پوشش می دهد:
- نظرات HTML چیست؟ نظرات HTML حاشیه نویسی متنی هستند که در کد منبع یک فایل HTML اضافه شده است. آنها در صفحه وب ارائه شده قابل مشاهده نیستند اما در منبع صفحه قابل مشاهده هستند.
- Syntax برای نظرات HTML نظرات HTML با
<!--
شروع می شود و با --></ ختم می شود. کد>. هر چیزی بین این جداکننده ها یک نظر در نظر گرفته می شود.
هدف نظرات HTML نظرات HTML چندین هدف را انجام می دهند، از جمله:
- افزودن یادداشتها یا یادآوریها برای توسعهدهندگانی که روی پایگاه کد کار میکنند.
- توضیح بخش های پیچیده کد برای مراجعات بعدی.
- غیرفعال کردن موقت کد بدون حذف کامل آن.
- مستند کردن انتخابها، وابستگیها یا راهحلهای طراحی.
- قرار دادن نظرات HTML نظرات HTML را میتوان در هر جایی از برچسبهای
</code> قرار داد، تا زمانی که در داخل سایر برچسبها (به عنوان مثال، <code) قرار نگیرند. class="inline">، <code class="inline">
، و غیره). می توان از آنها برای اظهار نظر روی عناصر، بخش ها یا کل بلوک های کد استفاده کرد.
بهترین روشها برای نظرات HTML برای استفاده حداکثری از نظرات HTML، بهترین روشهای زیر را در نظر بگیرید:
- نظرات را مختصر و متمرکز نگه دارید.
- از زبانی واضح و توصیفی استفاده کنید.
- از اظهار نظر بیش از حد که ممکن است کد را به هم ریخته کند، خودداری کنید.
- نظرات قدیمی را بهروزرسانی یا حذف کنید.
- از سبک های نظر منسجم در پروژه خود استفاده کنید.
- برای وضوح بهتر هنگام نوشتن کد نظر دهید.
- کد نظر داده شده را که دیگر مورد نیاز نیست حذف کنید.
نمونههای نظر HTML در اینجا چند نمونه از نحوه استفاده از نظرات HTML آورده شده است:
<!-- این یک نظر است. -->
</code></pre>
</li>
<li><strong>کامنت گذاشتن کد</strong> برای غیرفعال کردن موقت بخشی از کد بدون حذف آن، میتوانید با استفاده از نظرات HTML آن را نظر دهید. این در هنگام اشکال زدایی یا هنگام آزمایش راه حل های جایگزین مفید است.</li>
<li><strong>حذف نظرات HTML</strong> برای حذف نظرات HTML، به سادگی <code class="inline"><!--
و -->< را حذف کنید. /code> جداکننده ها به همراه متن نظر.
مراحل، نکات و دستورالعملها درک جامعی از نحوه استفاده مؤثر از کامنتگذاری HTML در پروژههای توسعه وب شما ارائه میدهند.
فهرست راههای بهینهسازی HTML
بهینه سازی HTML میتواند زمان بارگذاری صفحه وب و عملکرد کلی را به میزان قابل توجهی بهبود بخشد. در اینجا چندین راه برای بهینه سازی HTML وجود دارد:
- کوچک کردن HTML: کوچکسازی شامل حذف کاراکترهای غیرضروری از کد HTML است، مانند فضای خالی، شکستگی خط و نظرات. این باعث کاهش حجم فایل و بهبود سرعت بارگیری می شود.
- ترکیب CSS و جاوا اسکریپت: ترکیب فایلهای CSS و جاوا اسکریپت خارجی در یک فایل واحد، تعداد درخواستهای HTTP ارائه شده توسط مرورگر را کاهش میدهد و زمان بارگذاری صفحه را بهبود میبخشد.
- CSS بحرانی درون خطی: درونسازی CSS حیاتی مستقیماً در فایل HTML درخواستهای اضافی HTTP را حذف میکند و به مرورگر اجازه میدهد صفحه را سریعتر ارائه دهد.
- استفاده از HTML معنایی: از برچسب های HTML معنایی برای ارائه ساختار معنادار و بهبود دسترسی استفاده کنید. این به موتورهای جستجو کمک می کند محتوا را بهتر درک کنند.
- بهینه سازی تصاویر: تصاویر را با استفاده از فرمت های مناسب (مانند JPEG، PNG) فشرده کنید و اندازه فایل آنها را بدون کاهش کیفیت کاهش دهید. این کار استفاده از پهنای باند را کاهش می دهد و زمان بارگذاری صفحه را بهبود می بخشد.
- اجرای بارگذاری تنبل: بارگیری تنبل بارگیری منابع غیر مهم (مانند تصاویر یا ویدیوها) را تا زمانی که نیاز باشد به تاخیر می اندازد و زمان بارگذاری اولیه صفحه را بهبود می بخشد.
- کاهش تغییر مسیرها: تعداد تغییر مسیرها را در کد HTML خود به حداقل برسانید تا از unn جلوگیری کنیددرخواست های HTTP ضروری و کاهش تاخیر.
- فعال کردن فشردهسازی: فشردهسازی GZIP را در سرور وب خود فعال کنید تا اندازه فایلهای HTML در حین انتقال کاهش یابد و در نتیجه زمان بارگذاری سریعتر شود.
- بهینه سازی فونت ها: از فونت های ایمن برای وب استفاده کنید یا به جای بارگیری چندین فایل فونت، از فونت های نماد استفاده کنید و تعداد درخواست های HTTP را کاهش دهید.
- منابع مسدود کننده رندر را حذف کنید: منابع مسدود کننده رندر را که مانع از رندر سریع صفحه توسط مرورگر میشوند، شناسایی و حذف یا به تعویق بیندازید.
- استفاده از اسکریپتهای خارجی با ویژگیهای Async یا Defer: فایلهای جاوا اسکریپت خارجی را بهصورت ناهمزمان بارگیری کنید یا اجرای آنها را به تعویق بیندازید تا مانع از بارگیری منابع دیگر نشود.
- حذف کد استفاده نشده: برای کاهش اندازه فایل و بهبود عملکرد، هر عنصر HTML، اسکریپت یا شیوه نامه استفاده نشده یا غیر ضروری را از صفحات وب خود حذف کنید.
- بهینه سازی تحویل CSS: تحویل CSS را با حذف CSS مسدود کننده رندر، کاهش اندازه فایل ها و استفاده از تکنیک های ذخیره سازی بهینه کنید.
- استفاده از CDN: از شبکههای تحویل محتوا (CDN) برای توزیع فایلهای HTML خود در چندین سرور، کاهش تأخیر و بهبود زمان بارگذاری برای کاربران در مکانهای مختلف استفاده کنید.
- افزایش حافظه پنهان مرورگر: سرصفحههای کش مناسب را تنظیم کنید تا به مرورگر اجازه دهد فایلهای HTML را ذخیره کند و نیاز به دانلودهای مکرر را کاهش دهد.
- به حداقل رساندن اندازه DOM: پیچیدگی و اندازه مدل شیء سند (DOM) را با کاهش عناصر تو در تو و بهینه سازی تعاملات جاوا اسکریپت به حداقل برسانید.
- استفاده از Preload و Prefetch: برای نشان دادن منابع مورد نیاز از برچسب های
</code> و <code class="inline">
استفاده کنید در آینده، به مرورگر اجازه می دهد تا آنها را از قبل واکشی کند.
- بهینه سازی فونت های وب: از تکنیک هایی مانند زیرمجموعه فونت، ذخیره فونت، یا استفاده از فونت های سیستم برای بهینه سازی بارگیری فونت وب و به حداقل رساندن تأثیر عملکرد استفاده کنید.
- جلوگیری از CSS و جاوا اسکریپت داخلی: استفاده از کدهای CSS و جاوا اسکریپت درون خطی را در فایلهای HTML به حداقل برسانید زیرا میتواند اندازه فایل را افزایش دهد و قابلیت نگهداری را کاهش دهد.
- پردازش سمت سرور (SSR) را در نظر بگیرید: رندر سمت سرور میتواند زمان بارگذاری اولیه صفحه را با رندر کردن HTML روی سرور قبل از ارسال آن به مشتری، بهبود بخشد.
- استراتژیهای حافظه پنهان را پیادهسازی کنید: استراتژیهای کش را در هر دو سطح سرور و کلاینت اجرا کنید تا نیاز به درخواستهای مکرر HTML را کاهش دهید.
- کاهش وابستگیهای خارجی: وابستگیهای خارجی مانند اسکریپتهای شخص ثالث یا کتابخانههایی را که میتوانند درخواستهای HTTP اضافی و گلوگاههای بالقوه عملکرد را معرفی کنند، به حداقل برسانید.
- بهینه سازی اسکریپت های شخص ثالث: اسکریپت های شخص ثالث را با بارگیری ناهمزمان یا به تعویق انداختن اجرای آنها تجزیه و تحلیل و بهینه سازی کنید تا از تأثیرگذاری بر زمان بارگذاری صفحه جلوگیری کنید.
- نظارت بر عملکرد: به طور منظم عملکرد وب سایت خود را با استفاده از ابزارهایی مانند گوگل PageSpeed Insights، Lighthouse یا WebPageTest نظارت کنید تا زمینه های بهبود را شناسایی کنید.
- علامت گذاری HTML را ساده نگه دارید: از پیچیدگی غیرضروری در نشانه گذاری HTML خودداری کنید و از سادگی و خوانایی برای بهبود قابلیت نگهداری و عملکرد استفاده کنید.
با اجرای این تکنیک های بهینه سازی، میتوانید سرعت، کارایی و عملکرد کلی صفحات وب مبتنی بر HTML خود را افزایش دهید.
فهرست روشهای جدید برای بهینهسازی HTML
روشهای بهینهسازی HTML با ظهور فناوریهای جدید و بهترین شیوهها به تکامل خود ادامه میدهند. در اینجا لیستی از چند روش جدیدتر برای بهینه سازی HTML آمده است:
- پروتکل HTTP/2: از پروتکل HTTP/2 استفاده کنید، که مالتی پلکس، فشار سرور و سایر بهبودهای عملکرد را نسبت به نسخه قبلی خود (HTTP/1.1) معرفی میکند.
- نکات منبع: از نکات منابع مانند
</code>، <code class="inline">
یا </code> برای ارائه نکاتی در مورد منابعی که در آینده به مرورگر نیاز خواهند داشت.</li>
<li><strong>استخراج CSS حیاتی</strong>: استخراج CSS حیاتی با استفاده از ابزارها یا فرآیندهای ساخت به منظور درج مستقیم آن در فایل HTML و کاهش تعداد درخواستهای مسدود کننده رندر.</li>
<li><strong>فرمت تصویر WebP</strong>: تصاویر را به فرمت WebP تبدیل کنید، که فشرده سازی بهتر و اندازه فایل کوچکتر را در مقایسه با فرمت های سنتی مانند JPEG یا PNG ارائه می دهد.</li>
<li><strong>تصاویر واکنشگرا</strong>: تکنیکهای تصویر واکنشگرا را پیادهسازی کنید، مانند استفاده از عنصر <code class="inline"><picture></picture>
یا srcset
، برای ارائه تصاویر با اندازه مناسب بر اساس دستگاه یا درگاه دید کاربر.
- کامپوننت های وب: از اجزای وب برای کپسوله کردن HTML، CSS و جاوا اسکریپت در عناصر سفارشی قابل استفاده مجدد، بهبود سازماندهی کد و کاهش تکرار استفاده کنید.
- تولیدکنندههای سایت استاتیک: استفاده از تولیدکنندههای سایت استاتیک مانند Jekyll، Hugo، یا Gatsby را برای پیشپرداخت فایلهای HTML در طول زمان ساخت، در نظر بگیرید که منجر به بارگذاری سریع وبسایتهای استاتیک میشود.
- معماری بدون سرور: با استفاده از پلتفرمهایی مانند AWS Lambda یا Firebase Functions برای تخلیه پردازش سمت سرور و بهبود مقیاسپذیری، معماری بدون سرور را در آغوش بگیرید.
- برنامههای وب پیشرو (PWA): برنامههای وب پیشرفته ایجاد کنید که از کارکنان خدمات و استراتژیهای ذخیرهسازی حافظه پنهان برای ارائه قابلیتهای آفلاین و بهبود عملکرد استفاده میکنند.
- موتورهای قالب HTML: از موتورهای قالب HTML مانند Handlebars، Mustache یا Pug برای تولید HTML به صورت پویا، بهبود قابلیت نگهداری و استفاده مجدد کد استفاده کنید.
- شبکههای تحویل محتوا (CDN): از CDNها برای ذخیره و توزیع فایلهای HTML خود در سطح جهانی، کاهش تأخیر و بهبود زمان بارگذاری برای کاربران در مناطق مختلف استفاده کنید.
- پردازش سمت مرورگر: تکنیکهای رندر سمت مرورگر مانند برنامههای کاربردی یک صفحه (SPA) یا چارچوبهای سمت سرویس گیرنده را برای رندر HTML در سمت سرویس گیرنده و کاهش بار سرور بررسی کنید.
این روش های جدیدتر فرصت هایی را برای بهینه سازی بیشتر HTML و بهبود عملکرد وب در شیوه های توسعه وب مدرن ارائه می دهند.