Как сделать блок с комментариями html

Как добавить блок добавления комментариев на сайт?

Двигаемся по упрощенной схеме. Во-первых, база, три таблицы.

Первая (messages), где хранятся сообщения/товары/новости: id(auto_increment), text

Вторая (comments), где хранятся непосредственно комментарии: id(auto_increment), msg_id, text, user_id

Третья (users), где хранятся пользователи: id(auto_increment), name, login, password

//выбираем из базы все сообщения, запросом типа: select * from messages //выводим в цикле сообщения 
тело сообщения //выбираем из базы комментарии в соответствии с текущей новостью. //запрос типа select c.text as text, u.name as user_name from users u,comments c where c.msg_id = 'id сообщения' and u.id=c.user_id //выводим комментарии в цикле 
текст и имя пользователя
 //здесь форма добавления нового комента, что то типа:

Обработчик нового комментария php:

Проверяем, авторизирован ли пользователь; если да, получаем его id, проверяем на валидность пришедшую с сайта информацию, добавляем новый комментарий в базу. user_id у нас есть mgs_id прилетело post’oм, text тоже, id само назначится.

А здесь как сердце подскажет. Делаем красивости, извращаемся по полной.

Как сделать блок с комментарием?

Как сделать блок комментария с вот таким треугольником?

Отслеживать
задан 16 июл 2016 в 12:51
Vitali Skripka Vitali Skripka
417 1 1 золотой знак 4 4 серебряных знака 8 8 бронзовых знаков
16 июл 2016 в 13:14
codepen.io/Geyan/pen/qNpgrb?editors=110 второй вариант
16 июл 2016 в 13:30

Загуглите ради интереса «css triangle online» — можете найти кучу онлайн генераторов, где и можно подсмотреть способы создания таких штук. В частности вот то, что вам нужно: тыц.

16 июл 2016 в 13:32

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.message < position: relative; margin: 30px auto; padding: 10px; width: 80%; min-height: 10px; font-family: sans-serif; background: rgb(242, 251, 255); border: 2px solid rgb(220, 223, 223); >.message:before < content: ''; position: absolute; top: -20px; left: 15px; border: 10px solid transparent; border-bottom: 10px solid rgb(220, 223, 223); border-left: 10px solid rgb(220, 223, 223); z-index: -1; >.message:after

Привет, Верунь! Ну и т.д.

Отслеживать
34k 1 1 золотой знак 31 31 серебряный знак 49 49 бронзовых знаков
ответ дан 25 июл 2016 в 17:41
Brik Vadim Brik Vadim
802 5 5 серебряных знаков 16 16 бронзовых знаков

• html
• css
• html5
• css3
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

HTML-комментарии

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.

Комментарий в HTML-коде задаётся так:

Текст внутри комментария не отображается браузером на странице. Комментарии обычно используются в следующих случаях:

• Для комментирования кода. Всегда полезно оставить подсказку.
• Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

Комментарии можно использовать в любом месте страницы, кроме тега — внутри него они не работают. Внутри тега HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете в части «Знакомство с CSS».

Чтобы быстро закомментировать или раскомментировать строку кода в HTML или CSS редакторе, можете использовать сочетание клавиш ctrl + / или cmd + / .

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Комментарии в HTML

Иногда нужно оставить скрытую заметку или пояснить что-то в коде человеческим языком. Такое примечание пригодится и себе в будущем, и следующим разработчикам, которые будут работать над вашим проектом. Именно для этого изначально были придуманы комментарии! Вся их прелесть в том, что пользователи их никогда не увидят. Это секретная почта для разработчиков ��

Для комментариев находится и более утилитарное применение: скрывать блоки кода со страницы, не удаляя их из файла.

Пример

Скопировать ссылку «Пример» Скопировано

  Привет! Я комментарий в HTML-коде, меня не видно на странице--> 
Я — обычный текст. Меня видно на странице!  p>Я — обычный текст. Меня видно на странице!p>    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В HTML возможен только один тип комментариев, в отличие от комментариев в CSS и JS.

Комментарий всегда должен начинаться с конструкции . Тем самым мы чётко показываем браузеру границы спрятанного послания. Профит! Ваш комментарий готов.

При помощи ровно тех же конструкций мы можем временно спрятать блок кода.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Содержимое комментария может быть любым, но спецификация перечисляет конкретные ситуации, в которых браузеру будет сложно понять: это содержимое комментария, или он закрывается?

�� Нельзя вкладывать один комментарий в другой. Да и зачем?

�� Комментарии не работают внутри тега , но там вообще никакие теги не работают, так что неудивительно.

�� Чтобы быстро закомментировать или раскомментировать текущую строку или выделенный блок кода, в большинстве редакторов можно нажать Ctrl / или Cmd / .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Комментарии часто используют, чтобы пометить начало какого-то крупного куска кода, пояснить его назначение. Комментарии, как правило, внешне отличаются от остального кода. Гораздо удобнее просканировать код, пробежаться глазами по комментариям и найти нужную часть, чем вчитываться в сам код.

Комментарий — твой хороший друг ��

�� Иногда для подключения чего-нибудь на страницу требуется скопировать-вставить блок кода, написанного не тобой. Чаще всего блок кода сопровождается комментариями. Всегда копируй весь код вместе с этими комментариями и вставляй его к себе в неизменном коде. Тебе же будет проще потом понять, что эта за странная конструкция и зачем она тут нужна.

Например, для подключения Яндекс.Метрики к сайту нужен такой код:

    (function(m,e,t,r,i,k,a); m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)>) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(id, "init",  clickmap:true, trackLinks:true, accurateTrackBounce:true >);   script> (function(m,e,t,r,i,k,a)m[i]=m[i]||function()(m[i].a=m[i].a||[]).push(arguments)>; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)>) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(id, "init",  clickmap:true, trackLinks:true, accurateTrackBounce:true >); script> noscript>div>img src="https://mc.yandex.ru/watch/id" style="position:absolute; left:-9999px;" alt="">div>noscript>     Скопировать Скопировано Не удалось скопировать   

Видишь, он начинается с комментария и комментарием заканчивается? Это удобно, визуально отделяет код метрики от остального кода. В дальнейшем тебе проще будет его найти.

�� Читая чужой код, обращай внимание на комментарии. Там могут скрываться важные детали и подсказки, которые помогут тебе понять, как этот код работает и почему именно так.

�� Комментарии видны в браузере в инструментах разработчика, поэтому в них надо писать только документацию, которая поможет работе с кодом. Планы, впечатления и мнения стоит оставить в недоступном для конечных пользователей месте.