Комментарии в HTML, CSS, PHP, учимся ставить комментарии
В данном уроке я расскажу о том, как делаются комментарии в HTML, CSS, PHP. Комментарии представляют собой текст, который не виден на веб-странице. Они используется для разного рода пояснений, напоминаний, описаний для вебмастеров, что позволяет структурировать документ. Комментарии незаменимы при отладке кода, позволяют быстро сориентироваться в разметке веб-страницы и найти нужный блок. Часто комментарии применяются для отладки кода HTML. К примеру, можно временно закомментировать конкретный блок кода, чтобы он не исполнялся, а в случае необходимости легко его восстановить.
Комментарии в HTML
В HTML комментарии формируются с помощью символов: <!— и —>. Таким образом, любой текст, находящийся между этими символами, является комментарием. Рассмотрим пример:
<!-- Начало блока Header --> <div> <p>Пример комментариев в HTML</p> </div> <!-- Конец блока Header -->
Комментарии в CSS
Комментарии в CSS создаются с помощью символов: /* и */. Для создания комментария нужно просто поместить код-веб страницы между этими символами:
/* Начало блока со стилями для Body*/ body { background: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; } /* Конец блока со стилями для Body*/
Комментарии в PHP
Комментарии в PHP могут быть однострочными и многострочными:
1) Однострочные комментарии в PHP создаются с помощью символов: //. Достаточно просто поставить этот символ перед строкой и она будет закомментирована.Такой вариант применятся в том случае, когда комментарий состоит только их одной строки.
<?php $a=100; $b=206; //$c=144; $d=359; $e=167; $summa=$a+$b-$d*$e; echo $summa; ?>
2) Для реализации многострочных комментариев используются символы: /* и */. Такой вариант полезен, если комментарий занимает несколько строк.
<?php /*$a=100; $b=206; $c=144; $d=359; $e=167; $summa=$a+$b+$b-$d*$e; echo $summa; */ ?>
Таким образом, мы научились делать комментарии в HTML, CSS, PHP. Благодаря комментариям мы всегда можем оперативно находить нужные блоки HTML кода и, при необходимости, изменять их структуру.
Понравилось? Поделитесь с друзьями!
Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 2.1+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег добавляет комментарий в код документа. Текст комментария не отображается на странице. Разрешается внутрь комментария добавлять другие теги, вложенные комментарии (когда один комментарий расположен внутри другого) недопустимы.
Синтаксис
<!-- текст -->
Атрибуты
Нет.
Пример 1. Использование комментариев
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Комментарии</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <!-- Меню --> <div>Меню</div> <!-- Контент --> <div>Содержимое документа</div> </body> </html>
Пример 2. Использование комментариев
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<title>Комментарии</title>
<meta charset="utf-8">
</head>
<body>
<!-- Раздел -->
<section>
<h2>Последние добавленные фотографии</h2>
<div>...</div>
</section>
</body>
</html>
Примечание
Двойной дефис внутри комментария (—) воспринимается как часть комментария и соответственно его наличие приводит к ошибке при валидации документа.
HTML Комментарии
Когда вы создаете большие сайты, то со временем можете забыть, что именно делает та или иная часть кода страницы. И сколь хорошо бы вы ни знали код страницы на момент его написания, если вам придется вернуться к нему спустя какое-то время (или кому-либо еще понадобится просмотреть его), то именно комментарии помогут быстро разобраться с кодом. Комментарии могут располагаться в любом месте страницы, потому что не отображаются браузером. Информация в комментариях не имеет специального значения и не воспринимается как НТМL-код. Комментарии используются чаще для пояснений, например коrдa над кодом работают несколько человек или когдa необходимо временно исключить некий фрагмент кода из обработки, не удаляя ero совсем, то можно заключить такой фрагмент в комментарий, после чего он будет проигнорирован браузером.
Комментарии в HTML имеют следующий синтаксис:
<!-- Это комментарий -->
Восклицательный знак после утловой скобки означает, что это уже не НТМL-код. Текст, заключенный между тегами <!— и —> , не отображается веб-браузером. Заметьте, что это нестандартная пара тегов, так как открывающий тег не имеет закрывающей угловой скобки, а в закрывающем теге отсутствует открывающая угловая скобка.
Комментариями можно пользоваться для того, чтобы отметить ключевые моменты в НТМL-коде, и в дальнейшем легче было в нем ориентироваться и вам, и тем, кто после вас будет редактировать код. Кроме того, можно комментировать части HTML-кода для предотвращения их отображения. В следующем примере вы увидите закомментированную гиперссылку:
Пример HTML:
Попробуй сам<!-- Начало введения -->
<h2>Базовый HTML</h2>
<h3>Основные понятия</h3>
<!-- Окончание введения -->
<!-- Начало основного текста -->
<p>HTML расшифровывается как Hyper Text Markup Language...</p>
<!-- Окончание основного текста -->
<!-- <а href="mailto : iп[email protected]">Cвязaтьcя</a> -->
Хотя комментарии не видны посетителям в основном окне браузера, любой желающий сможет увидеть их, просмотрев исходный код веб-страницы. Поэтому прежде чем оставлять некоторые комментарии в своем коде, подумайте, стоит ли это делать. К тому-же удалив лишние комментарии вы, хоть и незначительно, уменьшите объем веб-документа.
Условные комментарии
Условные комментарии позволяют задавать блоки кода, которые будут выполняться только в указанной версии браузера Internet Explorer. В остальных же версиях браузера Internet Explorer, а также в других браузерах их содержимое будет считаться обычным комментарием.
Условные комментарии в HTML имеют следующий синтаксис:
<!--[if Условие IE Версия]>Какой-то текст<![endif]-->
Как не трудно заметить, все содержимое тега расположено внутри обычного HTML-комментария. В необязательном параметре «Условие» могут быть указаны следующие операторы:
- lt — меньше чем;
- lte — меньше или равно;
- gt — больше чем;
- gte — больше или равно;
- ! — не равно.
В необязательном параметре «Версия» указывается номер версии браузера Internet Explorer.
Приведем несколько примеров:
<!--[if IE]>Какой-то код<![endif]--> — выполнять содержимое комментария,
если браузером является любая версия Internet Explorer;
<!--[if IE 9]>Какой-то код<![endif]--> — выполнять содержимое комментария,
если браузером является версия Internet Explorer 9;
<!--[if lt IE 8]>Какой-то код<![endif]--> — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer меньшей версии, чем 8;
<!--[if lte IE 8]>Какой-то код<![endif]--> — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer версии, меньшей или равной указанной;
<!--[if gt IE 9]>Какой-то код<![endif]--> — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer большей версии, чем указана;
<!--[if gte IE 7]>Какой-то код<![endif]--> — выполнять содержимое комментария,
если в качестве браузера выступает Internet Explorer версии, большей или равной указанной.
Задачи
Итоговое задание [19-20]
На этом уроке вы познакомились с комментариями. Применение комментариев при изучении HTML поможет вам разобраться где начинается или заканчивается тот или иной раздел документа, а также правильно интерпретировать код страницы. Это особенно важно для начинающих Web-дизайнеров.
Пришло время повторить изученное и выполнить два несложных задания:
Комментарий
Используя тег комментария сделайте так, чтобы предложение: «Я стал невидимым» осталось в HTML-коде, но не отображалось браузером.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Комментарий</title>
</head>
<body>
<p>Я одел шапку-невидимку.</p>
Я стал невидимым
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Комментарий</title>
</head>
<body>
<p>Я одел шапку-невидимку.</p>
<!--Я стал невидимым-->
</body>
</html>
Без комментариев
Сделайте так, чтобы предложение в коде стало отображаться браузером.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Без комментариев</title>
</head>
<body>
<!--<p>Характеристикой быстроты служит физическая величина — скорость.</p>-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Без комментариев</title>
</head>
<body>
<p>Характеристикой быстроты служит физическая величина — скорость.</p>
</body>
</html>
Please enable JavaScript to view the comments powered by Disqus.
wm-school.ru
Тег — комментарий
Поддержка браузерами
Описание
HTML тег <!-- -->
используется для добавления комментариев в исходный код документа. Все содержимое, которое располагается между символами <!--
и -->
, не отображается в окне браузера.
HTML комментарий может содержать внутри себя другие HTML теги, если на время надо прекратить их работу, кроме тега комментария. Вложенные комментарии (один комментарий в другом) не поддерживаются. Если, при отключении больших частей исходного кода, всё-таки один комментарий оказался внутри другого, то внешний комментарий будет закрыт символами -->
внутреннего комментария. В этом случае всё, что располагается после этих символов, будет расценено браузером как обычная разметка документа и выведено на страницу.
Если комментарий расположен внутри тега <title>, он трактуется как текст и будет показан в заголовке страницы. Проще говоря, тег <!-- -->
внутри тега <title>
не работает.
Примечание: html комментарии в коде являются многострочными, то есть если вы открыли комментарий с помощью символов <!--
и забыли его закрыть символами -->
, то всё что находится после <!--
будет расцениваться браузером как комментарий.
Комментарии в основном используют, чтобы сопроводить код описанием, оставить какое-нибудь напоминание — это существенно помогает при просмотре и редактировании кода в будущем. Так же комментарии позволяют структурировать документ, добавляя описание к определенным блокам кода.
Атрибуты
нет
Пример
<!--Это комментарий. Комментарии не отображаются в окне браузера--> <!--горизонтальная линия--> <hr>
Результат данного примера в окне браузера:
puzzleweb.ru
Тег комментария
HTML тегиЗначение и применение
Теги комментария <!— … —> в HTML коде используются для временного отключения кода (как правило, просто удалить код неудобно по той причине, что возможно его придется восстанавливать) и в качестве подсказки для себя, либо для лиц, которые будут разбираться в Вашем коде. Текст внутри комментария не отображается браузером на странице.
Комментарии можно использовать в любом месте страницы, кроме тега <title>.
Поддержка браузерами
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега комментария</title> </head> <body> Содержимое страницы. <!-- Ваш комментарий, текст внутри которого не отображается браузером на странице. --> </body> </html>
Условные комментарии.
Условные комментарии, используются для написания специального кода, предназначенного для конкретного браузера (Internet Explorer). Остальные браузеры этот код игнорируют как обычный комментарий.
Например:
<!--[if IE 7]> Код HTML <![endif]-->
Код выполняется только тогда, когда совпадает заданное условие. В данном случае если браузер Internet Explorer 7, то необходимо выполнить код, который мы поместим внутри тега.
Другие примеры:<!--[if IE]> Инструкции для всех Internet Explorer <![endif]--> <!--[if lte IE 6]> Инструкции для всех IE меньше или равно 6<![endif]--> <!--[if gte IE 7]> Инструкции для всех IE старше или равно 7<![endif]-->
Значение операторов:
Оператор | Значение |
---|---|
lt | Меньше чем. |
lte | Меньше или равно. |
gt | Больше чем. |
gte | Больше или равно. |
& | Логическое И. Предназначено для объединения нескольких условий. Возвращает true (истину), если все условия выполняются. |
! | Логическое НЕ. Условие истинно, если условие следующее за ! не выполняется. |
| | Логическое ИЛИ. Возвращает true (истину), если хотя бы одно из условий выполняется. |
( ) | Группировка дополнительных условий (создание сложных запросов с логическими операторами). |
Отличия HTML 4.01 от HTML 5
Нет.Поддержка глобальных атрибутов
Данный элемент не поддерживает «глобальные атрибуты».
Атрибуты событий
Данный элемент не поддерживает «атрибуты событий».
HTML тегиbasicweb.ru
| HTML | WebReference
Добавляет комментарий в код документа. Текст комментария не отображается на странице и предназначен для пояснения кода или для технических целей. Разрешается внутрь комментария добавлять другие элементы, при этом недопустимо один комментарий вкладывать внутрь другого.
Закрывающий тег
Пример
<!DOCTYPE html>
<html>
<head>
<title>Комментарии</title>
<meta charset="utf-8">
</head>
<body>
<!-- Раздел -->
<section>
<h2>Последние добавленные фотографии</h2>
<div>...</div>
</section>
</body>
</html>
Примечание
Комментарии запрещено вкладывать внутрь других комментариев.
Так делать нельзя
<!--
Один комментарий
<!-- Другой комментарий -->
-->
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
webref.ru
Комментарии в HTML-, CSS-, JS- и PHP-коде
Эту статью я начну с того, для чего нужны комментарии. Предположим, что вы разрабатываете модуль со сложной структурой. Или делаете верстку с множеством вложений элементов. В таких случаях некоторые участки кода лучше всего как-то помечать – для этого и существуют комментарии.
Сейчас я подробно покажу четыре типа комментариев, точнее, все их виды для четырех разных кодов.
Комментарии в HTML-разметке
Для того чтобы добавить комментарий в HTML-разметку, используем:
<!-- Текст, код или прочее -->
Все, что стоит в этих тегах, не видно на экране, но доступно для просмотра в исходном коде.
Комментарии в CSS-стилях
Для того чтобы добавить комментарий в CSS-стили, используем:
/* Текст, код или прочее */
Все, что стоит в этих тегах, не учитывается при формировании стилей, но доступно для просмотра в самом файле стилей.
Комментарии в JavaScript-коде
Для добавления комментариев в JavaScript существуют два их типа.
Первый тип:
// Текст, код или прочее
Второй тип:
/* Текст, код или прочее */
Все, что стоит в этих тегах, не учитывается при выполнении скрипта, но доступно для просмотра в самом файле JavaScript.
Комментарии в PHP-коде
Этот язык программирования, в отличие от предыдущих, имеет 3 типа комментариев.
Первый тип:
// Текст, код или прочее
Второй тип:
/* Текст, код или прочее */
И третий тип:
# Текст, код или прочее
Все, что стоит в этих тегах, не учитывается при выполнении скрипта и видно только в самом файле PHP.
Обратите внимание!
1. Не рекомендуется делать двойное вложение комментариев. Например,
/* /* Мой код */ */
выведет вам ошибку.
2. Комментарии, которые пишутся через /* */ и <!— —>, могут писаться в несколько строк:
/*
Это
Мой
Код
*/
В остальных же случаях для каждой строки нужно писать специальный символ комментария, например:
// Это
// Мой
// Код
В противном случае вы также обнаружите ошибку.
www.pandoge.com